feat : add front-end using shad cn

frontend/src/pages/Blog.tsx

@@ -0,0 +1,13 @@
+import DashboardLayout from "@/components/layout/DashboardLayout";
+
+export default function Blog() {
+	return (
+		<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>
+	);
+}

frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,9 @@
+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/Login.tsx

@@ -0,0 +1,92 @@
+import {useState, ChangeEvent} from "react";
+import {useNavigate} from "react-router-dom";
+import {useAuth} from "@/context/AuthContext";
+
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
+import {Input} from "@/components/ui/input";
+import {Label} from "@/components/ui/label";
+import {Button} from "@/components/ui/button";
+
+export default function Login() {
+	const navigate = useNavigate();
+	const {login} = useAuth();
+
+	const [username, setUsername] = useState("");
+	const [password, setPassword] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState("");
+
+	async function handleLogin() {
+		try {
+			setLoading(true);
+			setError("");
+
+			await login(username, password);
+
+			navigate("/dashboard");
+		} catch (err) {
+			setError("Invalid credentials");
+		}
+
+		setLoading(false);
+	}
+
+	return (
+		<div className="flex min-h-screen items-center justify-center bg-slate-100">
+			<Card className="w-[420px] shadow-xl border">
+				<CardHeader className="space-y-1 text-center">
+					<CardTitle className="text-2xl font-semibold">Admin Login</CardTitle>
+
+					<p className="text-sm text-muted-foreground">
+						Enter your credentials to access the dashboard
+					</p>
+				</CardHeader>
+
+				<CardContent className="space-y-5">
+					{error && (
+						<div className="p-3 text-sm text-red-600 bg-red-100 rounded-md">
+							{error}
+						</div>
+					)}
+
+					<div className="space-y-2">
+						<Label htmlFor="username">Username</Label>
+
+						<Input
+							id="username"
+							placeholder="Enter username"
+							value={username}
+							onChange={(e: ChangeEvent<HTMLInputElement>) =>
+								setUsername(e.target.value)
+							}
+							disabled={loading}
+						/>
+					</div>
+
+					<div className="space-y-2">
+						<Label htmlFor="password">Password</Label>
+
+						<Input
+							id="password"
+							type="password"
+							placeholder="Enter password"
+							value={password}
+							onChange={(e: ChangeEvent<HTMLInputElement>) =>
+								setPassword(e.target.value)
+							}
+							disabled={loading}
+						/>
+					</div>
+
+					<Button
+						onClick={handleLogin}
+						className="w-full"
+						disabled={loading || !username || !password}
+					>
+						{loading ? "Logging in..." : "Login"}
+					</Button>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}