feat: add page newMedia

backend/src/controllers/newsMedia.controller.js

@@ -4,9 +4,19 @@ import prisma from "../prisma/client.js";
 
 export const getAllNews = async (req, res) => {
 	try {
-		const news = await prisma.newsMedia.findMany({
+		const page = parseInt(req.query.page) || 1;
-			orderBy: { createdAt: "desc" },
+		const limit = parseInt(req.query.limit) || 10;
-		});
+
+		const skip = (page - 1) * limit;
+
+		const [news, total] = await Promise.all([
+			prisma.newsMedia.findMany({
+				orderBy: { createdAt: "desc" },
+				skip,
+				take: limit,
+			}),
+			prisma.newsMedia.count(),
+		]);
 
 		const response = news.map((n) => ({
 			Id: n.id.toString(),
@@ -21,6 +31,12 @@ export const getAllNews = async (req, res) => {
 		return res.status(200).json({
 			success: true,
 			data: response,
+			meta: {
+				total,
+				page,
+				limit,
+				totalPages: Math.ceil(total / limit),
+			},
 		});
 	} catch (error) {
 		console.error(error);

frontend/src/App.tsx

@@ -19,6 +19,7 @@ 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 (
@@ -42,6 +43,7 @@ export default function App() {
 							<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/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

@@ -35,6 +35,10 @@ export default function Sidebar() {
 			name: "Academics & Research",
 			path: "/academics",
 		},
+		{
+			name: "News & Media",
+			path: "/news",
+		},
 		{
 			name: "Email",
 			path: "/email",

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>
+	);
+}