feat: add pagination in appointment

Reviewed-on: #5

backend/prisma/migrations/20260325110104_add_news_media/migration.sql

@@ -0,0 +1,15 @@
+-- CreateTable
+CREATE TABLE "NewsMedia" (
+    "id" SERIAL NOT NULL,
+    "headline" TEXT NOT NULL,
+    "content" TEXT,
+    "firstPara" TEXT,
+    "secondPara" TEXT,
+    "author" TEXT,
+    "date" TIMESTAMP(3),
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "NewsMedia_pkey" PRIMARY KEY ("id")
+);

backend/prisma/schema.prisma

@@ -186,3 +186,19 @@ model EmailConfig {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 }
+
+model NewsMedia {
+  id         Int      @id @default(autoincrement())
+
+  headline   String
+  content    String?
+  firstPara  String?
+  secondPara String?
+  author     String?
+  date       DateTime?
+
+  isActive   Boolean  @default(true)
+
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+}

backend/src/app.js

@@ -13,6 +13,7 @@ import appointmentRoutes from "./routes/appointment.routes.js";
 import inquiryRoutes from "./routes/inquiry.routes.js";
 import academicsResearchRoutes from "./routes/academicsResearch.routes.js";
 import emailConfigRoutes from "./routes/emailConfig.routes.js";
+import newsMediaRoutes from "./routes/newsMedia.routes.js";
 
 dotenv.config();
 
@@ -49,6 +50,7 @@ app.use("/api/appointments", appointmentRoutes);
 app.use("/api/inquiry", inquiryRoutes);
 app.use("/api/academics", academicsResearchRoutes);
 app.use("/api/email", emailConfigRoutes);
+app.use("/api/newsMedia", newsMediaRoutes);
 
 const PORT = process.env.PORT || 3000;
 app.listen(PORT, () => {

backend/src/controllers/academicsResearch.controller.js

@@ -1,10 +1,13 @@
 import prisma from "../prisma/client.js";
+import { sendEmail } from "../utils/sendEmail.js";
+import { getEmailsByType } from "../utils/getEmailByTypes.js";
 
 // CREATE ACADEMICS & RESEARCH
 
 export const createAcademicsResearch = async (req, res) => {
 	try {
-		const {fullName, number, emailId, subject, courseName, message} = req.body;
+		const { fullName, number, emailId, subject, courseName, message } =
+			req.body;
 
 		if (!fullName || !number) {
 			return res.status(400).json({
@@ -24,6 +27,32 @@ export const createAcademicsResearch = async (req, res) => {
 			},
 		});
 
+		try {
+			const emailList = await getEmailsByType("ACADEMICS");
+
+			if (emailList && emailList.length > 0) {
+				await sendEmail({
+					to: emailList,
+					subject: "New Academics & Research Inquiry",
+					html: `
+						<h2>New Academics & Research Inquiry</h2>
+
+						<p><b>Name:</b> ${fullName}</p>
+						<p><b>Phone:</b> ${number}</p>
+						<p><b>Email:</b> ${emailId || "-"}</p>
+
+						<p><b>Course:</b> ${courseName || "-"}</p>
+						<p><b>Subject:</b> ${subject || "-"}</p>
+
+						<p><b>Message:</b></p>
+						<p>${message || "-"}</p>
+					`,
+				});
+			}
+		} catch (err) {
+			console.error("Academics email failed:", err);
+		}
+
 		res.status(200).json({
 			success: true,
 			status: 200,

backend/src/controllers/appointment.controller.js

@@ -71,19 +71,98 @@ export const createAppointment = async (req, res) => {
 
 export const getAppointments = async (req, res) => {
 	try {
+		const page = parseInt(req.query.page);
+		const limit = parseInt(req.query.limit);
+
+		const search = req.query.search || "";
+		const doctor = req.query.doctor || "";
+		const department = req.query.department || "";
+		const date = req.query.date || "";
+
+		if (!page && !limit) {
 			const appointments = await prisma.appointment.findMany({
 				include: {
 					doctor: true,
 					department: true,
 				},
-			orderBy: {
-				createdAt: "desc",
-			},
+				orderBy: { createdAt: "desc" },
 			});
 
-		res.status(200).json({
+			return res.status(200).json({
 				success: true,
 				data: appointments,
+				meta: null,
+			});
+		}
+
+		const currentPage = page || 1;
+		const currentLimit = limit || 10;
+		const skip = (currentPage - 1) * currentLimit;
+
+		const where = {
+			AND: [
+				search
+					? {
+							OR: [
+								{ name: { contains: search, mode: "insensitive" } },
+								{ mobileNumber: { contains: search } },
+								{ email: { contains: search, mode: "insensitive" } },
+							],
+						}
+					: {},
+
+				doctor
+					? {
+							doctor: {
+								name: { contains: doctor, mode: "insensitive" },
+							},
+						}
+					: {},
+
+				department
+					? {
+							department: {
+								name: { contains: department, mode: "insensitive" },
+							},
+						}
+					: {},
+
+				date
+					? {
+							date: {
+								gte: new Date(date),
+								lt: new Date(
+									new Date(date).setDate(new Date(date).getDate() + 1),
+								),
+							},
+						}
+					: {},
+			],
+		};
+
+		const [appointments, total] = await Promise.all([
+			prisma.appointment.findMany({
+				where,
+				include: {
+					doctor: true,
+					department: true,
+				},
+				orderBy: { createdAt: "desc" },
+				skip,
+				take: currentLimit,
+			}),
+			prisma.appointment.count({ where }),
+		]);
+
+		return res.status(200).json({
+			success: true,
+			data: appointments,
+			meta: {
+				total,
+				page: currentPage,
+				limit: currentLimit,
+				totalPages: Math.ceil(total / currentLimit),
+			},
 		});
 	} catch (error) {
 		console.error(error);

backend/src/controllers/newsMedia.controller.js

@@ -0,0 +1,202 @@
+import prisma from "../prisma/client.js";
+
+// GET ALL NEWS
+
+export const getAllNews = async (req, res) => {
+	try {
+		const page = parseInt(req.query.page);
+		const limit = parseInt(req.query.limit);
+
+		if (!page && !limit) {
+			const news = await prisma.newsMedia.findMany({
+				orderBy: { createdAt: "desc" },
+			});
+
+			const response = news.map((n) => ({
+				Id: n.id.toString(),
+				Headline: n.headline,
+				Content: n.content,
+				FirstPara: n.firstPara,
+				SecondPara: n.secondPara,
+				Date: n.date,
+				Author: n.author,
+			}));
+
+			return res.status(200).json({
+				success: true,
+				data: response,
+				meta: null,
+			});
+		}
+
+		const currentPage = page || 1;
+		const currentLimit = limit || 10;
+
+		const skip = (currentPage - 1) * currentLimit;
+
+		const [news, total] = await Promise.all([
+			prisma.newsMedia.findMany({
+				orderBy: { createdAt: "desc" },
+				skip,
+				take: currentLimit,
+			}),
+			prisma.newsMedia.count(),
+		]);
+
+		const response = news.map((n) => ({
+			Id: n.id.toString(),
+			Headline: n.headline,
+			Content: n.content,
+			FirstPara: n.firstPara,
+			SecondPara: n.secondPara,
+			Date: n.date,
+			Author: n.author,
+		}));
+
+		return res.status(200).json({
+			success: true,
+			data: response,
+			meta: {
+				total,
+				page: currentPage,
+				limit: currentLimit,
+				totalPages: Math.ceil(total / currentLimit),
+			},
+		});
+	} catch (error) {
+		console.error(error);
+		return res.status(500).json({
+			success: false,
+			message: "Failed to fetch news",
+		});
+	}
+};
+
+// GET NEWS BY ID
+
+export const getNewsById = async (req, res) => {
+	try {
+		const { id } = req.params;
+
+		const n = await prisma.newsMedia.findUnique({
+			where: { id: Number(id) },
+		});
+
+		if (!n) {
+			return res.status(404).json({
+				success: false,
+				message: "News not found",
+			});
+		}
+
+		const response = {
+			Id: n.id.toString(),
+			Headline: n.headline,
+			Content: n.content,
+			FirstPara: n.firstPara,
+			SecondPara: n.secondPara,
+			Date: n.date,
+			Author: n.author,
+		};
+
+		return res.status(200).json({
+			success: true,
+			data: response,
+		});
+	} catch (error) {
+		console.error(error);
+		return res.status(500).json({
+			success: false,
+			message: "Failed to fetch news",
+		});
+	}
+};
+
+// CREATE NEWS
+
+export const createNews = async (req, res) => {
+	try {
+		const { headline, content, firstPara, secondPara, date, author } = req.body;
+
+		if (!headline) {
+			return res.status(400).json({
+				success: false,
+				message: "Headline is required",
+			});
+		}
+
+		const news = await prisma.newsMedia.create({
+			data: {
+				headline,
+				content,
+				firstPara,
+				secondPara,
+				date: date ? new Date(date) : null,
+				author,
+			},
+		});
+
+		return res.status(201).json({
+			success: true,
+			message: "News created successfully",
+			data: news,
+		});
+	} catch (error) {
+		console.error(error);
+		return res.status(500).json({
+			success: false,
+			message: "Failed to create news",
+		});
+	}
+};
+
+// UPDATE NEWS
+
+export const updateNews = async (req, res) => {
+	try {
+		const { id } = req.params;
+
+		const news = await prisma.newsMedia.update({
+			where: { id: Number(id) },
+			data: {
+				...req.body,
+				date: req.body.date ? new Date(req.body.date) : undefined,
+			},
+		});
+
+		return res.status(200).json({
+			success: true,
+			message: "News updated successfully",
+			data: news,
+		});
+	} catch (error) {
+		console.error(error);
+		return res.status(500).json({
+			success: false,
+			message: "Failed to update news",
+		});
+	}
+};
+
+// DELETE NEWS
+
+export const deleteNews = async (req, res) => {
+	try {
+		const { id } = req.params;
+
+		await prisma.newsMedia.delete({
+			where: { id: Number(id) },
+		});
+
+		return res.status(200).json({
+			success: true,
+			message: "News deleted successfully",
+		});
+	} catch (error) {
+		console.error(error);
+		return res.status(500).json({
+			success: false,
+			message: "Failed to delete news",
+		});
+	}
+};

backend/src/routes/newsMedia.routes.js

@@ -0,0 +1,23 @@
+import express from "express";
+import {
+	createNews,
+	getAllNews,
+	getNewsById,
+	updateNews,
+	deleteNews,
+} from "../controllers/newsMedia.controller.js";
+
+import jwtAuthMiddleware from "../middleware/auth.js";
+
+const router = express.Router();
+
+// PUBLIC ROUTES
+router.get("/getAll", getAllNews);
+router.get("/:id", getNewsById);
+
+// PROTECTED ROUTES
+router.post("/", jwtAuthMiddleware, createNews);
+router.patch("/:id", jwtAuthMiddleware, updateNews);
+router.delete("/:id", jwtAuthMiddleware, deleteNews);
+
+export default router;

frontend/src/App.tsx

@@ -17,6 +17,9 @@ import Appointment from "./pages/Appointment";
 import EmailPage from "./pages/email";
 import CareerPage from "./pages/Career";
 import CandidatePage from "./pages/candidates";
+import InquiryPage from "./pages/inquiry";
+import AcademicsPage from "./pages/Academics";
+import NewsPage from "./pages/newsMedia";
 
 export default function App() {
 	return (
@@ -38,6 +41,9 @@ export default function App() {
 							<Route path="/email" element={<EmailPage />} />
 							<Route path="/career" element={<CareerPage />} />
 							<Route path="/candidate" element={<CandidatePage />} />
+							<Route path="/inquiry" element={<InquiryPage />} />
+							<Route path="/academics" element={<AcademicsPage />} />
+							<Route path="/news" element={<NewsPage />} />
 						</Route>
 					</Route>
 

frontend/src/api/academics.ts

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

frontend/src/api/appointment.ts

@@ -1,7 +1,22 @@
 import apiClient from "@/api/client";
 
-export const getAppointmentsApi = async () => {
-	const res = await apiClient.get("/appointments/getall");
+export const getAppointmentsApi = async (
+	page?: number,
+	limit?: number,
+	search?: string,
+	doctor?: string,
+	department?: string,
+	date?: string,
+) => {
+	let url = "/appointments/getAll";
+
+	if (page && limit) {
+		url += `?page=${page}&limit=${limit}&search=${search || ""}&doctor=${
+			doctor || ""
+		}&department=${department || ""}&date=${date || ""}`;
+	}
+
+	const res = await apiClient.get(url);
 	return res.data;
 };
 

frontend/src/api/inquiry.ts

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

frontend/src/api/newsMedia.ts

@@ -0,0 +1,23 @@
+import apiClient from "@/api/client";
+
+export const getNewsApi = async (page = 1, limit = 10) => {
+	const res = await apiClient.get(
+		`/newsMedia/getAll?page=${page}&limit=${limit}`,
+	);
+	return res.data;
+};
+
+export const createNewsApi = async (data: any) => {
+	const res = await apiClient.post("/newsMedia", data);
+	return res.data;
+};
+
+export const updateNewsApi = async (id: number, data: any) => {
+	const res = await apiClient.patch(`/newsMedia/${id}`, data);
+	return res.data;
+};
+
+export const deleteNewsApi = async (id: number) => {
+	const res = await apiClient.delete(`/newsMedia/${id}`);
+	return res.data;
+};

frontend/src/components/layout/Sidebar.tsx

@@ -27,6 +27,18 @@ export default function Sidebar() {
 			name: "Candidates",
 			path: "/candidate",
 		},
+		{
+			name: "Inquiry",
+			path: "/inquiry",
+		},
+		{
+			name: "Academics & Research",
+			path: "/academics",
+		},
+		{
+			name: "News & Media",
+			path: "/news",
+		},
 		{
 			name: "Email",
 			path: "/email",

frontend/src/pages/Academics.tsx

@@ -0,0 +1,172 @@
+import { useState, useEffect, useCallback } from "react";
+
+import { getAcademicsApi, deleteAcademicsApi } from "@/api/academics";
+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 AcademicsPage() {
+	const [records, setRecords] = useState<any[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	const [searchText, setSearchText] = useState("");
+
+	const fetchAll = useCallback(async () => {
+		setLoading(true);
+		try {
+			const res = await getAcademicsApi();
+			setRecords(res?.data || []);
+		} catch (err) {
+			console.error(err);
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchAll();
+	}, [fetchAll]);
+
+	const filteredRecords = records.filter((item) => {
+		return (
+			item.fullName?.toLowerCase().includes(searchText.toLowerCase()) ||
+			item.number?.includes(searchText) ||
+			item.emailId?.toLowerCase().includes(searchText.toLowerCase()) ||
+			item.subject?.toLowerCase().includes(searchText.toLowerCase()) ||
+			item.courseName?.toLowerCase().includes(searchText.toLowerCase())
+		);
+	});
+
+	async function handleDelete(id: number) {
+		if (!confirm("Delete record?")) return;
+		await deleteAcademicsApi(id);
+		fetchAll();
+	}
+
+	const handleExport = () => {
+		const exportData = filteredRecords.map((item) => ({
+			ID: item.id,
+			Name: item.fullName,
+			Phone: item.number,
+			Email: item.emailId,
+			Course: item.courseName,
+			Subject: item.subject,
+			Message: item.message,
+			Date: new Date(item.createdAt).toLocaleDateString(),
+		}));
+
+		exportToExcel(exportData, "academics");
+	};
+
+	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">Academics & Research</h1>
+
+				<div className="flex flex-wrap gap-2">
+					<Input
+						placeholder="Search name / phone / email / subject..."
+						value={searchText}
+						onChange={(e) => setSearchText(e.target.value)}
+						className="w-[260px]"
+					/>
+
+					<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>Academics Records</CardTitle>
+				</CardHeader>
+
+				<CardContent>
+					<div className="overflow-x-auto">
+						<Table className="min-w-[1000px]">
+							<TableHeader>
+								<TableRow>
+									<TableHead>ID</TableHead>
+									<TableHead>Name</TableHead>
+									<TableHead>Phone</TableHead>
+									<TableHead>Email</TableHead>
+									<TableHead>Course</TableHead>
+									<TableHead>Subject</TableHead>
+									<TableHead>Message</TableHead>
+									<TableHead>Date</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>
+								) : filteredRecords.length === 0 ? (
+									<TableRow>
+										<TableCell colSpan={9} className="text-center">
+											No records found
+										</TableCell>
+									</TableRow>
+								) : (
+									filteredRecords.map((item) => (
+										<TableRow key={item.id}>
+											<TableCell>{item.id}</TableCell>
+											<TableCell>{item.fullName}</TableCell>
+											<TableCell>{item.number}</TableCell>
+											<TableCell>{item.emailId}</TableCell>
+
+											<TableCell>{item.courseName}</TableCell>
+											<TableCell>{item.subject}</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/pages/Appointment.tsx

@@ -13,11 +13,17 @@ import {
 } 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";
+import {
+	Loader2,
+	Trash,
+	RefreshCw,
+	Download,
+	ChevronLeft,
+	ChevronRight,
+} from "lucide-react";
 
 export default function AppointmentPage() {
 	const [appointments, setAppointments] = useState<any[]>([]);
@@ -28,30 +34,65 @@ export default function AppointmentPage() {
 	const [filterDepartment, setFilterDepartment] = useState("");
 	const [filterDate, setFilterDate] = useState("");
 
+	const [currentPage, setCurrentPage] = useState(1);
+	const [itemsPerPage, setItemsPerPage] = useState(10);
+
+	const [meta, setMeta] = useState<any>({});
+
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
 		try {
-			const res = await getAppointmentsApi();
+			const res = await getAppointmentsApi(
+				currentPage,
+				itemsPerPage,
+				searchText,
+				filterDoctor,
+				filterDepartment,
+				filterDate,
+			);
+
 			setAppointments(res?.data || []);
+			setMeta(res?.meta || {});
 		} catch (err) {
 			console.error(err);
 		} finally {
 			setLoading(false);
 		}
-	}, []);
+	}, [
+		currentPage,
+		itemsPerPage,
+		searchText,
+		filterDoctor,
+		filterDepartment,
+		filterDate,
+	]);
 
 	useEffect(() => {
 		fetchAll();
 	}, [fetchAll]);
 
-	const filteredAppointments = appointments.filter((item) => {
+	async function handleDelete(id: number) {
+		if (!confirm("Delete appointment?")) return;
+		await deleteAppointmentApi(id);
+		fetchAll();
+	}
+
+	const handleExport = async () => {
+		try {
+			const res = await getAppointmentsApi();
+
+			let data = res?.data || [];
+
+			data = data.filter((item: any) => {
 				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())
+					? item.doctor?.name
+							?.toLowerCase()
+							.includes(filterDoctor.toLowerCase())
 					: true;
 
 				const matchesDepartment = filterDepartment
@@ -64,17 +105,12 @@ export default function AppointmentPage() {
 					? new Date(item.date).toISOString().split("T")[0] === filterDate
 					: true;
 
-		return matchesSearch && matchesDoctor && matchesDepartment && matchesDate;
+				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) => ({
+			const exportData = data.map((item: any) => ({
 				ID: item.id,
 				Name: item.name,
 				Phone: item.mobileNumber,
@@ -86,48 +122,65 @@ export default function AppointmentPage() {
 			}));
 
 			exportToExcel(exportData, "appointments");
+		} catch (err) {
+			console.error(err);
+		}
 	};
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex justify-between items-center gap-3 flex-wrap">
+			<div className="flex justify-between items-center flex-wrap gap-3">
 				<h1 className="text-2xl font-bold">Appointments</h1>
 
-				<div className="flex flex-wrap gap-2">
+				<div className="flex flex-wrap gap-2 items-center">
 					<Input
-						placeholder="Search name / phone / email..."
+						placeholder="Search..."
 						value={searchText}
-						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[220px]"
+						onChange={(e) => {
+							setSearchText(e.target.value);
+							setCurrentPage(1);
+						}}
+						className="w-[200px]"
 					/>
 
 					<Input
-						placeholder="Filter Doctor"
+						placeholder="Doctor"
 						value={filterDoctor}
 						onChange={(e) => setFilterDoctor(e.target.value)}
-						className="w-[180px]"
+						className="w-[160px]"
 					/>
 
 					<Input
-						placeholder="Filter Department"
+						placeholder="Department"
 						value={filterDepartment}
 						onChange={(e) => setFilterDepartment(e.target.value)}
-						className="w-[200px]"
+						className="w-[160px]"
 					/>
 
 					<Input
 						type="date"
 						value={filterDate}
 						onChange={(e) => setFilterDate(e.target.value)}
-						className="w-[180px]"
+						className="w-[160px]"
 					/>
 
-					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+					<select
+						value={itemsPerPage}
+						onChange={(e) => {
+							setItemsPerPage(Number(e.target.value));
+							setCurrentPage(1);
+						}}
+						className="border px-2 py-1 rounded">
+						<option value={5}>5</option>
+						<option value={10}>10</option>
+						<option value={20}>20</option>
+					</select>
+
+					<Button onClick={fetchAll}>
 						<RefreshCw className="mr-2 h-4 w-4" />
-						Refresh
 					</Button>
 
-					<Button variant="outline" onClick={handleExport}>
+					<Button onClick={handleExport}>
 						<Download className="mr-2 h-4 w-4" />
 						Export
 					</Button>
@@ -140,20 +193,15 @@ export default function AppointmentPage() {
 				</CardHeader>
 
 				<CardContent>
-					<div className="overflow-x-auto">
-						<Table className="min-w-[700px]">
+					<Table>
 						<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>Date</TableHead>
 								<TableHead>Actions</TableHead>
 							</TableRow>
 						</TableHeader>
@@ -161,45 +209,34 @@ export default function AppointmentPage() {
 						<TableBody>
 							{loading ? (
 								<TableRow>
-										<TableCell colSpan={9} className="text-center">
-											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+									<TableCell colSpan={7} className="text-center">
+										<Loader2 className="animate-spin mx-auto" />
 									</TableCell>
 								</TableRow>
-								) : filteredAppointments.length === 0 ? (
+							) : appointments.length === 0 ? (
 								<TableRow>
-										<TableCell colSpan={9} className="text-center">
+									<TableCell
+										colSpan={7}
+										className="text-center py-6 text-gray-500">
 										No appointments found
 									</TableCell>
 								</TableRow>
 							) : (
-									filteredAppointments.map((item) => (
+								appointments.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)}
-												>
+												onClick={() => handleDelete(item.id)}>
 												<Trash className="h-4 w-4" />
 											</Button>
 										</TableCell>
@@ -208,6 +245,25 @@ export default function AppointmentPage() {
 							)}
 						</TableBody>
 					</Table>
+
+					<div className="flex justify-between mt-4">
+						<p>
+							Page {meta.page || 1} of {meta.totalPages || 1}
+						</p>
+
+						<div className="flex gap-2">
+							<Button
+								disabled={currentPage === 1}
+								onClick={() => setCurrentPage((p) => p - 1)}>
+								<ChevronLeft />
+							</Button>
+
+							<Button
+								disabled={currentPage === meta.totalPages}
+								onClick={() => setCurrentPage((p) => p + 1)}>
+								<ChevronRight />
+							</Button>
+						</div>
 					</div>
 				</CardContent>
 			</Card>

frontend/src/pages/Department.tsx

@@ -31,7 +31,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 
-import {Loader2, RefreshCw, Plus, Pencil, Trash} from "lucide-react";
+import { Loader2, RefreshCw, Plus, Pencil, Trash, Eye } from "lucide-react";
 
 interface Department {
 	departmentId: string;
@@ -51,6 +51,9 @@ export default function DepartmentPage() {
 	const [openModal, setOpenModal] = useState(false);
 	const [editing, setEditing] = useState<Department | null>(null);
 
+	const [viewOpen, setViewOpen] = useState(false);
+	const [viewData, setViewData] = useState<Department | null>(null);
+
 	const [searchText, setSearchText] = useState("");
 
 	const [form, setForm] = useState<Department>({
@@ -85,32 +88,21 @@ export default function DepartmentPage() {
 		fetchDepartments();
 	}, [fetchDepartments]);
 
-	const filteredDepartments = departments.filter((dep) => {
-		const text = searchText.toLowerCase();
-
-		return (
-			dep.name.toLowerCase().includes(text) ||
-			dep.departmentId.toLowerCase().includes(text) ||
-			dep.para1.toLowerCase().includes(text) ||
-			dep.para2.toLowerCase().includes(text) ||
-			dep.para3.toLowerCase().includes(text) ||
-			dep.facilities.toLowerCase().includes(text) ||
-			dep.services.toLowerCase().includes(text)
+	const filteredDepartments = departments.filter((dep) =>
+		dep.name.toLowerCase().includes(searchText.toLowerCase()),
 	);
-	});
 
-	function handleChange(
-		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-	) {
-		setForm({
-			...form,
-			[e.target.name]: e.target.value,
-		});
+	function handleChange(e: any) {
+		setForm({ ...form, [e.target.name]: e.target.value });
+	}
+
+	function truncate(text: string, limit = 60) {
+		if (!text) return "-";
+		return text.length > limit ? text.substring(0, limit) + "..." : text;
 	}
 
 	function openAdd() {
 		setEditing(null);
-
 		setForm({
 			departmentId: "",
 			name: "",
@@ -120,7 +112,6 @@ export default function DepartmentPage() {
 			facilities: "",
 			services: "",
 		});
-
 		setOpenModal(true);
 	}
 
@@ -130,6 +121,11 @@ export default function DepartmentPage() {
 		setOpenModal(true);
 	}
 
+	function openView(dep: Department) {
+		setViewData(dep);
+		setViewOpen(true);
+	}
+
 	async function handleSubmit() {
 		try {
 			if (editing) {
@@ -146,12 +142,11 @@ export default function DepartmentPage() {
 		}
 	}
 
-	async function handleDelete(departmentId: string) {
-		const confirmDelete = confirm("Delete this department?");
-		if (!confirmDelete) return;
+	async function handleDelete(id: string) {
+		if (!confirm("Delete this department?")) return;
 
 		try {
-			await deleteDepartmentApi(departmentId);
+			await deleteDepartmentApi(id);
 			fetchDepartments();
 		} catch (error) {
 			console.error(error);
@@ -160,7 +155,6 @@ export default function DepartmentPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			{/* HEADER */}
 			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-3">
 				<h1 className="text-2xl font-bold">Departments</h1>
 
@@ -175,8 +169,7 @@ export default function DepartmentPage() {
 					<Button
 						variant="outline"
 						onClick={fetchDepartments}
-						disabled={loading}
-					>
+						disabled={loading}>
 						<RefreshCw className="mr-2 h-4 w-4" />
 						Refresh
 					</Button>
@@ -200,31 +193,29 @@ export default function DepartmentPage() {
 				</CardHeader>
 
 				<CardContent>
-					<div className="border rounded-md overflow-x-auto max-w-full">
-						<Table>
+					<div className="border rounded-md max-h-[500px] overflow-y-auto">
+						<Table className="w-full table-fixed">
 							<TableHeader>
 								<TableRow>
-									<TableHead>ID</TableHead>
-									<TableHead>Name</TableHead>
-									<TableHead>Para1</TableHead>
-									<TableHead>Para2</TableHead>
-									<TableHead>Para3</TableHead>
-									<TableHead>Facilities</TableHead>
-									<TableHead>Services</TableHead>
-									<TableHead>Actions</TableHead>
+									<TableHead className="w-[80px]">ID</TableHead>
+									<TableHead className="w-[180px]">Name</TableHead>
+									<TableHead className="w-[250px]">Para1</TableHead>
+									<TableHead className="w-[220px]">Facilities</TableHead>
+									<TableHead className="w-[220px]">Services</TableHead>
+									<TableHead className="w-[120px]">Actions</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={8} className="text-center">
+										<TableCell colSpan={6} className="text-center">
 											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
 								) : filteredDepartments.length === 0 ? (
 									<TableRow>
-										<TableCell colSpan={8} className="text-center">
+										<TableCell colSpan={6} className="text-center">
 											No departments found
 										</TableCell>
 									</TableRow>
@@ -233,42 +224,47 @@ export default function DepartmentPage() {
 										<TableRow key={dep.departmentId}>
 											<TableCell>{dep.departmentId}</TableCell>
 
-											<TableCell>{dep.name}</TableCell>
-
-											<TableCell className="max-w-[300px] whitespace-normal break-words">
-												{dep.para1}
+											<TableCell>
+												<div className="break-words">{dep.name}</div>
 											</TableCell>
 
-											<TableCell className="max-w-[300px] whitespace-normal break-words">
-												{dep.para2}
+											<TableCell>
+												<div className="break-words whitespace-normal">
+													{truncate(dep.para1)}
+												</div>
 											</TableCell>
 
-											<TableCell className="max-w-[300px] whitespace-normal break-words">
-												{dep.para3}
+											<TableCell>
+												<div className="break-words whitespace-normal">
+													{truncate(dep.facilities)}
+												</div>
 											</TableCell>
 
-											<TableCell className="max-w-[300px] whitespace-normal break-words">
-												{dep.facilities}
+											<TableCell>
+												<div className="break-words whitespace-normal">
+													{truncate(dep.services)}
+												</div>
 											</TableCell>
 
-											<TableCell className="max-w-[300px] whitespace-normal break-words">
-												{dep.services}
-											</TableCell>
-
-											<TableCell className="flex gap-2">
+											<TableCell className="flex gap-2 whitespace-nowrap">
 												<Button
 													size="sm"
 													variant="outline"
-													onClick={() => openEdit(dep)}
-												>
+													onClick={() => openView(dep)}>
+													<Eye className="h-4 w-4" />
+												</Button>
+
+												<Button
+													size="sm"
+													variant="outline"
+													onClick={() => openEdit(dep)}>
 													<Pencil className="h-4 w-4" />
 												</Button>
 
 												<Button
 													size="sm"
 													variant="destructive"
-													onClick={() => handleDelete(dep.departmentId)}
-												>
+													onClick={() => handleDelete(dep.departmentId)}>
 													<Trash className="h-4 w-4" />
 												</Button>
 											</TableCell>
@@ -281,64 +277,59 @@ export default function DepartmentPage() {
 				</CardContent>
 			</Card>
 
-			{/* MODAL */}
 			<Dialog open={openModal} onOpenChange={setOpenModal}>
-				<DialogContent className="max-w-4xl">
+				<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
 					<DialogHeader>
 						<DialogTitle>
 							{editing ? "Edit Department" : "Add Department"}
 						</DialogTitle>
 					</DialogHeader>
 
-					<div className="space-y-4 max-h-[70vh] overflow-y-auto pr-2">
+					<div className="space-y-4">
 						<Input
 							name="departmentId"
-							placeholder="Department ID"
 							value={form.departmentId}
 							onChange={handleChange}
 							disabled={!!editing}
+							placeholder="Department ID"
 						/>
 
 						<Input
 							name="name"
-							placeholder="Department Name"
 							value={form.name}
 							onChange={handleChange}
+							placeholder="Department Name"
 						/>
 
 						<Textarea
 							name="para1"
-							placeholder="Paragraph 1"
 							value={form.para1}
 							onChange={handleChange}
+							placeholder="Para1"
 						/>
-
 						<Textarea
 							name="para2"
-							placeholder="Paragraph 2"
 							value={form.para2}
 							onChange={handleChange}
+							placeholder="Para2"
 						/>
-
 						<Textarea
 							name="para3"
-							placeholder="Paragraph 3"
 							value={form.para3}
 							onChange={handleChange}
+							placeholder="Para3"
 						/>
-
 						<Textarea
 							name="facilities"
-							placeholder="Facilities"
 							value={form.facilities}
 							onChange={handleChange}
+							placeholder="Facilities"
 						/>
-
 						<Textarea
 							name="services"
-							placeholder="Services"
 							value={form.services}
 							onChange={handleChange}
+							placeholder="Services"
 						/>
 					</div>
 
@@ -346,13 +337,65 @@ export default function DepartmentPage() {
 						<Button variant="outline" onClick={() => setOpenModal(false)}>
 							Cancel
 						</Button>
-
 						<Button onClick={handleSubmit}>
 							{editing ? "Update" : "Create"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>
+
+			<Dialog open={viewOpen} onOpenChange={setViewOpen}>
+				<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
+					{" "}
+					<DialogHeader>
+						<DialogTitle>Department Details</DialogTitle>
+					</DialogHeader>
+					{viewData && (
+						<div className="space-y-4 text-sm">
+							<p>
+								<b>ID:</b> {viewData.departmentId}
+							</p>
+
+							<p>
+								<b>Name:</b> {viewData.name}
+							</p>
+
+							<p>
+								<b>Para1:</b>
+								<br />
+								{viewData.para1}
+							</p>
+
+							<p>
+								<b>Para2:</b>
+								<br />
+								{viewData.para2}
+							</p>
+
+							<p>
+								<b>Para3:</b>
+								<br />
+								{viewData.para3}
+							</p>
+
+							<p>
+								<b>Facilities:</b>
+								<br />
+								{viewData.facilities}
+							</p>
+
+							<p>
+								<b>Services:</b>
+								<br />
+								{viewData.services}
+							</p>
+						</div>
+					)}
+					<DialogFooter>
+						<Button onClick={() => setViewOpen(false)}>Close</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
 		</div>
 	);
 }

frontend/src/pages/email.tsx

@@ -181,16 +181,14 @@ export default function EmailPage() {
 											<Button
 												size="sm"
 												variant="outline"
-												onClick={() => openEdit(item)}
-											>
+												onClick={() => openEdit(item)}>
 												<Pencil className="h-4 w-4" />
 											</Button>
 
 											<Button
 												size="sm"
 												variant="destructive"
-												onClick={() => handleDelete(item.id)}
-											>
+												onClick={() => handleDelete(item.id)}>
 												<Trash className="h-4 w-4" />
 											</Button>
 										</TableCell>
@@ -227,11 +225,10 @@ export default function EmailPage() {
 							name="type"
 							value={form.type}
 							onChange={handleChange}
-							className="border rounded px-2 py-2 w-full"
-						>
+							className="border rounded px-2 py-2 w-full">
 							<option value="APPOINTMENT">APPOINTMENT</option>
 							<option value="CANDIDATE">CANDIDATE</option>
-							<option value="INQUIRY">INQUIRY</option>
+							<option value="ACADEMICS">ACADEMICS</option>
 						</select>
 
 						<select
@@ -243,8 +240,7 @@ export default function EmailPage() {
 									isActive: e.target.value === "true",
 								})
 							}
-							className="border rounded px-2 py-2 w-full"
-						>
+							className="border rounded px-2 py-2 w-full">
 							<option value="true">Active</option>
 							<option value="false">Inactive</option>
 						</select>

frontend/src/pages/inquiry.tsx

@@ -0,0 +1,167 @@
+import { useState, useEffect, useCallback } from "react";
+
+import { getInquiriesApi, deleteInquiryApi } from "@/api/inquiry";
+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 InquiryPage() {
+	const [inquiries, setInquiries] = useState<any[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	const [searchText, setSearchText] = useState("");
+
+	const fetchAll = useCallback(async () => {
+		setLoading(true);
+		try {
+			const res = await getInquiriesApi();
+			setInquiries(res?.data || []);
+		} catch (err) {
+			console.error(err);
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchAll();
+	}, [fetchAll]);
+
+	const filteredInquiries = inquiries.filter((item) => {
+		return (
+			item.fullName?.toLowerCase().includes(searchText.toLowerCase()) ||
+			item.number?.includes(searchText) ||
+			item.emailId?.toLowerCase().includes(searchText.toLowerCase()) ||
+			item.subject?.toLowerCase().includes(searchText.toLowerCase())
+		);
+	});
+
+	async function handleDelete(id: number) {
+		if (!confirm("Delete inquiry?")) return;
+		await deleteInquiryApi(id);
+		fetchAll();
+	}
+
+	const handleExport = () => {
+		const exportData = filteredInquiries.map((item) => ({
+			ID: item.id,
+			Name: item.fullName,
+			Phone: item.number,
+			Email: item.emailId,
+			Subject: item.subject,
+			Message: item.message,
+			Date: new Date(item.createdAt).toLocaleDateString(),
+		}));
+
+		exportToExcel(exportData, "inquiries");
+	};
+
+	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">Inquiries</h1>
+
+				<div className="flex flex-wrap gap-2">
+					<Input
+						placeholder="Search name / phone / email / subject..."
+						value={searchText}
+						onChange={(e) => setSearchText(e.target.value)}
+						className="w-[260px]"
+					/>
+
+					<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>Inquiry List</CardTitle>
+				</CardHeader>
+
+				<CardContent>
+					<div className="overflow-x-auto">
+						<Table className="min-w-[900px]">
+							<TableHeader>
+								<TableRow>
+									<TableHead>ID</TableHead>
+									<TableHead>Name</TableHead>
+									<TableHead>Phone</TableHead>
+									<TableHead>Email</TableHead>
+									<TableHead>Subject</TableHead>
+									<TableHead>Message</TableHead>
+									<TableHead>Date</TableHead>
+									<TableHead>Actions</TableHead>
+								</TableRow>
+							</TableHeader>
+
+							<TableBody>
+								{loading ? (
+									<TableRow>
+										<TableCell colSpan={8} className="text-center">
+											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+										</TableCell>
+									</TableRow>
+								) : filteredInquiries.length === 0 ? (
+									<TableRow>
+										<TableCell colSpan={8} className="text-center">
+											No inquiries found
+										</TableCell>
+									</TableRow>
+								) : (
+									filteredInquiries.map((item) => (
+										<TableRow key={item.id}>
+											<TableCell>{item.id}</TableCell>
+											<TableCell>{item.fullName}</TableCell>
+											<TableCell>{item.number}</TableCell>
+											<TableCell>{item.emailId}</TableCell>
+											<TableCell>{item.subject}</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/pages/newsMedia.tsx

@@ -0,0 +1,400 @@
+import { useState, useEffect, useCallback } from "react";
+
+import {
+	getNewsApi,
+	createNewsApi,
+	updateNewsApi,
+	deleteNewsApi,
+} from "@/api/newsMedia";
+
+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,
+	Eye,
+	ChevronLeft,
+	ChevronRight,
+} from "lucide-react";
+
+export default function NewsPage() {
+	const [news, setNews] = useState<any[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	const [searchText, setSearchText] = useState("");
+
+	const [openModal, setOpenModal] = useState(false);
+	const [editing, setEditing] = useState<any>(null);
+
+	const [viewOpen, setViewOpen] = useState(false);
+	const [viewData, setViewData] = useState<any>(null);
+
+	const [currentPage, setCurrentPage] = useState(1);
+	const [itemsPerPage, setItemsPerPage] = useState(10);
+
+	const [form, setForm] = useState({
+		headline: "",
+		content: "",
+		firstPara: "",
+		secondPara: "",
+		date: "",
+		author: "",
+	});
+
+	const fetchAll = useCallback(async () => {
+		setLoading(true);
+		try {
+			const res = await getNewsApi();
+			setNews(res?.data || []);
+		} catch (err) {
+			console.error(err);
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchAll();
+	}, [fetchAll]);
+
+	const filteredNews = news.filter((item) =>
+		item.Headline?.toLowerCase().includes(searchText.toLowerCase()),
+	);
+
+	const totalPages = Math.ceil(filteredNews.length / itemsPerPage);
+	const startIndex = (currentPage - 1) * itemsPerPage;
+	const paginatedData = filteredNews.slice(
+		startIndex,
+		startIndex + itemsPerPage,
+	);
+
+	function handleChange(e: any) {
+		setForm({ ...form, [e.target.name]: e.target.value });
+	}
+
+	function openAdd() {
+		setEditing(null);
+		setForm({
+			headline: "",
+			content: "",
+			firstPara: "",
+			secondPara: "",
+			date: "",
+			author: "",
+		});
+		setOpenModal(true);
+	}
+
+	function openEdit(item: any) {
+		setEditing(item);
+
+		setForm({
+			headline: item.Headline || "",
+			content: item.Content || "",
+			firstPara: item.FirstPara || "",
+			secondPara: item.SecondPara || "",
+			date: item.Date ? item.Date.split("T")[0] : "",
+			author: item.Author || "",
+		});
+
+		setOpenModal(true);
+	}
+
+	function openView(item: any) {
+		setViewData(item);
+		setViewOpen(true);
+	}
+
+	async function handleSubmit() {
+		try {
+			if (editing) {
+				await updateNewsApi(editing.Id, form);
+			} else {
+				await createNewsApi(form);
+			}
+			setOpenModal(false);
+			fetchAll();
+		} catch (err) {
+			console.error(err);
+		}
+	}
+
+	async function handleDelete(id: number) {
+		if (!confirm("Delete news?")) return;
+		await deleteNewsApi(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">News Media</h1>
+
+				<div className="flex gap-2 flex-wrap items-center">
+					<Input
+						placeholder="Search headline..."
+						value={searchText}
+						onChange={(e) => {
+							setSearchText(e.target.value);
+							setCurrentPage(1);
+						}}
+						className="w-[250px]"
+					/>
+
+					<select
+						value={itemsPerPage}
+						onChange={(e) => {
+							setItemsPerPage(Number(e.target.value));
+							setCurrentPage(1);
+						}}
+						className="border px-2 py-1 rounded">
+						<option value={5}>5 / page</option>
+						<option value={10}>10 / page</option>
+						<option value={20}>20 / page</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 News
+					</Button>
+				</div>
+			</div>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>News List</CardTitle>
+				</CardHeader>
+
+				<CardContent>
+					<div className="overflow-x-auto">
+						<Table className="min-w-[900px] table-fixed">
+							<TableHeader>
+								<TableRow>
+									<TableHead className="w-[60px]">ID</TableHead>
+									<TableHead className="w-[220px]">Headline</TableHead>
+									<TableHead className="w-[120px]">Author</TableHead>
+									<TableHead className="w-[120px]">Date</TableHead>
+									<TableHead className="w-[260px]">Content</TableHead>
+									<TableHead className="w-[150px]">Actions</TableHead>
+								</TableRow>
+							</TableHeader>
+
+							<TableBody>
+								{loading ? (
+									<TableRow>
+										<TableCell colSpan={6} className="text-center">
+											<Loader2 className="animate-spin mx-auto" />
+										</TableCell>
+									</TableRow>
+								) : paginatedData.length === 0 ? (
+									<TableRow>
+										<TableCell colSpan={6} className="text-center">
+											No news found
+										</TableCell>
+									</TableRow>
+								) : (
+									paginatedData.map((item) => (
+										<TableRow key={item.Id}>
+											<TableCell>{item.Id}</TableCell>
+
+											<TableCell className="break-words whitespace-normal">
+												{item.Headline}
+											</TableCell>
+
+											<TableCell>{item.Author}</TableCell>
+
+											<TableCell>
+												{item.Date
+													? new Date(item.Date).toLocaleDateString()
+													: "-"}
+											</TableCell>
+
+											<TableCell className="break-words whitespace-normal">
+												{item.Content}
+											</TableCell>
+
+											<TableCell className="flex gap-2">
+												<Button
+													size="sm"
+													variant="outline"
+													onClick={() => openView(item)}>
+													<Eye className="h-4 w-4" />
+												</Button>
+
+												<Button
+													size="sm"
+													variant="outline"
+													onClick={() => openEdit(item)}>
+													<Pencil className="h-4 w-4" />
+												</Button>
+
+												<Button
+													size="sm"
+													variant="destructive"
+													onClick={() => handleDelete(Number(item.Id))}>
+													<Trash className="h-4 w-4" />
+												</Button>
+											</TableCell>
+										</TableRow>
+									))
+								)}
+							</TableBody>
+						</Table>
+					</div>
+
+					{/* PAGINATION */}
+					<div className="flex justify-between items-center mt-4">
+						<p className="text-sm">
+							Page {currentPage} of {totalPages}
+						</p>
+
+						<div className="flex gap-2">
+							<Button
+								variant="outline"
+								size="sm"
+								disabled={currentPage === 1}
+								onClick={() => setCurrentPage((p) => p - 1)}>
+								<ChevronLeft className="h-4 w-4" />
+							</Button>
+
+							<Button
+								variant="outline"
+								size="sm"
+								disabled={currentPage === totalPages}
+								onClick={() => setCurrentPage((p) => p + 1)}>
+								<ChevronRight className="h-4 w-4" />
+							</Button>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* CREATE / EDIT MODAL */}
+			<Dialog open={openModal} onOpenChange={setOpenModal}>
+				<DialogContent className="w-[95vw] max-w-none max-h-[90vh] overflow-y-auto">
+					<DialogHeader>
+						<DialogTitle>{editing ? "Edit News" : "Add News"}</DialogTitle>
+					</DialogHeader>
+
+					<div className="space-y-3">
+						<Input
+							name="headline"
+							placeholder="Headline"
+							value={form.headline}
+							onChange={handleChange}
+						/>
+						<Input
+							name="author"
+							placeholder="Author"
+							value={form.author}
+							onChange={handleChange}
+						/>
+						<Input
+							type="date"
+							name="date"
+							value={form.date}
+							onChange={handleChange}
+						/>
+
+						<textarea
+							name="firstPara"
+							placeholder="First Paragraph"
+							value={form.firstPara}
+							onChange={handleChange}
+							className="border rounded p-2 w-full min-h-[100px]"
+						/>
+						<textarea
+							name="secondPara"
+							placeholder="Second Paragraph"
+							value={form.secondPara}
+							onChange={handleChange}
+							className="border rounded p-2 w-full min-h-[100px]"
+						/>
+						<textarea
+							name="content"
+							placeholder="Content"
+							value={form.content}
+							onChange={handleChange}
+							className="border rounded p-2 w-full min-h-[150px]"
+						/>
+					</div>
+
+					<DialogFooter>
+						<Button variant="outline" onClick={() => setOpenModal(false)}>
+							Cancel
+						</Button>
+						<Button onClick={handleSubmit}>
+							{editing ? "Update" : "Create"}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+
+			{/* VIEW MODAL */}
+			<Dialog open={viewOpen} onOpenChange={setViewOpen}>
+				<DialogContent className="w-[95vw] max-w-none max-h-[90vh] overflow-y-auto p-6">
+					<DialogHeader>
+						<DialogTitle>News Details</DialogTitle>
+					</DialogHeader>
+
+					{viewData && (
+						<div className="space-y-4 text-sm">
+							<b>Headline:</b>
+							<p>{viewData.Headline}</p>
+
+							<b>Author:</b>
+							<p>{viewData.Author}</p>
+
+							<b>Date:</b>
+							<p>
+								{viewData.Date
+									? new Date(viewData.Date).toLocaleDateString()
+									: "-"}
+							</p>
+
+							<b>First Para:</b>
+							<p className="whitespace-pre-line">{viewData.FirstPara}</p>
+
+							<b>Second Para:</b>
+							<p className="whitespace-pre-line">{viewData.SecondPara}</p>
+
+							<b>Content:</b>
+							<p className="whitespace-pre-line">{viewData.Content}</p>
+						</div>
+					)}
+
+					<DialogFooter>
+						<Button onClick={() => setViewOpen(false)}>Close</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		</div>
+	);
+}