img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
new file mode 100644
index 0000000..d763cd9
--- /dev/null
+++ b/frontend/src/components/ui/input.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+
+ )
+}
+
+export { Input }
diff --git a/frontend/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
new file mode 100644
index 0000000..f752f82
--- /dev/null
+++ b/frontend/src/components/ui/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+ className,
+ ...props
+}: React.ComponentProps
) {
+ return (
+
+ )
+}
+
+export { Label }
diff --git a/frontend/src/components/ui/separator.tsx b/frontend/src/components/ui/separator.tsx
new file mode 100644
index 0000000..ca11501
--- /dev/null
+++ b/frontend/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+ className,
+ orientation = "horizontal",
+ decorative = true,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export { Separator }
diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
new file mode 100644
index 0000000..0ee1370
--- /dev/null
+++ b/frontend/src/context/AuthContext.tsx
@@ -0,0 +1,62 @@
+import {createContext, useContext, useState} from "react";
+import api from "@/services/api";
+
+type AuthContextType = {
+ user: any;
+ token: string | null;
+ login: (username: string, password: string) => Promise;
+ logout: () => void;
+};
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({children}: {children: React.ReactNode}) {
+ const [token, setToken] = useState(
+ localStorage.getItem("token"),
+ );
+
+ const [user, setUser] = useState(null);
+
+ async function login(username: string, password: string) {
+ const response = await api.post("/auth/login", {
+ username,
+ password,
+ });
+
+ const token = response.data.token;
+
+ localStorage.setItem("token", token);
+
+ setToken(token);
+ }
+
+ function logout() {
+ localStorage.removeItem("token");
+
+ setToken(null);
+ setUser(null);
+ }
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useAuth() {
+ const context = useContext(AuthContext);
+
+ if (!context) {
+ throw new Error("useAuth must be used inside AuthProvider");
+ }
+
+ return context;
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..fa02117
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+import {AuthProvider} from "./context/AuthContext";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+
+
+
+
+ ,
+);
diff --git a/frontend/src/pages/Blog.tsx b/frontend/src/pages/Blog.tsx
new file mode 100644
index 0000000..684de10
--- /dev/null
+++ b/frontend/src/pages/Blog.tsx
@@ -0,0 +1,13 @@
+import DashboardLayout from "@/components/layout/DashboardLayout";
+
+export default function Blog() {
+ return (
+
+ Blog Management
+
+
+
+ );
+}
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..39d8383
--- /dev/null
+++ b/frontend/src/pages/Dashboard.tsx
@@ -0,0 +1,17 @@
+import DashboardLayout from "@/components/layout/DashboardLayout";
+
+export default function Dashboard() {
+ return (
+
+ Dashboard
+
+
+
Blogs
+
+
Departments
+
+
Users
+
Departments
+
+ );
+}
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
new file mode 100644
index 0000000..5aa62a9
--- /dev/null
+++ b/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 (
+
+
+
+ Admin Login
+
+
+ Enter your credentials to access the dashboard
+
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+ ) =>
+ setUsername(e.target.value)
+ }
+ disabled={loading}
+ />
+
+
+
+
+
+ ) =>
+ setPassword(e.target.value)
+ }
+ disabled={loading}
+ />
+
+
+
+
+
+
-
-
-
-
-
- {children}
-
-
-
-
+
+
Welcome back
+
{user?.username}
+
+
+
+ Dark
+
+
+
+
+
-
Admin
-
-
-
Dashboard
-
-
Blog
-
-
Department
+
+
+
GG Dashboard
+
+
+
+
);
}
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..f4cbece
--- /dev/null
+++ b/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
) {
+ return
+}
+
+function DialogTrigger({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function DialogPortal({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function DialogClose({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function DialogOverlay({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function DialogContent({
+ className,
+ children,
+ showCloseButton = true,
+ ...props
+}: React.ComponentProps & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+
+
+ {children}
+ {showCloseButton && (
+
+
+
+ )}
+
+
+ )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DialogFooter({
+ className,
+ showCloseButton = false,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+ {children}
+ {showCloseButton && (
+
+
+
+ )}
+
+ )
+}
+
+function DialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function DialogDescription({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogOverlay,
+ DialogPortal,
+ DialogTitle,
+ DialogTrigger,
+}
diff --git a/frontend/src/components/ui/switch.tsx b/frontend/src/components/ui/switch.tsx
new file mode 100644
index 0000000..fcd7310
--- /dev/null
+++ b/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 & {
+ size?: "sm" | "default";
+}) {
+ return (
+
+
+
+ );
+}
+
+export {Switch};
diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
new file mode 100644
index 0000000..1017c00
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+ return (
+
+ )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+ return (
+
+ )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+ return (
+ tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+ |
+ )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+ return (
+ |
+ )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ |
+ )
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<"caption">) {
+ return (
+
+ )
+}
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..04d27f7
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+export { Textarea }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b5c61c9..9451a9c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,124 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "tw-animate-css";
+@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;
+ }
+}
diff --git a/frontend/src/layouts/DashboardLayout.tsx b/frontend/src/layouts/DashboardLayout.tsx
new file mode 100644
index 0000000..2a75c56
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/frontend/src/pages/Blog.tsx b/frontend/src/pages/Blog.tsx
index 684de10..14b3994 100644
--- a/frontend/src/pages/Blog.tsx
+++ b/frontend/src/pages/Blog.tsx
@@ -1,13 +1,7 @@
-import DashboardLayout from "@/components/layout/DashboardLayout";
+import React from "react";
-export default function Blog() {
- return (
-
- Blog Management
-
-
-
- );
+function Blog() {
+ return Blog
;
}
+
+export default Blog;
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
deleted file mode 100644
index 39d8383..0000000
--- a/frontend/src/pages/Dashboard.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import DashboardLayout from "@/components/layout/DashboardLayout";
-
-export default function Dashboard() {
- return (
-
- Dashboard
-
-
-
Blogs
-
-
Departments
-
-
Users
-
Departments
-
- );
-}
diff --git a/frontend/src/pages/Department.tsx b/frontend/src/pages/Department.tsx
new file mode 100644
index 0000000..c6c93dc
--- /dev/null
+++ b/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([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState("");
+
+ const [openModal, setOpenModal] = useState(false);
+ const [editing, setEditing] = useState(null);
+
+ const [form, setForm] = useState({
+ 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,
+ ) {
+ 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 (
+
+ {/* Header */}
+
+
+
Departments
+
+
+
+
+
+
+
+
+ {/* Error */}
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {/* Table */}
+
+
+
+ Department List
+
+
+
+
+
+
+
+ ID
+ Name
+ Para1
+ Para2
+ Para3
+ Facilities
+ Services
+ Actions
+
+
+
+
+ {loading ? (
+
+
+
+
+
+ ) : departments.length === 0 ? (
+
+
+ No departments found
+
+
+ ) : (
+ departments.map((dep) => (
+
+ {dep.departmentId}
+
+ {dep.name}
+
+
+ {dep.para1}
+
+
+
+ {dep.para2}
+
+
+
+ {dep.para3}
+
+
+
+ {dep.facilities}
+
+
+
+ {dep.services}
+
+
+
+
+
+
+
+
+ ))
+ )}
+
+
+
+
+ {/* MODAL */}
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function CommandList({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function CommandEmpty({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function CommandGroup({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function CommandSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function CommandItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ {children}
+
+
+ )
+}
+
+function CommandShortcut({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+
+ )
+}
+
+export {
+ Command,
+ CommandDialog,
+ CommandInput,
+ CommandList,
+ CommandEmpty,
+ CommandGroup,
+ CommandItem,
+ CommandShortcut,
+ CommandSeparator,
+}
diff --git a/frontend/src/components/ui/input-group.tsx b/frontend/src/components/ui/input-group.tsx
new file mode 100644
index 0000000..256ba4b
--- /dev/null
+++ b/frontend/src/components/ui/input-group.tsx
@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ [data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+const inputGroupAddonVariants = cva(
+ "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+ {
+ variants: {
+ align: {
+ "inline-start":
+ "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+ "inline-end":
+ "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+ "block-start":
+ "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+ "block-end":
+ "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+ },
+ },
+ defaultVariants: {
+ align: "inline-start",
+ },
+ }
+)
+
+function InputGroupAddon({
+ className,
+ align = "inline-start",
+ ...props
+}: React.ComponentProps<"div"> & VariantProps
) {
+ return (
+ {
+ if ((e.target as HTMLElement).closest("button")) {
+ return
+ }
+ e.currentTarget.parentElement?.querySelector("input")?.focus()
+ }}
+ {...props}
+ />
+ )
+}
+
+const inputGroupButtonVariants = cva(
+ "flex items-center gap-2 text-sm shadow-none",
+ {
+ variants: {
+ size: {
+ xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+ sm: "",
+ "icon-xs":
+ "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+ "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+ },
+ },
+ defaultVariants: {
+ size: "xs",
+ },
+ }
+)
+
+function InputGroupButton({
+ className,
+ type = "button",
+ variant = "ghost",
+ size = "xs",
+ ...props
+}: Omit
, "size"> &
+ VariantProps) {
+ return (
+
+ )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+ return (
+
+ )
+}
+
+function InputGroupInput({
+ className,
+ ...props
+}: React.ComponentProps<"input">) {
+ return (
+
+ )
+}
+
+function InputGroupTextarea({
+ className,
+ ...props
+}: React.ComponentProps<"textarea">) {
+ return (
+
+ )
+}
+
+export {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupText,
+ InputGroupInput,
+ InputGroupTextarea,
+}
diff --git a/frontend/src/components/ui/popover.tsx b/frontend/src/components/ui/popover.tsx
new file mode 100644
index 0000000..0ad11df
--- /dev/null
+++ b/frontend/src/components/ui/popover.tsx
@@ -0,0 +1,87 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function PopoverTrigger({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function PopoverContent({
+ className,
+ align = "center",
+ sideOffset = 4,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+function PopoverAnchor({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+ return (
+
+ )
+}
+
+function PopoverDescription({
+ className,
+ ...props
+}: React.ComponentProps<"p">) {
+ return (
+
+ )
+}
+
+export {
+ Popover,
+ PopoverAnchor,
+ PopoverContent,
+ PopoverDescription,
+ PopoverHeader,
+ PopoverTitle,
+ PopoverTrigger,
+}
diff --git a/frontend/src/pages/Department.tsx b/frontend/src/pages/Department.tsx
index c6c93dc..56cafc9 100644
--- a/frontend/src/pages/Department.tsx
+++ b/frontend/src/pages/Department.tsx
@@ -34,7 +34,6 @@ 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;
@@ -62,8 +61,6 @@ export default function DepartmentPage() {
services: "",
});
- /* ---------------- FETCH ---------------- */
-
const fetchDepartments = useCallback(async () => {
setLoading(true);
setError("");
@@ -86,8 +83,6 @@ export default function DepartmentPage() {
fetchDepartments();
}, [fetchDepartments]);
- /* ---------------- FORM ---------------- */
-
function handleChange(
e: React.ChangeEvent,
) {
@@ -122,7 +117,8 @@ export default function DepartmentPage() {
async function handleSubmit() {
try {
if (editing) {
- await updateDepartmentApi(editing.id!, form);
+ const {departmentId, ...updateData} = form;
+ await updateDepartmentApi(editing.departmentId, updateData);
} else {
await createDepartmentApi(form);
}
@@ -134,26 +130,20 @@ export default function DepartmentPage() {
}
}
- /* ---------------- DELETE ---------------- */
-
- async function handleDelete(id: number) {
+ async function handleDelete(departmentId: string) {
const confirmDelete = confirm("Delete this department?");
if (!confirmDelete) return;
try {
- await deleteDepartmentApi(id);
+ await deleteDepartmentApi(departmentId);
fetchDepartments();
} catch (error) {
console.error(error);
}
}
- /* ---------------- UI ---------------- */
-
return (
- {/* Header */}
-
Departments
@@ -174,16 +164,12 @@ export default function DepartmentPage() {
{error}
)}
- {/* Table */}
-
Department List
@@ -257,7 +243,7 @@ export default function DepartmentPage() {
@@ -287,9 +273,9 @@ export default function DepartmentPage() {
placeholder="Department ID"
value={form.departmentId}
onChange={handleChange}
+ disabled={!!editing}
/>
- {/* FIXED INPUT */}
([]);
+ const [departments, setDepartments] = useState([]);
+
+ const [loading, setLoading] = useState(true);
+ const [openModal, setOpenModal] = useState(false);
+ const [editing, setEditing] = useState(null);
+ const [depOpen, setDepOpen] = useState(false);
+ const [search, setSearch] = useState("");
+
+ const [form, setForm] = useState({
+ doctorId: "",
+ name: "",
+ designation: "",
+ workingStatus: "",
+ qualification: "",
+ departments: [],
+ timing: {},
+ });
+
+ const fetchAll = useCallback(async () => {
+ setLoading(true);
+ try {
+ const [docRes, depRes] = await Promise.all([
+ getDoctorsApi(),
+ getDepartmentsApi(),
+ ]);
+
+ setDoctors(docRes?.data || []);
+ setDepartments(depRes?.data || []);
+ } catch (err) {
+ console.error(err);
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ fetchAll();
+ }, [fetchAll]);
+
+ function handleChange(e: any) {
+ setForm({...form, [e.target.name]: e.target.value});
+ }
+
+ function handleDepartmentChange(depId: string) {
+ const exists = form.departments.includes(depId);
+
+ setForm({
+ ...form,
+ departments: exists
+ ? form.departments.filter((d: string) => d !== depId)
+ : [...form.departments, depId],
+ });
+ }
+
+ function handleTimingChange(day: string, value: string) {
+ setForm({
+ ...form,
+ timing: {...form.timing, [day]: value},
+ });
+ }
+
+ function openAdd() {
+ setEditing(null);
+ setForm({
+ doctorId: "",
+ name: "",
+ designation: "",
+ workingStatus: "",
+ qualification: "",
+ departments: [],
+ timing: {},
+ });
+ setOpenModal(true);
+ }
+
+ async function openEdit(doc: any) {
+ setEditing(doc);
+
+ try {
+ const timingRes = await getDoctorTimingApi(doc.Doctor_ID);
+
+ const t = timingRes?.data || {};
+
+ const formattedTiming = {
+ sunday: t.Sunday || "",
+ monday: t.Monday || "",
+ tuesday: t.Tuesday || "",
+ wednesday: t.Wednesday || "",
+ thursday: t.Thursday || "",
+ friday: t.Friday || "",
+ saturday: t.Saturday || "",
+ additional: t.Additional || "",
+ };
+
+ setForm({
+ doctorId: doc.Doctor_ID,
+ name: doc.Name,
+ designation: doc.Designation,
+ workingStatus: doc.workingStatus || doc.Working_Status || "",
+ qualification: doc.Qualification,
+ departments: doc.Department_ID || [],
+ timing: formattedTiming,
+ });
+
+ setOpenModal(true);
+ } catch (err) {
+ console.error(err);
+ }
+ }
+
+ async function handleSubmit() {
+ try {
+ const cleanTiming: any = {};
+
+ Object.keys(form.timing).forEach((day) => {
+ if (form.timing[day]) {
+ cleanTiming[day] = form.timing[day];
+ }
+ });
+
+ const payload = {
+ ...form,
+ timing: cleanTiming,
+ };
+
+ if (editing) {
+ await updateDoctorApi(editing.Doctor_ID, payload);
+ } else {
+ await createDoctorApi(payload);
+ }
+
+ setOpenModal(false);
+ fetchAll();
+ } catch (err) {
+ console.error(err);
+ }
+ }
+
+ async function handleDelete(id: string) {
+ if (!confirm("Delete doctor?")) return;
+
+ await deleteDoctorApi(id);
+ fetchAll();
+ }
+
+ return (
+
+
+
Doctors
+
+
+
+
+
+
+ Doctor List
+
+
+
+
+
+
+
+ ID
+ Name
+ Designation
+ Status
+ Qualification
+ Departments
+ Timing
+ Actions
+
+
+
+
+ {loading ? (
+
+
+
+
+
+ ) : (
+ doctors.map((doc) => (
+
+ {doc.Doctor_ID}
+
+ {doc.Name}
+
+ {doc.Designation}
+
+ {doc.Working_Status}
+
+ {doc.Qualification}
+
+ {doc.Department_ID?.join(", ")}
+
+
+ {doc.Timing}
+
+
+
+
+
+
+
+
+ ))
+ )}
+
+
+
+
+ {/* MODAL */}
+
+
+
{doc.Timing}
+
+ {doc.departments?.map((d: any) => (
+
+ {d.departmentName}: {d.timing}
+
+ ))}
@@ -260,7 +273,7 @@ export default function DoctorPage() {
@@ -275,14 +288,13 @@ export default function DoctorPage() {
{/* MODAL */}
-