From affe1bce94020b2a7441d4ffabe1db5217d24e14 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Thu, 4 Sep 2025 00:05:14 +0700
Subject: [PATCH] fixing

---
 .../form/communication/collaboration-form.tsx | 152 +++++++++++++++++-
 .../communication/escalation-detail-form.tsx  |  27 ++--
 .../form/communication/internal-form.tsx      | 140 +++++++++++++++-
 components/form/content/audio-detail-form.tsx |  33 ++--
 components/form/content/image-detail-form.tsx |  53 +++---
 components/form/content/teks-detail-form.tsx  |  35 ++--
 components/form/content/video-detail-form.tsx |  31 ++--
 7 files changed, 392 insertions(+), 79 deletions(-)

diff --git a/components/form/communication/collaboration-form.tsx b/components/form/communication/collaboration-form.tsx
index 530d4831..12b35c4a 100644
--- a/components/form/communication/collaboration-form.tsx
+++ b/components/form/communication/collaboration-form.tsx
@@ -163,7 +163,7 @@ export default function FormCollaboration() {
   }
 
   const save = async (data: TaskSchema) => {
-    setIsSubmitting(true); 
+    setIsSubmitting(true);
 
     MySwal.fire({
       title: "Menyimpan...",
@@ -192,7 +192,7 @@ export default function FormCollaboration() {
     console.log("Form Data Submitted:", requestData);
     console.log("response", response);
 
-    Swal.close(); 
+    Swal.close();
 
     MySwal.fire({
       title: "Sukses",
@@ -255,6 +255,78 @@ export default function FormCollaboration() {
                   Priority<span className="text-red-500">*</span>
                 </Label>
                 <Select
+                  id="target-select"
+                  options={ticketPriority}
+                  onChange={(selectedOption) =>
+                    setSelectedTarget(Number(selectedOption?.value))
+                  }
+                  placeholder="Pilih"
+                  styles={{
+                    control: (base, state) => ({
+                      ...base,
+                      minHeight: "40px",
+                      backgroundColor:
+                        document.documentElement.classList.contains("dark")
+                          ? "#1f2937" // gray-800
+                          : "#ffffff",
+                      color: document.documentElement.classList.contains("dark")
+                        ? "#f9fafb" // gray-100
+                        : "#111827", // gray-900
+                      borderColor: state.isFocused
+                        ? "#2563eb"
+                        : base.borderColor, // biru-600
+                      boxShadow: state.isFocused
+                        ? "0 0 0 1px #2563eb"
+                        : base.boxShadow,
+                      "&:hover": {
+                        borderColor: "#2563eb",
+                      },
+                    }),
+                    menu: (base) => ({
+                      ...base,
+                      backgroundColor:
+                        document.documentElement.classList.contains("dark")
+                          ? "#1f2937"
+                          : "#ffffff",
+                    }),
+                    option: (base, state) => ({
+                      ...base,
+                      backgroundColor: state.isSelected
+                        ? "#2563eb" // biru solid kalau dipilih
+                        : state.isFocused
+                        ? "#2563eb33" // biru transparan kalau hover
+                        : document.documentElement.classList.contains("dark")
+                        ? "#1f2937"
+                        : "#ffffff",
+                      color: state.isSelected
+                        ? "#ffffff"
+                        : document.documentElement.classList.contains("dark")
+                        ? "#f9fafb"
+                        : "#111827",
+                      cursor: "pointer",
+                    }),
+                    singleValue: (base) => ({
+                      ...base,
+                      color: document.documentElement.classList.contains("dark")
+                        ? "#f9fafb"
+                        : "#111827",
+                    }),
+                    placeholder: (base) => ({
+                      ...base,
+                      color: document.documentElement.classList.contains("dark")
+                        ? "#9ca3af"
+                        : "#6b7280",
+                    }),
+                  }}
+                />
+              </div>
+
+              {/* <div className="mt-5">
+                <Label>
+                  Priority<span className="text-red-500">*</span>
+                </Label>
+                <Select
+                className="bg-white dark:bg-black"
                   id="target-select"
                   options={ticketPriority}
                   onChange={(selectedOption) =>
@@ -268,7 +340,7 @@ export default function FormCollaboration() {
                     }),
                   }}
                 />
-              </div>
+              </div> */}
             </div>
             <div className="w-full">
               <div className="mt-5">
@@ -283,8 +355,82 @@ export default function FormCollaboration() {
                   onChange={handleChange}
                   formatOptionLabel={formatOptionLabel}
                   isMulti={false}
+                  styles={{
+                    control: (base, state) => ({
+                      ...base,
+                      backgroundColor:
+                        document.documentElement.classList.contains("dark")
+                          ? "#1f2937" // bg-gray-800
+                          : "#ffffff", // bg-white
+                      color: document.documentElement.classList.contains("dark")
+                        ? "#f9fafb" // text-gray-100
+                        : "#111827", // text-gray-900
+                      borderColor: state.isFocused
+                        ? "#2563eb"
+                        : base.borderColor,
+                      boxShadow: state.isFocused
+                        ? "0 0 0 1px #2563eb"
+                        : base.boxShadow,
+                      "&:hover": {
+                        borderColor: "#2563eb",
+                      },
+                    }),
+                    menu: (base) => ({
+                      ...base,
+                      backgroundColor:
+                        document.documentElement.classList.contains("dark")
+                          ? "#1f2937"
+                          : "#ffffff",
+                      color: document.documentElement.classList.contains("dark")
+                        ? "#f9fafb"
+                        : "#111827",
+                    }),
+                    option: (base, state) => ({
+                      ...base,
+                      backgroundColor: state.isSelected
+                        ? "#2563eb"
+                        : state.isFocused
+                        ? "#2563eb33"
+                        : document.documentElement.classList.contains("dark")
+                        ? "#1f2937"
+                        : "#ffffff",
+                      color: state.isSelected
+                        ? "#ffffff"
+                        : document.documentElement.classList.contains("dark")
+                        ? "#f9fafb"
+                        : "#111827",
+                      cursor: "pointer",
+                    }),
+                    singleValue: (base) => ({
+                      ...base,
+                      color: document.documentElement.classList.contains("dark")
+                        ? "#f9fafb"
+                        : "#111827",
+                    }),
+                    placeholder: (base) => ({
+                      ...base,
+                      color: document.documentElement.classList.contains("dark")
+                        ? "#9ca3af"
+                        : "#6b7280",
+                    }),
+                  }}
                 />
               </div>
+
+              {/* <div className="mt-5">
+                <Label>
+                  Eskalasi Untuk <span className="text-red-500">*</span>
+                </Label>
+                <Select
+                  options={options}
+                  className="w-100"
+                  closeMenuOnSelect={false}
+                  components={animatedComponent}
+                  onChange={handleChange}
+                  formatOptionLabel={formatOptionLabel}
+                  isMulti={false}
+                />
+              </div> */}
             </div>
             <div className="mt-5">
               <Label>Narasi Penugasan</Label>
diff --git a/components/form/communication/escalation-detail-form.tsx b/components/form/communication/escalation-detail-form.tsx
index 393109b5..229001a5 100644
--- a/components/form/communication/escalation-detail-form.tsx
+++ b/components/form/communication/escalation-detail-form.tsx
@@ -61,7 +61,6 @@ export type replyDetail = {
 export default function FormDetailEscalation() {
   const MySwal = withReactContent(Swal);
   const { id } = useParams() as { id: string };
-
   const [detail, setDetail] = useState<any>();
   const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
   const [replyVisible, setReplyVisible] = useState(false);
@@ -173,11 +172,11 @@ export default function FormDetailEscalation() {
       <div className="flex">
         <div className="flex flex-col mt-6 w-full mb-3">
           {detail !== undefined && (
-            <div key={detail?.id} className="bg-slate-300  rounded-md">
-              <p className="p-5 bg-slate-300 rounded-md text-lg font-semibold">
+            <div key={detail?.id} className="bg-slate-300 dark:bg-black rounded-md">
+              <p className="p-5 bg-slate-300 dark:bg-black rounded-md text-lg font-semibold">
                 Ticket #{detail.id}
               </p>
-              <div className="flex flex-row gap-3 bg-sky-100 p-5 items-center">
+              <div className="flex flex-row gap-3 bg-sky-100 dark:bg-sky-900 p-5 items-center">
                 <Icon icon="qlementine-icons:user-16" width={36} />
 
                 <div>
@@ -210,8 +209,8 @@ export default function FormDetailEscalation() {
                   </p>
                 </div>
               </div>
-              <p className="p-5 bg-white">{detail.message}</p>
-              <div className="px-4 py-1 bg-white text-sm">
+              <p className="p-5 bg-white dark:bg-black">{detail.message}</p>
+              <div className="px-4 py-1 bg-white dark:bg-black text-sm">
                 {detail?.typeId === 6 && detail?.emergencyIssue ? (
                   <div className="row mx-0 mb-3 emergency-attachments">
                     <div className=" mr-4">
@@ -239,7 +238,7 @@ export default function FormDetailEscalation() {
         </div>
       </div>
       {detail !== undefined && (
-        <div className="gap-5 mb-5 w-full border mt-3 rounded-md bg-white">
+        <div className="gap-5 mb-5 w-full border mt-3 rounded-md bg-white dark:bg-black">
           <div className="space-y-2 px-3 mt-3">
             <Label>Judul</Label>
             <Controller
@@ -297,16 +296,16 @@ export default function FormDetailEscalation() {
                 )} */}
           </div>
           <div className="mx-3 my-3">
-            <h3 className="text-gray-700 font-medium">Tanggapan</h3>
+            <h3 className="text-gray-700 dark:text-white font-medium">Tanggapan</h3>
             <div className="space-y-4 ml-5 mt-5">
               {listDiscussion.map((parent: any) => (
                 <div key={parent.id} className="border-b pb-4">
                   <div className="flex justify-between items-start">
                     <div>
-                      <p className="font-semibold text-gray-800">
+                      <p className="font-semibold text-gray-800 dark:text-white">
                         {parent.messageFrom?.fullname}
                       </p>
-                      <p className="text-gray-600">{parent.message}</p>
+                      <p className="text-gray-600 dark:text-white">{parent.message}</p>
                       <p className="text-sm text-gray-400">
                         {parent.createdAt}
                       </p>
@@ -338,7 +337,7 @@ export default function FormDetailEscalation() {
                       <div className="flex justify-end gap-2 mt-2">
                         <button
                           onClick={() => setActiveReplyId(null)}
-                          className="px-4 py-1 text-sm bg-gray-200 text-gray-800 rounded-md"
+                          className="px-4 py-1 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white rounded-md"
                         >
                           Batal
                         </button>
@@ -363,10 +362,10 @@ export default function FormDetailEscalation() {
                           className="flex justify-between items-start"
                         >
                           <div>
-                            <p className="font-semibold text-gray-800">
+                            <p className="font-semibold text-gray-800 dark:text-white">
                               {child.messageFrom?.fullname}
                             </p>
-                            <p className="text-gray-600">{child.message}</p>
+                            <p className="text-gray-600 dark:text-white">{child.message}</p>
                             <p className="text-sm text-gray-400">
                               {child.createdAt}
                             </p>
@@ -386,7 +385,7 @@ export default function FormDetailEscalation() {
             </div>
 
             <div className="mt-6">
-              <label className="block text-gray-700 font-medium mb-2">
+              <label className="block text-gray-700 dark:text-white font-medium mb-2">
                 Tulis Tanggapan Anda
               </label>
               <textarea
diff --git a/components/form/communication/internal-form.tsx b/components/form/communication/internal-form.tsx
index 4077fe87..667c83ad 100644
--- a/components/form/communication/internal-form.tsx
+++ b/components/form/communication/internal-form.tsx
@@ -201,10 +201,80 @@ export default function FormInternal() {
                   setSelectedTarget(selectedOption?.value ?? null)
                 }
                 placeholder="Pilih"
-                styles={{ control: (base) => ({ ...base, minHeight: "40px" }) }}
+                styles={{
+                  control: (base, state) => ({
+                    ...base,
+                    minHeight: "40px",
+                    backgroundColor:
+                      document.documentElement.classList.contains("dark")
+                        ? "#1f2937" // bg-gray-800
+                        : "#ffffff", // bg-white
+                    color: document.documentElement.classList.contains("dark")
+                      ? "#f9fafb" // text-gray-100
+                      : "#111827", // text-gray-900
+                    borderColor: state.isFocused ? "#2563eb" : base.borderColor,
+                    boxShadow: state.isFocused
+                      ? "0 0 0 1px #2563eb"
+                      : base.boxShadow,
+                    "&:hover": { borderColor: "#2563eb" },
+                  }),
+                  menu: (base) => ({
+                    ...base,
+                    backgroundColor:
+                      document.documentElement.classList.contains("dark")
+                        ? "#1f2937"
+                        : "#ffffff",
+                    color: document.documentElement.classList.contains("dark")
+                      ? "#f9fafb"
+                      : "#111827",
+                  }),
+                  option: (base, state) => ({
+                    ...base,
+                    backgroundColor: state.isSelected
+                      ? "#2563eb"
+                      : state.isFocused
+                      ? "#2563eb33"
+                      : document.documentElement.classList.contains("dark")
+                      ? "#1f2937"
+                      : "#ffffff",
+                    color: state.isSelected
+                      ? "#ffffff"
+                      : document.documentElement.classList.contains("dark")
+                      ? "#f9fafb"
+                      : "#111827",
+                    cursor: "pointer",
+                  }),
+                  singleValue: (base) => ({
+                    ...base,
+                    color: document.documentElement.classList.contains("dark")
+                      ? "#f9fafb"
+                      : "#111827",
+                  }),
+                  placeholder: (base) => ({
+                    ...base,
+                    color: document.documentElement.classList.contains("dark")
+                      ? "#9ca3af"
+                      : "#6b7280",
+                  }),
+                }}
               />
             </div>
 
+            {/* <div className="w-6/12">
+              <Label>
+                Priority <span className="text-red-500">*</span>
+              </Label>
+              <Select
+                id="target-select"
+                options={priority}
+                onChange={(selectedOption) =>
+                  setSelectedTarget(selectedOption?.value ?? null)
+                }
+                placeholder="Pilih"
+                styles={{ control: (base) => ({ ...base, minHeight: "40px" }) }}
+              />
+            </div> */}
+
             <div className="w-6/12">
               <Label>Ditunjukan Untuk</Label>
               <Select
@@ -214,9 +284,77 @@ export default function FormInternal() {
                 components={animatedComponent}
                 onChange={handleChange}
                 isMulti={false}
+                styles={{
+                  control: (base, state) => ({
+                    ...base,
+                    minHeight: "40px",
+                    backgroundColor:
+                      document.documentElement.classList.contains("dark")
+                        ? "#1f2937" 
+                        : "#ffffff", 
+                    color: document.documentElement.classList.contains("dark")
+                      ? "#f9fafb" 
+                      : "#111827", 
+                    borderColor: state.isFocused ? "#2563eb" : base.borderColor,
+                    boxShadow: state.isFocused
+                      ? "0 0 0 1px #2563eb"
+                      : base.boxShadow,
+                    "&:hover": { borderColor: "#2563eb" },
+                  }),
+                  menu: (base) => ({
+                    ...base,
+                    backgroundColor:
+                      document.documentElement.classList.contains("dark")
+                        ? "#1f2937"
+                        : "#ffffff",
+                    color: document.documentElement.classList.contains("dark")
+                      ? "#f9fafb"
+                      : "#111827",
+                  }),
+                  option: (base, state) => ({
+                    ...base,
+                    backgroundColor: state.isSelected
+                      ? "#2563eb"
+                      : state.isFocused
+                      ? "#2563eb33"
+                      : document.documentElement.classList.contains("dark")
+                      ? "#1f2937"
+                      : "#ffffff",
+                    color: state.isSelected
+                      ? "#ffffff"
+                      : document.documentElement.classList.contains("dark")
+                      ? "#f9fafb"
+                      : "#111827",
+                    cursor: "pointer",
+                  }),
+                  singleValue: (base) => ({
+                    ...base,
+                    color: document.documentElement.classList.contains("dark")
+                      ? "#f9fafb"
+                      : "#111827",
+                  }),
+                  placeholder: (base) => ({
+                    ...base,
+                    color: document.documentElement.classList.contains("dark")
+                      ? "#9ca3af" 
+                      : "#6b7280", 
+                  }),
+                }}
               />
             </div>
 
+            {/* <div className="w-6/12">
+              <Label>Ditunjukan Untuk</Label>
+              <Select
+                options={options}
+                className="w-100"
+                closeMenuOnSelect={false}
+                components={animatedComponent}
+                onChange={handleChange}
+                isMulti={false}
+              />
+            </div> */}
+
             <div className="w-6/12 mt-5">
               <Label>Narasi Penugasan</Label>
               <Controller
diff --git a/components/form/content/audio-detail-form.tsx b/components/form/content/audio-detail-form.tsx
index 2a18e849..916e9d09 100644
--- a/components/form/content/audio-detail-form.tsx
+++ b/components/form/content/audio-detail-form.tsx
@@ -227,7 +227,9 @@ export default function FormAudioDetail() {
         // Update fileCheckedLevels untuk sinkronisasi dengan modal
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
-          const currentFileLevels = new Set<number>(newArray[fileIndex] || new Set());
+          const currentFileLevels = new Set<number>(
+            newArray[fileIndex] || new Set()
+          );
 
           if (value) {
             // Checklist semua item di modal
@@ -712,11 +714,13 @@ export default function FormAudioDetail() {
     if (checked) {
       if (placement === "all") {
         temp[index] = ["all", "mabes", "polda", "international"];
-        
+
         // Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" diklik
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
-          const currentFileLevels = new Set<number>(newArray[index] || new Set());
+          const currentFileLevels = new Set<number>(
+            newArray[index] || new Set()
+          );
 
           // Checklist semua item di modal
           listDest.forEach((item: any) => {
@@ -736,7 +740,7 @@ export default function FormAudioDetail() {
         setFileUnitSelections((prevSelections) => {
           const newSelections = [...prevSelections];
           const currentSelection = { ...newSelections[index] };
-          
+
           // Set semua checkbox tingkat utama ke true
           currentSelection.nasional = true;
           currentSelection.wilayah = true;
@@ -745,7 +749,7 @@ export default function FormAudioDetail() {
           currentSelection.polres = true;
           currentSelection.satker = true;
           currentSelection.semua = true;
-          
+
           newSelections[index] = currentSelection;
           return newSelections;
         });
@@ -775,11 +779,13 @@ export default function FormAudioDetail() {
     } else {
       if (placement === "all") {
         temp[index] = [];
-        
+
         // Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" di-unchecklist
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
-          const currentFileLevels = new Set<number>(newArray[index] || new Set());
+          const currentFileLevels = new Set<number>(
+            newArray[index] || new Set()
+          );
 
           // Unchecklist semua item di modal
           currentFileLevels.clear();
@@ -792,7 +798,7 @@ export default function FormAudioDetail() {
         setFileUnitSelections((prevSelections) => {
           const newSelections = [...prevSelections];
           const currentSelection = { ...newSelections[index] };
-          
+
           // Set semua checkbox tingkat utama ke false
           currentSelection.nasional = false;
           currentSelection.wilayah = false;
@@ -801,7 +807,7 @@ export default function FormAudioDetail() {
           currentSelection.polres = false;
           currentSelection.satker = false;
           currentSelection.semua = false;
-          
+
           newSelections[index] = currentSelection;
           return newSelections;
         });
@@ -863,8 +869,6 @@ export default function FormAudioDetail() {
     });
   };
 
-
-
   const updateModalChecklistLevels = (
     fileIndex: number,
     placement: string,
@@ -1095,7 +1099,7 @@ export default function FormAudioDetail() {
       currentSelection.satker = Boolean(isSatkerChecked);
 
       // Update checkbox "semua" berdasarkan semua checkbox yang aktif
-      currentSelection.semua = 
+      currentSelection.semua =
         currentSelection.nasional &&
         currentSelection.wilayah &&
         currentSelection.international &&
@@ -1188,7 +1192,10 @@ export default function FormAudioDetail() {
                       //   setSelectedTarget(id);
                       // }}
                     >
-                      <SelectTrigger size="md">
+                      <SelectTrigger
+                        size="md"
+                        className="border border-gray-300 dark:border-gray-600"
+                      >
                         <SelectValue placeholder="Pilih" />
                       </SelectTrigger>
                       <SelectContent>
diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx
index 7f2f620f..b64fc70b 100644
--- a/components/form/content/image-detail-form.tsx
+++ b/components/form/content/image-detail-form.tsx
@@ -136,10 +136,8 @@ export default function FormImageDetail() {
   const userLevelName = Cookies.get("state");
   const roleId = getCookiesDecrypt("urie");
   const [listDest, setListDest] = useState<Destination[]>([]);
-  console.log("LALALALA", userLevelName);
   const [modalOpen, setModalOpen] = useState(false);
   const { id } = useParams() as { id: string };
-  console.log(id);
   const editor = useRef(null);
   type ImageSchema = z.infer<typeof imageSchema>;
   const t = useTranslations("Form");
@@ -486,7 +484,9 @@ export default function FormImageDetail() {
         // Update fileCheckedLevels untuk sinkronisasi dengan modal
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
-          const currentFileLevels = new Set<number>(newArray[fileIndex] || new Set());
+          const currentFileLevels = new Set<number>(
+            newArray[fileIndex] || new Set()
+          );
 
           if (value) {
             // Checklist semua item di modal
@@ -808,7 +808,7 @@ export default function FormImageDetail() {
       currentSelection.satker = Boolean(isSatkerChecked);
 
       // Update checkbox "semua" berdasarkan semua checkbox yang aktif
-      currentSelection.semua = 
+      currentSelection.semua =
         currentSelection.nasional &&
         currentSelection.wilayah &&
         currentSelection.international &&
@@ -1014,18 +1014,20 @@ export default function FormImageDetail() {
     const temp = [];
     for (let i = 0; i < filePlacements?.length; i++) {
       if (filePlacements[i]?.length !== 0) {
-        const now = filePlacements[i]
+        const now = filePlacements[i];
         let nowArr = now?.join(",")?.replaceAll("wilayah", "polda");
         nowArr = nowArr?.replaceAll("nasional", "mabes");
         nowArr = nowArr?.replaceAll("semua", "all");
 
         // Dapatkan checked levels untuk file ini
-        const currentFileCheckedLevels = fileCheckedLevels[i] ? Array.from(fileCheckedLevels[i]) : [];
-        
-        const data = { 
-          mediaFileId: files[i]?.id, 
+        const currentFileCheckedLevels = fileCheckedLevels[i]
+          ? Array.from(fileCheckedLevels[i])
+          : [];
+
+        const data = {
+          mediaFileId: files[i]?.id,
           placements: nowArr,
-          customLocationPlacements: currentFileCheckedLevels.join(",")
+          customLocationPlacements: currentFileCheckedLevels.join(","),
         };
         temp.push(data);
       }
@@ -1084,11 +1086,13 @@ export default function FormImageDetail() {
     if (checked) {
       if (placement === "all") {
         temp[index] = ["all", "mabes", "polda", "international"];
-        
+
         // Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" diklik
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
-          const currentFileLevels = new Set<number>(newArray[index] || new Set());
+          const currentFileLevels = new Set<number>(
+            newArray[index] || new Set()
+          );
 
           // Checklist semua item di modal
           listDest.forEach((item: any) => {
@@ -1108,7 +1112,7 @@ export default function FormImageDetail() {
         setFileUnitSelections((prevSelections) => {
           const newSelections = [...prevSelections];
           const currentSelection = { ...newSelections[index] };
-          
+
           // Set semua checkbox tingkat utama ke true
           currentSelection.nasional = true;
           currentSelection.wilayah = true;
@@ -1117,7 +1121,7 @@ export default function FormImageDetail() {
           currentSelection.polres = true;
           currentSelection.satker = true;
           currentSelection.semua = true;
-          
+
           newSelections[index] = currentSelection;
           return newSelections;
         });
@@ -1147,11 +1151,13 @@ export default function FormImageDetail() {
     } else {
       if (placement === "all") {
         temp[index] = [];
-        
+
         // Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" di-unchecklist
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
-          const currentFileLevels = new Set<number>(newArray[index] || new Set());
+          const currentFileLevels = new Set<number>(
+            newArray[index] || new Set()
+          );
 
           // Unchecklist semua item di modal
           currentFileLevels.clear();
@@ -1164,7 +1170,7 @@ export default function FormImageDetail() {
         setFileUnitSelections((prevSelections) => {
           const newSelections = [...prevSelections];
           const currentSelection = { ...newSelections[index] };
-          
+
           // Set semua checkbox tingkat utama ke false
           currentSelection.nasional = false;
           currentSelection.wilayah = false;
@@ -1173,7 +1179,7 @@ export default function FormImageDetail() {
           currentSelection.polres = false;
           currentSelection.satker = false;
           currentSelection.semua = false;
-          
+
           newSelections[index] = currentSelection;
           return newSelections;
         });
@@ -1384,7 +1390,6 @@ export default function FormImageDetail() {
                 <div className="flex items-center">
                   <div className="py-3 w-full space-y-2">
                     <Label>{t("category", { defaultValue: "Category" })}</Label>
-
                     <Select
                       disabled
                       value={String(detail?.category?.id)}
@@ -1393,11 +1398,13 @@ export default function FormImageDetail() {
                       //   setSelectedTarget(id);
                       // }}
                     >
-                      <SelectTrigger size="md">
+                      <SelectTrigger
+                        size="md"
+                        className="border border-gray-300 dark:border-gray-600"
+                      >
                         <SelectValue placeholder="Pilih" />
                       </SelectTrigger>
                       <SelectContent>
-                        {/* Show the category from details if it doesn't exist in categories list */}
                         {detail &&
                           !categories.find(
                             (cat) =>
@@ -1998,9 +2005,7 @@ export default function FormImageDetail() {
                                                 </Button>
                                               </DialogClose>
                                               <DialogClose asChild>
-                                                <Button>
-                                                  Simpan
-                                                </Button>
+                                                <Button>Simpan</Button>
                                               </DialogClose>
                                             </div>
                                           </DialogContent>
diff --git a/components/form/content/teks-detail-form.tsx b/components/form/content/teks-detail-form.tsx
index c54a94e1..807029d7 100644
--- a/components/form/content/teks-detail-form.tsx
+++ b/components/form/content/teks-detail-form.tsx
@@ -220,7 +220,9 @@ export default function FormTeksDetail() {
         // Update fileCheckedLevels untuk sinkronisasi dengan modal
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
-          const currentFileLevels = new Set<number>(newArray[fileIndex] || new Set());
+          const currentFileLevels = new Set<number>(
+            newArray[fileIndex] || new Set()
+          );
 
           if (value) {
             // Checklist semua item di modal
@@ -591,7 +593,7 @@ export default function FormTeksDetail() {
         nowArr = nowArr?.replaceAll("nasional", "mabes");
         nowArr = nowArr?.replaceAll("semua", "all");
 
-          // Dapatkan checked levels untuk file ini
+        // Dapatkan checked levels untuk file ini
         const currentFileCheckedLevels = fileCheckedLevels[i]
           ? Array.from(fileCheckedLevels[i])
           : [];
@@ -601,7 +603,7 @@ export default function FormTeksDetail() {
           placements: nowArr,
           customLocationPlacements: currentFileCheckedLevels.join(","),
         };
-        
+
         temp.push(data);
       }
     }
@@ -726,11 +728,13 @@ export default function FormTeksDetail() {
     if (checked) {
       if (placement === "all") {
         temp[index] = ["all", "mabes", "polda", "international"];
-        
+
         // Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" diklik
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
-          const currentFileLevels = new Set<number>(newArray[index] || new Set());
+          const currentFileLevels = new Set<number>(
+            newArray[index] || new Set()
+          );
 
           // Checklist semua item di modal
           listDest.forEach((item: any) => {
@@ -750,7 +754,7 @@ export default function FormTeksDetail() {
         setFileUnitSelections((prevSelections) => {
           const newSelections = [...prevSelections];
           const currentSelection = { ...newSelections[index] };
-          
+
           // Set semua checkbox tingkat utama ke true
           currentSelection.nasional = true;
           currentSelection.wilayah = true;
@@ -759,7 +763,7 @@ export default function FormTeksDetail() {
           currentSelection.polres = true;
           currentSelection.satker = true;
           currentSelection.semua = true;
-          
+
           newSelections[index] = currentSelection;
           return newSelections;
         });
@@ -789,11 +793,13 @@ export default function FormTeksDetail() {
     } else {
       if (placement === "all") {
         temp[index] = [];
-        
+
         // Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" di-unchecklist
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
-          const currentFileLevels = new Set<number>(newArray[index] || new Set());
+          const currentFileLevels = new Set<number>(
+            newArray[index] || new Set()
+          );
 
           // Unchecklist semua item di modal
           currentFileLevels.clear();
@@ -806,7 +812,7 @@ export default function FormTeksDetail() {
         setFileUnitSelections((prevSelections) => {
           const newSelections = [...prevSelections];
           const currentSelection = { ...newSelections[index] };
-          
+
           // Set semua checkbox tingkat utama ke false
           currentSelection.nasional = false;
           currentSelection.wilayah = false;
@@ -815,7 +821,7 @@ export default function FormTeksDetail() {
           currentSelection.polres = false;
           currentSelection.satker = false;
           currentSelection.semua = false;
-          
+
           newSelections[index] = currentSelection;
           return newSelections;
         });
@@ -1071,7 +1077,7 @@ export default function FormTeksDetail() {
       currentSelection.satker = Boolean(isSatkerChecked);
 
       // Update checkbox "semua" berdasarkan semua checkbox yang aktif
-      currentSelection.semua = 
+      currentSelection.semua =
         currentSelection.nasional &&
         currentSelection.wilayah &&
         currentSelection.international &&
@@ -1164,7 +1170,10 @@ export default function FormTeksDetail() {
                       //   setSelectedTarget(id);
                       // }}
                     >
-                      <SelectTrigger size="md">
+                      <SelectTrigger
+                        size="md"
+                        className="border border-gray-300 dark:border-gray-600"
+                      >
                         <SelectValue placeholder="Pilih" />
                       </SelectTrigger>
                       <SelectContent>
diff --git a/components/form/content/video-detail-form.tsx b/components/form/content/video-detail-form.tsx
index 048d53d3..fd365ccf 100644
--- a/components/form/content/video-detail-form.tsx
+++ b/components/form/content/video-detail-form.tsx
@@ -219,7 +219,9 @@ export default function FormVideoDetail() {
         // Update fileCheckedLevels untuk sinkronisasi dengan modal
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
-          const currentFileLevels = new Set<number>(newArray[fileIndex] || new Set());
+          const currentFileLevels = new Set<number>(
+            newArray[fileIndex] || new Set()
+          );
 
           if (value) {
             // Checklist semua item di modal
@@ -687,11 +689,13 @@ export default function FormVideoDetail() {
     if (checked) {
       if (placement === "all") {
         temp[index] = ["all", "mabes", "polda", "international"];
-        
+
         // Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" diklik
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
-          const currentFileLevels = new Set<number>(newArray[index] || new Set());
+          const currentFileLevels = new Set<number>(
+            newArray[index] || new Set()
+          );
 
           // Checklist semua item di modal
           listDest.forEach((item: any) => {
@@ -711,7 +715,7 @@ export default function FormVideoDetail() {
         setFileUnitSelections((prevSelections) => {
           const newSelections = [...prevSelections];
           const currentSelection = { ...newSelections[index] };
-          
+
           // Set semua checkbox tingkat utama ke true
           currentSelection.nasional = true;
           currentSelection.wilayah = true;
@@ -720,7 +724,7 @@ export default function FormVideoDetail() {
           currentSelection.polres = true;
           currentSelection.satker = true;
           currentSelection.semua = true;
-          
+
           newSelections[index] = currentSelection;
           return newSelections;
         });
@@ -750,11 +754,13 @@ export default function FormVideoDetail() {
     } else {
       if (placement === "all") {
         temp[index] = [];
-        
+
         // Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" di-unchecklist
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
-          const currentFileLevels = new Set<number>(newArray[index] || new Set());
+          const currentFileLevels = new Set<number>(
+            newArray[index] || new Set()
+          );
 
           // Unchecklist semua item di modal
           currentFileLevels.clear();
@@ -767,7 +773,7 @@ export default function FormVideoDetail() {
         setFileUnitSelections((prevSelections) => {
           const newSelections = [...prevSelections];
           const currentSelection = { ...newSelections[index] };
-          
+
           // Set semua checkbox tingkat utama ke false
           currentSelection.nasional = false;
           currentSelection.wilayah = false;
@@ -776,7 +782,7 @@ export default function FormVideoDetail() {
           currentSelection.polres = false;
           currentSelection.satker = false;
           currentSelection.semua = false;
-          
+
           newSelections[index] = currentSelection;
           return newSelections;
         });
@@ -1069,7 +1075,7 @@ export default function FormVideoDetail() {
       currentSelection.satker = Boolean(isSatkerChecked);
 
       // Update checkbox "semua" berdasarkan semua checkbox yang aktif
-      currentSelection.semua = 
+      currentSelection.semua =
         currentSelection.nasional &&
         currentSelection.wilayah &&
         currentSelection.international &&
@@ -1162,7 +1168,10 @@ export default function FormVideoDetail() {
                       //   setSelectedTarget(id);
                       // }}
                     >
-                      <SelectTrigger size="md">
+                      <SelectTrigger
+                        size="md"
+                        className="border border-gray-300 dark:border-gray-600"
+                      >
                         <SelectValue placeholder="Pilih" />
                       </SelectTrigger>
                       <SelectContent>