From 086a3e858e968092576aa9cf0548438642167f34 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Wed, 15 Apr 2026 11:12:34 +0800
Subject: [PATCH] update UI

---
 components/form/approver-detail.tsx        | 13 ++--
 components/form/campaign-form.tsx          | 73 +++++++++++++++++++++-
 components/table/user-management-table.tsx | 10 ++-
 3 files changed, 85 insertions(+), 11 deletions(-)

diff --git a/components/form/approver-detail.tsx b/components/form/approver-detail.tsx
index 661668f..79fe9a2 100644
--- a/components/form/approver-detail.tsx
+++ b/components/form/approver-detail.tsx
@@ -16,7 +16,7 @@ import { cn } from "@/lib/utils";
 export default function ApproverDetail() {
   const [activeTab, setActiveTab] = useState<"detail" | "buatKonten">("detail");
   const [step, setStep] = useState<"configuration" | "publish">(
-    "configuration"
+    "configuration",
   );
 
   return (
@@ -32,7 +32,7 @@ export default function ApproverDetail() {
             "px-4 py-2 text-sm font-medium rounded-md transition",
             activeTab === "detail"
               ? "bg-black text-white font-semibold"
-              : "text-gray-600 hover:text-black"
+              : "text-gray-600 hover:text-black",
           )}
         >
           Detail Konten
@@ -43,7 +43,7 @@ export default function ApproverDetail() {
             "px-4 py-2 text-sm font-medium rounded-md transition",
             activeTab === "buatKonten"
               ? "bg-black text-white font-semibold"
-              : "text-gray-600 hover:text-black"
+              : "text-gray-600 hover:text-black",
           )}
         >
           Buat Konten
@@ -162,7 +162,7 @@ export default function ApproverDetail() {
                     "w-6 h-6 rounded-full border-2 flex items-center justify-center",
                     step === "publish"
                       ? "bg-blue-600 border-blue-600 text-white"
-                      : "border-blue-300 text-gray-400"
+                      : "border-blue-300 text-gray-400",
                   )}
                 >
                   {step === "publish" ? (
@@ -174,7 +174,7 @@ export default function ApproverDetail() {
                 <span
                   className={cn(
                     "text-sm mt-1 font-semibold",
-                    step === "publish" ? "text-blue-600" : "text-gray-400"
+                    step === "publish" ? "text-blue-600" : "text-gray-400",
                   )}
                 >
                   Publish
@@ -251,6 +251,9 @@ export default function ApproverDetail() {
               <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                 {/* LEFT CONTENT */}
                 <div className="md:col-span-2 space-y-4">
+                  <label className="text-sm font-medium text-gray-700 mb-1 block">
+                    Judul
+                  </label>
                   <Input
                     placeholder="Judul"
                     defaultValue="Lorem ipsum dolor sit amet consectetur. In faucibus diam eu ut quisque."
diff --git a/components/form/campaign-form.tsx b/components/form/campaign-form.tsx
index 3a31d44..43c8c6b 100644
--- a/components/form/campaign-form.tsx
+++ b/components/form/campaign-form.tsx
@@ -53,6 +53,15 @@ export default function FormCampaign() {
   const [contentType, setContentType] = useState("Meme");
   const [talkshowType, setTalkshowType] = useState("Renjani Nyrah");
   const [musicType, setMusicType] = useState("Sendrasena");
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
+
+  const [description, setDescription] = useState("");
+
+  const handleCheckboxChange = (index: number) => {
+    setSelectedItems((prev) =>
+      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index],
+    );
+  };
 
   const toggleMediaOnline = (item: string) => {
     setSelectedMediaOnline((prev) =>
@@ -414,6 +423,8 @@ export default function FormCampaign() {
 
                           <input
                             type="checkbox"
+                            checked={selectedItems.includes(i)}
+                            onChange={() => handleCheckboxChange(i)}
                             className="absolute top-2 left-2 w-4 h-4"
                           />
 
@@ -428,6 +439,18 @@ export default function FormCampaign() {
                       </div>
                     ))}
                   </div>
+                  {selectedItems.length > 0 && (
+                    <div className="mt-4">
+                      <Label className="my-2">Deskripsi</Label>
+                      <textarea
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="Masukkan deskripsi untuk item yang dipilih..."
+                        className="w-full p-3 border rounded-md text-sm"
+                        rows={4}
+                      />
+                    </div>
+                  )}
                 </div>
               )}
 
@@ -465,14 +488,31 @@ export default function FormCampaign() {
 
                         {/* Overlay bawah */}
                         <div className="absolute bottom-0 left-0 right-0 bg-white/80 backdrop-blur px-3 py-2 flex items-center gap-2">
-                          <input type="checkbox" className="w-4 h-4" />
-                          <span className="text-xs font-medium">
+                          <input
+                            type="checkbox"
+                            checked={selectedItems.includes(i)}
+                            onChange={() => handleCheckboxChange(i)}
+                            className="absolute top-2 left-2 w-4 h-4"
+                          />
+                          <span className="text-xs font-medium ml-5">
                             {item.name}
                           </span>
                         </div>
                       </div>
                     ))}
                   </div>
+                  {selectedItems.length > 0 && (
+                    <div className="mt-4">
+                      <Label className="my-2">Deskripsi</Label>
+                      <textarea
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="Masukkan deskripsi untuk item yang dipilih..."
+                        className="w-full p-3 border rounded-md text-sm"
+                        rows={4}
+                      />
+                    </div>
+                  )}
 
                   {/* Footer */}
                   <div className="flex justify-end items-center text-xs text-gray-500 gap-4">
@@ -544,9 +584,10 @@ export default function FormCampaign() {
                             className="w-full h-40 object-cover"
                           />
 
-                          {/* Checkbox */}
                           <input
                             type="checkbox"
+                            checked={selectedItems.includes(i)}
+                            onChange={() => handleCheckboxChange(i)}
                             className="absolute top-2 left-2 w-4 h-4"
                           />
 
@@ -563,6 +604,18 @@ export default function FormCampaign() {
                       </div>
                     ))}
                   </div>
+                  {selectedItems.length > 0 && (
+                    <div className="mt-4">
+                      <Label className="my-2">Deskripsi</Label>
+                      <textarea
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="Masukkan deskripsi untuk item yang dipilih..."
+                        className="w-full p-3 border rounded-md text-sm"
+                        rows={4}
+                      />
+                    </div>
+                  )}
                 </div>
               )}
               {contentType === "Musik" && (
@@ -635,6 +688,8 @@ export default function FormCampaign() {
                           {/* Checkbox */}
                           <input
                             type="checkbox"
+                            checked={selectedItems.includes(i)}
+                            onChange={() => handleCheckboxChange(i)}
                             className="absolute top-2 left-2 w-4 h-4"
                           />
 
@@ -651,6 +706,18 @@ export default function FormCampaign() {
                       </div>
                     ))}
                   </div>
+                  {selectedItems.length > 0 && (
+                    <div className="mt-4">
+                      <Label className="my-2">Deskripsi</Label>
+                      <textarea
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="Masukkan deskripsi untuk item yang dipilih..."
+                        className="w-full p-3 border rounded-md text-sm"
+                        rows={4}
+                      />
+                    </div>
+                  )}
                 </div>
               )}
             </div>
diff --git a/components/table/user-management-table.tsx b/components/table/user-management-table.tsx
index 13fd6ac..5468d6e 100644
--- a/components/table/user-management-table.tsx
+++ b/components/table/user-management-table.tsx
@@ -83,9 +83,13 @@ export default function UserManagementTable() {
                     >
                       Lihat
                     </button>
-                    <button className="text-green-600 hover:underline">
-                      Approve
-                    </button>
+
+                    {row.status !== "Approved" && (
+                      <button className="text-green-600 hover:underline">
+                        Approve
+                      </button>
+                    )}
+
                     <button className="text-red-500 hover:underline">
                       Hapus
                     </button>