fix: table agent,promo, form CRUD agent,

components/dialog/galery-detail-dialog.tsx

@@ -126,12 +126,40 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
 
   return (
     <>
-      <div>
       <Dialog open={open} onOpenChange={onClose}>
         <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=" py-3">
@@ -322,7 +350,6 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
           </DialogFooter> */}
         </DialogContent>
       </Dialog>
-      </div>
       {openApproverHistory && (
         <div
           className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"

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 */}
+            <div className="flex items-center gap-2 mt-3">
-            {promo && (
+              <span
-              <div className="mt-2 bg-white/20 text-white px-4 py-[3px] rounded-full text-xs inline-flex items-center gap-2">
+                className={`text-xs font-medium px-3 py-1 rounded-full ${
-                <span className="w-2 h-2 rounded-full bg-lime-300"></span>
+                  promo?.status_id === 1
-                {promo.status}
+                    ? "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 */}

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) => {
+      // ✅ FIX UTAMA
-        formData.append("agent_type[]", role);
+      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 (

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}

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 }) => (
+                  render={({ field }) => {
+                    const selected = field.value || [];
+
+                    return (
                       <FormItem className="flex items-center gap-2">
                         <FormControl>
                           <Checkbox
-                          checked={field.value?.includes(role)}
+                            checked={selected.includes(role)}
-                          onCheckedChange={(checked) =>
+                            onCheckedChange={(checked) => {
-                            field.onChange(checked ? [role] : [])
+                              const updated = checked
-                          }
+                                ? [...selected, role] // ➕ tambah
+                                : selected.filter((r) => r !== role); // ➖ hapus
+
+                              field.onChange(updated);
+                            }}
                           />
                         </FormControl>
-                      <span className="capitalize">
+                        <span>{role}</span>
-                        {role.replace("_", " ")}
-                      </span>
                       </FormItem>
-                  )}
+                    );
+                  }}
                 />
               ))}
             </div>

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>
 

components/landing-page/option.tsx

@@ -11,7 +11,15 @@ export type OptionProps = {
   active?: boolean;
 };
 
-const Option = ({ Icon, title, selected, setSelected, open, notifs, active }: OptionProps) => {
+const Option = ({
+  Icon,
+  title,
+  selected,
+  setSelected,
+  open,
+  notifs,
+  active,
+}: OptionProps) => {
   const [hovered, setHovered] = useState(false);
   const isActive = active ?? selected === title;
 
@@ -23,7 +31,7 @@ const Option = ({ Icon, title, selected, setSelected, open, notifs, active }: Op
       onMouseLeave={() => setHovered(false)}
       className={`relative flex h-12 w-full px-3 items-center rounded-xl transition-all duration-200 cursor-pointer group ${
         isActive
-          ? "bg-gradient-to-r from-emerald-500 to-green-500 text-white shadow-lg shadow-emerald-500/25" 
+          ? "bg-gradient-to-r from-[#1F6779] to-[#1F6779] text-white shadow-lg shadow-emerald-500/25"
           : "text-slate-600 hover:bg-gradient-to-r hover:from-slate-100 hover:to-slate-200/50 hover:text-slate-800"
       }`}
       whileHover={{ scale: 1.02 }}
@@ -46,11 +54,13 @@ const Option = ({ Icon, title, selected, setSelected, open, notifs, active }: Op
           open ? "w-12" : "w-full"
         }`}
       >
-        <div className={`text-lg transition-all duration-200 ${
+        <div
+          className={`text-lg transition-all duration-200 ${
             isActive
               ? "text-white"
               : "text-slate-500 group-hover:text-slate-700"
-        }`}>
+          }`}
+        >
           <Icon />
         </div>
       </motion.div>
@@ -93,9 +103,7 @@ const Option = ({ Icon, title, selected, setSelected, open, notifs, active }: Op
           animate={{ opacity: 1, scale: 1 }}
           transition={{ delay: 0.3, type: "spring" }}
           className={`absolute right-3 top-1/2 -translate-y-1/2 size-5 rounded-full text-xs font-semibold flex items-center justify-center ${
-            isActive 
+            isActive ? "bg-white text-emerald-500" : "bg-red-500 text-white"
-              ? "bg-white text-emerald-500" 
-              : "bg-red-500 text-white"
           }`}
         >
           {notifs}

components/landing-page/retracting-sidedar.tsx

@@ -242,9 +242,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>

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 */}

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"
+    const urie = Cookies.get("urie"); // contoh: "3"
-    setUserLevelId(ulne ?? null);
+    setUserRoleId(urie ?? null);
   }, []);
 
   useEffect(() => {
@@ -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" />

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 */}

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"
+    const urie = Cookies.get("urie"); // contoh: "3"
-    setUserLevelId(ulne ?? null);
+    setUserRoleId(urie ?? null);
   }, []);
 
   useEffect(() => {
@@ -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" />