fix: maintain same ui across all the pages

frontend/src/pages/newsMedia.tsx

@@ -19,6 +19,7 @@ import {
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 
 import {
 	Dialog,
@@ -37,11 +38,13 @@ import {
 	Eye,
 	ChevronLeft,
 	ChevronRight,
+	Newspaper,
 } from "lucide-react";
 
 export default function NewsPage() {
 	const [news, setNews] = useState<any[]>([]);
 	const [loading, setLoading] = useState(true);
+	const [totalItems, setTotalItems] = useState(0);
 
 	const [searchText, setSearchText] = useState("");
 
@@ -66,29 +69,28 @@ export default function NewsPage() {
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
 		try {
-			const res = await getNewsApi();
+			const res = await getNewsApi(currentPage, itemsPerPage);
+
 			setNews(res?.data || []);
+			setTotalItems(res?.meta?.total || 0);
 		} catch (err) {
 			console.error(err);
 		} finally {
 			setLoading(false);
 		}
-	}, []);
+	}, [currentPage, itemsPerPage]);
 
 	useEffect(() => {
 		fetchAll();
 	}, [fetchAll]);
 
-	const filteredNews = news.filter((item) =>
-		item.Headline?.toLowerCase().includes(searchText.toLowerCase()),
+	const filteredNews = news.filter(
+		(item) =>
+			item.Headline?.toLowerCase().includes(searchText.toLowerCase()) ||
+			item.Author?.toLowerCase().includes(searchText.toLowerCase()),
 	);
 
-	const totalPages = Math.ceil(filteredNews.length / itemsPerPage);
-	const startIndex = (currentPage - 1) * itemsPerPage;
-	const paginatedData = filteredNews.slice(
-		startIndex,
-		startIndex + itemsPerPage,
-	);
+	const totalPages = Math.ceil(totalItems / itemsPerPage);
 
 	function handleChange(e: any) {
 		setForm({ ...form, [e.target.name]: e.target.value });
@@ -109,7 +111,6 @@ export default function NewsPage() {
 
 	function openEdit(item: any) {
 		setEditing(item);
-
 		setForm({
 			headline: item.Headline || "",
 			content: item.Content || "",
@@ -118,7 +119,6 @@ export default function NewsPage() {
 			date: item.Date ? item.Date.split("T")[0] : "",
 			author: item.Author || "",
 		});
-
 		setOpenModal(true);
 	}
 
@@ -149,18 +149,17 @@ export default function NewsPage() {
 
 	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 flex-col md:flex-row md:justify-between md:items-center gap-4">
+				<h1 className="text-3xl font-bold font-sans tracking-tight">
+					News Media
+				</h1>
 
-				<div className="flex gap-2 flex-wrap items-center">
+				<div className="flex flex-wrap gap-3 items-center">
 					<Input
-						placeholder="Search headline..."
+						placeholder="Filter headline..."
 						value={searchText}
-						onChange={(e) => {
-							setSearchText(e.target.value);
-							setCurrentPage(1);
-						}}
-						className="w-[250px]"
+						onChange={(e) => setSearchText(e.target.value)}
+						className="w-[250px] text-base"
 					/>
 
 					<select
@@ -169,98 +168,131 @@ export default function NewsPage() {
 							setItemsPerPage(Number(e.target.value));
 							setCurrentPage(1);
 						}}
-						className="border px-2 py-1 rounded">
+						className="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary"
+					>
 						<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" />
+					<Button
+						variant="outline"
+						onClick={fetchAll}
+						disabled={loading}
+						className="text-base"
+					>
+						<RefreshCw className="mr-2 h-5 w-5" />
 						Refresh
 					</Button>
 
-					<Button onClick={openAdd}>
-						<Plus className="mr-2 h-4 w-4" />
+					<Button onClick={openAdd} className="text-base">
+						<Plus className="mr-2 h-5 w-5" />
 						Add News
 					</Button>
 				</div>
 			</div>
 
-			<Card>
+			<Card className="shadow-sm">
 				<CardHeader>
-					<CardTitle>News List</CardTitle>
+					<CardTitle className="text-xl">News Archives</CardTitle>
 				</CardHeader>
 
-				<CardContent>
-					<div className="overflow-x-auto">
-						<Table className="min-w-[900px] table-fixed">
-							<TableHeader>
+				<CardContent className="p-0 sm:p-6 space-y-4">
+					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
+						<Table className="w-full min-w-[1000px] table-fixed border-separate border-spacing-0">
+							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<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>
+									<TableHead className="w-[80px] bg-background font-bold">
+										ID
+									</TableHead>
+									<TableHead className="w-[280px] bg-background font-bold">
+										Headline
+									</TableHead>
+									<TableHead className="w-[150px] bg-background font-bold">
+										Author
+									</TableHead>
+									<TableHead className="w-[140px] bg-background font-bold">
+										Date
+									</TableHead>
+									<TableHead className="w-[250px] bg-background font-bold">
+										Content Preview
+									</TableHead>
+									<TableHead className="w-[150px] bg-background font-bold text-right">
+										Actions
+									</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={6} className="text-center">
-											<Loader2 className="animate-spin mx-auto" />
+										<TableCell colSpan={6} className="text-center py-10">
+											<Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
 										</TableCell>
 									</TableRow>
-								) : paginatedData.length === 0 ? (
+								) : filteredNews.length === 0 ? (
 									<TableRow>
-										<TableCell colSpan={6} className="text-center">
-											No news found
+										<TableCell
+											colSpan={6}
+											className="text-center text-muted-foreground py-10 text-base"
+										>
+											No news articles found
 										</TableCell>
 									</TableRow>
 								) : (
-									paginatedData.map((item) => (
-										<TableRow key={item.Id}>
-											<TableCell>{item.Id}</TableCell>
-
-											<TableCell className="break-words whitespace-normal">
-												{item.Headline}
+									filteredNews.map((item) => (
+										<TableRow key={item.Id} className="hover:bg-muted/50">
+											<TableCell className="font-mono text-xs">
+												{item.Id}
 											</TableCell>
-
-											<TableCell>{item.Author}</TableCell>
-
 											<TableCell>
+												<div
+													className="font-semibold text-base line-clamp-2"
+													title={item.Headline}
+												>
+													{item.Headline}
+												</div>
+											</TableCell>
+											<TableCell className="text-sm font-medium">
+												{item.Author || "-"}
+											</TableCell>
+											<TableCell className="text-sm">
 												{item.Date
 													? new Date(item.Date).toLocaleDateString()
 													: "-"}
 											</TableCell>
-
-											<TableCell className="break-words whitespace-normal">
-												{item.Content}
+											<TableCell>
+												<div className="text-sm line-clamp-2 text-muted-foreground">
+													{item.Content}
+												</div>
 											</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 className="text-right">
+												<div className="flex justify-end gap-2">
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9"
+														onClick={() => openView(item)}
+													>
+														<Eye className="h-4 w-4" />
+													</Button>
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9"
+														onClick={() => openEdit(item)}
+													>
+														<Pencil className="h-4 w-4" />
+													</Button>
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9 text-destructive hover:bg-destructive/10"
+														onClick={() => handleDelete(Number(item.Id))}
+													>
+														<Trash className="h-4 w-4" />
+													</Button>
+												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -269,129 +301,197 @@ export default function NewsPage() {
 						</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>
+					{!loading && totalItems > 0 && (
+						<div className="flex items-center justify-between px-2 py-4 border-t">
+							<div className="text-sm text-muted-foreground">
+								Total <span className="font-bold">{totalItems}</span> articles
+								(Page <span className="font-bold">{currentPage}</span> of{" "}
+								{totalPages})
+							</div>
+							<div className="flex items-center gap-6">
+								<div className="text-base font-semibold">
+									Page {currentPage} of {totalPages}
+								</div>
+								<div className="flex gap-2">
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.max(prev - 1, 1))
+										}
+										disabled={currentPage === 1}
+									>
+										<ChevronLeft className="h-5 w-5" />
+									</Button>
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+										}
+										disabled={currentPage === totalPages || totalPages === 0}
+									>
+										<ChevronRight className="h-5 w-5" />
+									</Button>
+								</div>
+							</div>
 						</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">
+				<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
 					<DialogHeader>
-						<DialogTitle>{editing ? "Edit News" : "Add News"}</DialogTitle>
+						<DialogTitle className="text-2xl font-bold">
+							{editing ? "Edit News Article" : "Add New News Article"}
+						</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}
-						/>
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
+						<div className="space-y-6">
+							<h3 className="font-bold text-base border-b pb-2 text-primary">
+								Article Information
+							</h3>
+							<div className="space-y-4">
+								<div className="space-y-1">
+									<label className="text-sm font-semibold">Headline</label>
+									<Input
+										name="headline"
+										value={form.headline}
+										onChange={handleChange}
+										className="text-base"
+									/>
+								</div>
+								<div className="space-y-1">
+									<label className="text-sm font-semibold">Author</label>
+									<Input
+										name="author"
+										value={form.author}
+										onChange={handleChange}
+										className="text-base"
+									/>
+								</div>
+								<div className="space-y-1">
+									<label className="text-sm font-semibold">Publish Date</label>
+									<Input
+										type="date"
+										name="date"
+										value={form.date}
+										onChange={handleChange}
+										className="text-base"
+									/>
+								</div>
+							</div>
+							<div className="space-y-1 pt-2">
+								<label className="text-sm font-semibold">Intro Paragraph</label>
+								<Textarea
+									name="firstPara"
+									value={form.firstPara}
+									onChange={handleChange}
+									className="min-h-[140px] text-base"
+								/>
+							</div>
+						</div>
 
-						<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 className="space-y-6">
+							<h3 className="font-bold text-base border-b pb-2 text-primary">
+								Story Details
+							</h3>
+							<div className="space-y-4">
+								<div className="space-y-1">
+									<label className="text-sm font-semibold">
+										Second Paragraph
+									</label>
+									<Textarea
+										name="secondPara"
+										value={form.secondPara}
+										onChange={handleChange}
+										className="min-h-[140px] text-base"
+									/>
+								</div>
+								<div className="space-y-1">
+									<label className="text-sm font-semibold">Content</label>
+									<Textarea
+										name="content"
+										value={form.content}
+										onChange={handleChange}
+										className="min-h-[200px] text-base"
+									/>
+								</div>
+							</div>
+						</div>
 					</div>
 
-					<DialogFooter>
-						<Button variant="outline" onClick={() => setOpenModal(false)}>
+					<DialogFooter className="mt-10 pt-6 border-t">
+						<Button
+							variant="ghost"
+							onClick={() => setOpenModal(false)}
+							className="text-base"
+						>
 							Cancel
 						</Button>
-						<Button onClick={handleSubmit}>
-							{editing ? "Update" : "Create"}
+						<Button
+							onClick={handleSubmit}
+							className="px-10 text-base bg-primary text-white"
+						>
+							{editing ? "Save Changes" : "Publish Now"}
 						</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">
+				<DialogContent className="w-full !max-w-4xl max-h-[85vh] overflow-y-auto p-6">
 					<DialogHeader>
-						<DialogTitle>News Details</DialogTitle>
+						<DialogTitle className="text-2xl border-b pb-2 flex items-center gap-2">
+							<Newspaper className="h-6 w-6 text-primary" /> News Preview
+						</DialogTitle>
 					</DialogHeader>
 
 					{viewData && (
-						<div className="space-y-4 text-sm">
-							<b>Headline:</b>
-							<p>{viewData.Headline}</p>
+						<div className="space-y-6 py-4">
+							<div className="space-y-2">
+								<h2 className="text-2xl font-bold leading-tight">
+									{viewData.Headline}
+								</h2>
+								<div className="flex gap-4 text-sm text-muted-foreground font-medium italic">
+									<span>By: {viewData.Author || "Anonymous"}</span>
+									<span>•</span>
+									<span>
+										{viewData.Date
+											? new Date(viewData.Date).toLocaleDateString("en-IN", {
+													dateStyle: "long",
+												})
+											: "No Date"}
+									</span>
+								</div>
+							</div>
 
-							<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 className="space-y-5 leading-relaxed text-base">
+								<div className="bg-muted/30 p-4 rounded-lg border-l-4 border-primary">
+									<p className="whitespace-pre-line">{viewData.FirstPara}</p>
+								</div>
+								<div className="space-y-4 px-1">
+									<p className="whitespace-pre-line">{viewData.SecondPara}</p>
+									<hr />
+									<p className="whitespace-pre-line text-muted-foreground">
+										{viewData.Content}
+									</p>
+								</div>
+							</div>
 						</div>
 					)}
 
 					<DialogFooter>
-						<Button onClick={() => setViewOpen(false)}>Close</Button>
+						<Button
+							onClick={() => setViewOpen(false)}
+							className="w-full md:w-auto"
+						>
+							Close Preview
+						</Button>
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>