fix: ui department

frontend/src/pages/Department.tsx

@@ -1,5 +1,5 @@
-import {useState, useEffect, useCallback} from "react";
-import {AxiosError} from "axios";
+import { useState, useEffect, useCallback } from "react";
+import { AxiosError } from "axios";
 
 import {
 	getDepartmentsApi,
@@ -17,8 +17,8 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
-import {Button} from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 
 import {
 	Dialog,
@@ -28,10 +28,10 @@ import {
 	DialogFooter,
 } from "@/components/ui/dialog";
 
-import {Input} from "@/components/ui/input";
-import {Textarea} from "@/components/ui/textarea";
+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();
+	const filteredDepartments = departments.filter((dep) =>
+		dep.name.toLowerCase().includes(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)
-		);
-	});
+	function handleChange(e: any) {
+		setForm({ ...form, [e.target.name]: e.target.value });
+	}
 
-	function handleChange(
-		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-	) {
-		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,10 +121,15 @@ export default function DepartmentPage() {
 		setOpenModal(true);
 	}
 
+	function openView(dep: Department) {
+		setViewData(dep);
+		setViewOpen(true);
+	}
+
 	async function handleSubmit() {
 		try {
 			if (editing) {
-				const {departmentId, ...updateData} = form;
+				const { departmentId, ...updateData } = form;
 				await updateDepartmentApi(editing.departmentId, updateData);
 			} else {
 				await createDepartmentApi(form);
@@ -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);
@@ -172,11 +167,7 @@ export default function DepartmentPage() {
 						className="w-[220px]"
 					/>
 
-					<Button
-						variant="outline"
-						onClick={fetchDepartments}
-						disabled={loading}
-					>
+					<Button onClick={fetchDepartments} disabled={loading}>
 						<RefreshCw className="mr-2 h-4 w-4" />
 						Refresh
 					</Button>
@@ -194,37 +185,36 @@ export default function DepartmentPage() {
 				</div>
 			)}
 
+			{/* TABLE */}
 			<Card>
 				<CardHeader>
 					<CardTitle>Department List</CardTitle>
 				</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 +223,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 +276,60 @@ export default function DepartmentPage() {
 				</CardContent>
 			</Card>
 
-			{/* MODAL */}
+			{/* ADD / EDIT 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,66 @@ export default function DepartmentPage() {
 						<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-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>
 	);
 }