feat: department wise timing

2026-03-17 16:22:37 +05:30
parent c11a3f9a7d
commit b89b2b1ba5
6 changed files with 329 additions and 308 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,7 +3,6 @@ import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
 import Login from "@/pages/Login";

 import DashboardLayout from "./layouts/DashboardLayout";
-import Blog from "./pages/Blog";

 // import ProtectedRoute from "./components/ProtectedRoutes/ProtectedRoutes";

@@ -12,6 +11,7 @@ import PublicRoute from "./auth/PublicRoute";
 import {AuthProvider} from "./context/AuthContext";
 import Department from "./pages/Department";
 import Doctor from "./pages/Doctor";
+import Blog from "./pages/Blog";

 export default function App() {
 	return (
@@ -24,9 +24,9 @@ export default function App() {

 					<Route element={<ProtectedRoute />}>
 						<Route element={<DashboardLayout />}>
-							<Route path="/blog" element={<Blog />} />
 							<Route path="/department" element={<Department />} />
 							<Route path="/doctor" element={<Doctor />} />
+							<Route path="/blog" element={<Blog />} />
 						</Route>
 					</Route>

--- a/frontend/src/api/doctor.ts
+++ b/frontend/src/api/doctor.ts
@@ -6,17 +6,20 @@ export interface Doctor {
 	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;
-	};
+
+	departments: {
+		departmentId: string;
+		timing?: {
+			monday?: string;
+			tuesday?: string;
+			wednesday?: string;
+			thursday?: string;
+			friday?: string;
+			saturday?: string;
+			sunday?: string;
+			additional?: string;
+		};
+	}[];
 }

 export const getDoctorsApi = async () => {
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -16,8 +16,8 @@ export default function Sidebar() {
 			path: "/doctor",
 		},
 		{
-			name: "Subjects",
-			path: "/subjects",
+			name: "Blog",
+			path: "/blog",
 		},
 	];

--- a/frontend/src/components/ui/scroll-area.tsx
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
--- a/frontend/src/pages/Doctor.tsx
+++ b/frontend/src/pages/Doctor.tsx
@@ -1,6 +1,4 @@
 import {useState, useEffect, useCallback} from "react";
-import {AxiosError} from "axios";
-
 import {
 	getDoctorsApi,
 	createDoctorApi,
@@ -19,6 +17,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
+import {ScrollArea} from "@/components/ui/scroll-area";

 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Button} from "@/components/ui/button";
@@ -30,13 +29,16 @@ import {
 	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 {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import {
+	Command,
+	CommandGroup,
+	CommandItem,
+	CommandInput,
+} from "@/components/ui/command";
 import {Input} from "@/components/ui/input";
 import {Loader2, Plus, Pencil, Trash} from "lucide-react";
-import {log} from "console";

 interface Department {
 	departmentId: string;
@@ -46,11 +48,9 @@ interface Department {
 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>({
@@ -60,7 +60,6 @@ export default function DoctorPage() {
 		workingStatus: "",
 		qualification: "",
 		departments: [],
-		timing: {},
 	});

 	const fetchAll = useCallback(async () => {
@@ -89,20 +88,43 @@ export default function DoctorPage() {
 	}

 	function handleDepartmentChange(depId: string) {
-		const exists = form.departments.includes(depId);
+		const exists = form.departments.find((d: any) => d.departmentId === depId);

-		setForm({
-			...form,
-			departments: exists
-				? form.departments.filter((d: string) => d !== depId)
-				: [...form.departments, depId],
-		});
+		if (exists) {
+			setForm({
+				...form,
+				departments: form.departments.filter(
+					(d: any) => d.departmentId !== depId,
+				),
+			});
+		} else {
+			setForm({
+				...form,
+				departments: [
+					...form.departments,
+					{
+						departmentId: depId,
+						timing: {},
+					},
+				],
+			});
+		}
 	}

-	function handleTimingChange(day: string, value: string) {
+	function handleTimingChange(depId: string, day: string, value: string) {
 		setForm({
 			...form,
-			timing: {...form.timing, [day]: value},
+			departments: form.departments.map((d: any) =>
+				d.departmentId === depId
+					? {
+							...d,
+							timing: {
+								...d.timing,
+								[day]: value,
+							},
+						}
+					: d,
+			),
 		});
 	}

@@ -115,7 +137,6 @@ export default function DoctorPage() {
 			workingStatus: "",
 			qualification: "",
 			departments: [],
-			timing: {},
 		});
 		setOpenModal(true);
 	}
@@ -124,29 +145,22 @@ export default function DoctorPage() {
 		setEditing(doc);

 		try {
-			const timingRes = await getDoctorTimingApi(doc.Doctor_ID);
+			const timingRes = await getDoctorTimingApi(doc.doctorId);

-			const t = timingRes?.data || {};
+			const timingData = timingRes?.data?.departments || [];

-			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 || "",
-			};
+			const mappedDepartments = timingData.map((d: any) => ({
+				departmentId: d.departmentId,
+				timing: d.timing || {},
+			}));

 			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,
+				doctorId: doc.doctorId,
+				name: doc.name,
+				designation: doc.designation,
+				workingStatus: doc.workingStatus,
+				qualification: doc.qualification,
+				departments: mappedDepartments,
 			});

 			setOpenModal(true);
@@ -157,21 +171,17 @@ export default function DoctorPage() {

 	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,
+				doctorId: form.doctorId,
+				name: form.name,
+				designation: form.designation,
+				workingStatus: form.workingStatus,
+				qualification: form.qualification,
+				departments: form.departments,
 			};

 			if (editing) {
-				await updateDoctorApi(editing.Doctor_ID, payload);
+				await updateDoctorApi(editing.doctorId, payload);
 			} else {
 				await createDoctorApi(payload);
 			}
@@ -185,7 +195,6 @@ export default function DoctorPage() {

 	async function handleDelete(id: string) {
 		if (!confirm("Delete doctor?")) return;
-
 		await deleteDoctorApi(id);
 		fetchAll();
 	}
@@ -231,21 +240,25 @@ export default function DoctorPage() {
 									</TableRow>
 								) : (
 									doctors.map((doc) => (
-										<TableRow key={doc.Doctor_ID}>
-											<TableCell>{doc.Doctor_ID}</TableCell>
+										<TableRow key={doc.doctorId}>
+											<TableCell>{doc.doctorId}</TableCell>
+											<TableCell>{doc.name}</TableCell>
+											<TableCell>{doc.designation}</TableCell>
+											<TableCell>{doc.workingStatus}</TableCell>
+											<TableCell>{doc.qualification}</TableCell>

-											<TableCell>{doc.Name}</TableCell>
+											<TableCell>
+												{doc.departments
+													?.map((d: any) => d.departmentName)
+													.join(", ")}
+											</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 className="max-w-[250px] whitespace-normal">
+												{doc.departments?.map((d: any) => (
+													<div key={d.departmentId}>
+														<b>{d.departmentName}:</b> {d.timing}
+													</div>
+												))}
 											</TableCell>

 											<TableCell className="flex gap-2">
@@ -260,7 +273,7 @@ export default function DoctorPage() {
 												<Button
 													size="sm"
 													variant="destructive"
-													onClick={() => handleDelete(doc.Doctor_ID)}
+													onClick={() => handleDelete(doc.doctorId)}
 												>
 													<Trash className="h-4 w-4" />
 												</Button>
@@ -275,14 +288,13 @@ export default function DoctorPage() {
 			</Card>

 			{/* MODAL */}
-
 			<Dialog open={openModal} onOpenChange={setOpenModal}>
-				<DialogContent className="tw-overflow-x-auto">
+				<DialogContent className="overflow-y-auto max-h-[80vh] ">
 					<DialogHeader>
 						<DialogTitle>{editing ? "Edit Doctor" : "Add Doctor"}</DialogTitle>
 					</DialogHeader>

-					<div className="space-y-4 max-h-[70vh] overflow-y-auto">
+					<div className="space-y-4">
 						<Input
 							name="doctorId"
 							placeholder="Doctor ID"
@@ -297,7 +309,6 @@ export default function DoctorPage() {
 							value={form.name}
 							onChange={handleChange}
 						/>
-
 						<Input
 							name="designation"
 							placeholder="Designation"
@@ -310,126 +321,113 @@ export default function DoctorPage() {
 							value={form.workingStatus}
 							onChange={handleChange}
 						/>
+						<Input
+							name="qualification"
+							placeholder="Qualification"
+							value={form.qualification}
+							onChange={handleChange}
+						/>

-						{/* Departments MULTI SELECT */}
-
+						{/* Departments */}
 						<div>
-							<p className="tw-font-medium tw-mb-2">Departments</p>
+							<p className="font-medium 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 className="w-full justify-between h-auto min-h-[40px]">
+										{form.departments.length > 0 ? (
+											<div className="flex flex-col items-start gap-1 text-left">
+												{form.departments.map((d: any) => {
+													const name = departments.find(
+														(dep) => dep.departmentId === d.departmentId,
+													)?.name;
+
+													return (
+														<span key={d.departmentId} className="text-sm">
+															{name}
+														</span>
+													);
+												})}
+											</div>
+										) : (
+											<span>Select Departments</span>
+										)}
 									</Button>
 								</PopoverTrigger>

-								<PopoverContent className="tw-w-full tw-p-0">
+								<PopoverContent className="w-[300px] 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>
+										<CommandInput placeholder="Search department..." />

-										<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,
-													);
+										<CommandGroup className="max-h-[250px] overflow-y-auto">
+											{departments.map((dep) => {
+												const selected = form.departments.some(
+													(d: any) => d.departmentId === 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>
-													);
-												})}
+												return (
+													<CommandItem
+														key={dep.departmentId}
+														className="flex justify-between"
+														onSelect={() =>
+															handleDepartmentChange(dep.departmentId)
+														}
+													>
+														<span>{dep.name}</span>
+														{selected && <span>✔</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)}
-						/>
+						{form.departments.map((dep: any) => {
+							const depName = departments.find(
+								(d) => d.departmentId === dep.departmentId,
+							)?.name;

-						<Input
-							placeholder="Tuesday"
-							value={form.timing.tuesday || ""}
-							onChange={(e) => handleTimingChange("tuesday", e.target.value)}
-						/>
+							return (
+								<div
+									key={dep.departmentId}
+									className="tw-border tw-p-3 tw-rounded"
+								>
+									<p className="tw-font-semibold">{depName}</p>

-						<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)}
-						/>
+									{[
+										"monday",
+										"tuesday",
+										"wednesday",
+										"thursday",
+										"friday",
+										"saturday",
+										"sunday",
+										"additional",
+									].map((day) => (
+										<Input
+											key={day}
+											placeholder={day}
+											value={dep.timing?.[day] || ""}
+											onChange={(e) =>
+												handleTimingChange(
+													dep.departmentId,
+													day,
+													e.target.value,
+												)
+											}
+										/>
+									))}
+								</div>
+							);
+						})}
 					</div>

 					<DialogFooter>
 						<Button variant="outline" onClick={() => setOpenModal(false)}>
 							Cancel
 						</Button>
-
 						<Button onClick={handleSubmit}>
 							{editing ? "Update" : "Create"}
 						</Button>