feat: remove delete action and add status toggle to tables

frontend/src/pages/Career.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 
-import { getCareersApi, deleteCareerApi } from "@/api/career";
-import apiClient from "@/api/client";
+import { getCareersApi, updateCareerApi, createCareerApi } from "@/api/career";
 
 import {
 	Table,
@@ -31,7 +30,6 @@ import {
 	Loader2,
 	Plus,
 	Pencil,
-	Trash,
 	RefreshCw,
 	ChevronLeft,
 	ChevronRight,
@@ -96,6 +94,18 @@ export default function CareerPage() {
 		setForm({ ...form, [e.target.name]: e.target.value });
 	}
 
+	const handleToggleStatus = async (item: any) => {
+		try {
+			await updateCareerApi(item.id, {
+				...item,
+				isActive: !item.isActive,
+			} as any);
+			fetchAll();
+		} catch (error) {
+			console.error("Failed to toggle status", error);
+		}
+	};
+
 	function openAdd() {
 		setEditing(null);
 		setForm({
@@ -131,10 +141,11 @@ export default function CareerPage() {
 	async function handleSubmit() {
 		try {
 			if (editing) {
-				await apiClient.patch(`/careers/${editing.id}`, form);
+				await updateCareerApi(editing.id, form);
 			} else {
-				await apiClient.post("/careers", form);
+				await createCareerApi(form);
 			}
+
 			setOpenModal(false);
 			fetchAll();
 		} catch (err) {
@@ -142,12 +153,6 @@ export default function CareerPage() {
 		}
 	}
 
-	async function handleDelete(id: number) {
-		if (!confirm("Delete career?")) return;
-		await deleteCareerApi(id);
-		fetchAll();
-	}
-
 	return (
 		<div className="p-6 space-y-6">
 			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
@@ -185,13 +190,13 @@ export default function CareerPage() {
 
 				<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">
+						<Table className="w-full min-w-[800px] table-fixed border-separate border-spacing-0">
 							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<TableRow>
-									<TableHead className="w-[60px] bg-background font-bold text-sm">
+									<TableHead className="w-[80px] bg-background font-bold text-sm">
 										Priority
 									</TableHead>
-									<TableHead className="w-[200px] bg-background font-bold text-sm">
+									<TableHead className="w-[250px] bg-background font-bold text-sm">
 										Post & Designation
 									</TableHead>
 									<TableHead className="w-[200px] bg-background font-bold text-sm">
@@ -200,13 +205,10 @@ export default function CareerPage() {
 									<TableHead className="w-[120px] bg-background font-bold text-sm">
 										Experience
 									</TableHead>
-									<TableHead className="w-[200px] bg-background font-bold text-sm">
-										Contact Info
+									<TableHead className="w-[80px] bg-background font-bold text-sm">
+										Status (Active)
 									</TableHead>
-									<TableHead className="w-[100px] bg-background font-bold text-sm">
-										Visibility
-									</TableHead>
-									<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
+									<TableHead className="w-[80px] bg-background font-bold text-right text-sm">
 										Actions
 									</TableHead>
 								</TableRow>
@@ -215,14 +217,14 @@ export default function CareerPage() {
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={7} className="text-center py-10">
+										<TableCell colSpan={6} className="text-center py-10">
 											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
 								) : currentItems.length === 0 ? (
 									<TableRow>
 										<TableCell
-											colSpan={7}
+											colSpan={6}
 											className="text-center text-muted-foreground py-10 text-base"
 										>
 											No careers found
@@ -251,19 +253,19 @@ export default function CareerPage() {
 												{item.experienceNeed}
 											</TableCell>
 											<TableCell>
-												<div className="text-sm font-medium">{item.email}</div>
-												<div className="text-xs text-muted-foreground">
-													{item.number}
+												<div className="flex items-center gap-2">
+													<Switch
+														checked={item.isActive}
+														onCheckedChange={() => handleToggleStatus(item)}
+													/>
+													<Badge
+														variant={item.isActive ? "default" : "secondary"}
+														className="capitalize"
+													>
+														{item.isActive ? "Active" : "Hidden"}
+													</Badge>
 												</div>
 											</TableCell>
-											<TableCell>
-												<Badge
-													variant={item.isActive ? "default" : "secondary"}
-													className="capitalize"
-												>
-													{item.isActive ? "Active" : "Hidden"}
-												</Badge>
-											</TableCell>
 
 											<TableCell className="text-right">
 												<div className="flex justify-end gap-2">
@@ -275,15 +277,6 @@ export default function CareerPage() {
 													>
 														<Pencil className="h-4 w-4" />
 													</Button>
-
-													<Button
-														size="icon"
-														variant="ghost"
-														className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
-														onClick={() => handleDelete(item.id)}
-													>
-														<Trash className="h-4 w-4" />
-													</Button>
 												</div>
 											</TableCell>
 										</TableRow>