feat: implement sorting and visibility changes

frontend/src/pages/Career.tsx

@@ -24,6 +24,8 @@ import {
 
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
 
 import {
 	Loader2,
@@ -55,6 +57,8 @@ export default function CareerPage() {
 		email: "",
 		number: "",
 		status: "new",
+		isActive: true,
+		sortOrder: 0,
 	});
 
 	const fetchAll = useCallback(async () => {
@@ -102,6 +106,8 @@ export default function CareerPage() {
 			email: "",
 			number: "",
 			status: "new",
+			isActive: true,
+			sortOrder: 0,
 		});
 		setOpenModal(true);
 	}
@@ -116,6 +122,8 @@ export default function CareerPage() {
 			email: item.email || "",
 			number: item.number || "",
 			status: item.status || "new",
+			isActive: item.isActive ?? true,
+			sortOrder: item.sortOrder ?? 0,
 		});
 		setOpenModal(true);
 	}
@@ -181,7 +189,7 @@ export default function CareerPage() {
 							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<TableRow>
 									<TableHead className="w-[60px] bg-background font-bold text-sm">
-										ID
+										Priority
 									</TableHead>
 									<TableHead className="w-[200px] bg-background font-bold text-sm">
 										Post & Designation
@@ -196,7 +204,7 @@ export default function CareerPage() {
 										Contact Info
 									</TableHead>
 									<TableHead className="w-[100px] bg-background font-bold text-sm">
-										Status
+										Visibility
 									</TableHead>
 									<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
 										Actions
@@ -224,7 +232,7 @@ export default function CareerPage() {
 									currentItems.map((item) => (
 										<TableRow key={item.id} className="hover:bg-muted/50">
 											<TableCell className="font-mono text-xs">
-												{item.id}
+												{item.sortOrder}
 											</TableCell>
 											<TableCell>
 												<div className="font-semibold text-base truncate">
@@ -250,12 +258,10 @@ export default function CareerPage() {
 											</TableCell>
 											<TableCell>
 												<Badge
-													variant={
-														item.status === "active" ? "default" : "secondary"
-													}
+													variant={item.isActive ? "default" : "secondary"}
 													className="capitalize"
 												>
-													{item.status}
+													{item.isActive ? "Active" : "Hidden"}
 												</Badge>
 											</TableCell>
 
@@ -393,6 +399,30 @@ export default function CareerPage() {
 								onChange={handleChange}
 								className="text-base"
 							/>
+							<div className="flex items-center justify-between p-2 border rounded-md">
+								<Label htmlFor="isActive" className="text-base">
+									Active
+								</Label>
+								<Switch
+									id="isActive"
+									checked={form.isActive}
+									onCheckedChange={(val) => setForm({ ...form, isActive: val })}
+								/>
+							</div>
+							<div className="space-y-1">
+								<Label htmlFor="sortOrder" className="text-sm">
+									Sort Priority (Lower numbers show first)
+								</Label>
+								<Input
+									id="sortOrder"
+									name="sortOrder"
+									type="number"
+									placeholder="Sort Order"
+									value={form.sortOrder}
+									onChange={handleChange}
+									className="text-base"
+								/>
+							</div>
 						</div>
 					</div>