feat:add email send functionality

frontend/package-lock.json

@@ -23,6 +23,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
+        "file-saver": "^2.0.5",
         "lucide-react": "^0.577.0",
         "radix-ui": "^1.4.3",
         "react": "^19.2.0",
@@ -32,7 +33,8 @@
         "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.2.1",
         "tailwindcss-animate": "^1.0.7",
-        "tw-animate-css": "^1.4.0"
+        "tw-animate-css": "^1.4.0",
+        "xlsx": "^0.18.5"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.1",
@@ -4484,6 +4486,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
@@ -4814,6 +4825,19 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4982,6 +5006,15 @@
       "integrity": "sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==",
       "license": "MIT"
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/codex-notifier": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/codex-notifier/-/codex-notifier-1.1.2.tgz",
@@ -5120,6 +5153,18 @@
         }
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -5964,6 +6009,12 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
+      "license": "MIT"
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -6113,6 +6164,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fresh": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
@@ -8684,6 +8744,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -9336,6 +9408,24 @@
         "node": ">= 8"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -9423,6 +9513,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

frontend/package.json

@@ -25,6 +25,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "file-saver": "^2.0.5",
     "lucide-react": "^0.577.0",
     "radix-ui": "^1.4.3",
     "react": "^19.2.0",
@@ -34,7 +35,8 @@
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

frontend/src/App.tsx

@@ -13,6 +13,7 @@ import Department from "./pages/Department";
 import Doctor from "./pages/Doctor";
 import Blog from "./pages/Blog";
 import BlogEditorPage from "./pages/BlogEditor";
+import Appointment from "./pages/Appointment";
 
 export default function App() {
 	return (
@@ -30,6 +31,7 @@ export default function App() {
 							<Route path="/blog" element={<Blog />} />
 							<Route path="/blog/create" element={<BlogEditorPage />} />
 							<Route path="/blog/edit/:id" element={<BlogEditorPage />} />
+							<Route path="/appointment" element={<Appointment />} />
 						</Route>
 					</Route>
 

frontend/src/api/appointment.ts

@@ -0,0 +1,11 @@
+import apiClient from "@/api/client";
+
+export const getAppointmentsApi = async () => {
+	const res = await apiClient.get("/appointments/getall");
+	return res.data;
+};
+
+export const deleteAppointmentApi = async (id: number) => {
+	const res = await apiClient.delete(`/appointments/${id}`);
+	return res.data;
+};

frontend/src/components/layout/Sidebar.tsx

@@ -15,6 +15,10 @@ export default function Sidebar() {
 			name: "Doctor",
 			path: "/doctor",
 		},
+		{
+			name: "Appointments",
+			path: "/appointment",
+		},
 		{
 			name: "Blog",
 			path: "/blog",

frontend/src/pages/Appointment.tsx

@@ -0,0 +1,216 @@
+import {useState, useEffect, useCallback} from "react";
+
+import {getAppointmentsApi, deleteAppointmentApi} from "@/api/appointment";
+import {exportToExcel} from "@/utils/exportToExcel";
+
+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 {Input} from "@/components/ui/input";
+
+import {Loader2, Trash, RefreshCw, Download} from "lucide-react";
+
+export default function AppointmentPage() {
+	const [appointments, setAppointments] = useState<any[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	const [searchText, setSearchText] = useState("");
+	const [filterDoctor, setFilterDoctor] = useState("");
+	const [filterDepartment, setFilterDepartment] = useState("");
+	const [filterDate, setFilterDate] = useState("");
+
+	const fetchAll = useCallback(async () => {
+		setLoading(true);
+		try {
+			const res = await getAppointmentsApi();
+			setAppointments(res?.data || []);
+		} catch (err) {
+			console.error(err);
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchAll();
+	}, [fetchAll]);
+
+	const filteredAppointments = appointments.filter((item) => {
+		const matchesSearch =
+			item.name?.toLowerCase().includes(searchText.toLowerCase()) ||
+			item.mobileNumber?.includes(searchText) ||
+			item.email?.toLowerCase().includes(searchText.toLowerCase());
+
+		const matchesDoctor = filterDoctor
+			? item.doctor?.name?.toLowerCase().includes(filterDoctor.toLowerCase())
+			: true;
+
+		const matchesDepartment = filterDepartment
+			? item.department?.name
+					?.toLowerCase()
+					.includes(filterDepartment.toLowerCase())
+			: true;
+
+		const matchesDate = filterDate
+			? new Date(item.date).toISOString().split("T")[0] === filterDate
+			: true;
+
+		return matchesSearch && matchesDoctor && matchesDepartment && matchesDate;
+	});
+
+	async function handleDelete(id: number) {
+		if (!confirm("Delete appointment?")) return;
+		await deleteAppointmentApi(id);
+		fetchAll();
+	}
+
+	const handleExport = () => {
+		const exportData = filteredAppointments.map((item) => ({
+			ID: item.id,
+			Name: item.name,
+			Phone: item.mobileNumber,
+			Email: item.email,
+			Doctor: item.doctor?.name,
+			Department: item.department?.name,
+			Date: new Date(item.date).toLocaleDateString(),
+			Message: item.message,
+		}));
+
+		exportToExcel(exportData, "appointments");
+	};
+
+	return (
+		<div className="p-6 space-y-6">
+			<div className="flex justify-between items-center gap-3 flex-wrap">
+				<h1 className="text-2xl font-bold">Appointments</h1>
+
+				<div className="flex flex-wrap gap-2">
+					<Input
+						placeholder="Search name / phone / email..."
+						value={searchText}
+						onChange={(e) => setSearchText(e.target.value)}
+						className="w-[220px]"
+					/>
+
+					<Input
+						placeholder="Filter Doctor"
+						value={filterDoctor}
+						onChange={(e) => setFilterDoctor(e.target.value)}
+						className="w-[180px]"
+					/>
+
+					<Input
+						placeholder="Filter Department"
+						value={filterDepartment}
+						onChange={(e) => setFilterDepartment(e.target.value)}
+						className="w-[200px]"
+					/>
+
+					<Input
+						type="date"
+						value={filterDate}
+						onChange={(e) => setFilterDate(e.target.value)}
+						className="w-[180px]"
+					/>
+
+					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+						<RefreshCw className="mr-2 h-4 w-4" />
+						Refresh
+					</Button>
+
+					<Button variant="outline" onClick={handleExport}>
+						<Download className="mr-2 h-4 w-4" />
+						Export
+					</Button>
+				</div>
+			</div>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Appointment List</CardTitle>
+				</CardHeader>
+
+				<CardContent>
+					<div className="overflow-x-auto">
+						<Table className="min-w-[700px]">
+							<TableHeader>
+								<TableRow>
+									<TableHead>ID</TableHead>
+									<TableHead>Name</TableHead>
+									<TableHead>Phone</TableHead>
+									<TableHead>Email</TableHead>
+									<TableHead>Doctor</TableHead>
+									<TableHead>Department</TableHead>
+									<TableHead>Appointment Date</TableHead>
+									<TableHead>Message</TableHead>
+									<TableHead>Generated on</TableHead>
+
+									<TableHead>Actions</TableHead>
+								</TableRow>
+							</TableHeader>
+
+							<TableBody>
+								{loading ? (
+									<TableRow>
+										<TableCell colSpan={9} className="text-center">
+											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+										</TableCell>
+									</TableRow>
+								) : filteredAppointments.length === 0 ? (
+									<TableRow>
+										<TableCell colSpan={9} className="text-center">
+											No appointments found
+										</TableCell>
+									</TableRow>
+								) : (
+									filteredAppointments.map((item) => (
+										<TableRow key={item.id}>
+											<TableCell>{item.id}</TableCell>
+											<TableCell>{item.name}</TableCell>
+											<TableCell>{item.mobileNumber}</TableCell>
+											<TableCell>{item.email}</TableCell>
+											<TableCell>{item.doctor?.name}</TableCell>
+											<TableCell>{item.department?.name}</TableCell>
+
+											{/* ✅ DATE ONLY */}
+											<TableCell>
+												{new Date(item.date).toLocaleDateString()}
+											</TableCell>
+
+											<TableCell className="max-w-[250px] whitespace-normal">
+												{item.message}
+											</TableCell>
+											<TableCell>
+												{" "}
+												{new Date(item.createdAt).toLocaleDateString()}
+											</TableCell>
+
+											<TableCell>
+												<Button
+													size="sm"
+													variant="destructive"
+													onClick={() => handleDelete(item.id)}
+												>
+													<Trash className="h-4 w-4" />
+												</Button>
+											</TableCell>
+										</TableRow>
+									))
+								)}
+							</TableBody>
+						</Table>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

frontend/src/utils/exportToExcel.ts

@@ -0,0 +1,22 @@
+import * as XLSX from "xlsx";
+import {saveAs} from "file-saver";
+
+export const exportToExcel = (data: any[], fileName: string = "data") => {
+	if (!data || data.length === 0) return;
+
+	const worksheet = XLSX.utils.json_to_sheet(data);
+
+	const workbook = XLSX.utils.book_new();
+	XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+
+	const excelBuffer = XLSX.write(workbook, {
+		bookType: "xlsx",
+		type: "array",
+	});
+
+	const blob = new Blob([excelBuffer], {
+		type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
+	});
+
+	saveAs(blob, `${fileName}.xlsx`);
+};