From 82c704e20de29e9144f86d4f4719191a34bbf9aa Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Mon, 26 Jan 2026 11:04:58 +0800
Subject: [PATCH] fix:comment

---
 .../form/product/detail-product-form.tsx      | 156 +++++-------------
 .../form/product/update-product-form.tsx      |   5 +-
 components/table/article-table.tsx            |  36 +++-
 service/banner.ts                             |  11 ++
 4 files changed, 93 insertions(+), 115 deletions(-)

diff --git a/components/form/product/detail-product-form.tsx b/components/form/product/detail-product-form.tsx
index c200ab7..65d8bea 100644
--- a/components/form/product/detail-product-form.tsx
+++ b/components/form/product/detail-product-form.tsx
@@ -469,137 +469,67 @@ export default function DetailProductForm(props: { isDetail: boolean }) {
           </div>
 
           <div>
-            <Label className="font-semibold">Warna Produk *</Label>
+            <Label className="font-semibold text-gray-700">Warna Produk</Label>
 
-            {colors.map((item, index) => (
-              <div key={item.id} className="mt-6 border-b pb-6">
-                <Label>Pilih Warna {index + 1}</Label>
-                <Input
-                  placeholder="Contoh: Silver / #E2E2E2"
-                  className="mt-1"
-                  value={item.name}
-                  readOnly
-                />
-
-                <div className="flex items-center gap-2 mt-3">
-                  <div className="w-10 h-10 rounded-full flex items-center justify-center bg-teal-900">
-                    <Settings className="w-5 h-5 text-white" />
-                  </div>
-
-                  {palette.map((colorCode) => (
-                    <button
-                      key={colorCode}
-                      type="button"
-                      disabled={isDetail}
-                      style={{ backgroundColor: colorCode }}
-                      className={`w-10 h-10 rounded-full border-2
-    ${
-      item.colorSelected === colorCode
-        ? "border-teal-700 scale-110"
-        : "border-gray-300"
-    }
-    ${isDetail ? "cursor-not-allowed opacity-70" : ""}
-  `}
-                      onClick={() => {
-                        setColors((prev) => {
-                          const updated = [...prev];
-                          updated[index].colorSelected = colorCode;
-                          return updated;
-                        });
-                      }}
-                    />
-                  ))}
-                </div>
-
-                <div className="mt-4">
-                  <Label className="font-semibold">
-                    Foto Produk Warna {index + 1}
+            <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>
 
-                  <div className="flex items-center gap-4 mt-2">
+                  {/* Preview warna */}
+                  <div
+                    className="w-12 h-12 rounded-full border"
+                    style={{ backgroundColor: item.colorSelected ?? "#e5e7eb" }}
+                  />
+
+                  {/* Foto mobil */}
+                  <div className="w-full h-[90px] border rounded-lg overflow-hidden">
                     <Image
                       src={item.preview}
-                      alt="car color"
-                      width={120}
-                      height={80}
-                      className="object-cover rounded-md border"
+                      alt="warna"
+                      width={200}
+                      height={120}
+                      className="object-cover w-full h-full"
                     />
-
-                    <Button
-                      className="bg-teal-800 hover:bg-teal-900 text-white"
-                      onClick={() => {
-                        setUploadTarget({ type: "color", index });
-                        setIsUploadDialogOpen(true);
-                      }}
-                    >
-                      Upload File Baru
-                    </Button>
                   </div>
-                </div>
-              </div>
-            ))}
 
-            {/* <Button
-              type="button"
-              onClick={handleAddColor}
-              className="w-full bg-teal-800 hover:bg-teal-900 text-white mt-4"
-            >
-              <Plus className="w-4 h-4 mr-2" /> Tambah Warna Baru
-            </Button> */}
+                  <p className="text-xs text-gray-500 text-center">
+                    Foto Produk Warna {index + 1}
+                  </p>
+                </div>
+              ))}
+            </div>
           </div>
 
-          <div className="mt-10">
-            <Label className="text-lg font-semibold text-teal-900">
-              Spesifikasi Produk <span className="text-red-500">*</span>
+          <div>
+            <Label className="text-lg font-semibold text-gray-800">
+              Spesifikasi Produk
             </Label>
 
-            {specs.map((spec, index) => (
-              <div key={spec.id} className="mt-6">
-                <Label className="font-semibold text-sm">
-                  Judul Spesifikasi {index + 1}
-                </Label>
-                <Input
-                  defaultValue={spec.title}
-                  placeholder="Masukkan Judul Spesifikasi"
-                  className="mt-1"
-                />
+            {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" />
 
-                <Label className="font-semibold text-sm mt-4 block">
-                  Foto Spesifikasi {index + 1}
-                </Label>
-
-                <div className="flex flex-wrap gap-4 mt-2">
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                   {spec.images.map((img, i) => (
-                    <Image
-                      key={i}
-                      src={img}
-                      width={120}
-                      height={120}
-                      alt="spec"
-                      className="rounded-lg border object-cover"
-                    />
+                    <div key={i} className="border rounded-lg overflow-hidden">
+                      <Image
+                        src={img}
+                        alt="spec"
+                        width={200}
+                        height={200}
+                        className="object-cover w-full h-[120px]"
+                      />
+                    </div>
                   ))}
-
-                  {/* <Button
-                    className="bg-teal-800 hover:bg-teal-900 text-white"
-                    onClick={() => {
-                      setUploadTarget({ type: "spec", index });
-                      setIsUploadDialogOpen(true);
-                    }}
-                  >
-                    Upload File Baru
-                  </Button> */}
                 </div>
               </div>
             ))}
-
-            {/* <Button
-              onClick={handleAddSpec}
-              className="w-full bg-teal-800 hover:bg-teal-900 text-white flex items-center justify-center gap-2 py-4 rounded-xl"
-            >
-              <Plus className="w-4 h-4" />
-              Tambahkan Spesifikasi Baru
-            </Button> */}
           </div>
           <div>
             <h4 className="text-sm font-semibold text-gray-700 mb-3">
diff --git a/components/form/product/update-product-form.tsx b/components/form/product/update-product-form.tsx
index c0a0137..d9e10dd 100644
--- a/components/form/product/update-product-form.tsx
+++ b/components/form/product/update-product-form.tsx
@@ -153,7 +153,10 @@ export default function UpdateProductForm() {
             <Label className="font-semibold">Warna Produk *</Label>
 
             {colors.map((item, index) => (
-              <div key={item.id} className="mt-6 border-b pb-6">
+              <div
+                key={item.id}
+                className="mt-6 pb-6 border-2 rounded-lg border-black p-3"
+              >
                 <Label>Pilih Warna {index + 1}</Label>
                 <Input
                   placeholder="Contoh: Silver / #E2E2E2"
diff --git a/components/table/article-table.tsx b/components/table/article-table.tsx
index a91fcfb..b02951d 100644
--- a/components/table/article-table.tsx
+++ b/components/table/article-table.tsx
@@ -53,6 +53,7 @@ import {
   approveBanner,
   rejectBanner,
   getApprovalHistory,
+  commentBanner,
 } from "@/service/banner";
 import { Check, CheckCheck, Clock, Eye, X } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -295,6 +296,39 @@ export default function ArticleTable() {
     initState(); // refresh table
   };
 
+  const handleCommentBanner = async (id: number) => {
+    const { value: message } = await MySwal.fire({
+      title: "Komen Banner",
+      input: "textarea",
+      inputLabel: "Komentar (opsional)",
+      inputPlaceholder: "Masukkan komentar...",
+      inputAttributes: {
+        "aria-label": "Masukkan komentar",
+      },
+      showCancelButton: true,
+      confirmButtonText: "Komentar",
+      cancelButtonText: "Batal",
+      confirmButtonColor: "#dc2626",
+    });
+
+    if (message === undefined) {
+      return; // User cancelled
+    }
+
+    loading();
+    const res = await commentBanner(id, message || undefined);
+
+    if (res?.error) {
+      error(res.message || "Gagal menolak banner");
+      close();
+      return;
+    }
+
+    close();
+    success("Banner berhasil ditolak");
+    initState(); // refresh table
+  };
+
   const handleReject = async () => {
     if (!viewBanner) return;
 
@@ -866,7 +900,7 @@ export default function ArticleTable() {
                       className="bg-blue-200 hover:bg-blue-400"
                       onClick={(e) => {
                         e.stopPropagation();
-                        setOpenCommentModal(true);
+                        handleCommentBanner(viewBanner.id);
                       }}
                     >
                       Beri Tanggapan
diff --git a/service/banner.ts b/service/banner.ts
index 900f3f0..835523f 100644
--- a/service/banner.ts
+++ b/service/banner.ts
@@ -68,6 +68,17 @@ export async function rejectBanner(id: string | number, message?: string) {
   );
 }
 
+export async function commentBanner(id: string | number, message?: string) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpPutInterceptor(
+    `/banners/${id}/comment`,
+    { message },
+    headers,
+  );
+}
+
 export async function getApprovalHistory(
   moduleType: string,
   moduleId: string | number,