fix:product,promo form

components/dialog/promo-dialog.tsx

@@ -289,7 +289,7 @@ export default function PromoDetailDialog({
                 <div className="space-y-4 text-sm">
                   <div>
                     <div className="w-24 h-24 rounded-lg overflow-hidden border">
-                      <Image
+                      <img
                         src={promo.thumbnail_url}
                         alt="Profile"
                         width={96}

components/dialog/promo-edit-dialog.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import Cookies from "js-cookie";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { getPromotionById, updatePromotion } from "@/service/promotion";
+import { Button } from "@/components/ui/button";
+import { loading, success, error } from "@/config/swal";
+
+type PromoEditDialogProps = {
+  promoId: number | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: () => void;
+};
+
+export default function PromoEditDialog({
+  promoId,
+  open,
+  onOpenChange,
+  onSuccess,
+}: PromoEditDialogProps) {
+  const [loadingData, setLoadingData] = useState(false);
+
+  // 🔹 FORM STATE
+  const [title, setTitle] = useState("");
+  const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
+  const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
+
+  const MySwal = withReactContent(Swal);
+
+  /* =========================
+   * Fetch promo detail
+   ========================= */
+  useEffect(() => {
+    if (!promoId || !open) return;
+
+    async function fetchPromo() {
+      try {
+        setLoadingData(true);
+        const res = await getPromotionById(promoId);
+        const data = res?.data?.data;
+
+        setTitle(data?.title || "");
+        setThumbnailUrl(data?.thumbnail_url || null);
+      } catch (e) {
+        console.error("FETCH PROMO ERROR:", e);
+      } finally {
+        setLoadingData(false);
+      }
+    }
+
+    fetchPromo();
+  }, [promoId, open]);
+
+  if (!open) return null;
+
+  /* =========================
+   * Handlers
+   ========================= */
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setThumbnailFile(file);
+    setThumbnailUrl(URL.createObjectURL(file));
+  };
+
+  const handleSubmit = async () => {
+    if (!promoId) return;
+
+    const formData = new FormData();
+    formData.append("title", title);
+
+    if (thumbnailFile) {
+      formData.append("file", thumbnailFile);
+    }
+
+    loading();
+    const res = await updatePromotion(formData, promoId);
+
+    if (res?.error) {
+      error(res.message || "Gagal update promo");
+      return;
+    }
+
+    success("Promo berhasil diperbarui");
+    onOpenChange(false);
+    onSuccess?.();
+  };
+
+  /* =========================
+   * Render
+   ========================= */
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      onClick={() => onOpenChange(false)}
+    >
+      <div
+        className="bg-white rounded-2xl shadow-xl max-w-lg w-full overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* HEADER */}
+        <div className="bg-gradient-to-br from-[#1F6779] to-[#0F6C75] text-white px-6 py-5 relative">
+          <button
+            onClick={() => onOpenChange(false)}
+            className="absolute top-4 right-4 text-xl"
+          >
+            ✕
+          </button>
+          <h2 className="text-lg font-semibold">Edit Promo</h2>
+        </div>
+
+        {/* BODY */}
+        <div className="p-6 space-y-5">
+          {loadingData ? (
+            <p>Memuat data...</p>
+          ) : (
+            <>
+              {/* TITLE */}
+              <div>
+                <label className="block text-sm font-medium text-gray-600 mb-1">
+                  Judul Promo
+                </label>
+                <input
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-[#0F6C75]"
+                  placeholder="Judul promo"
+                />
+              </div>
+
+              {/* THUMBNAIL */}
+              <div>
+                <label className="block text-sm font-medium text-gray-600 mb-2">
+                  Thumbnail
+                </label>
+
+                {thumbnailUrl && (
+                  <div className="w-32 h-32 mb-3 rounded-lg overflow-hidden border">
+                    <img
+                      src={thumbnailUrl}
+                      alt="Thumbnail"
+                      className="w-32 h-32 object-cover rounded-lg border"
+                    />
+                  </div>
+                )}
+
+                <input
+                  type="file"
+                  accept="image/*"
+                  onChange={handleFileChange}
+                  className="bg-[#0F6C75] text-white rounded-full px-2 w-[230px]"
+                />
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* FOOTER */}
+        <div className="flex justify-end gap-3 px-6 py-4 border-t bg-[#F2F7FA]">
+          <Button variant="secondary" onClick={() => onOpenChange(false)}>
+            Batal
+          </Button>
+
+          <Button
+            className="bg-[#1F6779] hover:bg-[#0F6C75] text-white"
+            onClick={handleSubmit}
+            disabled={loadingData}
+          >
+            Simpan Perubahan
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/form/agent/detail-agent-form.tsx

@@ -278,7 +278,7 @@ export default function DetailAgentForm(props: { isDetail: boolean }) {
           <div>
             <Label className="mb-2 block">Foto Profile</Label>
             <div className="w-24 h-24 rounded-lg overflow-hidden border">
-              <Image
+              <img
                 src={data?.profile_picture_url}
                 alt="Profile"
                 width={96}

components/form/product/create-product-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
@@ -23,6 +23,7 @@ import { createProduct } from "@/service/product";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import { useRouter } from "next/navigation";
+import { loading } from "@/config/swal";
 
 const formSchema = z.object({
   name: z.string().min(1, "Nama produk wajib diisi"),
@@ -48,6 +49,8 @@ export default function AddProductForm() {
   } | null>(null);
 
   const fileInputId = "spec-upload-input";
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const isUploadingRef = useRef(false);
 
   const [file, setFile] = useState<File | null>(null);
   const router = useRouter();
@@ -80,30 +83,57 @@ export default function AddProductForm() {
     setSpecs(updated);
   };
 
-  const handleFileSelected = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
+    const input = e.target;
-    if (!file || !uploadTarget) return;
+    const selectedFile = input.files?.[0];
 
-    const reader = new FileReader();
+    if (!selectedFile || !uploadTarget) return;
-    reader.onload = () => {
-      const fileUrl = reader.result as string;
 
-      if (uploadTarget.type === "spec") {
+    // 🔒 CEGAH DOUBLE EVENT
-        setSpecs((prev) => {
+    if (isUploadingRef.current) return;
-          const updated = [...prev];
+    isUploadingRef.current = true;
-          updated[uploadTarget.index].images.push(fileUrl);
+
-          updated[uploadTarget.index].files.push(file);
+    setSpecs((prev) => {
-          return updated;
+      const updated = [...prev];
-        });
+      const spec = updated[uploadTarget.index];
+
+      // max 5 gambar
+      if (spec.files.length >= 5) {
+        isUploadingRef.current = false;
+        return prev;
       }
-    };
 
-    reader.readAsDataURL(file);
+      // cegah file sama
+      if (
+        spec.files.some(
+          (f) => f.name === selectedFile.name && f.size === selectedFile.size,
+        )
+      ) {
+        isUploadingRef.current = false;
+        return prev;
+      }
+
+      const previewUrl = URL.createObjectURL(selectedFile);
+
+      spec.images = [...spec.images, previewUrl];
+      spec.files = [...spec.files, selectedFile];
+
+      return updated;
+    });
+
+    // reset input
+    input.value = "";
     setIsUploadDialogOpen(false);
+
+    // release lock
+    setTimeout(() => {
+      isUploadingRef.current = false;
+    }, 0);
   };
 
   const onSubmit = async (data: z.infer<typeof formSchema>) => {
     try {
+      loading();
       const formData = new FormData();
 
       formData.append("title", data.name);
@@ -370,7 +400,10 @@ export default function AddProductForm() {
             </Label>
 
             {specs.map((spec, index) => (
-              <div key={spec.id} className="mt-6 border-2 rounded-lg border-black p-3">
+              <div
+                key={spec.id}
+                className="mt-6 border-2 rounded-lg border-black p-3"
+              >
                 <Label className="text-sm font-semibold">
                   Judul Spesifikasi {index + 1}
                 </Label>
@@ -456,36 +489,32 @@ export default function AddProductForm() {
             </DialogTitle>
           </DialogHeader>
 
-          <div
+          <div className="border-2 border-dashed rounded-xl p-8 text-center">
-            className="border-2 border-dashed rounded-xl p-8 text-center cursor-pointer"
-            onClick={() => document.getElementById(fileInputId)?.click()}
-          >
             <Upload className="w-10 h-10 text-gray-400 mx-auto mb-3" />
             <p className="text-sm text-gray-500">
-              Klik untuk upload atau drag & drop
+              Klik tombol di bawah untuk memilih file
             </p>
             <p className="text-xs text-gray-400">PNG, JPG (max 2 MB)</p>
-
-            <input
-              id={fileInputId}
-              type="file"
-              accept="image/*"
-              className="hidden"
-              onChange={handleFileSelected}
-            />
           </div>
 
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={handleFileSelected}
+          />
+
           <DialogFooter className="flex gap-3 pt-4">
             <Button
               variant="secondary"
-              className="bg-slate-200"
               onClick={() => setIsUploadDialogOpen(false)}
             >
               Batal
             </Button>
 
             <Button
-              onClick={() => document.getElementById(fileInputId)?.click()}
+              onClick={() => fileInputRef.current?.click()}
               className="bg-teal-800 hover:bg-teal-900 text-white"
             >
               Pilih File

components/form/product/detail-product-form.tsx

@@ -159,13 +159,13 @@ export default function DetailProductForm(props: { isDetail: boolean }) {
     setError,
     clearErrors,
   } = useForm<UserSettingSchema>(formOptions);
-  const [specs, setSpecs] = useState([
+  const [specs, setSpecs] = useState<
     {
-      id: 1,
+      id: number;
-      title: "Jaecoo 7 SHS Teknologi dan Exterior",
+      title: string;
-      images: ["/spec1.jpg", "/spec2.jpg", "/spec3.jpg", "/spec4.jpg"],
+      images: string[];
-    },
+    }[]
-  ]);
+  >([]);
 
   type ColorType = {
     id: number;
@@ -174,20 +174,7 @@ export default function DetailProductForm(props: { isDetail: boolean }) {
     colorSelected: string | null;
   };
 
-  const [colors, setColors] = useState<ColorType[]>([
+  const [colors, setColors] = useState<ColorType[]>([]);
-    {
-      id: 1,
-      name: "",
-      preview: "/car-1.png",
-      colorSelected: null,
-    },
-    {
-      id: 2,
-      name: "",
-      preview: "/car-2.png",
-      colorSelected: null,
-    },
-  ]);
 
   const palette = [
     "#1E4E52",
@@ -297,24 +284,31 @@ export default function DetailProductForm(props: { isDetail: boolean }) {
     setThumbnail(data.thumbnail_url);
 
     // colors
-    if (data.colors?.length) {
+    if (Array.isArray(data.colors)) {
       setColors(
         data.colors.map((color: any, index: number) => ({
-          id: index + 1,
+          id: color.id ?? index + 1,
-          name: color.name || "",
+          name: color.name ?? "",
-          preview: color.image_url || data.thumbnail_url || "",
+          preview:
-          colorSelected: color.name || null,
+            typeof color.image_url === "string" && color.image_url.length > 0
+              ? color.image_url
+              : "/car-default.png", // fallback aman
+          colorSelected: color.name ?? null,
         })),
       );
     }
 
     // specifications
-    if (data.specifications?.length) {
+    if (Array.isArray(data.specifications)) {
       setSpecs(
         data.specifications.map((spec: any, index: number) => ({
           id: index + 1,
-          title: spec.title || "",
+          title: spec.title ?? "",
-          images: spec.image_urls || [],
+          images: Array.isArray(spec.image_urls)
+            ? spec.image_urls.filter(
+                (url: any) => typeof url === "string" && url.length > 0,
+              )
+            : [],
         })),
       );
     }
@@ -520,36 +514,44 @@ export default function DetailProductForm(props: { isDetail: boolean }) {
           <div>
             <Label className="font-semibold text-gray-700">Warna Produk</Label>
 
-            <div className="mt-4 grid grid-cols-1 md:grid-cols-4 gap-6  border-2 rounded-lg border-black p-3 ">
+            {colors.length === 0 ? (
-              {colors.map((item, index) => (
+              <p className="mt-3 text-sm text-gray-400 italic">
-                <div key={item.id} className="space-y-3">
+                Tidak ada data warna
-                  <Label className="text-sm text-gray-500">
+              </p>
-                    Warna {index + 1}
+            ) : (
-                  </Label>
+              <div className="mt-4 grid grid-cols-1 md:grid-cols-4 gap-6 border-2 rounded-lg border-black p-3">
+                {colors.map((item, index) => (
+                  <div key={item.id} className="space-y-3">
+                    <Label className="text-sm text-gray-500">
+                      Warna {index + 1}
+                    </Label>
 
-                  {/* Preview warna */}
+                    {/* Preview warna */}
-                  <div
+                    <div
-                    className="w-12 h-12 rounded-full border"
+                      className="w-12 h-12 rounded-full border"
-                    style={{ backgroundColor: item.colorSelected ?? "#e5e7eb" }}
+                      style={{
-                  />
+                        backgroundColor: item.colorSelected || "#e5e7eb",
-
+                      }}
-                  {/* Foto mobil */}
-                  <div className="w-full h-[90px] border rounded-lg overflow-hidden">
-                    <Image
-                      src={item.preview}
-                      alt="warna"
-                      width={200}
-                      height={120}
-                      className="object-cover w-full h-full"
                     />
-                  </div>
 
-                  <p className="text-xs text-gray-500 text-center">
+                    {/* Foto mobil */}
-                    Foto Produk Warna {index + 1}
+                    <div className="w-full h-[90px] border rounded-lg overflow-hidden">
-                  </p>
+                      <Image
-                </div>
+                        src={item.preview}
-              ))}
+                        alt={`warna-${index}`}
-            </div>
+                        width={200}
+                        height={120}
+                        className="object-cover w-full h-full"
+                      />
+                    </div>
+
+                    <p className="text-xs text-gray-500 text-center">
+                      Foto Produk Warna {index + 1}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
 
           <div>
@@ -557,29 +559,45 @@ export default function DetailProductForm(props: { isDetail: boolean }) {
               Spesifikasi Produk
             </Label>
 
-            {specs.map((spec) => (
+            {specs.length === 0 ? (
-              <div
+              <p className="mt-3 text-sm text-gray-400 italic">
-                key={spec.id}
+                Tidak ada spesifikasi
-                className="mt-4 space-y-3 border-2 rounded-lg border-black p-3"
+              </p>
-              >
+            ) : (
-                <Input value={spec.title} readOnly className="font-medium" />
+              specs.map((spec) => (
+                <div
+                  key={spec.id}
+                  className="mt-4 space-y-3 border-2 rounded-lg border-black p-3"
+                >
+                  <Input value={spec.title} readOnly className="font-medium" />
 
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  {spec.images.length === 0 ? (
-                  {spec.images.map((img, i) => (
+                    <p className="text-sm text-gray-400 italic">
-                    <div key={i} className="border rounded-lg overflow-hidden">
+                      Tidak ada gambar spesifikasi
-                      <Image
+                    </p>
-                        src={img}
+                  ) : (
-                        alt="spec"
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                        width={200}
+                      {spec.images.map((img, i) => (
-                        height={200}
+                        <div
-                        className="object-cover w-full h-[120px]"
+                          key={i}
-                      />
+                          className="border rounded-lg overflow-hidden"
+                        >
+                          <Image
+                            src={img}
+                            alt={`spec-${i}`}
+                            width={200}
+                            height={200}
+                            className="object-cover w-full h-[120px]"
+                          />
+                        </div>
+                      ))}
                     </div>
-                  ))}
+                  )}
                 </div>
-              </div>
+              ))
-            ))}
+            )}
           </div>
+
           <div>
             <h4 className="text-sm font-semibold text-gray-700 mb-3">
               Status Timeline

components/form/product/update-product-form.tsx

@@ -83,56 +83,70 @@ export default function UpdateProductForm() {
   };
 
   const [isUploadDialogOpen, setIsUploadDialogOpen] = useState(false);
+  const [bannerFile, setBannerFile] = useState<File | null>(null);
+
   const [uploadTarget, setUploadTarget] = useState<{
-    type: "spec" | "color";
+    type: "spec" | "color" | "banner";
-    index: number;
+    index?: number;
   } | null>(null);
 
   const fileInputId = "file-upload-input";
 
-  const handleFileSelected = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
+    const input = e.target;
+    const file = input.files?.[0];
     if (!file || !uploadTarget) return;
 
-    const reader = new FileReader();
+    const previewUrl = URL.createObjectURL(file);
-    reader.onload = () => {
-      const fileUrl = reader.result as string;
 
-      if (uploadTarget.type === "spec") {
+    // ===================== SPEC =====================
-        setSpecs((prev) => {
+    if (uploadTarget.type === "spec") {
-          const updated = [...prev];
+      if (uploadTarget.index === undefined) return;
-          updated[uploadTarget.index].images.push(fileUrl);
-          return updated;
-        });
-        // Store the file for upload
-        if (file) {
-          setSpecFiles((prev) => {
-            const newMap = new Map(prev);
-            const existingFiles = newMap.get(uploadTarget.index) || [];
-            newMap.set(uploadTarget.index, [...existingFiles, file]);
-            return newMap;
-          });
-        }
-      }
 
-      if (uploadTarget.type === "color") {
+      const index = uploadTarget.index;
-        setColors((prev) => {
-          const updated = [...prev];
-          updated[uploadTarget.index].preview = fileUrl;
-          return updated;
-        });
-        // Store the file for upload
-        if (file) {
-          setColorFiles((prev) => {
-            const newMap = new Map(prev);
-            newMap.set(uploadTarget.index, file);
-            return newMap;
-          });
-        }
-      }
-    };
 
-    reader.readAsDataURL(file);
+      // preview
+      setSpecs((prev) => {
+        const updated = [...prev];
+        updated[index].images = [...updated[index].images, previewUrl];
+        return updated;
+      });
+
+      // file upload
+      setSpecFiles((prev) => {
+        const newMap = new Map(prev);
+        const files = newMap.get(index) || [];
+        newMap.set(index, [...files, file]);
+        return newMap;
+      });
+    }
+
+    // ===================== COLOR =====================
+    if (uploadTarget.type === "color") {
+      if (uploadTarget.index === undefined) return;
+
+      const index = uploadTarget.index;
+
+      setColors((prev) => {
+        const updated = [...prev];
+        updated[index].preview = previewUrl;
+        return updated;
+      });
+
+      setColorFiles((prev) => {
+        const newMap = new Map(prev);
+        newMap.set(index, file);
+        return newMap;
+      });
+    }
+
+    // ===================== BANNER =====================
+    if (uploadTarget.type === "banner") {
+      setThumbnail(previewUrl);
+      setBannerFile(file);
+    }
+
+    input.value = "";
     setIsUploadDialogOpen(false);
   };
 
@@ -230,6 +244,10 @@ export default function UpdateProductForm() {
         }
       });
 
+      if (bannerFile) {
+        formData.append("file", bannerFile);
+      }
+
       // Specifications JSON (include image count for new files only)
       const specificationsPayload = specs.map((s, index) => {
         const newFiles = specFiles.get(index) || [];
@@ -240,7 +258,6 @@ export default function UpdateProductForm() {
       });
       formData.append("specifications", JSON.stringify(specificationsPayload));
 
-      // Specification images (only new files if uploaded)
       specs.forEach((_, index) => {
         const files = specFiles.get(index) || [];
         files.forEach((file) => {
@@ -301,20 +318,33 @@ export default function UpdateProductForm() {
 
           <div>
             <Label className="font-semibold">Thumbnail Produk</Label>
-            <div className="mt-2 w-[120px] h-[80px] rounded-lg overflow-hidden border bg-gray-100">
+            <div className="mt-2 flex items-center gap-4">
-              {thumbnail ? (
+              <div className="w-[120px] h-[80px] rounded-lg overflow-hidden border bg-gray-100">
-                <Image
+                {thumbnail ? (
-                  src={thumbnail}
+                  <Image
-                  alt="Thumbnail"
+                    src={thumbnail}
-                  width={120}
+                    alt="Thumbnail"
-                  height={80}
+                    width={120}
-                  className="object-cover"
+                    height={80}
-                />
+                    className="object-cover"
-              ) : (
+                  />
-                <div className="flex items-center justify-center text-xs text-gray-400 h-full">
+                ) : (
-                  No Image
+                  <div className="flex items-center justify-center text-xs text-gray-400 h-full">
-                </div>
+                    No Image
-              )}
+                  </div>
+                )}
+              </div>
+
+              <Button
+                type="button"
+                className="bg-teal-800 hover:bg-teal-900 text-white"
+                onClick={() => {
+                  setUploadTarget({ type: "banner" });
+                  setIsUploadDialogOpen(true);
+                }}
+              >
+                Upload Banner Baru
+              </Button>
             </div>
           </div>
 
@@ -360,6 +390,7 @@ export default function UpdateProductForm() {
                         setColors((prev) => {
                           const updated = [...prev];
                           updated[index].colorSelected = colorCode;
+                          updated[index].name = colorCode; // ✅ sinkron ke input
                           return updated;
                         });
                       }}
@@ -415,9 +446,16 @@ export default function UpdateProductForm() {
                   Judul Spesifikasi {index + 1}
                 </Label>
                 <Input
-                  defaultValue={spec.title}
+                  value={spec.title}
                   placeholder="Masukkan Judul Spesifikasi"
                   className="mt-1"
+                  onChange={(e) => {
+                    setSpecs((prev) => {
+                      const updated = [...prev];
+                      updated[index].title = e.target.value;
+                      return updated;
+                    });
+                  }}
                 />
 
                 <Label className="font-semibold text-sm mt-4 block">
@@ -426,14 +464,42 @@ export default function UpdateProductForm() {
 
                 <div className="flex flex-wrap gap-4 mt-2">
                   {spec.images.map((img, i) => (
-                    <Image
+                    <div key={i} className="relative">
-                      key={i}
+                      <Image
-                      src={img}
+                        src={img}
-                      width={120}
+                        width={120}
-                      height={120}
+                        height={120}
-                      alt="spec"
+                        alt="spec"
-                      className="rounded-lg border object-cover"
+                        className="rounded-lg border object-cover"
-                    />
+                      />
+
+                      {/* 🔴 TOMBOL HAPUS GAMBAR */}
+                      <button
+                        type="button"
+                        onClick={() => {
+                          // hapus preview
+                          setSpecs((prev) => {
+                            const updated = [...prev];
+                            updated[index].images.splice(i, 1);
+                            return updated;
+                          });
+
+                          // hapus file baru (jika ada)
+                          setSpecFiles((prev) => {
+                            const map = new Map(prev);
+                            const files = map.get(index) || [];
+                            files.splice(i, 1);
+                            map.set(index, files);
+                            return map;
+                          });
+                        }}
+                        className="absolute -top-2 -right-2 bg-red-500 text-white
+                 rounded-full w-6 h-6 flex items-center justify-center
+                 text-xs hover:bg-red-600"
+                      >
+                        ×
+                      </button>
+                    </div>
                   ))}
 
                   <Button

components/table/promotion-table.tsx

@@ -56,6 +56,7 @@ import {
   approvePromotion,
   rejectPromotion,
 } from "@/service/promotion";
+import PromoEditDialog from "../dialog/promo-edit-dialog";
 
 const columns = [
   { name: "No", uid: "no" },
@@ -95,6 +96,11 @@ export default function PromotionTable() {
   const [categories, setCategories] = useState<any>([]);
   const [selectedCategories, setSelectedCategories] = useState<any>("");
   const [openDetail, setOpenDetail] = useState(false);
+  const [openEditPromo, setOpenEditPromo] = useState(false);
+  const [selectedEditPromoId, setSelectedEditPromoId] = useState<number | null>(
+    null,
+  );
+
   const [selectedPromo, setPromoDetail] = useState<any>(null);
   const [selectedPromoId, setSelectedPromoId] = useState<number | null>(null);
   const [startDateValue, setStartDateValue] = useState({
@@ -474,7 +480,19 @@ export default function PromotionTable() {
                           <Eye className="w-4 h-4 mr-1" /> Lihat
                         </Button>
                         {/* Tombol Edit */}
-
+                        {userRoleId !== "1" && (
+                          <Button
+                            className="text-[#0F6C75] hover:bg-transparent hover:underline p-0"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                              setSelectedEditPromoId(item.id);
+                              setOpenEditPromo(true);
+                            }}
+                          >
+                            <CreateIconIon className="w-4 h-4 mr-1" /> Edit
+                          </Button>
+                        )}
                         {/* Tombol Approve & Reject - hanya untuk admin dan status pending */}
                         {/* {userRoleId === "1" && item.status_id === 1 && (
                           <>
@@ -529,6 +547,15 @@ export default function PromotionTable() {
             open={openDetail}
             onOpenChange={setOpenDetail}
           />
+          <PromoEditDialog
+            promoId={selectedEditPromoId}
+            open={openEditPromo}
+            onOpenChange={setOpenEditPromo}
+            onSuccess={() => {
+              setOpenEditPromo(false);
+              initState(); // refresh table setelah edit
+            }}
+          />
 
           {/* FOOTER PAGINATION */}
           <div className="flex items-center justify-between px-6 py-3 border-t text-sm text-gray-600">

next.config.ts

@@ -1,17 +1,24 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    domains: [
+    remotePatterns: [
-      "mikulnews.com",
+      {
-      "dev.mikulnews.com",
+        protocol: "https",
-      "jaecoocihampelasbdg.com",
+        hostname: "jaecoocihampelasbdg.com",
-      "jaecookelapagading.com",
+        pathname: "/api/**",
+      },
+      {
+        protocol: "https",
+        hostname: "jaecookelapagading.com",
+        pathname: "/api/**",
+      },
     ],
   },
 
   eslint: {
     ignoreDuringBuilds: true,
   },
+
   experimental: {
     optimizePackageImports: ["@ckeditor/ckeditor5-react", "react-apexcharts"],
   },

package-lock.json

@@ -3232,6 +3232,7 @@
       "version": "19.2.7",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
+      "dev": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -3240,7 +3241,7 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "devOptional": true,
+      "dev": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }