feat:add doctor page

frontend/src/App.tsx

@@ -11,6 +11,7 @@ import ProtectedRoute from "./auth/ProtectedRoute";
 import PublicRoute from "./auth/PublicRoute";
 import {AuthProvider} from "./context/AuthContext";
 import Department from "./pages/Department";
+import Doctor from "./pages/Doctor";
 
 export default function App() {
 	return (
@@ -25,6 +26,7 @@ export default function App() {
 						<Route element={<DashboardLayout />}>
 							<Route path="/blog" element={<Blog />} />
 							<Route path="/department" element={<Department />} />
+							<Route path="/doctor" element={<Doctor />} />
 						</Route>
 					</Route>
 

frontend/src/api/department.ts

@@ -10,15 +10,11 @@ export interface Department {
 	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;
@@ -32,10 +28,8 @@ export const createDepartmentApi = async (data: {
 	return res.data;
 };
 
-/* ---------------- UPDATE ---------------- */
-
 export const updateDepartmentApi = async (
-	id: number,
+	departmentId: string,
 	data: {
 		name?: string;
 		para1?: string;
@@ -45,13 +39,11 @@ export const updateDepartmentApi = async (
 		services?: string;
 	},
 ) => {
-	const res = await apiClient.put(`/departments/${id}`, data);
+	const res = await apiClient.put(`/departments/${departmentId}`, data);
 	return res.data;
 };
 
-/* ---------------- DELETE ---------------- */
-
-export const deleteDepartmentApi = async (id: number) => {
-	const res = await apiClient.delete(`/departments/${id}`);
+export const deleteDepartmentApi = async (departmentId: string) => {
+	const res = await apiClient.delete(`/departments/${departmentId}`);
 	return res.data;
 };

frontend/src/api/doctor.ts

@@ -0,0 +1,53 @@
+import apiClient from "@/api/client";
+
+export interface Doctor {
+	doctorId: string;
+	name: string;
+	designation?: string;
+	workingStatus?: string;
+	qualification?: string;
+	departments: string[];
+	timing: {
+		monday?: string;
+		tuesday?: string;
+		wednesday?: string;
+		thursday?: string;
+		friday?: string;
+		saturday?: string;
+		sunday?: string;
+		additional?: string;
+	};
+}
+
+export const getDoctorsApi = async () => {
+	const res = await apiClient.get("/doctors/getAll");
+	return res.data;
+};
+
+export const getDoctorByIdApi = async (doctorId: string) => {
+	const res = await apiClient.get(`/doctors/${doctorId}`);
+	return res.data;
+};
+
+export const createDoctorApi = async (data: Doctor) => {
+	const res = await apiClient.post("/doctors", data);
+	return res.data;
+};
+
+export const updateDoctorApi = async (
+	doctorId: string,
+	data: Partial<Doctor>,
+) => {
+	const res = await apiClient.patch(`/doctors/${doctorId}`, data);
+	return res.data;
+};
+
+export const deleteDoctorApi = async (doctorId: string) => {
+	const res = await apiClient.delete(`/doctors/${doctorId}`);
+	return res.data;
+};
+
+export const getDoctorTimingApi = async (doctorId: string) => {
+	const res = await apiClient.get(`/doctors/getTimings/${doctorId}`);
+	return res.data;
+};

frontend/src/components/layout/Sidebar.tsx

@@ -12,8 +12,8 @@ export default function Sidebar() {
 			path: "/department",
 		},
 		{
-			name: "Blog",
-			path: "/blog",
+			name: "Doctor",
+			path: "/doctor",
 		},
 		{
 			name: "Subjects",

frontend/src/components/ui/command.tsx

@@ -0,0 +1,193 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  InputGroup,
+  InputGroupAddon,
+} from "@/components/ui/input-group"
+import { SearchIcon, CheckIcon } from "lucide-react"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn(
+          "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
+          className
+        )}
+        showCloseButton={showCloseButton}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="p-1 pb-0">
+      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
+            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

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 (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[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<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        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<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

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<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-0.5 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}

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<HTMLInputElement | HTMLTextAreaElement>,
 	) {
@@ -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 (
 		<div className="p-6 space-y-6">
-			{/* Header */}
-
 			<div className="flex justify-between items-center">
 				<h1 className="text-2xl font-bold">Departments</h1>
 
@@ -174,16 +164,12 @@ export default function DepartmentPage() {
 				</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>
@@ -257,7 +243,7 @@ export default function DepartmentPage() {
 												<Button
 													size="sm"
 													variant="destructive"
-													onClick={() => handleDelete(dep.id!)}
+													onClick={() => handleDelete(dep.departmentId)}
 												>
 													<Trash className="h-4 w-4" />
 												</Button>
@@ -287,9 +273,9 @@ export default function DepartmentPage() {
 							placeholder="Department ID"
 							value={form.departmentId}
 							onChange={handleChange}
+							disabled={!!editing}
 						/>
 
-						{/* FIXED INPUT */}
 						<Input
 							name="name"
 							placeholder="Department Name"

frontend/src/pages/Doctor.tsx

@@ -0,0 +1,441 @@
+import {useState, useEffect, useCallback} from "react";
+import {AxiosError} from "axios";
+
+import {
+	getDoctorsApi,
+	createDoctorApi,
+	updateDoctorApi,
+	deleteDoctorApi,
+	getDoctorTimingApi,
+} from "@/api/doctor";
+
+import {getDepartmentsApi} 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 {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import {Command, CommandGroup, CommandItem} from "@/components/ui/command";
+import {Check} from "lucide-react";
+
+import {Input} from "@/components/ui/input";
+import {Loader2, Plus, Pencil, Trash} from "lucide-react";
+import {log} from "console";
+
+interface Department {
+	departmentId: string;
+	name: string;
+}
+
+export default function DoctorPage() {
+	const [doctors, setDoctors] = useState<any[]>([]);
+	const [departments, setDepartments] = useState<Department[]>([]);
+
+	const [loading, setLoading] = useState(true);
+	const [openModal, setOpenModal] = useState(false);
+	const [editing, setEditing] = useState<any>(null);
+	const [depOpen, setDepOpen] = useState(false);
+	const [search, setSearch] = useState("");
+
+	const [form, setForm] = useState<any>({
+		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 (
+		<div className="p-6 space-y-6">
+			<div className="flex justify-between items-center">
+				<h1 className="text-2xl font-bold">Doctors</h1>
+
+				<Button onClick={openAdd}>
+					<Plus className="mr-2 h-4 w-4" />
+					Add Doctor
+				</Button>
+			</div>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Doctor List</CardTitle>
+				</CardHeader>
+
+				<CardContent>
+					<div className="tw-overflow-x-auto">
+						<Table className="tw-min-w-[1000px]">
+							<TableHeader>
+								<TableRow>
+									<TableHead>ID</TableHead>
+									<TableHead>Name</TableHead>
+									<TableHead>Designation</TableHead>
+									<TableHead>Status</TableHead>
+									<TableHead>Qualification</TableHead>
+									<TableHead>Departments</TableHead>
+									<TableHead>Timing</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>
+								) : (
+									doctors.map((doc) => (
+										<TableRow key={doc.Doctor_ID}>
+											<TableCell>{doc.Doctor_ID}</TableCell>
+
+											<TableCell>{doc.Name}</TableCell>
+
+											<TableCell>{doc.Designation}</TableCell>
+
+											<TableCell>{doc.Working_Status}</TableCell>
+
+											<TableCell>{doc.Qualification}</TableCell>
+
+											<TableCell>{doc.Department_ID?.join(", ")}</TableCell>
+
+											<TableCell className="max-w-[200px] whitespace-normal break-words">
+												<div className="tw-whitespace-nowrap">{doc.Timing}</div>
+											</TableCell>
+
+											<TableCell className="flex gap-2">
+												<Button
+													size="sm"
+													variant="outline"
+													onClick={() => openEdit(doc)}
+												>
+													<Pencil className="h-4 w-4" />
+												</Button>
+
+												<Button
+													size="sm"
+													variant="destructive"
+													onClick={() => handleDelete(doc.Doctor_ID)}
+												>
+													<Trash className="h-4 w-4" />
+												</Button>
+											</TableCell>
+										</TableRow>
+									))
+								)}
+							</TableBody>
+						</Table>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* MODAL */}
+
+			<Dialog open={openModal} onOpenChange={setOpenModal}>
+				<DialogContent className="tw-overflow-x-auto">
+					<DialogHeader>
+						<DialogTitle>{editing ? "Edit Doctor" : "Add Doctor"}</DialogTitle>
+					</DialogHeader>
+
+					<div className="space-y-4 max-h-[70vh] overflow-y-auto">
+						<Input
+							name="doctorId"
+							placeholder="Doctor ID"
+							value={form.doctorId}
+							onChange={handleChange}
+							disabled={!!editing}
+						/>
+
+						<Input
+							name="name"
+							placeholder="Name"
+							value={form.name}
+							onChange={handleChange}
+						/>
+
+						<Input
+							name="designation"
+							placeholder="Designation"
+							value={form.designation}
+							onChange={handleChange}
+						/>
+						<Input
+							name="workingStatus"
+							placeholder="Working Status"
+							value={form.workingStatus}
+							onChange={handleChange}
+						/>
+
+						{/* Departments MULTI SELECT */}
+
+						<div>
+							<p className="tw-font-medium tw-mb-2">Departments</p>
+
+							<Popover>
+								<PopoverTrigger asChild>
+									<Button
+										variant="outline"
+										className="tw-w-full tw-justify-between tw-text-left"
+									>
+										{form.departments.length > 0
+											? departments
+													.filter((d) =>
+														form.departments.includes(d.departmentId),
+													)
+													.map((d) => d.name)
+													.join(", ")
+											: "Select Departments"}
+									</Button>
+								</PopoverTrigger>
+
+								<PopoverContent className="tw-w-full tw-p-0">
+									<Command>
+										<div className="tw-p-2 tw-border-b">
+											<input
+												placeholder="Search department..."
+												className="tw-w-full tw-border tw-rounded-md tw-px-2 tw-py-1 tw-text-sm"
+												value={search}
+												onChange={(e) => setSearch(e.target.value)}
+											/>
+										</div>
+
+										<CommandGroup className="tw-max-h-60 tw-overflow-y-auto">
+											{departments
+												.filter((d) =>
+													d.name.toLowerCase().includes(search.toLowerCase()),
+												)
+												.map((dep) => {
+													const selected = form.departments.includes(
+														dep.departmentId,
+													);
+
+													return (
+														<CommandItem
+															key={dep.departmentId}
+															onSelect={() =>
+																handleDepartmentChange(dep.departmentId)
+															}
+															className="tw-flex tw-justify-between"
+														>
+															<span>{dep.name}</span>
+
+															{selected && (
+																<span className="tw-text-green-600 tw-text-sm">
+																	✔
+																</span>
+															)}
+														</CommandItem>
+													);
+												})}
+										</CommandGroup>
+									</Command>
+								</PopoverContent>
+							</Popover>
+						</div>
+						<Input
+							placeholder="Sunday"
+							value={form.timing.sunday || ""}
+							onChange={(e) => handleTimingChange("sunday", e.target.value)}
+						/>
+
+						<Input
+							placeholder="Monday"
+							value={form.timing.monday || ""}
+							onChange={(e) => handleTimingChange("monday", e.target.value)}
+						/>
+
+						<Input
+							placeholder="Tuesday"
+							value={form.timing.tuesday || ""}
+							onChange={(e) => handleTimingChange("tuesday", e.target.value)}
+						/>
+
+						<Input
+							placeholder="Wednesday"
+							value={form.timing.wednesday || ""}
+							onChange={(e) => handleTimingChange("wednesday", e.target.value)}
+						/>
+
+						<Input
+							placeholder="Thursday"
+							value={form.timing.thursday || ""}
+							onChange={(e) => handleTimingChange("thursday", e.target.value)}
+						/>
+
+						<Input
+							placeholder="Friday"
+							value={form.timing.friday || ""}
+							onChange={(e) => handleTimingChange("friday", e.target.value)}
+						/>
+
+						<Input
+							placeholder="Saturday"
+							value={form.timing.saturday || ""}
+							onChange={(e) => handleTimingChange("saturday", e.target.value)}
+						/>
+						<Input
+							placeholder="Additional"
+							value={form.timing.additional || ""}
+							onChange={(e) => handleTimingChange("additional", e.target.value)}
+						/>
+					</div>
+
+					<DialogFooter>
+						<Button variant="outline" onClick={() => setOpenModal(false)}>
+							Cancel
+						</Button>
+
+						<Button onClick={handleSubmit}>
+							{editing ? "Update" : "Create"}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		</div>
+	);
+}