feat: add email page

backend/src/routes/emailConfig.routes.js

@@ -13,7 +13,7 @@ const router = express.Router();
 router.get("/getAll", getEmailConfigs);
 
 router.post("/", jwtAuthMiddleware, createEmailConfig);
-router.put("/:id", jwtAuthMiddleware, updateEmailConfig);
+router.patch("/:id", jwtAuthMiddleware, updateEmailConfig);
 router.delete("/:id", jwtAuthMiddleware, deleteEmailConfig);
 
 export default router;

frontend/src/App.tsx

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

frontend/src/api/email.ts

@@ -0,0 +1,36 @@
+import apiClient from "@/api/client";
+
+export interface EmailConfig {
+	id?: number;
+	name: string;
+	email: string;
+	type: string;
+	isActive?: boolean;
+}
+
+// GET ALL
+export const getEmailConfigsApi = async () => {
+	const res = await apiClient.get("/email/getAll");
+	return res.data;
+};
+
+// CREATE
+export const createEmailConfigApi = async (data: EmailConfig) => {
+	const res = await apiClient.post("/email", data);
+	return res.data;
+};
+
+// UPDATE
+export const updateEmailConfigApi = async (
+	id: number,
+	data: Partial<EmailConfig>,
+) => {
+	const res = await apiClient.patch(`/email/${id}`, data);
+	return res.data;
+};
+
+// DELETE
+export const deleteEmailConfigApi = async (id: number) => {
+	const res = await apiClient.delete(`/email/${id}`);
+	return res.data;
+};

frontend/src/components/layout/Sidebar.tsx

@@ -19,6 +19,10 @@ export default function Sidebar() {
 			name: "Appointments",
 			path: "/appointment",
 		},
+		{
+			name: "Email",
+			path: "/email",
+		},
 		{
 			name: "Blog",
 			path: "/blog",

frontend/src/pages/email.tsx

@@ -0,0 +1,265 @@
+import {useState, useEffect, useCallback} from "react";
+
+import {
+	getEmailConfigsApi,
+	createEmailConfigApi,
+	updateEmailConfigApi,
+	deleteEmailConfigApi,
+} from "@/api/email";
+
+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 {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from "@/components/ui/dialog";
+
+import {Loader2, Plus, Pencil, Trash, RefreshCw} from "lucide-react";
+
+export default function EmailPage() {
+	const [emails, setEmails] = useState<any[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	const [openModal, setOpenModal] = useState(false);
+	const [editing, setEditing] = useState<any>(null);
+
+	const [searchText, setSearchText] = useState("");
+
+	const [form, setForm] = useState({
+		name: "",
+		email: "",
+		type: "APPOINTMENT",
+		isActive: true,
+	});
+
+	const fetchAll = useCallback(async () => {
+		setLoading(true);
+		try {
+			const res = await getEmailConfigsApi();
+			setEmails(res?.data || []);
+		} catch (err) {
+			console.error(err);
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchAll();
+	}, [fetchAll]);
+
+	const filtered = emails.filter(
+		(e) =>
+			e.email.toLowerCase().includes(searchText.toLowerCase()) ||
+			e.name.toLowerCase().includes(searchText.toLowerCase()),
+	);
+
+	function handleChange(e: any) {
+		setForm({...form, [e.target.name]: e.target.value});
+	}
+
+	function openAdd() {
+		setEditing(null);
+		setForm({
+			name: "",
+			email: "",
+			type: "APPOINTMENT",
+			isActive: true,
+		});
+		setOpenModal(true);
+	}
+
+	function openEdit(item: any) {
+		setEditing(item);
+		setForm(item);
+		setOpenModal(true);
+	}
+
+	async function handleSubmit() {
+		try {
+			if (editing) {
+				await updateEmailConfigApi(editing.id, form);
+			} else {
+				await createEmailConfigApi(form);
+			}
+
+			setOpenModal(false);
+			fetchAll();
+		} catch (err) {
+			console.error(err);
+		}
+	}
+
+	async function handleDelete(id: number) {
+		if (!confirm("Delete email config?")) return;
+		await deleteEmailConfigApi(id);
+		fetchAll();
+	}
+
+	return (
+		<div className="p-6 space-y-6">
+			<div className="flex justify-between items-center flex-wrap gap-3">
+				<h1 className="text-2xl font-bold">Email Config</h1>
+
+				<div className="flex gap-2 flex-wrap">
+					<Input
+						placeholder="Search..."
+						value={searchText}
+						onChange={(e) => setSearchText(e.target.value)}
+						className="w-[200px]"
+					/>
+
+					<Button variant="outline" onClick={fetchAll}>
+						<RefreshCw className="mr-2 h-4 w-4" />
+						Refresh
+					</Button>
+
+					<Button onClick={openAdd}>
+						<Plus className="mr-2 h-4 w-4" />
+						Add Email
+					</Button>
+				</div>
+			</div>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Email List</CardTitle>
+				</CardHeader>
+
+				<CardContent>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>ID</TableHead>
+								<TableHead>Name</TableHead>
+								<TableHead>Email</TableHead>
+								<TableHead>Type</TableHead>
+								<TableHead>Status</TableHead>
+								<TableHead>Actions</TableHead>
+							</TableRow>
+						</TableHeader>
+
+						<TableBody>
+							{loading ? (
+								<TableRow>
+									<TableCell colSpan={6} className="text-center">
+										<Loader2 className="animate-spin mx-auto" />
+									</TableCell>
+								</TableRow>
+							) : filtered.length === 0 ? (
+								<TableRow>
+									<TableCell colSpan={6} className="text-center">
+										No data
+									</TableCell>
+								</TableRow>
+							) : (
+								filtered.map((item) => (
+									<TableRow key={item.id}>
+										<TableCell>{item.id}</TableCell>
+										<TableCell>{item.name}</TableCell>
+										<TableCell>{item.email}</TableCell>
+										<TableCell>{item.type}</TableCell>
+										<TableCell>
+											{item.isActive ? "Active" : "Inactive"}
+										</TableCell>
+
+										<TableCell className="flex gap-2">
+											<Button
+												size="sm"
+												variant="outline"
+												onClick={() => openEdit(item)}
+											>
+												<Pencil className="h-4 w-4" />
+											</Button>
+
+											<Button
+												size="sm"
+												variant="destructive"
+												onClick={() => handleDelete(item.id)}
+											>
+												<Trash className="h-4 w-4" />
+											</Button>
+										</TableCell>
+									</TableRow>
+								))
+							)}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+
+			<Dialog open={openModal} onOpenChange={setOpenModal}>
+				<DialogContent>
+					<DialogHeader>
+						<DialogTitle>{editing ? "Edit Email" : "Add Email"}</DialogTitle>
+					</DialogHeader>
+
+					<div className="space-y-4">
+						<Input
+							name="name"
+							placeholder="Name"
+							value={form.name}
+							onChange={handleChange}
+						/>
+
+						<Input
+							name="email"
+							placeholder="Email"
+							value={form.email}
+							onChange={handleChange}
+						/>
+
+						<select
+							name="type"
+							value={form.type}
+							onChange={handleChange}
+							className="border rounded px-2 py-2 w-full"
+						>
+							<option value="APPOINTMENT">APPOINTMENT</option>
+							<option value="CANDIDATE">CANDIDATE</option>
+							<option value="INQUIRY">INQUIRY</option>
+						</select>
+
+						<select
+							name="isActive"
+							value={form.isActive ? "true" : "false"}
+							onChange={(e) =>
+								setForm({
+									...form,
+									isActive: e.target.value === "true",
+								})
+							}
+							className="border rounded px-2 py-2 w-full"
+						>
+							<option value="true">Active</option>
+							<option value="false">Inactive</option>
+						</select>
+					</div>
+
+					<DialogFooter>
+						<Button variant="outline" onClick={() => setOpenModal(false)}>
+							Cancel
+						</Button>
+						<Button onClick={handleSubmit}>
+							{editing ? "Update" : "Create"}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		</div>
+	);
+}