feat: update edit media

components/form/content/image-update-form.tsx

@@ -35,6 +35,7 @@ import {
   deleteMedia,
   getTagsBySubCategoryId,
   listEnableCategory,
+  updateFilePlacements,
   uploadThumbnail,
 } from "@/service/content/content";
 import { detailMedia } from "@/service/curated-content/curated-content";
@@ -147,6 +148,9 @@ export default function FormImageUpdate() {
   let counterUpdateProgress = 0;
   const [progressList, setProgressList] = useState<any>([]);
   let uploadPersen = 0;
+
+  const isDetailOfRegionShowed = false;
+
   const [isStartUpload, setIsStartUpload] = useState(false);
   const [counterProgress, setCounterProgress] = useState(0);
   const t = useTranslations("Form");
@@ -166,9 +170,6 @@ export default function FormImageUpdate() {
   const [publishedFor, setPublishedFor] = useState<string[]>([]);
   const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const [selectedOptions, setSelectedOptions] = useState<{
-    [fileId: number]: string[];
-  }>({});
 
   const handleThumbnailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -183,7 +184,6 @@ export default function FormImageUpdate() {
       wilayah: boolean;
       international: boolean;
       polda: boolean;
-      polres: boolean;
       satker: boolean;
     }>
   >([]);
@@ -194,7 +194,6 @@ export default function FormImageUpdate() {
     wilayah: false,
     international: false,
     polda: false,
-    polres: false,
     satker: false,
   });
   const [checkedLevels, setCheckedLevels] = useState<Set<number>>(new Set());
@@ -264,18 +263,6 @@ export default function FormImageUpdate() {
           checkedLevels.has(Number(item.id))
       ).length;
 
-      const checkedPolresCount = listDest.reduce((total: number, item: any) => {
-        if (item.subDestination && item.name !== "SATKER POLRI") {
-          // Hanya hitung sub-item dari POLDA (bukan dari SATKER POLRI)
-          return (
-            total +
-            item.subDestination.filter((sub: any) =>
-              checkedLevels.has(Number(sub.id))
-            ).length
-          );
-        }
-        return total;
-      }, 0);
 
       const satkerItem: any = listDest.find(
         (item: any) => item.name === "SATKER POLRI"
@@ -289,7 +276,6 @@ export default function FormImageUpdate() {
 
       // Checkbox aktif jika ADA item yang dipilih dalam kategori tersebut
       const hasSelectedPolda = checkedPoldaCount > 0;
-      const hasSelectedPolres = checkedPolresCount > 0;
       const hasSelectedSatker = checkedSatkerCount > 0;
 
       // Update unitSelection berdasarkan yang dipilih di modal
@@ -298,7 +284,6 @@ export default function FormImageUpdate() {
 
         // Update individual checkboxes
         newState.polda = hasSelectedPolda;
-        newState.polres = hasSelectedPolres;
         newState.satker = hasSelectedSatker;
 
         // Update checkbox "semua" berdasarkan semua checkbox yang aktif
@@ -307,7 +292,6 @@ export default function FormImageUpdate() {
           newState.wilayah &&
           newState.international &&
           hasSelectedPolda &&
-          hasSelectedPolres &&
           hasSelectedSatker;
 
         return newState;
@@ -328,28 +312,6 @@ export default function FormImageUpdate() {
             newCheckedLevels.add(Number(item.id));
           }
         });
-      } else if (mainCheckboxChangeType === "polres_checked") {
-        // Checklist semua polres, tapi hanya yang poldanya sudah di-checklist
-        // Jangan checklist sub-item SATKER POLRI
-        listDest.forEach((item: any) => {
-          if (
-            item.levelNumber === 2 &&
-            item.name !== "SATKER POLRI" &&
-            newCheckedLevels.has(Number(item.id))
-          ) {
-            if (item.subDestination) {
-              item.subDestination.forEach((polres: any) => {
-                newCheckedLevels.add(Number(polres.id));
-              });
-            }
-          }
-        });
-
-        // Tidak perlu menghapus SATKER ketika POLRES di-checklist
-        // Biarkan keduanya bisa aktif bersamaan
-        // SATKER dan POLRES adalah konsep yang berbeda:
-        // - SATKER: unit-unit seperti ITWASUM, BAINTELKAM, dll.
-        // - POLRES: unit-unit seperti POLRES METRO JAKARTA PUSAT, dll.
       } else if (mainCheckboxChangeType === "satker_checked") {
         // Checklist satker
         const satkerItem: any = listDest.find(
@@ -375,27 +337,11 @@ export default function FormImageUpdate() {
             });
           }
         });
-      }
-      // Handle unchecklist actions - menghapus item dari modal
-      else if (mainCheckboxChangeType === "polres_unchecked") {
-        // Clear polres dari checkedLevels, tapi jangan hapus sub-item SATKER POLRI
-        listDest.forEach((item: any) => {
-          if (item.subDestination && item.name !== "SATKER POLRI") {
-            item.subDestination.forEach((polres: any) => {
-              newCheckedLevels.delete(Number(polres.id));
-            });
-          }
-        });
       } else if (mainCheckboxChangeType === "polda_unchecked") {
-        // Clear polda dan polres dari checkedLevels, tapi jangan hapus SATKER POLRI
+        // Clear polda dari checkedLevels, tapi jangan hapus SATKER POLRI
         listDest.forEach((item: any) => {
           if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
             newCheckedLevels.delete(Number(item.id));
-            if (item.subDestination) {
-              item.subDestination.forEach((polres: any) => {
-                newCheckedLevels.delete(Number(polres.id));
-              });
-            }
           }
         });
       } else if (mainCheckboxChangeType === "satker_unchecked") {
@@ -441,7 +387,6 @@ export default function FormImageUpdate() {
         currentSelection.wilayah = value;
         currentSelection.international = value;
         currentSelection.polda = value;
-        currentSelection.polres = value;
         currentSelection.satker = value;
 
         // Update fileCheckedLevels untuk sinkronisasi dengan modal
@@ -470,36 +415,90 @@ export default function FormImageUpdate() {
           return newArray;
         });
       } else {
-        // Validasi khusus untuk POLRES - harus ada POLDA yang ter-checklist
+        // Jika wilayah dicentang, auto centang POLDA, SATKER
-        if (key === "polres" && value) {
+        if (key === "wilayah") {
-          const currentFileCheckedLevels = fileCheckedLevels[fileIndex];
+          currentSelection.wilayah = value;
-          const hasSelectedPolda =
-            currentFileCheckedLevels &&
-            listDest.some(
-              (item: any) =>
-                item.levelNumber === 2 &&
-                item.name !== "SATKER POLRI" &&
-                currentFileCheckedLevels.has(Number(item.id))
-            );
           
-          if (!hasSelectedPolda) {
+          if (value) {
-            alert(
+            // Ketika wilayah dicentang, auto centang POLDA, SATKER
-              "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES."
+            currentSelection.polda = true;
-            );
+            currentSelection.satker = true;
-            return prev; // Batalkan perubahan
+
+            // Update fileCheckedLevels untuk mengisi semua POLDA dan SATKER POLRI ketika wilayah dicentang
+            setFileCheckedLevels((prevLevels) => {
+              const newArray = [...prevLevels];
+              const currentFileLevels = new Set<number>(
+                newArray[fileIndex] || new Set()
+              );
+
+              // Checklist semua POLDA di modal
+              listDest.forEach((item: any) => {
+                if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
+                  currentFileLevels.add(Number(item.id));
+                }
+              });
+
+              // Checklist SATKER POLRI dan semua sub-itemsnya
+              const satkerItem = listDest.find((item: any) => item.name === "SATKER POLRI");
+              if (satkerItem) {
+                currentFileLevels.add(Number(satkerItem.id));
+                // Checklist semua sub-items di bawah SATKER POLRI
+                if (satkerItem.subDestination) {
+                  satkerItem.subDestination.forEach((sub: any) => {
+                    currentFileLevels.add(Number(sub.id));
+                  });
+                }
+              }
+
+              newArray[fileIndex] = currentFileLevels;
+              return newArray;
+            });
+          } else {
+            // Ketika wilayah di-uncheck, uncheck POLDA, SATKER dan hapus data POLDA dari fileCheckedLevels
+            currentSelection.polda = false;
+            currentSelection.satker = false;
+
+            // Update fileCheckedLevels untuk menghapus semua POLDA dan SATKER POLRI ketika wilayah di-uncheck
+            setFileCheckedLevels((prevLevels) => {
+              const newArray = [...prevLevels];
+              const currentFileLevels = new Set<number>(
+                newArray[fileIndex] || new Set()
+              );
+
+              // Hapus semua POLDA dari modal
+              listDest.forEach((item: any) => {
+                if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
+                  currentFileLevels.delete(Number(item.id));
+                }
+              });
+
+              // Hapus SATKER POLRI dan semua sub-itemsnya
+              const satkerItem = listDest.find((item: any) => item.name === "SATKER POLRI");
+              if (satkerItem) {
+                currentFileLevels.delete(Number(satkerItem.id));
+                // Hapus semua sub-items di bawah SATKER POLRI
+                if (satkerItem.subDestination) {
+                  satkerItem.subDestination.forEach((sub: any) => {
+                    currentFileLevels.delete(Number(sub.id));
+                  });
+                }
+              }
+
+              newArray[fileIndex] = currentFileLevels;
+              return newArray;
+            });
           }
+        } else {
+          // Update salah satu saja
+          currentSelection[key] = value;
         }
 
-        // Update salah satu saja
-        currentSelection[key] = value;
-
         // Cek apakah semua selain "semua" sudah dicentang
         const allChecked = [
           "nasional",
           "wilayah",
           "international",
           "polda",
-          "polres",
           "satker",
         ].every((k) => currentSelection[k as keyof typeof unitSelection]);
 
@@ -595,34 +594,6 @@ export default function FormImageUpdate() {
         return total;
       }, 0);
 
-      // Hitung total POLRES yang ada dari POLDA yang ter-checklist
-      const totalPolresFromCheckedPolda = listDest.reduce(
-        (total: number, item: any) => {
-          if (
-            item.subDestination &&
-            item.name !== "SATKER POLRI" &&
-            currentFileLevels.has(Number(item.id))
-          ) {
-            return total + item.subDestination.length;
-          }
-          return total;
-        },
-        0
-      );
-
-      // Hitung berapa banyak POLRES yang ter-checklist
-      const checkedPolresCount = listDest.reduce((total: number, item: any) => {
-        if (item.subDestination && item.name !== "SATKER POLRI") {
-          // Hanya hitung sub-item dari POLDA (bukan dari SATKER POLRI)
-          return (
-            total +
-            item.subDestination.filter((sub: any) =>
-              currentFileLevels.has(Number(sub.id))
-            ).length
-          );
-        }
-        return total;
-      }, 0);
 
       // Cek apakah SATKER POLRI ter-checklist
       const satkerItem = listDest.find(
@@ -634,8 +605,6 @@ export default function FormImageUpdate() {
       // Update checkbox berdasarkan kondisi
       // POLDA aktif jika ada minimal 1 POLDA ter-checklist
       currentSelection.polda = checkedPoldaCount > 0;
-      // POLRES aktif jika ada minimal 1 POLRES ter-checklist
-      currentSelection.polres = checkedPolresCount > 0;
       currentSelection.satker = Boolean(isSatkerChecked);
 
       // Update checkbox "semua" berdasarkan semua checkbox yang aktif
@@ -644,7 +613,6 @@ export default function FormImageUpdate() {
         currentSelection.wilayah &&
         currentSelection.international &&
         currentSelection.polda &&
-        currentSelection.polres &&
         currentSelection.satker;
 
       newSelections[fileIndex] = currentSelection;
@@ -659,7 +627,7 @@ export default function FormImageUpdate() {
     }));
   };
 
-  // Fungsi untuk menangani "Pilih Semua" sub-items di bawah POLDA
+  // Fungsi untuk menangani "Pilih Semua" sub-items di bawah SATKER POLRI
   const handleSelectAllSubItems = (fileIndex: number, polda: any) => {
     setFileCheckedLevels((prev) => {
       const newArray = [...prev];
@@ -677,7 +645,7 @@ export default function FormImageUpdate() {
         });
       } else {
         // Jika belum semua ter-checklist, checklist semuanya
-        // Checklist POLDA juga jika belum ter-checklist
+        // Checklist SATKER POLRI juga jika belum ter-checklist
         if (!currentFileLevels.has(Number(polda.id))) {
           currentFileLevels.add(Number(polda.id));
         }
@@ -696,6 +664,7 @@ export default function FormImageUpdate() {
     });
   };
 
+
   const options: Option[] = [
     { id: "all", name: "SEMUA" },
     { id: "5", name: "UMUM" },
@@ -836,17 +805,6 @@ export default function FormImageUpdate() {
           setValue("creatorName", details.creatorName);
         }, 500);
 
-        if (details?.files) {
-          setFiles(details.files);
-
-          const initialOptions: { [key: number]: string[] } = {};
-          details.files.forEach((file: any) => {
-            if (file.placements) {
-              initialOptions[file.id] = mapPlacementsToOptions(file.placements);
-            }
-          });
-          setSelectedOptions(initialOptions);
-        }
 
         if (details?.files) {
           const formattedFiles = details.files.map((file: any) => ({
@@ -859,6 +817,87 @@ export default function FormImageUpdate() {
           }));
 
           setFiles(formattedFiles);
+
+          // Inisialisasi filePlacements dari detail
+          const initialFilePlacements = details.files.map((file: any) => {
+            if (file.placements) {
+              // Map dari format backend ke format internal
+              const mappedPlacements = file.placements
+                .split(",")
+                .map((p: string) => {
+                  const trimmed = p.trim();
+                  switch (trimmed) {
+                    case "all": return "all";
+                    case "mabes": return "nasional";
+                    case "polda": return "wilayah";
+                    case "satker": return "satker";
+                    case "international": return "international";
+                    default: return trimmed;
+                  }
+                });
+              return mappedPlacements;
+            }
+            return [];
+          });
+          setFilePlacements(initialFilePlacements);
+
+          // Inisialisasi fileCheckedLevels dari detail
+          const initialFileCheckedLevels = details.files.map((file: any) => {
+            if (file.customLocationPlacements) {
+              const levelIds = file.customLocationPlacements
+                .split(",")
+                .map((id: string) => Number(id.trim()))
+                .filter((id: number) => !isNaN(id));
+              return new Set(levelIds);
+            }
+            return new Set<number>();
+          });
+          setFileCheckedLevels(initialFileCheckedLevels);
+
+          // Inisialisasi fileUnitSelections dari detail
+          const initialFileUnitSelections = details.files.map((file: any) => {
+            const selection = {
+              semua: false,
+              nasional: false,
+              wilayah: false,
+              international: false,
+              polda: false,
+              satker: false,
+            };
+
+            if (file.placements) {
+              const placements = file.placements.split(",").map((p: string) => p.trim());
+              
+              // Map dari format backend ke checkbox
+              if (placements.includes("all")) {
+                selection.semua = true;
+                selection.nasional = true;
+                selection.wilayah = true;
+                selection.international = true;
+                selection.polda = true;
+                selection.satker = true;
+              } else {
+                if (placements.includes("mabes")) {
+                  selection.nasional = true;
+                }
+                if (placements.includes("wilayah")) {
+                  selection.wilayah = true;
+                }
+                if (placements.includes("polda")) {
+                  selection.polda = true;
+                }
+                if (placements.includes("satker")) {
+                  selection.satker = true;
+                }
+                if (placements.includes("international")) {
+                  selection.international = true;
+                }
+              }
+            }
+
+            return selection;
+          });
+          setFileUnitSelections(initialFileUnitSelections);
         }
 
         if (details?.publishedFor) {
@@ -874,29 +913,6 @@ export default function FormImageUpdate() {
     initState();
   }, [id, setValue]);
 
-  const mapPlacementsToOptions = (placements: string): string[] => {
-    const mapping: Record<string, string> = {
-      all: "all",
-      mabes: "nasional",
-      polda: "wilayah",
-      polres: "internasional",
-    };
-
-    if (placements.trim() === "all") {
-      return ["all", "nasional", "wilayah", "internasional"];
-    }
-
-    const options = placements
-      .split(",")
-      .map((p) => mapping[p.trim()])
-      .filter(Boolean);
-
-    const allSelected = ["nasional", "wilayah", "internasional"].every((opt) =>
-      options.includes(opt)
-    );
-
-    return allSelected ? ["all", ...options] : options;
-  };
 
   const handleCheckboxChange = (id: string) => {
     if (id === "all") {
@@ -920,8 +936,8 @@ export default function FormImageUpdate() {
     for (let i = 0; i < filePlacements?.length; i++) {
       if (filePlacements[i]?.length !== 0) {
         const now = filePlacements[i];
-        let nowArr = now?.join(",")?.replaceAll("wilayah", "polda");
+        let nowArr = now?.join(",")?.replaceAll("nasional", "mabes");
-        nowArr = nowArr?.replaceAll("nasional", "mabes");
+        nowArr = nowArr?.replaceAll("wilayah", "polda");
         nowArr = nowArr?.replaceAll("semua", "all");
 
         // Dapatkan checked levels untuk file ini
@@ -959,10 +975,11 @@ export default function FormImageUpdate() {
       tags: finalTags,
       isYoutube: false,
       isInternationalMedia: false,
-      files: getPlacement(),
     };
 
     console.log("Form Data Submitted:", requestData);
+    console.log("getPlacement(): ", getPlacement());
+    
     const response = await createMedia(requestData);
     if (response?.error) {
       error(response?.message);
@@ -974,7 +991,6 @@ export default function FormImageUpdate() {
     const thumbnail = thumbnailFile || files[0];
     formMedia.append("file", thumbnail);
     const responseThumbnail = await uploadThumbnail(id, formMedia);
-
     if (responseThumbnail?.error) {
       error(responseThumbnail?.message);
       return false;
@@ -988,6 +1004,13 @@ export default function FormImageUpdate() {
     setIsStartUpload(true);
     setProgressList(progressInfoArr);
 
+    // Update file placements
+    const responseFilePlacements = await updateFilePlacements(getPlacement());
+    if (responseFilePlacements?.error) {
+      error(responseFilePlacements?.message);
+      return false;
+    }
+
     close();
 
     files.map(async (item: any, index: number) => {
@@ -1260,7 +1283,7 @@ export default function FormImageUpdate() {
     let temp = [...filePlacements];
     if (checked) {
       if (placement === "all") {
-        temp[index] = ["all", "mabes", "polda", "international"];
+        temp[index] = ["all", "mabes", "polda", "satker", "international"];
 
         // Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" diklik
         setFileCheckedLevels((prevLevels) => {
@@ -1293,7 +1316,6 @@ export default function FormImageUpdate() {
           currentSelection.wilayah = true;
           currentSelection.international = true;
           currentSelection.polda = true;
-          currentSelection.polres = true;
           currentSelection.satker = true;
           currentSelection.semua = true;
 
@@ -1302,23 +1324,40 @@ export default function FormImageUpdate() {
         });
       } else if (placement === "satker") {
         // Ketika satker di-checklist, HANYA tambahkan satker saja
-        // JANGAN otomatis checklist polres
         const now = temp[index] || [];
         if (!now.includes("satker")) {
           now.push("satker");
         }
         temp[index] = now;
+      } else if (placement === "polda") {
+        // Ketika polda di-checklist, tambahkan polda ke filePlacements
+        const now = temp[index] || [];
+        if (!now.includes("polda")) {
+          now.push("polda");
+        }
+        temp[index] = now;
+      } else if (placement === "wilayah") {
+        // Ketika wilayah dicentang, tambahkan wilayah, polda, dan satker
+        const now = temp[index] || [];
+        if (!now.includes("wilayah")) {
+          now.push("wilayah");
+        }
+        if (!now.includes("polda")) {
+          now.push("polda");
+        }
+        if (!now.includes("satker")) {
+          now.push("satker");
+        }
+        temp[index] = now;
       } else {
         const now = temp[index] || [];
         if (!now.includes(placement)) {
           now.push(placement);
         }
-        // Hanya auto-checklist "all" jika polda, polres, dan mabes ter-checklist
+        // Auto-checklist "all" jika nasional, wilayah, dan international ter-checklist
-        // JANGAN include satker dalam perhitungan auto "all"
+        const requiredItems = ["nasional", "wilayah", "international"];
-        const nonSatkerItems = now.filter(
+        const hasAllRequired = requiredItems.every(item => now.includes(item));
-          (item) => item !== "satker" && item !== "all"
+        if (hasAllRequired && !now.includes("all")) {
-        );
-        if (nonSatkerItems.length === 3 && !now.includes("all")) {
           now.push("all");
         }
         temp[index] = now;
@@ -1351,7 +1390,6 @@ export default function FormImageUpdate() {
           currentSelection.wilayah = false;
           currentSelection.international = false;
           currentSelection.polda = false;
-          currentSelection.polres = false;
           currentSelection.satker = false;
           currentSelection.semua = false;
 
@@ -1359,16 +1397,32 @@ export default function FormImageUpdate() {
           return newSelections;
         });
       } else {
-        const now = temp[index]?.filter((a) => a !== placement);
+        if (placement === "wilayah") {
-        console.log("now", now);
+          // Ketika wilayah di-uncheck, hapus wilayah, polda, dan satker
-        temp[index] = now;
+          const now = temp[index]?.filter((a) => 
-        // Hapus "all" jika tidak semua item ter-checklist
+            a !== "wilayah" && a !== "polda" && a !== "satker"
-        if (now.includes("all")) {
-          const nonSatkerItems = now.filter(
-            (item) => item !== "satker" && item !== "all"
           );
-          if (nonSatkerItems.length < 3) {
+          temp[index] = now;
-            const newData = now.filter((b) => b !== "all");
+        } else if (placement === "polda") {
+          // Ketika polda di-uncheck, hapus polda dari filePlacements
+          const now = temp[index]?.filter((a) => a !== "polda");
+          temp[index] = now;
+        } else if (placement === "satker") {
+          // Ketika satker di-uncheck, hapus satker dari filePlacements
+          const now = temp[index]?.filter((a) => a !== "satker");
+          temp[index] = now;
+        } else {
+          const now = temp[index]?.filter((a) => a !== placement);
+          temp[index] = now;
+        }
+        
+        // Hapus "all" jika tidak semua item ter-checklist
+        const currentNow = temp[index] || [];
+        if (currentNow.includes("all")) {
+          const requiredItems = ["nasional", "wilayah", "international"];
+          const hasAllRequired = requiredItems.every(item => currentNow.includes(item));
+          if (!hasAllRequired) {
+            const newData = currentNow.filter((b) => b !== "all");
             temp[index] = newData;
           }
         }
@@ -1400,20 +1454,6 @@ export default function FormImageUpdate() {
               currentFileLevels.add(Number(item.id));
             }
           });
-        } else if (placement === "polres") {
-          // Checklist POLRES hanya dari POLDA yang sudah ter-checklist
-          listDest.forEach((item: any) => {
-            if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
-              // Hanya checklist POLRES jika POLDA-nya sudah ter-checklist
-              if (currentFileLevels.has(Number(item.id))) {
-                if (item.subDestination) {
-                  item.subDestination.forEach((polres: any) => {
-                    currentFileLevels.add(Number(polres.id));
-                  });
-                }
-              }
-            }
-          });
         } else if (placement === "satker") {
           // Checklist SATKER POLRI dan semua sub-item di bawahnya
           const satkerItem: any = listDest.find(
@@ -1430,24 +1470,10 @@ export default function FormImageUpdate() {
         }
       } else {
         if (placement === "polda") {
-          // Unchecklist semua POLDA dan POLRES di bawahnya
+          // Unchecklist semua POLDA
           listDest.forEach((item: any) => {
             if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
               currentFileLevels.delete(Number(item.id));
-              if (item.subDestination) {
-                item.subDestination.forEach((polres: any) => {
-                  currentFileLevels.delete(Number(polres.id));
-                });
-              }
-            }
-          });
-        } else if (placement === "polres") {
-          // Unchecklist semua POLRES
-          listDest.forEach((item: any) => {
-            if (item.subDestination && item.name !== "SATKER POLRI") {
-              item.subDestination.forEach((polres: any) => {
-                currentFileLevels.delete(Number(polres.id));
-              });
             }
           });
         } else if (placement === "satker") {
@@ -1527,34 +1553,6 @@ export default function FormImageUpdate() {
   //   console.log("FileDestination.leng::", finalPlacements);
   // };
 
-  const handleCheckboxChangeImage = (fileId: number, value: string) => {
-    setSelectedOptions((prev: any) => {
-      const currentSelections = prev[fileId] || [];
-      if (value === "all") {
-        if (currentSelections.includes("all")) {
-          return { ...prev, [fileId]: [] };
-        }
-        return {
-          ...prev,
-          [fileId]: ["all", "nasional", "wilayah", "internasional"],
-        };
-      } else {
-        const updatedSelections = currentSelections.includes(value)
-          ? currentSelections.filter((option: any) => option !== value)
-          : [...currentSelections, value];
-
-        const isAllSelected = ["nasional", "wilayah", "internasional"].every(
-          (opt) => updatedSelections.includes(opt)
-        );
-        return {
-          ...prev,
-          [fileId]: isAllSelected
-            ? ["all", ...updatedSelections]
-            : updatedSelections.filter((opt: any) => opt !== "all"),
-        };
-      }
-    });
-  };
 
   function success() {
     MySwal.fire({
@@ -1742,119 +1740,8 @@ export default function FormImageUpdate() {
                       </Fragment>
                     ) : null}
                     {files.length > 0 && (
-                      <div className="mt-4 space-y-2">
-                        <Label className="text-lg font-semibold">
-                          {" "}
-                          {t("file-media", { defaultValue: "File Media" })}
-                        </Label>
-                        <div className="grid gap-4">
-                          {files.map((file: any) => (
-                            <div
-                              key={file.id}
-                              className="flex items-center border p-2 rounded-md"
-                            >
-                              <img
-                                src={file.thumbnailFileUrl}
-                                alt={file.fileName}
-                                className="w-16 h-16 object-cover rounded-md mr-4"
-                              />
-                              <div className="flex flex-wrap gap-3 items-center ">
-                                <div className="flex-grow">
-                                  <p className="font-medium">{file.fileName}</p>
-                                  <a
-                                    href={file.url}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="text-blue-500 text-sm"
-                                  >
-                                    {t("view-file", {
-                                      defaultValue: "View File",
-                                    })}
-                                  </a>
-                                </div>
-                                <div>
-                                  <Label className="flex items-center space-x-2">
-                                    <input
-                                      type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("all")}
-                                      onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "all"
-                                        )
-                                      }
-                                      className="form-checkbox"
-                                    />
-                                    <span>
-                                      {t("all", { defaultValue: "All" })}
-                                    </span>
-                                  </Label>
-                                </div>
-                                <div>
-                                  <Label className="flex items-center space-x-2">
-                                    <input
-                                      type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("nasional")}
-                                      onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "nasional"
-                                        )
-                                      }
-                                      className="form-checkbox"
-                                    />
-                                    <span>Nasional</span>
-                                  </Label>
-                                </div>
-                                <div>
-                                  <Label className="flex items-center space-x-2">
-                                    <input
-                                      type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("wilayah")}
-                                      onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "wilayah"
-                                        )
-                                      }
-                                      className="form-checkbox"
-                                    />
-                                    <span>Wilayah</span>
-                                  </Label>
-                                </div>
-                                <div>
-                                  <Label className="flex items-center space-x-2">
-                                    <input
-                                      type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("internasional")}
-                                      onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "internasional"
-                                        )
-                                      }
-                                      className="form-checkbox"
-                                    />
-                                    <span>Internasional</span>
-                                  </Label>
-                                </div>
-                              </div>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                    {/* {files.length > 0 && (
                       <div className="mt-4">
-                        <Label className="text-lg font-semibold">
+                        <Label className="text-md font-semibold">
                           {" "}
                           {t("file-media", { defaultValue: "File Media" })}
                         </Label>
@@ -1884,78 +1771,75 @@ export default function FormImageUpdate() {
                                   </a>
                                 </div>
                                 <div className="bg-white rounded-md p-4 border">
-                                  <h5 className="font-medium text-gray-900 mb-4 flex items-center gap-2">
+                                  {/* <h5 className="font-medium text-gray-900 mb-4 flex items-center gap-2">
                                     <Icon
                                       icon="material-symbols:settings-outline"
                                       width={18}
                                       height={18}
                                     />
                                     Pengaturan Distribusi
-                                  </h5>
+                                  </h5> */}
 
+                                  {/* Checkbox Tingkat Utama */}
                                   <div className="space-y-4">
-                                    <div>
+                                    <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-                                      <p className="text-sm font-medium text-gray-700 mb-3">
+                                      {[
-                                        Tingkat Distribusi:
+                                        { key: "semua", label: "Semua" },
-                                      </p>
+                                        {
-                                      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                                          key: "nasional",
-                                        {[
+                                          label: "Nasional",
-                                          { key: "semua", label: "Semua" },
+                                        },
-                                          {
+                                        { key: "wilayah", label: "Wilayah" },
-                                            key: "nasional",
+                                        {
-                                            label: "Nasional",
+                                          key: "international",
-                                          },
+                                          label: "Internasional",
-                                          { key: "wilayah", label: "Wilayah" },
+                                        },
-                                          {
+                                      ].map((item, idx) => (
-                                            key: "international",
+                                        <div
-                                            label: "Internasional",
+                                          key={item.key}
-                                          },
+                                          className="flex items-center gap-2 p-2 border border-gray-200 rounded-md hover:bg-gray-50"
-                                        ].map((item, idx) => (
+                                        >
-                                          <div
+                                          <Checkbox
-                                            key={item.key}
+                                            // id={`${item.key}-${index}`}
-                                            className="flex items-center gap-2 p-2 border border-gray-200 rounded-md hover:bg-gray-50"
+                                            checked={
+                                              fileUnitSelections[index]?.[
+                                                item.key as keyof typeof unitSelection
+                                              ] || false
+                                            }
+                                            onCheckedChange={(value) => {
+                                              handleFileUnitChange(
+                                                index,
+                                                item.key as keyof typeof unitSelection,
+                                                value as boolean
+                                              );
+                                              setupPlacement(
+                                                index,
+                                                item.key,
+                                                Boolean(value)
+                                              );
+                                            }}
+                                          />
+                                          <Label
+                                            htmlFor={`${item.key}-${index}`}
+                                            className="text-sm font-medium cursor-pointer"
                                           >
-                                            <Checkbox
+                                            {item.label}
-                                              // id={`${item.key}-${index}`}
+                                          </Label>
-                                              checked={
+                                        </div>
-                                                fileUnitSelections[index]?.[
+                                      ))}
-                                                  item.key as keyof typeof unitSelection
-                                                ] || false
-                                              }
-                                              onCheckedChange={(value) => {
-                                                handleFileUnitChange(
-                                                  index,
-                                                  item.key as keyof typeof unitSelection,
-                                                  value as boolean
-                                                );
-                                                setupPlacement(
-                                                  index,
-                                                  item.key,
-                                                  Boolean(value)
-                                                );
-                                              }}
-                                            />
-                                            <Label
-                                              htmlFor={`${item.key}-${index}`}
-                                              className="text-sm font-medium cursor-pointer"
-                                            >
-                                              {item.label}
-                                            </Label>
-                                          </div>
-                                        ))}
-                                      </div>
                                     </div>
 
-                                    {fileUnitSelections[index]?.wilayah && (
+                                    {/* Detail Wilayah */}
+                                    {fileUnitSelections[index]?.wilayah && isDetailOfRegionShowed && (
                                       <div className="border-t border-gray-200 pt-2">
                                         <p className="text-sm font-medium text-gray-700 mb-2">
                                           Detail Wilayah:
                                         </p>
 
+                                        {/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
                                         <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
                                           {[
                                             { key: "polda", label: "POLDA" },
-                                            { key: "polres", label: "POLRES" },
                                             { key: "satker", label: "SATKER" },
                                           ].map((item, idx) => (
                                             <div
@@ -1991,6 +1875,7 @@ export default function FormImageUpdate() {
                                             </div>
                                           ))}
 
+                                          {/* Tombol Kustom sejajar dengan checkbox */}
                                           <div className="flex items-center justify-center p-3">
                                             <Dialog>
                                               <DialogTrigger asChild>
@@ -2012,8 +1897,7 @@ export default function FormImageUpdate() {
                                               <DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
                                                 <DialogHeader className="border-b border-gray-200 pb-4">
                                                   <DialogTitle className="text-lg font-semibold">
-                                                    Daftar Wilayah POLDA dan
+                                                    Daftar Wilayah POLDA dan SATKER
-                                                    POLRES
                                                   </DialogTitle>
                                                 </DialogHeader>
                                                 <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
@@ -2023,6 +1907,7 @@ export default function FormImageUpdate() {
                                                         key={polda.id}
                                                         className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
                                                       >
+                                                        {/* Header POLDA */}
                                                         <div className="flex items-center justify-between">
                                                           <Label className="flex items-center gap-3 flex-1 cursor-pointer">
                                                             <Checkbox
@@ -2048,7 +1933,8 @@ export default function FormImageUpdate() {
                                                               {polda.name}
                                                             </span>
                                                           </Label>
-                                                          {polda.subDestination && (
+                                                          {/* Tombol expand hanya untuk SATKER POLRI */}
+                                                          {polda.name === "SATKER POLRI" && polda.subDestination && (
                                                             <button
                                                               onClick={(e) => {
                                                                 e.preventDefault();
@@ -2074,11 +1960,13 @@ export default function FormImageUpdate() {
                                                           )}
                                                         </div>
 
-                                                        {polda.subDestination &&
+                                                        {/* Sub-items hanya untuk SATKER POLRI */}
+                                                        {polda.name === "SATKER POLRI" && polda.subDestination &&
                                                           expandedPolda[
                                                             polda.id
                                                           ] && (
                                                             <div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
+                                                              {/* Tombol Pilih Semua untuk sub-items */}
                                                               <div className="mb-2 flex justify-start">
                                                                 {(() => {
                                                                   const allSubItemsChecked =
@@ -2183,6 +2071,7 @@ export default function FormImageUpdate() {
                                                               </div>
                                                             </div>
                                                           )}
+
                                                       </div>
                                                     )
                                                   )}
@@ -2212,7 +2101,7 @@ export default function FormImageUpdate() {
                           ))}
                         </div>
                       </div>
-                    )} */}
+                    )}
                   </Fragment>
                 </div>
               </div>

components/form/content/video-update-form.tsx

@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/select";
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 
 import { register } from "module";
 import { Switch } from "@/components/ui/switch";
@@ -35,7 +36,9 @@ import {
   getTagsBySubCategoryId,
   listEnableCategory,
   uploadThumbnail,
+  updateFilePlacements,
 } from "@/service/content/content";
+import { getUserLevelForAssignments } from "@/service/task";
 import { detailMedia } from "@/service/curated-content/curated-content";
 import { Badge } from "@/components/ui/badge";
 import { CloudUpload, MailIcon } from "lucide-react";
@@ -57,6 +60,7 @@ import { error, loading } from "@/lib/swal";
 import { useTranslations } from "next-intl";
 import dynamic from "next/dynamic";
 import { htmlToString } from "@/utils/globals";
+import { v4 as uuidv4 } from "uuid";
 
 const videoSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -97,6 +101,35 @@ type Option = {
   name: string;
 };
 
+type PlacementType = "all" | "mabes" | "wilayah" | "polda" | "satker" | "international";
+
+interface FilePlacement {
+  id: string;
+  placements: PlacementType[];
+}
+
+interface TempFileItem {
+  id: string;
+  fileName: string;
+  url: string;
+  thumbnailFileUrl: string;
+  placements: string;
+  customLocationPlacements: string;
+}
+
+interface Destination {
+  id: number;
+  name: string;
+  levelNumber: number;
+  subDestination: SubDestination[];
+}
+
+interface SubDestination {
+  id: number;
+  name: string;
+  levelNumber: number;
+}
+
 const CustomEditor = dynamic(
   () => {
     return import("@/components/editor/custom-editor");
@@ -132,17 +165,42 @@ export default function FormVideoUpdate() {
   const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
   const [files, setFiles] = useState<FileWithPreview[]>([]);
   const [selectedTarget, setSelectedTarget] = useState("");
-  const [unitSelection, setUnitSelection] = useState({
-    allUnit: false,
-    mabes: false,
-    polda: false,
-    polres: false,
-  });
   const [publishedFor, setPublishedFor] = useState<string[]>([]);
   const inputRef = useRef<HTMLInputElement>(null);
   const [selectedOptions, setSelectedOptions] = useState<{
     [fileId: number]: string[];
   }>({});
+  const [fileUnitSelections, setFileUnitSelections] = useState<{
+    [fileId: string]: {
+      semua: boolean;
+      nasional: boolean;
+      wilayah: boolean;
+      international: boolean;
+      polda: boolean;
+      satker: boolean;
+    };
+  }>({});
+  const [unitSelection, setUnitSelection] = useState({
+    semua: false,
+    nasional: false,
+    wilayah: false,
+    international: false,
+    polda: false,
+    satker: false,
+  });
+  const [checkedLevels, setCheckedLevels] = useState<Set<number>>(new Set());
+  const [listDest, setListDest] = useState<Destination[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [expandedPolda, setExpandedPolda] = useState<Set<number>>(new Set());
+  const [fileCheckedLevels, setFileCheckedLevels] = useState<{
+    [fileId: string]: Set<number>;
+  }>({});
+  const [isUpdatingFromMainCheckbox, setIsUpdatingFromMainCheckbox] = useState(false);
+  const [mainCheckboxChangeType, setMainCheckboxChangeType] = useState<string | null>(null);
+  const [filePlacements, setFilePlacements] = useState<{
+    [fileId: string]: PlacementType[];
+  }>({});
+  const [tempFile, setTempFile] = useState<TempFileItem | null>(null);
 
   const options: Option[] = [
     { id: "all", name: "SEMUA" },
@@ -156,7 +214,10 @@ export default function FormVideoUpdate() {
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop: (acceptedFiles) => {
-      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+      setFiles(acceptedFiles.map((file) => Object.assign(file, { 
+        id: uuidv4(),
+        preview: URL.createObjectURL(file)
+      })));
     },
     accept: {
       "video/*": [],
@@ -203,6 +264,36 @@ export default function FormVideoUpdate() {
     initState();
   }, []);
 
+  useEffect(() => {
+    const fetchPoldaPolres = async () => {
+      try {
+        setIsLoading(true);
+        const response = await getUserLevelForAssignments();
+        if (response?.data?.data) {
+          setListDest(response.data.data.list);
+        }
+      } catch (error) {
+        console.error("Error fetching user levels:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchPoldaPolres();
+  }, []);
+
+  useEffect(() => {
+    if (isUpdatingFromMainCheckbox && mainCheckboxChangeType) {
+      syncModalWithMainCheckbox();
+      setIsUpdatingFromMainCheckbox(false);
+      setMainCheckboxChangeType(null);
+    }
+  }, [isUpdatingFromMainCheckbox, mainCheckboxChangeType]);
+
+  useEffect(() => {
+    updateMainCheckboxFromModalLegacy();
+  }, [checkedLevels]);
+
   const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && e.currentTarget.value.trim()) {
       e.preventDefault();
@@ -274,13 +365,43 @@ export default function FormVideoUpdate() {
 
         if (details?.files) {
           setFiles(details.files);
-          const initialOptions: { [key: number]: string[] } = {};
+          
+          // Initialize filePlacements
+          const initialFilePlacements: { [key: string]: PlacementType[] } = {};
           details.files.forEach((file: any) => {
             if (file.placements) {
-              initialOptions[file.id] = mapPlacementsToOptions(file.placements);
+              const placements = file.placements.split(",").map((p: string) => p.trim() as PlacementType);
+              initialFilePlacements[file.id] = placements;
             }
           });
-          setSelectedOptions(initialOptions);
+          setFilePlacements(initialFilePlacements);
+
+          // Initialize fileCheckedLevels
+          const initialFileCheckedLevels: { [key: string]: Set<number> } = {};
+          details.files.forEach((file: any) => {
+            if (file.customLocationPlacements) {
+              const levelIds = file.customLocationPlacements.split(",").map((id: string) => parseInt(id.trim()));
+              initialFileCheckedLevels[file.id] = new Set(levelIds);
+            }
+          });
+          setFileCheckedLevels(initialFileCheckedLevels);
+
+          // Initialize fileUnitSelections
+          const initialFileUnitSelections: { [key: string]: any } = {};
+          details.files.forEach((file: any) => {
+            if (file.placements) {
+              const placements = file.placements.split(",").map((p: string) => p.trim());
+              initialFileUnitSelections[file.id] = {
+                semua: placements.includes("all"),
+                nasional: placements.includes("mabes"),
+                wilayah: placements.includes("wilayah") || placements.includes("polda") || placements.includes("satker"),
+                international: placements.includes("international"),
+                polda: placements.includes("polda"),
+                satker: placements.includes("satker"),
+              };
+            }
+          });
+          setFileUnitSelections(initialFileUnitSelections);
         }
 
         if (details?.publishedFor) {
@@ -312,29 +433,206 @@ export default function FormVideoUpdate() {
     initState();
   }, [refresh, setValue]);
 
-  const mapPlacementsToOptions = (placements: string): string[] => {
+  const updateMainCheckboxFromModalLegacy = () => {
-    const mapping: Record<string, string> = {
+    const checkedPoldaCount = listDest.filter(
-      all: "all",
+      (item) => item.levelNumber === 2 && item.name !== "SATKER POLRI" && checkedLevels.has(item.id)
-      mabes: "nasional",
+    ).length;
-      polda: "wilayah",
+    const hasSelectedPolda = checkedPoldaCount > 0;
-      polres: "internasional",
+    const allPoldaChecked = checkedPoldaCount === listDest.filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI").length;
-    };
 
-    // Jika placements hanya "all", langsung aktifkan semua checkbox
+    const checkedSatkerCount = listDest.filter(
-    if (placements.trim() === "all") {
+      (item) => item.levelNumber === 2 && item.name === "SATKER POLRI" && checkedLevels.has(item.id)
-      return ["all", "nasional", "wilayah", "internasional"];
+    ).length;
+    const hasSelectedSatker = checkedSatkerCount > 0;
+    const allSatkerChecked = checkedSatkerCount === listDest.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI").length;
+
+    setUnitSelection(prev => ({
+      ...prev,
+      polda: hasSelectedPolda,
+      satker: hasSelectedSatker,
+      wilayah: hasSelectedPolda || hasSelectedSatker,
+    }));
+  };
+
+  const syncModalWithMainCheckbox = () => {
+    if (mainCheckboxChangeType === "wilayah_checked") {
+      const poldaIds = listDest
+        .filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI")
+        .map(item => item.id);
+      const satkerIds = listDest
+        .filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
+        .map(item => item.id);
+      const allSatkerSubIds = listDest
+        .filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
+        .flatMap(item => item.subDestination.map(sub => sub.id));
+
+      setCheckedLevels(prev => {
+        const newSet = new Set(prev);
+        [...poldaIds, ...satkerIds, ...allSatkerSubIds].forEach(id => newSet.add(id));
+        return newSet;
+      });
+    } else if (mainCheckboxChangeType === "wilayah_unchecked") {
+      const poldaIds = listDest
+        .filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI")
+        .map(item => item.id);
+      const satkerIds = listDest
+        .filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
+        .map(item => item.id);
+      const allSatkerSubIds = listDest
+        .filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
+        .flatMap(item => item.subDestination.map(sub => sub.id));
+
+      setCheckedLevels(prev => {
+        const newSet = new Set(prev);
+        [...poldaIds, ...satkerIds, ...allSatkerSubIds].forEach(id => newSet.delete(id));
+        return newSet;
+      });
+    } else if (mainCheckboxChangeType === "polda_checked") {
+      const poldaIds = listDest
+        .filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI")
+        .map(item => item.id);
+      setCheckedLevels(prev => {
+        const newSet = new Set(prev);
+        poldaIds.forEach(id => newSet.add(id));
+        return newSet;
+      });
+    } else if (mainCheckboxChangeType === "polda_unchecked") {
+      const poldaIds = listDest
+        .filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI")
+        .map(item => item.id);
+      setCheckedLevels(prev => {
+        const newSet = new Set(prev);
+        poldaIds.forEach(id => newSet.delete(id));
+        return newSet;
+      });
+    } else if (mainCheckboxChangeType === "satker_checked") {
+      const satkerIds = listDest
+        .filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
+        .map(item => item.id);
+      const allSatkerSubIds = listDest
+        .filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
+        .flatMap(item => item.subDestination.map(sub => sub.id));
+      setCheckedLevels(prev => {
+        const newSet = new Set(prev);
+        [...satkerIds, ...allSatkerSubIds].forEach(id => newSet.add(id));
+        return newSet;
+      });
+    } else if (mainCheckboxChangeType === "satker_unchecked") {
+      const satkerIds = listDest
+        .filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
+        .map(item => item.id);
+      const allSatkerSubIds = listDest
+        .filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
+        .flatMap(item => item.subDestination.map(sub => sub.id));
+      setCheckedLevels(prev => {
+        const newSet = new Set(prev);
+        [...satkerIds, ...allSatkerSubIds].forEach(id => newSet.delete(id));
+        return newSet;
+      });
     }
+  };
 
-    const options = placements
+  const handleFileUnitChange = (fileId: string, key: string, value: boolean) => {
-      .split(",")
+    setFileUnitSelections(prev => {
-      .map((p) => mapping[p.trim()])
+      const currentSelection = prev[fileId] || {
-      .filter(Boolean);
+        semua: false,
+        nasional: false,
+        wilayah: false,
+        international: false,
+        polda: false,
+        satker: false,
+      };
 
-    const allSelected = ["nasional", "wilayah", "internasional"].every((opt) =>
+      const newSelection = { ...currentSelection, [key]: value };
-      options.includes(opt)
-    );
 
-    return allSelected ? ["all", ...options] : options;
+      if (key === "wilayah" && value) {
+        newSelection.polda = true;
+        newSelection.satker = true;
+        
+        // Update fileCheckedLevels for wilayah
+        setFileCheckedLevels(prevLevels => {
+          const currentFileLevels = prevLevels[fileId] || new Set<number>();
+          const newFileLevels = new Set(currentFileLevels);
+          
+          // Add all POLDA items
+          listDest.forEach(item => {
+            if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
+              newFileLevels.add(item.id);
+            }
+          });
+          
+          // Add SATKER POLRI items and their sub-destinations
+          listDest.forEach(item => {
+            if (item.levelNumber === 2 && item.name === "SATKER POLRI") {
+              newFileLevels.add(item.id);
+              item.subDestination.forEach(satkerItem => {
+                newFileLevels.add(satkerItem.id);
+              });
+            }
+          });
+          
+          return { ...prevLevels, [fileId]: newFileLevels };
+        });
+      } else if (key === "wilayah" && !value) {
+        newSelection.polda = false;
+        newSelection.satker = false;
+        
+        // Clear fileCheckedLevels for wilayah
+        setFileCheckedLevels(prevLevels => {
+          const newFileLevels = new Set<number>();
+          return { ...prevLevels, [fileId]: newFileLevels };
+        });
+      } else if (key === "semua") {
+        newSelection.nasional = value;
+        newSelection.wilayah = value;
+        newSelection.international = value;
+        newSelection.polda = value;
+        newSelection.satker = value;
+      }
+
+      return { ...prev, [fileId]: newSelection };
+    });
+
+    // Update filePlacements
+    setFilePlacements(prev => {
+      const currentPlacements = prev[fileId] || [];
+      let newPlacements = [...currentPlacements];
+
+      if (key === "semua" && value) {
+        newPlacements = ["all", "mabes", "wilayah", "polda", "satker", "international"];
+      } else if (key === "semua" && !value) {
+        newPlacements = [];
+      } else if (key === "nasional" && value) {
+        if (!newPlacements.includes("mabes")) newPlacements.push("mabes");
+      } else if (key === "nasional" && !value) {
+        newPlacements = newPlacements.filter(p => p !== "mabes");
+      } else if (key === "wilayah" && value) {
+        if (!newPlacements.includes("wilayah")) newPlacements.push("wilayah");
+        if (!newPlacements.includes("polda")) newPlacements.push("polda");
+        if (!newPlacements.includes("satker")) newPlacements.push("satker");
+      } else if (key === "wilayah" && !value) {
+        newPlacements = newPlacements.filter(p => !["wilayah", "polda", "satker"].includes(p));
+      } else if (key === "international" && value) {
+        if (!newPlacements.includes("international")) newPlacements.push("international");
+      } else if (key === "international" && !value) {
+        newPlacements = newPlacements.filter(p => p !== "international");
+      } else if (key === "polda" && value) {
+        if (!newPlacements.includes("polda")) newPlacements.push("polda");
+      } else if (key === "polda" && !value) {
+        newPlacements = newPlacements.filter(p => p !== "polda");
+      } else if (key === "satker" && value) {
+        if (!newPlacements.includes("satker")) newPlacements.push("satker");
+      } else if (key === "satker" && !value) {
+        newPlacements = newPlacements.filter(p => p !== "satker");
+      }
+
+      // Remove "all" if any individual option is unchecked
+      if (newPlacements.includes("all") && !value && key !== "semua") {
+        newPlacements = newPlacements.filter(p => p !== "all");
+      }
+
+      return { ...prev, [fileId]: newPlacements };
+    });
   };
 
   const handleCheckboxChange = (id: string) => {
@@ -354,6 +652,192 @@ export default function FormVideoUpdate() {
     }
   };
 
+  const handleFileCheckboxChangePlacement = (fileId: string, poldaItem: Destination, isChecked: boolean) => {
+    setFileCheckedLevels(prev => {
+      const currentFileLevels = prev[fileId] || new Set<number>();
+      const newFileLevels = new Set(currentFileLevels);
+
+      if (isChecked) {
+        newFileLevels.add(poldaItem.id);
+        // Add all sub-destinations for SATKER POLRI
+        if (poldaItem.name === "SATKER POLRI") {
+          poldaItem.subDestination.forEach((satkerItem: SubDestination) => {
+            newFileLevels.add(satkerItem.id);
+          });
+        }
+      } else {
+        newFileLevels.delete(poldaItem.id);
+        // Remove all sub-destinations for SATKER POLRI
+        if (poldaItem.name === "SATKER POLRI") {
+          poldaItem.subDestination.forEach((satkerItem: SubDestination) => {
+            newFileLevels.delete(satkerItem.id);
+          });
+        }
+      }
+
+      return { ...prev, [fileId]: newFileLevels };
+    });
+
+    // Update fileUnitSelections based on checked levels
+    const updatedFileLevels = fileCheckedLevels[fileId] || new Set<number>();
+    const hasPolda = listDest.some(item => 
+      item.levelNumber === 2 && 
+      item.name !== "SATKER POLRI" && 
+      updatedFileLevels.has(item.id)
+    );
+    const hasSatker = listDest.some(item => 
+      item.levelNumber === 2 && 
+      item.name === "SATKER POLRI" && 
+      updatedFileLevels.has(item.id)
+    );
+
+    setFileUnitSelections(prev => ({
+      ...prev,
+      [fileId]: {
+        ...prev[fileId],
+        polda: hasPolda,
+        satker: hasSatker,
+        wilayah: hasPolda || hasSatker,
+      }
+    }));
+  };
+
+  const updateMainCheckboxFromModal = (fileId: string) => {
+    const fileLevels = fileCheckedLevels[fileId] || new Set<number>();
+    const hasPolda = listDest.some(item => 
+      item.levelNumber === 2 && 
+      item.name !== "SATKER POLRI" && 
+      fileLevels.has(item.id)
+    );
+    const hasSatker = listDest.some(item => 
+      item.levelNumber === 2 && 
+      item.name === "SATKER POLRI" && 
+      fileLevels.has(item.id)
+    );
+
+    setFileUnitSelections(prev => ({
+      ...prev,
+      [fileId]: {
+        ...prev[fileId],
+        polda: hasPolda,
+        satker: hasSatker,
+        wilayah: hasPolda || hasSatker,
+      }
+    }));
+  };
+
+  const toggleExpand = (poldaId: number) => {
+    setExpandedPolda(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(poldaId)) {
+        newSet.delete(poldaId);
+      } else {
+        newSet.add(poldaId);
+      }
+      return newSet;
+    });
+  };
+
+  const handleSelectAllSubItems = (fileId: string, poldaItem: Destination) => {
+    const fileLevels = fileCheckedLevels[fileId] || new Set<number>();
+    const allSubItemsSelected = poldaItem.subDestination.every(subItem => 
+      fileLevels.has(subItem.id)
+    );
+
+    setFileCheckedLevels(prev => {
+      const currentFileLevels = prev[fileId] || new Set<number>();
+      const newFileLevels = new Set(currentFileLevels);
+
+      if (allSubItemsSelected) {
+        // Unselect all sub-items
+        poldaItem.subDestination.forEach(subItem => {
+          newFileLevels.delete(subItem.id);
+        });
+      } else {
+        // Select all sub-items
+        poldaItem.subDestination.forEach(subItem => {
+          newFileLevels.add(subItem.id);
+        });
+      }
+
+      return { ...prev, [fileId]: newFileLevels };
+    });
+  };
+
+  const getPlacement = (fileId?: string): string => {
+    if (fileId && filePlacements[fileId]) {
+      const placements = filePlacements[fileId];
+      let nowArr = placements.join(",");
+      nowArr = nowArr?.replaceAll("all", "all");
+      nowArr = nowArr?.replaceAll("mabes", "mabes");
+      nowArr = nowArr?.replaceAll("wilayah", "polda");
+      nowArr = nowArr?.replaceAll("polda", "polda");
+      nowArr = nowArr?.replaceAll("satker", "satker");
+      nowArr = nowArr?.replaceAll("international", "international");
+      return nowArr;
+    }
+    return "";
+  };
+
+  const setupPlacement = (fileId: string, placement: string, isChecked: boolean) => {
+    setFilePlacements(prev => {
+      const currentPlacements = prev[fileId] || [];
+      let temp = { ...prev };
+      
+      if (isChecked) {
+        if (placement === "all") {
+          temp[fileId] = ["all", "mabes", "wilayah", "polda", "satker", "international"];
+        } else if (placement === "wilayah") {
+          temp[fileId] = [...currentPlacements, "wilayah", "polda", "satker"];
+        } else if (placement === "polda") {
+          temp[fileId] = [...currentPlacements, "polda"];
+        } else if (placement === "satker") {
+          temp[fileId] = [...currentPlacements, "satker"];
+        } else {
+          temp[fileId] = [...currentPlacements, placement as PlacementType];
+        }
+      } else {
+        if (placement === "all") {
+          temp[fileId] = [];
+        } else if (placement === "wilayah") {
+          temp[fileId] = currentPlacements.filter(p => !["wilayah", "polda", "satker"].includes(p));
+        } else if (placement === "polda") {
+          temp[fileId] = currentPlacements.filter(p => p !== "polda");
+        } else if (placement === "satker") {
+          temp[fileId] = currentPlacements.filter(p => p !== "satker");
+        } else {
+          temp[fileId] = currentPlacements.filter(p => p !== placement);
+        }
+      }
+
+      return temp;
+    });
+  };
+
+  const updateModalChecklistLevels = (fileId: string) => {
+    const fileLevels = fileCheckedLevels[fileId] || new Set<number>();
+    const hasPolda = listDest.some(item => 
+      item.levelNumber === 2 && 
+      item.name !== "SATKER POLRI" && 
+      fileLevels.has(item.id)
+    );
+    const hasSatker = listDest.some(item => 
+      item.levelNumber === 2 && 
+      item.name === "SATKER POLRI" && 
+      fileLevels.has(item.id)
+    );
+
+    setFileUnitSelections(prev => ({
+      ...prev,
+      [fileId]: {
+        ...prev[fileId],
+        polda: hasPolda,
+        satker: hasSatker,
+        wilayah: hasPolda || hasSatker,
+      }
+    }));
+  };
+
   // const save = async (data: VideoSchema) => {
   //   loading();
   //   const finalTags = tags.join(", ");
@@ -441,6 +925,15 @@ export default function FormVideoUpdate() {
       return false;
     }
 
+    // Update file placements
+    if (files.length > 0) {
+      files.forEach((file: any) => {
+        if (file.id) {
+          updateFilePlacements(getPlacement(file.id));
+        }
+      });
+    }
+
     if (selectedFiles.length > 0) {
       const thumbnail = selectedFiles[0];
       const formMedia = new FormData();
@@ -638,37 +1131,6 @@ export default function FormVideoUpdate() {
     </div>
   ));
 
-  const handleCheckboxChangeImage = (fileId: number, value: string) => {
-    setSelectedOptions((prev: any) => {
-      const currentSelections = prev[fileId] || [];
-      if (value === "all") {
-        // If "all" is clicked, toggle all options
-        if (currentSelections.includes("all")) {
-          return { ...prev, [fileId]: [] }; // Deselect all
-        }
-        return {
-          ...prev,
-          [fileId]: ["all", "nasional", "wilayah", "internasional"],
-        }; // Select all
-      } else {
-        // If any other checkbox is clicked, toggle that checkbox
-        const updatedSelections = currentSelections.includes(value)
-          ? currentSelections.filter((option: any) => option !== value)
-          : [...currentSelections, value];
-
-        // If all individual options are selected, include "all" automatically
-        const isAllSelected = ["nasional", "wilayah", "internasional"].every(
-          (opt) => updatedSelections.includes(opt)
-        );
-        return {
-          ...prev,
-          [fileId]: isAllSelected
-            ? ["all", ...updatedSelections]
-            : updatedSelections.filter((opt: any) => opt !== "all"),
-        };
-      }
-    });
-  };
 
   function success() {
     MySwal.fire({
@@ -885,79 +1347,137 @@ export default function FormVideoUpdate() {
                                     })}
                                   </a>
                                 </div>
-                                <div>
+                                <div className="flex flex-wrap gap-3 items-center">
-                                  <Label className="flex items-center space-x-2">
+                                  <div>
-                                    <input
+                                    <Label className="flex items-center space-x-2">
-                                      type="checkbox"
+                                      <Checkbox
-                                      checked={selectedOptions[
+                                        checked={fileUnitSelections[file.id]?.semua || false}
-                                        file.id
+                                        onCheckedChange={(checked) =>
-                                      ]?.includes("all")}
+                                          handleFileUnitChange(file.id, "semua", checked as boolean)
-                                      onChange={() =>
+                                        }
-                                        handleCheckboxChangeImage(
+                                      />
-                                          file.id,
+                                      <span>
-                                          "all"
+                                        {t("all", { defaultValue: "All" })}
-                                        )
+                                      </span>
-                                      }
+                                    </Label>
-                                      className="form-checkbox"
+                                  </div>
-                                    />
+                                  <div>
-                                    <span>
+                                    <Label className="flex items-center space-x-2">
-                                      {t("all", { defaultValue: "All" })}
+                                      <Checkbox
-                                    </span>
+                                        checked={fileUnitSelections[file.id]?.nasional || false}
-                                  </Label>
+                                        onCheckedChange={(checked) =>
-                                </div>
+                                          handleFileUnitChange(file.id, "nasional", checked as boolean)
-                                <div>
+                                        }
-                                  <Label className="flex items-center space-x-2">
+                                      />
-                                    <input
+                                      <span>Nasional</span>
-                                      type="checkbox"
+                                    </Label>
-                                      checked={selectedOptions[
+                                  </div>
-                                        file.id
+                                  <div>
-                                      ]?.includes("nasional")}
+                                    <Label className="flex items-center space-x-2">
-                                      onChange={() =>
+                                      <Checkbox
-                                        handleCheckboxChangeImage(
+                                        checked={fileUnitSelections[file.id]?.wilayah || false}
-                                          file.id,
+                                        onCheckedChange={(checked) =>
-                                          "nasional"
+                                          handleFileUnitChange(file.id, "wilayah", checked as boolean)
-                                        )
+                                        }
-                                      }
+                                      />
-                                      className="form-checkbox"
+                                      <span>Wilayah</span>
-                                    />
+                                    </Label>
-                                    <span>Nasional</span>
+                                  </div>
-                                  </Label>
+                                  <div>
-                                </div>
+                                    <Label className="flex items-center space-x-2">
-                                <div>
+                                      <Checkbox
-                                  <Label className="flex items-center space-x-2">
+                                        checked={fileUnitSelections[file.id]?.international || false}
-                                    <input
+                                        onCheckedChange={(checked) =>
-                                      type="checkbox"
+                                          handleFileUnitChange(file.id, "international", checked as boolean)
-                                      checked={selectedOptions[
+                                        }
-                                        file.id
+                                      />
-                                      ]?.includes("wilayah")}
+                                      <span>Internasional</span>
-                                      onChange={() =>
+                                    </Label>
-                                        handleCheckboxChangeImage(
+                                  </div>
-                                          file.id,
+                                  <div>
-                                          "wilayah"
+                                    <Dialog>
-                                        )
+                                      <DialogTrigger asChild>
-                                      }
+                                        <Button
-                                      className="form-checkbox"
+                                          type="button"
-                                    />
+                                          variant="outline"
-                                    <span>Wilayah</span>
+                                          size="sm"
-                                  </Label>
+                                          onClick={() => setTempFile(file)}
-                                </div>
+                                        >
-                                <div>
+                                          Detail Wilayah
-                                  <Label className="flex items-center space-x-2">
+                                        </Button>
-                                    <input
+                                      </DialogTrigger>
-                                      type="checkbox"
+                                      <DialogContent className="max-w-2xl">
-                                      checked={selectedOptions[
+                                        <DialogHeader>
-                                        file.id
+                                          <DialogTitle>Daftar Wilayah POLDA dan SATKER</DialogTitle>
-                                      ]?.includes("internasional")}
+                                        </DialogHeader>
-                                      onChange={() =>
+                                        <div className="max-h-96 overflow-y-auto">
-                                        handleCheckboxChangeImage(
+                                          {listDest?.filter((item) => item.levelNumber === 2)
-                                          file.id,
+                                            .map((poldaItem) => (
-                                          "internasional"
+                                              <div key={poldaItem.id} className="mb-4">
-                                        )
+                                                <div className="flex items-center space-x-2 mb-2">
-                                      }
+                                                  <Checkbox
-                                      className="form-checkbox"
+                                                    checked={fileCheckedLevels[file.id]?.has(poldaItem.id) || false}
-                                    />
+                                                    onCheckedChange={(checked) =>
-                                    <span>Internasional</span>
+                                                      handleFileCheckboxChangePlacement(file.id, poldaItem, checked as boolean)
-                                  </Label>
+                                                    }
+                                                  />
+                                                  <Label className="font-medium">
+                                                    {poldaItem.name}
+                                                  </Label>
+                                                  {poldaItem.name === "SATKER POLRI" && poldaItem.subDestination.length > 0 && (
+                                                    <Button
+                                                      type="button"
+                                                      variant="ghost"
+                                                      size="sm"
+                                                      onClick={() => toggleExpand(poldaItem.id)}
+                                                    >
+                                                      {expandedPolda.has(poldaItem.id) ? "Tutup" : "Buka"}
+                                                    </Button>
+                                                  )}
+                                                </div>
+                                                {poldaItem.name === "SATKER POLRI" && expandedPolda.has(poldaItem.id) && (
+                                                  <div className="ml-6 space-y-2">
+                                                    <div className="flex items-center space-x-2">
+                                                      <Button
+                                                        type="button"
+                                                        variant="outline"
+                                                        size="sm"
+                                                        onClick={() => handleSelectAllSubItems(file.id, poldaItem)}
+                                                      >
+                                                        Pilih Semua
+                                                      </Button>
+                                                    </div>
+                                                    {poldaItem.subDestination.map((satkerItem) => (
+                                                      <div key={satkerItem.id} className="flex items-center space-x-2 ml-4">
+                                                        <Checkbox
+                                                          checked={fileCheckedLevels[file.id]?.has(satkerItem.id) || false}
+                                                          onCheckedChange={(checked) => {
+                                                            setFileCheckedLevels(prev => {
+                                                              const currentFileLevels = prev[file.id] || new Set<number>();
+                                                              const newFileLevels = new Set(currentFileLevels);
+                                                              if (checked) {
+                                                                newFileLevels.add(satkerItem.id);
+                                                              } else {
+                                                                newFileLevels.delete(satkerItem.id);
+                                                              }
+                                                              return { ...prev, [file.id]: newFileLevels };
+                                                            });
+                                                            updateMainCheckboxFromModal(file.id);
+                                                          }}
+                                                        />
+                                                        <Label className="text-sm">
+                                                          {satkerItem.name}
+                                                        </Label>
+                                                      </div>
+                                                    ))}
+                                                  </div>
+                                                )}
+                                              </div>
+                                            ))}
+                                        </div>
+                                      </DialogContent>
+                                    </Dialog>
+                                  </div>
                                 </div>
                               </div>
                             </div>