feat:add doctor page

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"