From 9abbf06fc9e1d1ebaf641cfb5deb53914378e68e Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Thu, 22 Jan 2026 14:30:17 +0800
Subject: [PATCH] fix: table agent,promo, form CRUD agent,

---
 components/dialog/galery-detail-dialog.tsx    | 43 +++++++++++---
 components/dialog/promo-dialog.tsx            | 39 ++++++++++---
 components/form/agent/agent-form.tsx          | 18 +++---
 components/form/agent/detail-agent-form.tsx   | 13 ++++-
 components/form/agent/update-agent-form.tsx   | 58 ++++++++++++-------
 .../form/product/detail-product-form.tsx      |  2 +-
 .../landing-page/retracting-sidedar.tsx       |  4 +-
 components/table/agent-table.tsx              |  2 +-
 components/table/costumer-service-table.tsx   | 10 ++--
 components/table/product-table.tsx            |  4 +-
 components/table/promotion-table.tsx          |  2 +-
 components/table/services-table.tsx           | 10 ++--
 12 files changed, 142 insertions(+), 63 deletions(-)

diff --git a/components/dialog/galery-detail-dialog.tsx b/components/dialog/galery-detail-dialog.tsx
index b7db447..4d94e4f 100644
--- a/components/dialog/galery-detail-dialog.tsx
+++ b/components/dialog/galery-detail-dialog.tsx
@@ -127,15 +127,44 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
   return (
     <>
       <Dialog open={open} onOpenChange={onClose}>
-        <DialogContent className="max-w-3xl rounded-2xl p-0 overflow-hidden">
+        <DialogContent className=" rounded-2xl p-0 overflow-hidden">
           {/* Header */}
           <div className="bg-[#1F6779] text-white px-6 py-4">
             <DialogTitle className="text-white">Detail Galeri</DialogTitle>
+            <div className="flex items-center gap-2 mt-3">
+              <span
+                className={`text-xs font-medium px-3 py-1 rounded-full ${
+                  data?.status_id === 1
+                    ? "bg-yellow-100 text-yellow-800"
+                    : data?.status_id === 2
+                      ? "bg-green-100 text-green-800"
+                      : data?.status_id === 3
+                        ? "bg-red-100 text-red-800"
+                        : "bg-gray-100 text-gray-800"
+                }`}
+              >
+                {data?.status_id === 1
+                  ? "Menunggu"
+                  : data?.status_id === 2
+                    ? "Disetujui"
+                    : data?.status_id === 3
+                      ? "Ditolak"
+                      : "Tidak Diketahui"}
+              </span>
+
+              <span className="bg-white text-[#0F6C75] text-xs font-medium px-3 py-1 rounded-full">
+                Galeri
+              </span>
+
+              {/* <span className="bg-white/20 text-white text-xs px-2 py-[2px] rounded-full">
+                {promo.position}
+              </span> */}
+            </div>
           </div>
 
-          <div className="px-6 py-3">
+          <div className=" py-3">
             {/* Images List */}
-            <div>
+            <div className="mx-2">
               <h2 className="text-2xl font-semibold text-black">
                 {data.title}
               </h2>
@@ -176,7 +205,7 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
             {/* Deskripsi */}
 
             {/* Tanggal Upload */}
-            <div>
+            <div className="mx-2">
               <p className="font-medium text-sm text-gray-700">
                 Tanggal Upload
               </p>
@@ -186,7 +215,7 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
             </div>
 
             {/* Timeline */}
-            <div>
+            <div className="mx-2">
               <h4 className="text-sm font-semibold text-gray-700 mb-3">
                 Status Timeline
               </h4>
@@ -270,7 +299,7 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
                     </Button>
 
                     <Button
-                      className=" w-[180]"
+                      className=" w-[150]"
                       variant="destructive"
                       onClick={(e) => {
                         e.stopPropagation();
@@ -284,7 +313,7 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
                       <Button
                         // variant="ghost"
                         size="sm"
-                        className="bg-green-600 hover:bg-green-700 text-white w-[180]"
+                        className="bg-green-600 hover:bg-green-700 text-white w-[150]"
                         onClick={(e) => {
                           e.stopPropagation();
                           handleApproveGalery(data.id);
diff --git a/components/dialog/promo-dialog.tsx b/components/dialog/promo-dialog.tsx
index fba1ca1..1239b6c 100644
--- a/components/dialog/promo-dialog.tsx
+++ b/components/dialog/promo-dialog.tsx
@@ -27,6 +27,7 @@ import Cookies from "js-cookie";
 import { error, loading, success } from "@/config/swal";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
+import promo from "../landing-page/promo";
 
 type PromoDetailDialogProps = {
   promoId: number | null;
@@ -187,17 +188,39 @@ export default function PromoDetailDialog({
           <div className="bg-gradient-to-r from-[#0f6c75] to-[#145f66] text-white px-6 py-5 relative">
             <DialogHeader>
               <DialogTitle className="text-white text-xl font-semibold">
-                Detail Promo
+                Detail Promoaa
               </DialogTitle>
             </DialogHeader>
 
-            {/* STATUS BADGE */}
-            {promo && (
-              <div className="mt-2 bg-white/20 text-white px-4 py-[3px] rounded-full text-xs inline-flex items-center gap-2">
-                <span className="w-2 h-2 rounded-full bg-lime-300"></span>
-                {promo.status}
-              </div>
-            )}
+            <div className="flex items-center gap-2 mt-3">
+              <span
+                className={`text-xs font-medium px-3 py-1 rounded-full ${
+                  promo?.status_id === 1
+                    ? "bg-yellow-100 text-yellow-800"
+                    : promo?.status_id === 2
+                      ? "bg-green-100 text-green-800"
+                      : promo?.status_id === 3
+                        ? "bg-red-100 text-red-800"
+                        : "bg-gray-100 text-gray-800"
+                }`}
+              >
+                {promo?.status_id === 1
+                  ? "Menunggu"
+                  : promo?.status_id === 2
+                    ? "Disetujui"
+                    : promo?.status_id === 3
+                      ? "Ditolak"
+                      : "Tidak Diketahui"}
+              </span>
+
+              <span className="bg-white text-[#0F6C75] text-xs font-medium px-3 py-1 rounded-full">
+                Promo
+              </span>
+
+              {/* <span className="bg-white/20 text-white text-xs px-2 py-[2px] rounded-full">
+                {promo.position}
+              </span> */}
+            </div>
           </div>
 
           {/* BODY */}
diff --git a/components/form/agent/agent-form.tsx b/components/form/agent/agent-form.tsx
index 51901b1..19b415d 100644
--- a/components/form/agent/agent-form.tsx
+++ b/components/form/agent/agent-form.tsx
@@ -22,9 +22,10 @@ import { UploadCloud } from "lucide-react";
 
 type AgentFormValues = {
   fullName: string;
+  job_title: string;
   position: string;
   phone: string;
-  roles: string[];
+  agent_type: string[];
   profileImage: File | null;
 };
 
@@ -40,9 +41,10 @@ export default function AddAgentForm() {
   const form = useForm<AgentFormValues>({
     defaultValues: {
       fullName: "",
+      job_title: "",
       position: "",
       phone: "",
-      roles: [],
+      agent_type: [],
       profileImage: null,
     },
   });
@@ -60,13 +62,13 @@ export default function AddAgentForm() {
   const onSubmit = async (data: AgentFormValues) => {
     try {
       const formData = new FormData();
+
       formData.append("name", data.fullName);
-      formData.append("job_title", data.position);
+      formData.append("job_title", data.job_title);
       formData.append("phone", data.phone);
 
-      data.roles.forEach((role) => {
-        formData.append("agent_type[]", role);
-      });
+      // ✅ FIX UTAMA
+      formData.append("agent_type", JSON.stringify(data.agent_type));
 
       if (file) {
         formData.append("file", file);
@@ -122,7 +124,7 @@ export default function AddAgentForm() {
 
             <FormField
               control={form.control}
-              name="position"
+              name="job_title"
               rules={{ required: true }}
               render={({ field }) => (
                 <FormItem>
@@ -169,7 +171,7 @@ export default function AddAgentForm() {
                 <FormField
                   key={role}
                   control={form.control}
-                  name="roles"
+                  name="agent_type"
                   render={({ field }) => {
                     const selected = field.value || [];
                     return (
diff --git a/components/form/agent/detail-agent-form.tsx b/components/form/agent/detail-agent-form.tsx
index e1f61cb..334f3dc 100644
--- a/components/form/agent/detail-agent-form.tsx
+++ b/components/form/agent/detail-agent-form.tsx
@@ -218,7 +218,16 @@ export default function DetailAgentForm(props: { isDetail: boolean }) {
             <div className="flex gap-6">
               {AGENT_TYPES.map((item) => (
                 <div key={item.key} className="flex items-center gap-2">
-                  <Checkbox checked={data.job_title === item.key} disabled />
+                  <Checkbox
+                    checked={
+                      Array.isArray(data.agent_type) &&
+                      data.agent_type
+                        .map((v: string) => v.toLowerCase())
+                        .includes(item.label.toLowerCase())
+                    }
+                    disabled
+                  />
+
                   <span>{item.label}</span>
                 </div>
               ))}
@@ -230,7 +239,7 @@ export default function DetailAgentForm(props: { isDetail: boolean }) {
             <Label className="mb-2 block">Foto Profile</Label>
             <div className="w-24 h-24 rounded-lg overflow-hidden border">
               <Image
-                src={data.profile_picture_url}
+                src={data?.profile_picture_url}
                 alt="Profile"
                 width={96}
                 height={96}
diff --git a/components/form/agent/update-agent-form.tsx b/components/form/agent/update-agent-form.tsx
index 3c676c5..e1aea0d 100644
--- a/components/form/agent/update-agent-form.tsx
+++ b/components/form/agent/update-agent-form.tsx
@@ -20,12 +20,13 @@ import { X } from "lucide-react";
 
 type AgentFormValues = {
   fullName: string;
+  job_title: string;
   position: string;
   phone: string;
   roles: string[];
 };
 
-const AGENT_TYPES = ["after-Sales", "sales", "spv", "branch_manager"];
+const AGENT_TYPES = ["After Sales", "Sales", "Spv", "Branch Manager"];
 
 export default function UpdateAgentForm({ id }: { id: number }) {
   const router = useRouter();
@@ -57,9 +58,9 @@ export default function UpdateAgentForm({ id }: { id: number }) {
 
         form.reset({
           fullName: agent.name,
-          position: agent.job_title,
+          job_title: agent.job_title,
           phone: agent.phone,
-          roles: agent.job_title ? [agent.job_title] : [],
+          roles: Array.isArray(agent.agent_type) ? agent.agent_type : [],
         });
 
         // ✅ FOTO DARI API
@@ -92,14 +93,23 @@ export default function UpdateAgentForm({ id }: { id: number }) {
   const onSubmit = async (data: AgentFormValues) => {
     try {
       const formData = new FormData();
+
       formData.append("name", data.fullName);
-      formData.append("job_title", data.roles[0]); // single role
+      formData.append("job_title", data.job_title);
       formData.append("phone", data.phone);
 
+      // ✅ MULTI agent_type
+      formData.append("agent_type", JSON.stringify(data.roles));
+
       if (file) {
         formData.append("file", file);
       }
 
+      // DEBUG
+      for (const pair of formData.entries()) {
+        console.log(pair[0], pair[1]);
+      }
+
       await updateAgent(id, formData);
 
       MySwal.fire({
@@ -137,12 +147,12 @@ export default function UpdateAgentForm({ id }: { id: number }) {
 
             <FormField
               control={form.control}
-              name="position"
+              name="job_title"
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Jabatan</FormLabel>
                   <FormControl>
-                    <Input {...field} readOnly />
+                    <Input {...field} />
                   </FormControl>
                 </FormItem>
               )}
@@ -171,21 +181,27 @@ export default function UpdateAgentForm({ id }: { id: number }) {
                   key={role}
                   control={form.control}
                   name="roles"
-                  render={({ field }) => (
-                    <FormItem className="flex items-center gap-2">
-                      <FormControl>
-                        <Checkbox
-                          checked={field.value?.includes(role)}
-                          onCheckedChange={(checked) =>
-                            field.onChange(checked ? [role] : [])
-                          }
-                        />
-                      </FormControl>
-                      <span className="capitalize">
-                        {role.replace("_", " ")}
-                      </span>
-                    </FormItem>
-                  )}
+                  render={({ field }) => {
+                    const selected = field.value || [];
+
+                    return (
+                      <FormItem className="flex items-center gap-2">
+                        <FormControl>
+                          <Checkbox
+                            checked={selected.includes(role)}
+                            onCheckedChange={(checked) => {
+                              const updated = checked
+                                ? [...selected, role] // ➕ tambah
+                                : selected.filter((r) => r !== role); // ➖ hapus
+
+                              field.onChange(updated);
+                            }}
+                          />
+                        </FormControl>
+                        <span>{role}</span>
+                      </FormItem>
+                    );
+                  }}
                 />
               ))}
             </div>
diff --git a/components/form/product/detail-product-form.tsx b/components/form/product/detail-product-form.tsx
index ffc36d0..c200ab7 100644
--- a/components/form/product/detail-product-form.tsx
+++ b/components/form/product/detail-product-form.tsx
@@ -365,7 +365,7 @@ export default function DetailProductForm(props: { isDetail: boolean }) {
       <Card className="w-full border-none shadow-md">
         <CardHeader>
           <CardTitle className="text-xl font-bold text-teal-900">
-            Edit Produk
+            Detail Produk
           </CardTitle>
         </CardHeader>
 
diff --git a/components/landing-page/retracting-sidedar.tsx b/components/landing-page/retracting-sidedar.tsx
index a879af2..b01ba26 100644
--- a/components/landing-page/retracting-sidedar.tsx
+++ b/components/landing-page/retracting-sidedar.tsx
@@ -245,9 +245,9 @@ const SidebarContent = ({
                 >
                   <p className="text-lg font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-white dark:text-white">
                     JAECOO{" "}
-                    <span className="text-lg font-normal">
+                    {/* <span className="text-lg font-normal">
                       {userRoleId != null ? roleLabel[userRoleId] : ""}
-                    </span>
+                    </span> */}
                   </p>
                   {/* <span className="text-xs text-slate-500">Admin Panel</span> */}
                 </motion.div>
diff --git a/components/table/agent-table.tsx b/components/table/agent-table.tsx
index f7d52ff..8b800b4 100644
--- a/components/table/agent-table.tsx
+++ b/components/table/agent-table.tsx
@@ -381,7 +381,7 @@ export default function AgentTable() {
         <div className="w-full overflow-x-auto rounded-2xl shadow-sm border border-gray-200">
           {/* Header */}
           <div className="bg-[#0F6C75] text-white  text-lg rounded-t-sm px-6 py-3">
-            Daftar Product
+            Daftar Agen
           </div>
 
           {/* Table */}
diff --git a/components/table/costumer-service-table.tsx b/components/table/costumer-service-table.tsx
index 01e1d25..fadf300 100644
--- a/components/table/costumer-service-table.tsx
+++ b/components/table/costumer-service-table.tsx
@@ -104,14 +104,14 @@ export default function CostumerServiceTable() {
     endDate: null,
   });
 
-  const [userLevelId, setUserLevelId] = useState<string | null>(null);
+  const [userRoleId, setUserRoleId] = useState<string | null>(null);
 
   const router = useRouter();
 
   // 🔹 Ambil userlevelId dari cookies
   useEffect(() => {
-    const ulne = Cookies.get("ulne"); // contoh: "3"
-    setUserLevelId(ulne ?? null);
+    const urie = Cookies.get("urie"); // contoh: "3"
+    setUserRoleId(urie ?? null);
   }, []);
 
   useEffect(() => {
@@ -320,7 +320,7 @@ export default function CostumerServiceTable() {
           return cellValue;
       }
     },
-    [article, page]
+    [article, page],
   );
 
   let typingTimer: NodeJS.Timeout;
@@ -354,7 +354,7 @@ export default function CostumerServiceTable() {
                 Sales
               </TabsTrigger>
             </TabsList>
-            {userLevelId !== "3" && (
+            {userRoleId !== "1" && (
               <Link href={"/admin/product/create"}>
                 <Button className="bg-[#1F6779] text-white w-full lg:w-fit hover:bg-[#1a9bb5] flex items-center gap-2">
                   <Plus className="h-4 w-4" />
diff --git a/components/table/product-table.tsx b/components/table/product-table.tsx
index c312174..c451700 100644
--- a/components/table/product-table.tsx
+++ b/components/table/product-table.tsx
@@ -522,7 +522,7 @@ export default function ProductTable() {
                             </Button>
                           </Link>
                         )}
-                        {userRoleId === "1" && item.status_id === 1 && (
+                        {/* {userRoleId === "1" && item.status_id === 1 && (
                           <>
                             <Button
                               variant="ghost"
@@ -543,7 +543,7 @@ export default function ProductTable() {
                               Reject
                             </Button>
                           </>
-                        )}
+                        )} */}
                         <Button
                           variant="ghost"
                           size="sm"
diff --git a/components/table/promotion-table.tsx b/components/table/promotion-table.tsx
index 089a4c2..f7791fd 100644
--- a/components/table/promotion-table.tsx
+++ b/components/table/promotion-table.tsx
@@ -383,7 +383,7 @@ export default function PromotionTable() {
         <div className="w-full overflow-x-auto rounded-2xl shadow-sm border border-gray-200">
           {/* Header */}
           <div className="bg-[#0F6C75] text-white  text-lg rounded-t-sm px-6 py-3">
-            Daftar Product
+            Daftar Promo
           </div>
 
           {/* Table */}
diff --git a/components/table/services-table.tsx b/components/table/services-table.tsx
index d591199..4c4a3a9 100644
--- a/components/table/services-table.tsx
+++ b/components/table/services-table.tsx
@@ -104,14 +104,14 @@ export default function ServicesTable() {
     endDate: null,
   });
 
-  const [userLevelId, setUserLevelId] = useState<string | null>(null);
+  const [userRoleId, setUserRoleId] = useState<string | null>(null);
 
   const router = useRouter();
 
   // 🔹 Ambil userlevelId dari cookies
   useEffect(() => {
-    const ulne = Cookies.get("ulne"); // contoh: "3"
-    setUserLevelId(ulne ?? null);
+    const urie = Cookies.get("urie"); // contoh: "3"
+    setUserRoleId(urie ?? null);
   }, []);
 
   useEffect(() => {
@@ -320,7 +320,7 @@ export default function ServicesTable() {
           return cellValue;
       }
     },
-    [article, page]
+    [article, page],
   );
 
   let typingTimer: NodeJS.Timeout;
@@ -354,7 +354,7 @@ export default function ServicesTable() {
                 After Sales
               </TabsTrigger>
             </TabsList>
-            {userLevelId !== "3" && (
+            {userRoleId !== "1" && (
               <Link href={"/admin/product/create"}>
                 <Button className="bg-[#1F6779] text-white w-full lg:w-fit hover:bg-[#1a9bb5] flex items-center gap-2">
                   <Plus className="h-4 w-4" />