feat: implement sorting and visibility changes

frontend/src/pages/Department.tsx

@@ -31,6 +31,9 @@ import {
 
 import {Input} from "@/components/ui/input";
 import {Textarea} from "@/components/ui/textarea";
+import {Switch} from "@/components/ui/switch";
+import {Label} from "@/components/ui/label";
+import {Badge} from "@/components/ui/badge";
 
 import {
 	Loader2,
@@ -52,6 +55,8 @@ interface Department {
 	para3: string;
 	facilities: string;
 	services: string;
+	isActive: boolean;
+	sortOrder: number;
 }
 
 export default function DepartmentPage() {
@@ -79,6 +84,8 @@ export default function DepartmentPage() {
 		para3: "",
 		facilities: "",
 		services: "",
+		isActive: true,
+		sortOrder: 0,
 	});
 
 	const fetchDepartments = useCallback(async () => {
@@ -122,7 +129,9 @@ export default function DepartmentPage() {
 	);
 
 	function handleChange(e: any) {
-		setForm({...form, [e.target.name]: e.target.value});
+		const value =
+			e.target.type === "number" ? Number(e.target.value) : e.target.value;
+		setForm({...form, [e.target.name]: value});
 	}
 
 	function truncate(text: string, limit = 60) {
@@ -141,13 +150,19 @@ export default function DepartmentPage() {
 			para3: "",
 			facilities: "",
 			services: "",
+			isActive: true,
+			sortOrder: 0,
 		});
 		setOpenModal(true);
 	}
 
 	function openEdit(dep: Department) {
 		setEditing(dep);
-		setForm(dep);
+		setForm({
+			...dep,
+			isActive: dep.isActive ?? true,
+			sortOrder: dep.sortOrder ?? 0,
+		});
 		setOpenModal(true);
 	}
 
@@ -226,24 +241,24 @@ export default function DepartmentPage() {
 
 				<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-[900px] table-fixed border-separate border-spacing-0">
+						<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-[100px] bg-background text-sm font-bold">
-										ID
+									<TableHead className="w-[80px] bg-background text-sm font-bold">
+										Priority
 									</TableHead>
-									<TableHead className="w-[200px] bg-background text-sm font-bold">
+									<TableHead className="w-[180px] bg-background text-sm font-bold">
 										Name
 									</TableHead>
+									<TableHead className="w-[100px] bg-background text-sm font-bold">
+										Status
+									</TableHead>
 									<TableHead className="w-[250px] bg-background text-sm font-bold">
 										Para 1
 									</TableHead>
-									<TableHead className="w-[220px] bg-background text-sm font-bold">
+									<TableHead className="w-[180px] bg-background text-sm font-bold">
 										Facilities
 									</TableHead>
-									<TableHead className="w-[220px] bg-background text-sm font-bold">
-										Services
-									</TableHead>
 									<TableHead className="w-[140px] bg-background text-right text-sm font-bold">
 										Actions
 									</TableHead>
@@ -272,8 +287,8 @@ export default function DepartmentPage() {
 											key={dep.departmentId}
 											className="hover:bg-muted/50"
 										>
-											<TableCell className="font-mono text-xs">
-												{dep.departmentId}
+											<TableCell className="font-mono text-sm">
+												{dep.sortOrder}
 											</TableCell>
 
 											<TableCell>
@@ -283,6 +298,15 @@ export default function DepartmentPage() {
 												>
 													{dep.name}
 												</div>
+												<div className="text-xs text-muted-foreground">
+													{dep.departmentId}
+												</div>
+											</TableCell>
+
+											<TableCell>
+												<Badge variant={dep.isActive ? "default" : "secondary"}>
+													{dep.isActive ? "Active" : "Hidden"}
+												</Badge>
 											</TableCell>
 
 											<TableCell>
@@ -297,12 +321,6 @@ export default function DepartmentPage() {
 												</div>
 											</TableCell>
 
-											<TableCell>
-												<div className="text-sm break-words whitespace-normal">
-													{truncate(dep.services)}
-												</div>
-											</TableCell>
-
 											<TableCell className="text-right">
 												<div className="flex justify-end gap-2">
 													<Button
@@ -450,6 +468,31 @@ export default function DepartmentPage() {
 							onChange={handleChange}
 							placeholder="Services"
 						/>
+
+						{/* Status and Priority at bottom to keep original UI flow */}
+						<div className="grid grid-cols-1 md:grid-cols-2 gap-4 border-t pt-4">
+							<div className="flex items-center justify-between p-3 border rounded-md">
+								<Label htmlFor="isActive" className="text-base cursor-pointer">
+									Active Visibility
+								</Label>
+								<Switch
+									id="isActive"
+									checked={form.isActive}
+									onCheckedChange={(val) => setForm({...form, isActive: val})}
+								/>
+							</div>
+							<div className="space-y-1">
+								<Label htmlFor="sortOrder">Sort Order (Priority)</Label>
+								<Input
+									id="sortOrder"
+									name="sortOrder"
+									type="number"
+									value={form.sortOrder}
+									onChange={handleChange}
+									placeholder="0"
+								/>
+							</div>
+						</div>
 					</div>
 
 					<DialogFooter>
@@ -470,9 +513,17 @@ export default function DepartmentPage() {
 					</DialogHeader>
 					{viewData && (
 						<div className="space-y-4 text-sm">
-							<p>
-								<b>ID:</b> {viewData.departmentId}
-							</p>
+							<div className="flex gap-4 items-center border-b pb-4">
+								<Badge variant={viewData.isActive ? "default" : "secondary"}>
+									{viewData.isActive ? "ACTIVE" : "HIDDEN"}
+								</Badge>
+								<p>
+									<b>Sort Order:</b> {viewData.sortOrder}
+								</p>
+								<p>
+									<b>ID:</b> {viewData.departmentId}
+								</p>
+							</div>
 							<p>
 								<b>Name:</b> {viewData.name}
 							</p>