feat: add department dashboard

frontend/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fontsource-variable/geist": "^5.2.8",
+    "@tailwindcss/postcss": "^4.2.1",
     "axios": "^1.13.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -21,6 +22,8 @@
     "react-router-dom": "^7.13.1",
     "shadcn": "^4.0.5",
     "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1",
+    "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
@@ -29,13 +32,11 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
-    "autoprefixer": "^10.4.27",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "postcss": "^8.5.8",
-    "tailwindcss": "^3.4.19",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",
     "vite": "^7.3.1"

frontend/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
 	plugins: {
-    tailwindcss: {},
+		"@tailwindcss/postcss": {},
-    autoprefixer: {},
 	},
-}
+};

frontend/src/App.tsx

@@ -1,45 +1,36 @@
-import {BrowserRouter, Routes, Route} from "react-router-dom";
+import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
 
 import Login from "@/pages/Login";
-import Dashboard from "@/pages/Dashboard";
-import Blog from "@/pages/Blog";
-import Department from "@/pages/Department";
 
-import ProtectedRoute from "./components/ProtectedRoutes/ProtectedRoutes";
+import DashboardLayout from "./layouts/DashboardLayout";
+import Blog from "./pages/Blog";
+
+// import ProtectedRoute from "./components/ProtectedRoutes/ProtectedRoutes";
+
+import ProtectedRoute from "./auth/ProtectedRoute";
+import PublicRoute from "./auth/PublicRoute";
+import {AuthProvider} from "./context/AuthContext";
+import Department from "./pages/Department";
 
 export default function App() {
 	return (
 		<BrowserRouter>
+			<AuthProvider>
 				<Routes>
+					<Route element={<PublicRoute />}>
 						<Route path="/" element={<Login />} />
+					</Route>
 
-				<Route
+					<Route element={<ProtectedRoute />}>
-					path="/dashboard"
+						<Route element={<DashboardLayout />}>
-					element={
+							<Route path="/blog" element={<Blog />} />
-						<ProtectedRoute>
+							<Route path="/department" element={<Department />} />
-							<Dashboard />
+						</Route>
-						</ProtectedRoute>
+					</Route>
-					}
-				/>
 
-				<Route
+					<Route path="*" element={<Navigate to="/department" replace />} />
-					path="/blog"
-					element={
-						<ProtectedRoute>
-							<Blog />
-						</ProtectedRoute>
-					}
-				/>
-
-				<Route
-					path="/department"
-					element={
-						<ProtectedRoute>
-							<Department />
-						</ProtectedRoute>
-					}
-				/>
 				</Routes>
+			</AuthProvider>
 		</BrowserRouter>
 	);
 }

frontend/src/api/auth.ts

@@ -0,0 +1,12 @@
+import apiClient from "./client";
+
+export const loginApi = async (
+	username: string,
+	password: string,
+): Promise<any> => {
+	const response = await apiClient.post("/auth/login/", {
+		username,
+		password,
+	});
+	return response.data;
+};

frontend/src/api/client.ts

@@ -0,0 +1,48 @@
+import axios from "axios";
+import type {InternalAxiosRequestConfig} from "axios";
+
+const BASE_URL: string = "http://localhost:3000/api";
+
+const apiClient = axios.create({
+	baseURL: BASE_URL,
+	headers: {
+		"Content-Type": "application/json",
+	},
+});
+
+export const setAxiosAuthToken = (token: string | null): void => {
+	if (token) {
+		apiClient.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+	} else {
+		delete apiClient.defaults.headers.common["Authorization"];
+	}
+};
+
+apiClient.interceptors.request.use(
+	(config: InternalAxiosRequestConfig) => {
+		const token = localStorage.getItem("token");
+
+		if (token && config.headers) {
+			config.headers["Authorization"] = `Bearer ${token}`;
+		}
+
+		return config;
+	},
+	(error: any) => Promise.reject(error),
+);
+
+apiClient.interceptors.response.use(
+	(response) => response,
+	async (error) => {
+		if (error.response?.status === 401) {
+			console.error("Unauthorized - token missing or invalid");
+
+			localStorage.removeItem("token");
+			window.location.href = "/login";
+		}
+
+		return Promise.reject(error);
+	},
+);
+
+export default apiClient;

frontend/src/api/department.ts

@@ -0,0 +1,57 @@
+import apiClient from "@/api/client";
+
+export interface Department {
+	departmentId: string;
+	name: string;
+	para1: string;
+	para2: string;
+	para3: string;
+	facilities: string;
+	services: string;
+}
+
+/* ---------------- GET ALL ---------------- */
+
+export const getDepartmentsApi = async () => {
+	const res = await apiClient.get("/departments/getAll");
+	return res.data;
+};
+
+/* ---------------- CREATE ---------------- */
+
+export const createDepartmentApi = async (data: {
+	departmentId: string;
+	name: string;
+	para1?: string;
+	para2?: string;
+	para3?: string;
+	facilities?: string;
+	services?: string;
+}) => {
+	const res = await apiClient.post("/departments", data);
+	return res.data;
+};
+
+/* ---------------- UPDATE ---------------- */
+
+export const updateDepartmentApi = async (
+	id: number,
+	data: {
+		name?: string;
+		para1?: string;
+		para2?: string;
+		para3?: string;
+		facilities?: string;
+		services?: string;
+	},
+) => {
+	const res = await apiClient.put(`/departments/${id}`, data);
+	return res.data;
+};
+
+/* ---------------- DELETE ---------------- */
+
+export const deleteDepartmentApi = async (id: number) => {
+	const res = await apiClient.delete(`/departments/${id}`);
+	return res.data;
+};

frontend/src/auth/ProtectedRoute.tsx

@@ -0,0 +1,7 @@
+import {Navigate, Outlet} from "react-router-dom";
+import {useAuth} from "@/context/AuthContext";
+
+export default function ProtectedRoute() {
+	const {token} = useAuth();
+	return token ? <Outlet /> : <Navigate to="/" replace />;
+}

frontend/src/auth/PublicRoute.tsx

@@ -0,0 +1,7 @@
+import {Navigate, Outlet} from "react-router-dom";
+import {useAuth} from "@/context/AuthContext";
+
+export default function PublicRoute() {
+	const {token} = useAuth();
+	return token ? <Navigate to="/dashboard" replace /> : <Outlet />;
+}

frontend/src/components/layout/DashboardLayout.tsx

@@ -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>
-
-  )
-}

frontend/src/components/layout/Header.tsx

@@ -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>
+	);
+}

frontend/src/components/layout/Sidebar.tsx

@@ -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">
+		<div className="w-64 border-r bg-card">
-			<h2 className="text-lg font-semibold mb-6">Admin</h2>
+			<div className="p-6">
-
+				<h2 className="text-xl font-bold">GG Dashboard</h2>
-			<div className="space-y-3">
-				<Link to="/dashboard">Dashboard</Link>
-
-				<Link to="/blog">Blog</Link>
-
-				<Link to="/department">Department</Link>
 			</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>
 	);
 }

frontend/src/components/ui/dialog.tsx

@@ -0,0 +1,163 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-2 right-2"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-base leading-none font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

frontend/src/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import {Switch as SwitchPrimitive} from "radix-ui";
+
+import {cn} from "@/lib/utils";
+
+function Switch({
+	className,
+	size = "default",
+	...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+	size?: "sm" | "default";
+}) {
+	return (
+		<SwitchPrimitive.Root
+			data-slot="switch"
+			data-size={size}
+			className={cn(
+				"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<SwitchPrimitive.Thumb
+				data-slot="switch-thumb"
+				className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+			/>
+		</SwitchPrimitive.Root>
+	);
+}
+
+export {Switch};

frontend/src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

frontend/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

frontend/src/index.css

@@ -1,3 +1,124 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+@import "tw-animate-css";
-@tailwind utilities;
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--radius-2xl: calc(var(--radius) + 8px);
+	--radius-3xl: calc(var(--radius) + 12px);
+	--radius-4xl: calc(var(--radius) + 16px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.141 0.005 285.823);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.141 0.005 285.823);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.141 0.005 285.823);
+	--primary: oklch(0.21 0.006 285.885);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.967 0.001 286.375);
+	--secondary-foreground: oklch(0.21 0.006 285.885);
+	--muted: oklch(0.967 0.001 286.375);
+	--muted-foreground: oklch(0.552 0.016 285.938);
+	--accent: oklch(0.967 0.001 286.375);
+	--accent-foreground: oklch(0.21 0.006 285.885);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.92 0.004 286.32);
+	--input: oklch(0.92 0.004 286.32);
+	--ring: oklch(0.705 0.015 286.067);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.141 0.005 285.823);
+	--sidebar-primary: oklch(0.21 0.006 285.885);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.967 0.001 286.375);
+	--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+	--sidebar-border: oklch(0.92 0.004 286.32);
+	--sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+	--background: oklch(0.141 0.005 285.823);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.21 0.006 285.885);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.21 0.006 285.885);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.92 0.004 286.32);
+	--primary-foreground: oklch(0.21 0.006 285.885);
+	--secondary: oklch(0.274 0.006 286.033);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.274 0.006 286.033);
+	--muted-foreground: oklch(0.705 0.015 286.067);
+	--accent: oklch(0.274 0.006 286.033);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.552 0.016 285.938);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.21 0.006 285.885);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.274 0.006 286.033);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

frontend/src/layouts/DashboardLayout.tsx

@@ -0,0 +1,18 @@
+import {Outlet} from "react-router-dom";
+
+import Sidebar from "@/components/layout/Sidebar";
+import Header from "@/components/layout/Header";
+
+export default function DashboardLayout() {
+	return (
+		<div className="flex min-h-screen bg-background">
+			<Sidebar />
+			<div className="flex flex-col flex-1">
+				<Header />
+				<main className="flex-1 p-6">
+					<Outlet />
+				</main>
+			</div>
+		</div>
+	);
+}

frontend/src/pages/Blog.tsx

@@ -1,13 +1,7 @@
-import DashboardLayout from "@/components/layout/DashboardLayout";
+import React from "react";
 
-export default function Blog() {
+function Blog() {
-	return (
+	return <div>Blog</div>;
-		<DashboardLayout>
-			<h1 className="text-xl font-semibold mb-4">Blog Management</h1>
-
-			<button className="px-4 py-2 bg-black text-white rounded">
-				Create Blog
-			</button>
-		</DashboardLayout>
-	);
 }
+
+export default Blog;

frontend/src/pages/Dashboard.tsx

@@ -1,17 +0,0 @@
-import DashboardLayout from "@/components/layout/DashboardLayout";
-
-export default function Dashboard() {
-	return (
-		<DashboardLayout>
-			<h1 className="text-2xl font-bold mb-6">Dashboard</h1>
-
-			<div className="grid grid-cols-3 gap-6">
-				<div className="p-6 bg-white shadow rounded">Blogs</div>
-
-				<div className="p-6 bg-white shadow rounded">Departments</div>
-
-				<div className="p-6 bg-white shadow rounded">Users</div>
-			</div>
-		</DashboardLayout>
-	);
-}

frontend/src/pages/Department.jsx

@@ -1,9 +0,0 @@
-import DashboardLayout from "@/components/layout/DashboardLayout";
-
-export default function Department() {
-	return (
-		<DashboardLayout>
-			<h1 className="text-xl font-semibold mb-4">Departments</h1>
-		</DashboardLayout>
-	);
-}

frontend/src/pages/Department.tsx

@@ -0,0 +1,349 @@
+import {useState, useEffect, useCallback} from "react";
+import {AxiosError} from "axios";
+
+import {
+	getDepartmentsApi,
+	createDepartmentApi,
+	updateDepartmentApi,
+	deleteDepartmentApi,
+} from "@/api/department";
+
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
+import {Button} from "@/components/ui/button";
+
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from "@/components/ui/dialog";
+
+import {Input} from "@/components/ui/input";
+import {Textarea} from "@/components/ui/textarea";
+
+import {Loader2, RefreshCw, Plus, Pencil, Trash} from "lucide-react";
+
+interface Department {
+	id?: number;
+	departmentId: string;
+	name: string;
+	para1: string;
+	para2: string;
+	para3: string;
+	facilities: string;
+	services: string;
+}
+
+export default function DepartmentPage() {
+	const [departments, setDepartments] = useState<Department[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState("");
+
+	const [openModal, setOpenModal] = useState(false);
+	const [editing, setEditing] = useState<Department | null>(null);
+
+	const [form, setForm] = useState<Department>({
+		departmentId: "",
+		name: "",
+		para1: "",
+		para2: "",
+		para3: "",
+		facilities: "",
+		services: "",
+	});
+
+	/* ---------------- FETCH ---------------- */
+
+	const fetchDepartments = useCallback(async () => {
+		setLoading(true);
+		setError("");
+
+		try {
+			const res = await getDepartmentsApi();
+			setDepartments(res?.data || []);
+		} catch (err) {
+			if (err instanceof AxiosError) {
+				setError(err.response?.data?.message || "Failed to load departments");
+			} else {
+				setError("Something went wrong");
+			}
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchDepartments();
+	}, [fetchDepartments]);
+
+	/* ---------------- FORM ---------------- */
+
+	function handleChange(
+		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) {
+		setForm({
+			...form,
+			[e.target.name]: e.target.value,
+		});
+	}
+
+	function openAdd() {
+		setEditing(null);
+
+		setForm({
+			departmentId: "",
+			name: "",
+			para1: "",
+			para2: "",
+			para3: "",
+			facilities: "",
+			services: "",
+		});
+
+		setOpenModal(true);
+	}
+
+	function openEdit(dep: Department) {
+		setEditing(dep);
+		setForm(dep);
+		setOpenModal(true);
+	}
+
+	async function handleSubmit() {
+		try {
+			if (editing) {
+				await updateDepartmentApi(editing.id!, form);
+			} else {
+				await createDepartmentApi(form);
+			}
+
+			setOpenModal(false);
+			fetchDepartments();
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	/* ---------------- DELETE ---------------- */
+
+	async function handleDelete(id: number) {
+		const confirmDelete = confirm("Delete this department?");
+		if (!confirmDelete) return;
+
+		try {
+			await deleteDepartmentApi(id);
+			fetchDepartments();
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	/* ---------------- UI ---------------- */
+
+	return (
+		<div className="p-6 space-y-6">
+			{/* Header */}
+
+			<div className="flex justify-between items-center">
+				<h1 className="text-2xl font-bold">Departments</h1>
+
+				<div className="flex gap-3">
+					<Button
+						variant="outline"
+						onClick={fetchDepartments}
+						disabled={loading}
+					>
+						<RefreshCw className="mr-2 h-4 w-4" />
+						Refresh
+					</Button>
+
+					<Button onClick={openAdd}>
+						<Plus className="mr-2 h-4 w-4" />
+						Add Department
+					</Button>
+				</div>
+			</div>
+
+			{/* Error */}
+
+			{error && (
+				<div className="p-4 text-red-600 bg-red-50 border rounded-md">
+					{error}
+				</div>
+			)}
+
+			{/* Table */}
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Department List</CardTitle>
+				</CardHeader>
+
+				<CardContent>
+					<div className="border rounded-md overflow-x-auto max-w-full">
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>ID</TableHead>
+									<TableHead>Name</TableHead>
+									<TableHead>Para1</TableHead>
+									<TableHead>Para2</TableHead>
+									<TableHead>Para3</TableHead>
+									<TableHead>Facilities</TableHead>
+									<TableHead>Services</TableHead>
+									<TableHead>Actions</TableHead>
+								</TableRow>
+							</TableHeader>
+
+							<TableBody>
+								{loading ? (
+									<TableRow>
+										<TableCell colSpan={8} className="text-center">
+											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+										</TableCell>
+									</TableRow>
+								) : departments.length === 0 ? (
+									<TableRow>
+										<TableCell colSpan={8} className="text-center">
+											No departments found
+										</TableCell>
+									</TableRow>
+								) : (
+									departments.map((dep) => (
+										<TableRow key={dep.departmentId}>
+											<TableCell>{dep.departmentId}</TableCell>
+
+											<TableCell>{dep.name}</TableCell>
+
+											<TableCell className="max-w-[300px] whitespace-normal break-words">
+												{dep.para1}
+											</TableCell>
+
+											<TableCell className="max-w-[300px] whitespace-normal break-words">
+												{dep.para2}
+											</TableCell>
+
+											<TableCell className="max-w-[300px] whitespace-normal break-words">
+												{dep.para3}
+											</TableCell>
+
+											<TableCell className="max-w-[300px] whitespace-normal break-words">
+												{dep.facilities}
+											</TableCell>
+
+											<TableCell className="max-w-[300px] whitespace-normal break-words">
+												{dep.services}
+											</TableCell>
+
+											<TableCell className="flex gap-2">
+												<Button
+													size="sm"
+													variant="outline"
+													onClick={() => openEdit(dep)}
+												>
+													<Pencil className="h-4 w-4" />
+												</Button>
+
+												<Button
+													size="sm"
+													variant="destructive"
+													onClick={() => handleDelete(dep.id!)}
+												>
+													<Trash className="h-4 w-4" />
+												</Button>
+											</TableCell>
+										</TableRow>
+									))
+								)}
+							</TableBody>
+						</Table>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* MODAL */}
+
+			<Dialog open={openModal} onOpenChange={setOpenModal}>
+				<DialogContent className="max-w-4xl">
+					<DialogHeader>
+						<DialogTitle>
+							{editing ? "Edit Department" : "Add Department"}
+						</DialogTitle>
+					</DialogHeader>
+
+					<div className="space-y-4 max-h-[70vh] overflow-y-auto pr-2">
+						<Input
+							name="departmentId"
+							placeholder="Department ID"
+							value={form.departmentId}
+							onChange={handleChange}
+						/>
+
+						{/* FIXED INPUT */}
+						<Input
+							name="name"
+							placeholder="Department Name"
+							value={form.name}
+							onChange={handleChange}
+						/>
+
+						<Textarea
+							name="para1"
+							placeholder="Paragraph 1"
+							value={form.para1}
+							onChange={handleChange}
+						/>
+
+						<Textarea
+							name="para2"
+							placeholder="Paragraph 2"
+							value={form.para2}
+							onChange={handleChange}
+						/>
+
+						<Textarea
+							name="para3"
+							placeholder="Paragraph 3"
+							value={form.para3}
+							onChange={handleChange}
+						/>
+
+						<Textarea
+							name="facilities"
+							placeholder="Facilities"
+							value={form.facilities}
+							onChange={handleChange}
+						/>
+
+						<Textarea
+							name="services"
+							placeholder="Services"
+							value={form.services}
+							onChange={handleChange}
+						/>
+					</div>
+
+					<DialogFooter>
+						<Button variant="outline" onClick={() => setOpenModal(false)}>
+							Cancel
+						</Button>
+
+						<Button onClick={handleSubmit}>
+							{editing ? "Update" : "Create"}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		</div>
+	);
+}

frontend/tailwind.config.js

@@ -1,8 +1,4 @@
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
 };