From 101c2358556c66fd747b250d8205ed9335faa9a3 Mon Sep 17 00:00:00 2001
From: ARJUN S THAMPI <61703062+arjun-thampi@users.noreply.github.com>
Date: Tue, 17 Mar 2026 17:08:05 +0530
Subject: [PATCH] feat: doctor search filter functionality added

---
 frontend/src/pages/Doctor.tsx | 102 ++++++++++++++++++++++------------
 1 file changed, 67 insertions(+), 35 deletions(-)

diff --git a/frontend/src/pages/Doctor.tsx b/frontend/src/pages/Doctor.tsx
index 57c4a56..8c94639 100644
--- a/frontend/src/pages/Doctor.tsx
+++ b/frontend/src/pages/Doctor.tsx
@@ -17,7 +17,6 @@ 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";
@@ -37,8 +36,9 @@ import {
 	CommandItem,
 	CommandInput,
 } from "@/components/ui/command";
+
 import {Input} from "@/components/ui/input";
-import {Loader2, Plus, Pencil, Trash} from "lucide-react";
+import {Loader2, Plus, Pencil, Trash, RefreshCw} from "lucide-react";
 
 interface Department {
 	departmentId: string;
@@ -51,7 +51,9 @@ export default function DoctorPage() {
 	const [loading, setLoading] = useState(true);
 	const [openModal, setOpenModal] = useState(false);
 	const [editing, setEditing] = useState<any>(null);
-	const [search, setSearch] = useState("");
+
+	const [searchText, setSearchText] = useState("");
+	const [filterDepartment, setFilterDepartment] = useState("");
 
 	const [form, setForm] = useState<any>({
 		doctorId: "",
@@ -83,6 +85,18 @@ export default function DoctorPage() {
 		fetchAll();
 	}, [fetchAll]);
 
+	const filteredDoctors = doctors.filter((doc) => {
+		const matchesSearch =
+			doc.name.toLowerCase().includes(searchText.toLowerCase()) ||
+			doc.doctorId.toLowerCase().includes(searchText.toLowerCase());
+
+		const matchesDepartment = filterDepartment
+			? doc.departments?.some((d: any) => d.departmentId === filterDepartment)
+			: true;
+
+		return matchesSearch && matchesDepartment;
+	});
+
 	function handleChange(e: any) {
 		setForm({...form, [e.target.name]: e.target.value});
 	}
@@ -100,13 +114,7 @@ export default function DoctorPage() {
 		} else {
 			setForm({
 				...form,
-				departments: [
-					...form.departments,
-					{
-						departmentId: depId,
-						timing: {},
-					},
-				],
+				departments: [...form.departments, {departmentId: depId, timing: {}}],
 			});
 		}
 	}
@@ -118,10 +126,7 @@ export default function DoctorPage() {
 				d.departmentId === depId
 					? {
 							...d,
-							timing: {
-								...d.timing,
-								[day]: value,
-							},
+							timing: {...d.timing, [day]: value},
 						}
 					: d,
 			),
@@ -146,7 +151,6 @@ export default function DoctorPage() {
 
 		try {
 			const timingRes = await getDoctorTimingApi(doc.doctorId);
-
 			const timingData = timingRes?.data?.departments || [];
 
 			const mappedDepartments = timingData.map((d: any) => ({
@@ -171,19 +175,10 @@ export default function DoctorPage() {
 
 	async function handleSubmit() {
 		try {
-			const payload = {
-				doctorId: form.doctorId,
-				name: form.name,
-				designation: form.designation,
-				workingStatus: form.workingStatus,
-				qualification: form.qualification,
-				departments: form.departments,
-			};
-
 			if (editing) {
-				await updateDoctorApi(editing.doctorId, payload);
+				await updateDoctorApi(editing.doctorId, form);
 			} else {
-				await createDoctorApi(payload);
+				await createDoctorApi(form);
 			}
 
 			setOpenModal(false);
@@ -201,23 +196,52 @@ export default function DoctorPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex justify-between items-center">
+			{/* HEADER */}
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-3">
 				<h1 className="text-2xl font-bold">Doctors</h1>
 
-				<Button onClick={openAdd}>
-					<Plus className="mr-2 h-4 w-4" />
-					Add Doctor
-				</Button>
+				<div className="flex flex-wrap gap-2">
+					<Input
+						placeholder="Search doctor..."
+						value={searchText}
+						onChange={(e) => setSearchText(e.target.value)}
+						className="w-[200px]"
+					/>
+
+					<select
+						value={filterDepartment}
+						onChange={(e) => setFilterDepartment(e.target.value)}
+						className="border rounded px-2 py-1"
+					>
+						<option value="">All Departments</option>
+						{departments.map((dep) => (
+							<option key={dep.departmentId} value={dep.departmentId}>
+								{dep.name}
+							</option>
+						))}
+					</select>
+
+					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+						<RefreshCw className="mr-2 h-4 w-4" />
+						Refresh
+					</Button>
+
+					<Button onClick={openAdd}>
+						<Plus className="mr-2 h-4 w-4" />
+						Add Doctor
+					</Button>
+				</div>
 			</div>
 
+			{/* TABLE */}
 			<Card>
 				<CardHeader>
 					<CardTitle>Doctor List</CardTitle>
 				</CardHeader>
 
 				<CardContent>
-					<div className="tw-overflow-x-auto">
-						<Table className="tw-min-w-[1000px]">
+					<div className="overflow-x-auto">
+						<Table className="min-w-[1000px]">
 							<TableHeader>
 								<TableRow>
 									<TableHead>ID</TableHead>
@@ -238,8 +262,14 @@ export default function DoctorPage() {
 											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
+								) : filteredDoctors.length === 0 ? (
+									<TableRow>
+										<TableCell colSpan={8} className="text-center">
+											No doctors found
+										</TableCell>
+									</TableRow>
 								) : (
-									doctors.map((doc) => (
+									filteredDoctors.map((doc) => (
 										<TableRow key={doc.doctorId}>
 											<TableCell>{doc.doctorId}</TableCell>
 											<TableCell>{doc.name}</TableCell>
@@ -256,7 +286,8 @@ export default function DoctorPage() {
 											<TableCell className="max-w-[250px] whitespace-normal">
 												{doc.departments?.map((d: any) => (
 													<div key={d.departmentId}>
-														<b>{d.departmentName}:</b> {d.timing}
+														<b>{d.departmentName}:</b>{" "}
+														{JSON.stringify(d.timing)}
 													</div>
 												))}
 											</TableCell>
@@ -287,6 +318,7 @@ export default function DoctorPage() {
 				</CardContent>
 			</Card>
 
+			{/* MODAL */}
 			{/* MODAL */}
 			<Dialog open={openModal} onOpenChange={setOpenModal}>
 				<DialogContent className="overflow-y-auto max-h-[80vh] ">