Merge pull request 'fix-department-ui' (#5) from fix-department-ui into dev

Reviewed-on: #5

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