(Feat): Initial Commit

src/App.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { AuthProvider, useAuth } from './contexts/AuthContext';
+import { Sidebar } from './components/layout/Sidebar';
+import { Header } from './components/layout/Header';
+import { DashboardPage } from './pages/DashboardPage';
+import { UsersPage } from './pages/UsersPage';
+import { WorkAllocationPage } from './pages/WorkAllocationPage';
+import { AttendancePage } from './pages/AttendancePage';
+import { RatesPage } from './pages/RatesPage';
+import { LoginPage } from './pages/LoginPage';
+
+type PageType = 'dashboard' | 'users' | 'allocation' | 'attendance' | 'rates';
+
+const AppContent: React.FC = () => {
+  const [activePage, setActivePage] = useState<PageType>('dashboard');
+  const { isAuthenticated, isLoading } = useAuth();
+
+  const renderPage = () => {
+    switch (activePage) {
+      case 'dashboard':
+        return <DashboardPage />;
+      case 'users':
+        return <UsersPage />;
+      case 'allocation':
+        return <WorkAllocationPage />;
+      case 'attendance':
+        return <AttendancePage />;
+      case 'rates':
+        return <RatesPage />;
+      default:
+        return <DashboardPage />;
+    }
+  };
+
+  // Show loading state
+  if (isLoading) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-gray-100">
+        <div className="text-center">
+          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
+          <p className="text-gray-600">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show login page if not authenticated
+  if (!isAuthenticated) {
+    return <LoginPage />;
+  }
+
+  // Show main app if authenticated
+  return (
+    <div className="flex h-screen bg-gray-100">
+      <Sidebar activePage={activePage} onNavigate={(page) => setActivePage(page as PageType)} />
+      
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <Header />
+        
+        <main className="flex-1 overflow-y-auto">
+          {renderPage()}
+        </main>
+      </div>
+    </div>
+  );
+};
+
+function App() {
+  return (
+    <AuthProvider>
+      <AppContent />
+    </AuthProvider>
+  );
+}
+
+export default App;