Web

package.json

@@ -68,7 +68,7 @@
     "ts-loader": "^9.2.3",
     "ts-node": "^10.0.0",
     "tsconfig-paths": "4.0.0",
-    "typescript": "^4.3.5"
+    "typescript": "^4.9.5"
   },
   "jest": {
     "moduleFileExtensions": [

tailwind.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  darkMode: 'class', // Enable class-based dark mode
+  // ... rest of your config
+} 

web/package.json

@@ -10,18 +10,30 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.6",
+    "@tanstack/react-table": "^8.20.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.471.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.4.0",
     "react-router-dom": "^7.1.1",
+    "shadcn-ui": "^0.9.4",
     "tailwind-merge": "^2.6.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^11.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

web/src/App.tsx

@@ -1,26 +1,55 @@
-import { Button } from './components/ui/button'
-import { Routes, Route } from 'react-router-dom';
-import Home from './pages/home.tsx';
-import Dashboard from './pages/dashboard.tsx';
-import UserManagement from './pages/user_management.tsx';
-import Meal from './pages/meal.tsx';
-import Rebate from './pages/rebate.tsx';
-import Consumption from './pages/consumption.tsx';
+import { BrowserRouter as Router, Routes, Route, Outlet, Navigate } from "react-router-dom";
+import { ThemeProvider } from "./context/ThemeContext";
+import { Sidebar } from "./components/ui/sidebar";
+import Login from "./pages/login";
+import Dashboard from "./pages//dashboard";
+import UserManagement from "./pages/user_management";
+import Meal from "./pages/meal";
+import Consumption from "./pages/consumption";
+import Rebate from "./pages/rebate";
+import { UserProvider, useUser } from "./context/UserContext";
 
 function App() {
-  // return (
-  //  <Button size={"lg"}>Hello</Button>
-  // )
-  <div className='App'>
-		<Routes>
-        <Route path='/' element={<Home />} />
-        <Route path='/dashboard' element={<Dashboard />} />
-		    <Route path='/usermanagement' element={<UserManagement />} />
-        <Route path='/meal' element={<Meal />} />
-        <Route path='/rebate' element={<Rebate />} />
-        <Route path='/consumption' element={<Consumption />} />
-    </Routes>
-		</div>
+  return (
+    <ThemeProvider>
+      <UserProvider>
+        <Router>
+          <Routes>
+            <Route path="/" element={<Login />} />
+            <Route path="/" element={
+                <ProtectedRoutes />
+              } >
+              <Route path="/dashboard" element={<Dashboard />} />
+              <Route path="/user-management" element={<UserManagement />} />
+              <Route path="/meal" element={<Meal />} />
+              <Route path="/consumption" element={<Consumption />} />
+              <Route path="/rebate" element={<Rebate />} />
+            </Route>
+          </Routes>
+        </Router>
+      </UserProvider>
+    </ThemeProvider>
+  );
 }
 
-export default App
+const ProtectedRoutes = () => {
+  const {user} = useUser();
+  if (!user) {
+    return <Navigate to="/" />;
+  }
+  return (
+    <div className="flex h-screen overflow-hidden bg-background">
+      <Sidebar />
+      <main className="flex-1 min-w-0 overflow-auto p-8">
+        <>
+          <Outlet/>
+        </>
+      </main>
+    </div>
+  );
+};
+
+export default App;
+
+
+

web/src/components/Sidebar.tsx

@@ -0,0 +1,66 @@
+import { NavLink } from "react-router-dom";
+import { useTheme } from "@/context/ThemeContext";
+import { IoMoonOutline, IoSunnyOutline } from "react-icons/io5";
+
+const Sidebar = () => {
+  const { theme, toggleTheme } = useTheme();
+  const menuItems = [
+    { name: "Dashboard", path: "/dashboard" },
+    { name: "User Management", path: "/user-management" },
+    { name: "Meals", path: "/meal" },
+    { name: "Consumption", path: "/consumption" },
+    { name: "Rebate", path: "/rebate" },
+  ];
+
+  return (
+    <aside className="h-full rounded-lg w-64 p-4 flex flex-col
+                      bg-orange-100 dark:bg-gray-800 
+                      text-gray-800 dark:text-gray-200">
+      <h2 className="text-2xl font-bold mb-6">Mess Management System</h2>
+      <nav className="space-y-4">
+        {menuItems.map((item) => (
+          <NavLink
+            key={item.name}
+            to={item.path}
+            className={({ isActive }) =>
+              `block px-4 py-2 rounded-lg ${
+                isActive 
+                  ? "bg-orange-200 dark:bg-gray-700 font-semibold" 
+                  : "hover:bg-orange-50 dark:hover:bg-gray-700"
+              }`
+            }
+          >
+            {item.name}
+          </NavLink>
+        ))}
+      </nav>
+      <div className="mt-auto flex items-center gap-2 px-4">
+        <button 
+          onClick={() => theme === 'dark' && toggleTheme()}
+          className={`flex-1 py-2 px-4 rounded-lg flex items-center justify-center gap-2
+            ${theme === 'light' 
+              ? 'bg-orange-200 text-gray-800' 
+              : 'bg-white/10 text-gray-400 hover:bg-white/20'
+            }`}
+        >
+          <IoSunnyOutline className="text-lg" />
+          Light
+        </button>
+
+        <button 
+          onClick={() => theme === 'light' && toggleTheme()}
+          className={`flex-1 py-2 px-4 rounded-lg flex items-center justify-center gap-2
+            ${theme === 'dark' 
+              ? 'bg-gray-700 text-gray-200' 
+              : 'bg-gray-200/50 text-gray-600 hover:bg-gray-200'
+            }`}
+        >
+          <IoMoonOutline className="text-lg" />
+          Dark
+        </button>
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;

web/src/components/data-table-pagination.tsx

@@ -0,0 +1,93 @@
+import { Table } from "@tanstack/react-table"
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>
+}
+
+export function DataTablePagination<TData>({
+  table,
+}: DataTablePaginationProps<TData>) {
+  return (
+    <div className="flex items-center justify-between px-2 w-full">
+      <div className="flex items-center justify-between w-full space-x-6 lg:space-x-8">
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium">Rows per page</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value))
+            }}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[5,10, 20, 30].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+          Page {table.getState().pagination.pageIndex + 1} of{" "}
+          {table.getPageCount()}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to first page</span>
+            <ChevronsLeft />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeft />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRight />
+          </Button>
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to last page</span>
+            <ChevronsRight />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

web/src/components/ui/card.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm dark:border-gray-700",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+export { Card } 

web/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

web/src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }