feat: add department dashboard

2026-03-16 17:55:33 +05:30
parent aaa62ae3f5
commit 46bbd8106b
23 changed files with 1621 additions and 684 deletions
@@ -1,20 +0,0 @@
-import Sidebar from "./Sidebar"
-
-export default function DashboardLayout({children}:{children:React.ReactNode}){
-
-  return(
-
-    <div className="flex">
-
-      <Sidebar/>
-
-      <div className="flex-1 p-6 bg-slate-50 min-h-screen">
-
-        {children}
-
-      </div>
-
-    </div>
-
-  )
-}
@@ -0,0 +1,35 @@
+import {useState, useEffect} from "react";
+import {useAuth} from "@/context/AuthContext";
+import {Button} from "@/components/ui/button";
+import {Switch} from "@/components/ui/switch";
+import {log} from "console";
+
+export default function Header() {
+	const {user, logout} = useAuth();
+	const [darkMode, setDarkMode] = useState<boolean>(false);
+
+	useEffect(() => {
+		if (darkMode) document.documentElement.classList.add("dark");
+		else document.documentElement.classList.remove("dark");
+	}, [darkMode]);
+
+	return (
+		<header className="border-b bg-card">
+			<div className="flex items-center justify-between px-6 h-16">
+				<div>
+					<p className="text-sm text-muted-foreground">Welcome back</p>
+					<p className="font-semibold">{user?.username}</p>
+				</div>
+				<div className="flex items-center gap-4">
+					<div className="flex items-center gap-2">
+						<span className="text-sm">Dark</span>
+						<Switch checked={darkMode} onCheckedChange={setDarkMode} />
+					</div>
+					<Button variant="destructive" onClick={logout}>
+						Logout
+					</Button>
+				</div>
+			</div>
+		</header>
+	);
+}
@@ -1,17 +1,50 @@
-import {Link} from "react-router-dom";
+import {Link, useLocation} from "react-router-dom";
+
+import {Button} from "@/components/ui/button";
+import {Separator} from "@/components/ui/separator";

 export default function Sidebar() {
+	const location = useLocation();
+
+	const navItems = [
+		{
+			name: "Department",
+			path: "/department",
+		},
+		{
+			name: "Blog",
+			path: "/blog",
+		},
+		{
+			name: "Subjects",
+			path: "/subjects",
+		},
+	];
+
 	return (
-		<div className="w-[220px] h-screen border-r bg-white p-4">
-			<h2 className="text-lg font-semibold mb-6">Admin</h2>
-
-			<div className="space-y-3">
-				<Link to="/dashboard">Dashboard</Link>
-
-				<Link to="/blog">Blog</Link>
-
-				<Link to="/department">Department</Link>
+		<div className="w-64 border-r bg-card">
+			<div className="p-6">
+				<h2 className="text-xl font-bold">GG Dashboard</h2>
 			</div>
+
+			<Separator />
+
+			<nav className="p-4 space-y-2">
+				{navItems.map((item) => {
+					const active = location.pathname === item.path;
+
+					return (
+						<Link key={item.path} to={item.path}>
+							<Button
+								variant={active ? "secondary" : "ghost"}
+								className="w-full justify-start"
+							>
+								{item.name}
+							</Button>
+						</Link>
+					);
+				})}
+			</nav>
 		</div>
 	);
 }