diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx
index 21c4c98b..73b97aee 100644
--- a/components/form/content/image-detail-form.tsx
+++ b/components/form/content/image-detail-form.tsx
@@ -20,7 +20,7 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 
-import { register } from "module";
+
 import { Switch } from "@/components/ui/switch";
 import Cookies from "js-cookie";
 import {
@@ -53,6 +53,7 @@ import {
   DialogContent,
   DialogTitle,
   DialogTrigger,
+  DialogClose,
 } from "@/components/ui/dialog";
 import { Textarea } from "@/components/ui/textarea";
 import { close, loading, successCallback } from "@/config/swal";
@@ -161,6 +162,21 @@ export default function FormImageDetail() {
   const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
   const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
   const [approval, setApproval] = useState<any>();
+  // State untuk setiap file secara individual
+  const [fileUnitSelections, setFileUnitSelections] = useState<Array<{
+    semua: boolean;
+    nasional: boolean;
+    wilayah: boolean;
+    international: boolean;
+    polda: boolean;
+    polres: boolean;
+    satker: boolean;
+  }>>([]);
+
+  // State untuk setiap file secara individual - checklist levels
+  const [fileCheckedLevels, setFileCheckedLevels] = useState<Array<Set<number>>>([]);
+
+  // State global untuk kompatibilitas (akan dihapus nanti)
   const [unitSelection, setUnitSelection] = useState({
     semua: false,
     nasional: false,
@@ -255,12 +271,12 @@ export default function FormImageDetail() {
   // useEffect untuk update checkbox utama ketika pilihan modal berubah
   useEffect(() => {
     if (!isUpdatingFromMainCheckbox && listDest.length > 0) {
-      updateMainCheckboxFromModal();
+      updateMainCheckboxFromModalLegacy();
     }
   }, [checkedLevels, isUpdatingFromMainCheckbox]);
 
-  // Fungsi untuk update checkbox utama berdasarkan checkbox modal
-  const updateMainCheckboxFromModal = () => {
+  // Fungsi untuk update checkbox utama berdasarkan checkbox modal (global/legacy)
+  const updateMainCheckboxFromModalLegacy = () => {
     if (!isUpdatingFromMainCheckbox && listDest.length > 0) {
       // Hitung item yang dipilih berdasarkan checkedLevels
       const checkedPoldaCount = listDest.filter((item: any) => 
@@ -406,6 +422,63 @@ export default function FormImageDetail() {
     }
   };
 
+  // Fungsi untuk mengupdate state individual file
+  const handleFileUnitChange = (
+    fileIndex: number,
+    key: keyof typeof unitSelection,
+    value: boolean
+  ) => {
+    setFileUnitSelections(prev => {
+      const newSelections = [...prev];
+      const currentSelection = { ...newSelections[fileIndex] };
+
+      if (key === "semua") {
+        // Jika klik Semua, set semua value ke true/false
+        currentSelection.semua = value;
+        currentSelection.nasional = value;
+        currentSelection.wilayah = value;
+        currentSelection.international = value;
+        currentSelection.polda = value;
+        currentSelection.polres = value;
+        currentSelection.satker = value;
+      } else {
+        // Validasi khusus untuk POLRES - harus ada POLDA yang ter-checklist
+        if (key === "polres" && value) {
+          const currentFileCheckedLevels = fileCheckedLevels[fileIndex];
+          const hasSelectedPolda = currentFileCheckedLevels && listDest.some((item: any) => 
+            item.levelNumber === 2 && 
+            item.name !== "SATKER POLRI" && 
+            currentFileCheckedLevels.has(Number(item.id))
+          );
+          
+          if (!hasSelectedPolda) {
+            alert("Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES.");
+            return prev; // Batalkan perubahan
+          }
+        }
+
+        // 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]);
+
+        currentSelection.semua = allChecked;
+      }
+
+      newSelections[fileIndex] = currentSelection;
+      return newSelections;
+    });
+  };
+
+  // Fungsi lama untuk kompatibilitas (akan dihapus nanti)
   const handleUnitChange = (
     key: keyof typeof unitSelection,
     value: boolean
@@ -497,6 +570,146 @@ export default function FormImageDetail() {
     );
   };
 
+  // Fungsi untuk mengupdate checklist levels untuk file tertentu
+  const handleFileCheckboxChangePlacement = (fileIndex: number, levelId: number) => {
+    setFileCheckedLevels((prev) => {
+      const newArray = [...prev];
+      const currentFileLevels = new Set<number>(newArray[fileIndex]);
+      const isCurrentlyChecked = currentFileLevels.has(levelId);
+      
+      if (isCurrentlyChecked) {
+        currentFileLevels.delete(levelId);
+        
+        // Jika ini adalah POLDA yang di-unchecklist, unchecklist juga semua polres di bawahnya
+        const poldaItem = listDest.find((item: any) => Number(item.id) === levelId) as any;
+        if (poldaItem && poldaItem.subDestination && poldaItem.name !== "SATKER POLRI") {
+          poldaItem.subDestination.forEach((polres: any) => {
+            currentFileLevels.delete(Number(polres.id));
+          });
+        }
+        
+        // Jika ini adalah SATKER POLRI yang di-unchecklist, unchecklist juga semua sub-item di bawahnya
+        if (poldaItem && poldaItem.name === "SATKER POLRI") {
+          poldaItem.subDestination?.forEach((subItem: any) => {
+            currentFileLevels.delete(Number(subItem.id));
+          });
+        }
+      } else {
+        currentFileLevels.add(levelId);
+        
+        // Jika ini adalah SATKER POLRI yang di-checklist, checklist juga semua sub-item di bawahnya
+        const satkerItem = listDest.find((item: any) => Number(item.id) === levelId) as any;
+        if (satkerItem && satkerItem.name === "SATKER POLRI") {
+          // Checklist semua sub-item di bawah SATKER POLRI (bukan POLRES)
+          satkerItem.subDestination?.forEach((subItem: any) => {
+            currentFileLevels.add(Number(subItem.id));
+          });
+        }
+      }
+      
+      newArray[fileIndex] = currentFileLevels;
+      
+      // Update checkbox utama berdasarkan perubahan di modal
+      // Pindahkan ke sini agar state sudah ter-update
+      setTimeout(() => updateMainCheckboxFromModal(fileIndex), 0);
+      
+      return newArray;
+    });
+  };
+
+  // Fungsi untuk menangani "Pilih Semua" sub-items di bawah POLDA
+  const handleSelectAllSubItems = (fileIndex: number, polda: any) => {
+    setFileCheckedLevels((prev) => {
+      const newArray = [...prev];
+      const currentFileLevels = new Set<number>(newArray[fileIndex]);
+      
+      // Cek apakah semua sub-items sudah ter-checklist
+      const allSubItemsChecked = polda.subDestination?.every((sub: any) => 
+        currentFileLevels.has(Number(sub.id))
+      );
+      
+      if (allSubItemsChecked) {
+        // Jika semua sudah ter-checklist, unchecklist semuanya
+        polda.subDestination?.forEach((sub: any) => {
+          currentFileLevels.delete(Number(sub.id));
+        });
+      } else {
+        // Jika belum semua ter-checklist, checklist semuanya
+        // Checklist POLDA juga jika belum ter-checklist
+        if (!currentFileLevels.has(Number(polda.id))) {
+          currentFileLevels.add(Number(polda.id));
+        }
+        // Checklist semua sub-items
+        polda.subDestination?.forEach((sub: any) => {
+          currentFileLevels.add(Number(sub.id));
+        });
+      }
+      
+      newArray[fileIndex] = currentFileLevels;
+      
+      // Update checkbox utama berdasarkan perubahan di modal
+      setTimeout(() => updateMainCheckboxFromModal(fileIndex), 0);
+      
+      return newArray;
+    });
+  };
+
+  // Fungsi untuk mengupdate checkbox utama berdasarkan checklist di modal
+  const updateMainCheckboxFromModal = (fileIndex: number) => {
+    setFileUnitSelections((prev) => {
+        const newSelections = [...prev];
+        const currentSelection = { ...newSelections[fileIndex] };
+        const currentFileLevels = fileCheckedLevels[fileIndex];
+        
+        if (!currentFileLevels) return prev;
+        
+        // Hitung total POLDA yang ada (bukan SATKER POLRI)
+        const totalPoldaCount = listDest.filter((item: any) => 
+          item.levelNumber === 2 && item.name !== "SATKER POLRI"
+        ).length;
+        
+        // Hitung berapa banyak POLDA yang ter-checklist (bukan SATKER POLRI)
+        const checkedPoldaCount = listDest.reduce((total: number, item: any) => {
+          if (item.levelNumber === 2 && item.name !== "SATKER POLRI" && currentFileLevels.has(Number(item.id))) {
+            return total + 1;
+          }
+          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((item: any) => item.name === "SATKER POLRI");
+        const isSatkerChecked = satkerItem && currentFileLevels.has(Number(satkerItem.id));
+        
+        // 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);
+        
+        newSelections[fileIndex] = currentSelection;
+        return newSelections;
+      });
+  };
+
+  // Fungsi lama untuk kompatibilitas (akan dihapus nanti)
   const handleCheckboxChangePlacement = (levelId: number) => {
     setCheckedLevels((prev: Set<number>) => {
       const updatedLevels = new Set<number>(prev);
@@ -570,10 +783,28 @@ export default function FormImageDetail() {
 
   const setupPlacementCheck = (length: number) => {
     const temp = [];
+    const unitSelections = [];
+    const checkedLevelsArray = [];
+    
     for (let i = 0; i < length; i++) {
       temp.push([]);
+      // Inisialisasi state untuk setiap file
+      unitSelections.push({
+        semua: false,
+        nasional: false,
+        wilayah: false,
+        international: false,
+        polda: false,
+        polres: false,
+        satker: false,
+      });
+      // Inisialisasi checkedLevels untuk setiap file
+      checkedLevelsArray.push(new Set<number>());
     }
+    
     setFilePlacements(temp);
+    setFileUnitSelections(unitSelections);
+    setFileCheckedLevels(checkedLevelsArray);
   };
 
   useEffect(() => {
@@ -673,12 +904,20 @@ export default function FormImageDetail() {
   };
 
   async function save() {
+    // Gabungkan semua checkedLevels dari semua file
+    const allCheckedLevels = new Set<number>();
+    fileCheckedLevels.forEach((fileLevels) => {
+      fileLevels.forEach((levelId) => {
+        allCheckedLevels.add(levelId);
+      });
+    });
+
     const data = {
       mediaUploadId: id,
       statusId: status,
       message: description,
       files: isUserMabesApprover ? getPlacement() : [],
-      customLocationPlacement: Array.from(checkedLevels).join(","),
+      customLocationPlacement: Array.from(allCheckedLevels).join(","),
     };
     setModalOpen(false);
     loading();
@@ -756,6 +995,92 @@ export default function FormImageDetail() {
       }
     }
     setFilePlacements(temp);
+    
+    // Update checklist levels di modal berdasarkan placement yang diubah
+    updateModalChecklistLevels(index, placement, checked);
+  };
+
+  // Fungsi untuk mengupdate checklist levels di modal berdasarkan placement
+  const updateModalChecklistLevels = (fileIndex: number, placement: string, checked: boolean) => {
+    if (!listDest || listDest.length === 0) return;
+    
+    setFileCheckedLevels((prev) => {
+      const newArray = [...prev];
+      const currentFileLevels = new Set<number>(newArray[fileIndex]);
+      
+      if (checked) {
+        if (placement === "polda") {
+          // Checklist semua POLDA (bukan SATKER POLRI)
+          listDest.forEach((item: any) => {
+            if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
+              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((item: any) => item.name === "SATKER POLRI");
+          if (satkerItem) {
+            currentFileLevels.add(Number(satkerItem.id));
+            if (satkerItem.subDestination) {
+              satkerItem.subDestination.forEach((sub: any) => {
+                currentFileLevels.add(Number(sub.id));
+              });
+            }
+          }
+        }
+      } else {
+        if (placement === "polda") {
+          // Unchecklist semua POLDA dan POLRES di bawahnya
+          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") {
+          // Unchecklist SATKER POLRI dan semua sub-item di bawahnya
+          const satkerItem: any = listDest.find((item: any) => item.name === "SATKER POLRI");
+          if (satkerItem) {
+            currentFileLevels.delete(Number(satkerItem.id));
+            if (satkerItem.subDestination) {
+              satkerItem.subDestination.forEach((sub: any) => {
+                currentFileLevels.delete(Number(sub.id));
+              });
+            }
+          }
+        }
+      }
+      
+      newArray[fileIndex] = currentFileLevels;
+      return newArray;
+    });
   };
 
   function handleDeleteFileApproval(id: number) {
@@ -1111,445 +1436,309 @@ export default function FormImageDetail() {
               )} */}
 
               <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-                <DialogContent size="md" className="max-h-[600px]">
-                  <DialogHeader>
-                    <DialogTitle>
-                      {t("leave-comment", { defaultValue: "Leave Comment" })}
+                <DialogContent className="max-h-[90vh] max-w-[95vw] lg:max-w-[1200px]">
+                  <DialogHeader className="border-b border-gray-200 pb-4">
+                    <DialogTitle className="text-xl font-semibold">
+                      {t("leave-comment", { defaultValue: "Kelola Persetujuan Konten" })}
                     </DialogTitle>
                   </DialogHeader>
-                  <div className="flex flex-col gap-2 max-h-[208px] md:max-h-[312px] overflow-y-auto">
-                    {status == "2"
-                      ? files?.map((file, index) => (
-                          <div
-                            key={file.id}
-                            className="flex flex-row gap-5 items-center w-full"
-                          >
-                            <div className="w-[200px] h-[100px] flex justify-center items-center">
+                  
+                  <div className="flex flex-col gap-4 max-h-[40vh] overflow-y-auto p-1">
+                    {status == "2" && files?.map((file, index) => (
+                      <div key={file.id} className="border border-gray-200 rounded-lg p-4 bg-gray-50">
+                        {/* Header File */}
+                        <div className="flex items-center justify-between mb-4 bg-white p-3 rounded-md border">
+                          <div className="flex items-center gap-4">
+                            <div className="w-[120px] h-[80px] flex-shrink-0 flex justify-center items-center bg-gray-100 rounded-md overflow-hidden">
                               <img
                                 key={index}
                                 alt={`files-${index + 1}`}
                                 src={file.url}
                                 onLoad={(e) => handleImageLoad(e, index)}
-                                className={`h-[100px] object-cover ${
-                                  portraitMap[index] ? "w-auto" : "!w-[200px]"
+                                className={`h-[80px] object-cover ${
+                                  portraitMap[index] ? "w-auto" : "!w-[120px]"
                                 }`}
                               />
                             </div>
-                            <div className="flex flex-col gap-2 w-full">
-                              <div className="flex justify-between text-sm">
-                                {file.fileName}
-                                <a
-                                  onClick={() =>
-                                    handleDeleteFileApproval(file.id)
-                                  }
-                                >
-                                  <Icon icon="humbleicons:times" color="red" />
-                                </a>
+                            <div>
+                              <h4 className="font-medium text-gray-900 mb-1">File {index + 1}</h4>
+                              <p className="text-sm text-gray-600 break-all">{file.fileName}</p>
+                            </div>
+                          </div>
+                          <button
+                            onClick={() => handleDeleteFileApproval(file.id)}
+                            className="p-2 hover:bg-red-50 rounded-full transition-colors"
+                            title="Hapus file"
+                          >
+                            <Icon icon="humbleicons:times" color="red" width={20} height={20} />
+                          </button>
+                        </div>
+
+                        {/* Section Pengaturan Distribusi */}
+                        <div className="bg-white rounded-md p-4 border">
+                          <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>
+                          
+                          {/* Checkbox Tingkat Utama */}
+                          <div className="space-y-4">
+                            <div>
+                              <p className="text-sm font-medium text-gray-700 mb-3">Tingkat Distribusi:</p>
+                              <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                                {[
+                                  { key: "semua", label: "Semua" },
+                                  { key: "nasional", label: "Nasional" },
+                                  { key: "wilayah", label: "Wilayah" },
+                                  { key: "international", label: "Internasional" },
+                                ].map((item, idx) => (
+                                  <div key={item.key} className="flex items-center gap-2 p-2 border border-gray-200 rounded-md hover:bg-gray-50">
+                                    <Checkbox
+                                      id={`${item.key}-${index}`}
+                                      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">
+                                      {item.label}
+                                    </Label>
+                                  </div>
+                                ))}
                               </div>
-                              <div>
-                                {/* --- Checkbox utama --- */}
-                                <div className="flex flex-wrap gap-3 mt-6 lg:pt-7 lg:ml-3">
+                            </div>
+
+                            {/* Detail Wilayah */}
+                            {fileUnitSelections[index]?.wilayah && (
+                              <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">
                                   {[
-                                    "semua",
-                                    "nasional",
-                                    "wilayah",
-                                    "international",
-                                  ].map((key, index) => (
-                                    <div
-                                      className="flex items-center gap-2"
-                                      key={key}
-                                    >
+                                    { key: "polda", label: "POLDA" },
+                                    { key: "polres", label: "POLRES" },
+                                    { key: "satker", label: "SATKER" },
+                                  ].map((item, idx) => (
+                                    <div key={item.key} className="flex items-center gap-2 p-3 border border-gray-200 rounded-md hover:bg-gray-50">
                                       <Checkbox
-                                        id={key}
-                                        checked={
-                                          unitSelection[
-                                            key as keyof typeof unitSelection
-                                          ]
-                                        }
+                                        id={`${item.key}-${index}`}
+                                        checked={fileUnitSelections[index]?.[item.key as keyof typeof unitSelection] || false}
                                         onCheckedChange={(value) => {
-                                          handleUnitChange(
-                                            key as keyof typeof unitSelection,
+                                          handleFileUnitChange(
+                                            index,
+                                            item.key as keyof typeof unitSelection,
                                             value as boolean
                                           );
-                                          setupPlacement(
-                                            index,
-                                            key,
-                                            Boolean(value)
-                                          );
+                                          setupPlacement(index, item.key, Boolean(value));
                                         }}
                                       />
-                                      <Label htmlFor={key}>
-                                        {key.charAt(0).toUpperCase() +
-                                          key.slice(1)}
+                                      <Label htmlFor={`${item.key}-${index}`} className="text-sm font-medium cursor-pointer">
+                                        {item.label}
                                       </Label>
                                     </div>
                                   ))}
-                                </div>
-
-                                {/* --- Kalau wilayah dicentang baru tampilkan detail --- */}
-                                {unitSelection.wilayah && (
-                                  <div className="mt-6 lg:pt-6 lg:pl-3 space-y-3">
-                                    <div className="flex flex-wrap gap-3">
-                                      {["polda", "polres", "satker"].map(
-                                        (key, index) => (
-                                          <div
-                                            className="flex items-center gap-2"
-                                            key={key}
-                                          >
-                                            <Checkbox
-                                              id={key}
-                                              checked={
-                                                unitSelection[
-                                                  key as keyof typeof unitSelection
-                                                ]
-                                              }
-                                              onCheckedChange={(value) => {
-                                                handleUnitChange(
-                                                  key as keyof typeof unitSelection,
-                                                  value as boolean
-                                                );
-                                                setupPlacement(
-                                                  index,
-                                                  key,
-                                                  Boolean(value)
-                                                ); 
-                                              }}
-                                            />
-                                            <Label htmlFor={key}>
-                                              {key.charAt(0).toUpperCase() +
-                                                key.slice(1)}
-                                            </Label>
-                                          </div>
-                                        )
-                                      )}
-                                    </div>
-
-                                    {/* --- Custom Button + Dialog --- */}
+                                  
+                                  {/* Tombol Kustom sejajar dengan checkbox */}
+                                  <div className="flex items-center justify-center p-3">
                                     <Dialog>
                                       <DialogTrigger asChild>
-                                        <Button
-                                          variant="soft"
-                                          size="sm"
-                                          color="primary"
-                                        >
-                                          [
-                                          {t("custom", {
-                                            defaultValue: "Custom",
-                                          })}
-                                          ]
+                                        <Button variant="outline" size="sm" className="gap-2">
+                                          <Icon icon="material-symbols:tune" width={16} height={16} />
+                                          {t("custom", { defaultValue: "Kustom" })}
                                         </Button>
                                       </DialogTrigger>
-                                      <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
-                                        <DialogHeader>
-                                          <DialogTitle>
-                                            Daftar Wilayah Polda dan Polres
+                                      <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 POLRES
                                           </DialogTitle>
                                         </DialogHeader>
-                                        <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                                        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
                                           {listDest.map((polda: any) => (
-                                              <div
-                                                key={polda.id}
-                                                className="border p-2"
-                                              >
-                                                <div className="flex items-center">
-                                                  <Label className="flex items-center flex-1">
-                                                    <Checkbox
-                                                      checked={checkedLevels.has(Number(polda.id))}
-                                                      onCheckedChange={() => 
-                                                        handleCheckboxChangePlacement(Number(polda.id))
-                                                      }
-                                                      className="mr-3"
-                                                    />
-                                                    {polda.name}
-                                                  </Label>
+                                            <div 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
+                                                    checked={fileCheckedLevels[index]?.has(Number(polda.id)) || false}
+                                                    onCheckedChange={() => handleFileCheckboxChangePlacement(index, Number(polda.id))}
+                                                  />
+                                                  <span className="font-semibold text-gray-900 text-sm">{polda.name}</span>
+                                                </Label>
+                                                {polda.subDestination && (
                                                   <button
                                                     onClick={(e) => {
                                                       e.preventDefault();
                                                       e.stopPropagation();
                                                       toggleExpand(polda.id);
                                                     }}
-                                                    className="ml-2 focus:outline-none p-1 hover:bg-gray-100 rounded"
-                                                    type="button"
+                                                    className="p-1 hover:bg-gray-100 rounded-md transition-colors"
                                                   >
-                                                    {expandedPolda[polda.id] ? (
-                                                      <ChevronUp size={16} />
-                                                    ) : (
-                                                      <ChevronDown size={16} />
-                                                    )}
+                                                    <Icon 
+                                                      icon={expandedPolda[polda.id] ? "mdi:chevron-up" : "mdi:chevron-down"} 
+                                                      width={16} height={16} 
+                                                    />
                                                   </button>
-                                                </div>
-
-                                                {expandedPolda[polda.id] && (
-                                                  <div className="ml-6 mt-2">
-                                                    <Label className="block">
-                                                      <Checkbox
-                                                        checked={polda?.subDestination?.every(
-                                                          (polres: any) =>
-                                                            checkedLevels.has(Number(polres.id))
-                                                        )}
-                                                        onCheckedChange={(isChecked) => {
-                                                          const updatedLevels = new Set<number>(
-                                                            checkedLevels
-                                                          );
-                                                          
-                                                                                                                     // Jika ini adalah SATKER POLRI, checklist juga sub-item di bawahnya
-                                                           if (polda.name === "SATKER POLRI") {
-                                                             if (isChecked) {
-                                                               updatedLevels.add(Number(polda.id));
-                                                               // Checklist semua sub-item di bawah SATKER POLRI (bukan POLRES)
-                                                               polda?.subDestination?.forEach((subItem: any) => {
-                                                                 updatedLevels.add(Number(subItem.id));
-                                                               });
-                                                             } else {
-                                                               updatedLevels.delete(Number(polda.id));
-                                                               // Unchecklist semua sub-item di bawah SATKER POLRI
-                                                               polda?.subDestination?.forEach((subItem: any) => {
-                                                                 updatedLevels.delete(Number(subItem.id));
-                                                               });
-                                                             }
-                                                           } else {
-                                                            // Untuk POLDA biasa, checklist/unchecklist polres
-                                                            polda?.subDestination?.forEach(
-                                                              (polres: any) => {
-                                                                if (isChecked) {
-                                                                  updatedLevels.add(Number(polres.id));
-                                                                } else {
-                                                                  updatedLevels.delete(Number(polres.id));
-                                                                }
-                                                              }
-                                                            );
-                                                          }
-                                                          
-                                                          setCheckedLevels(updatedLevels);
-                                                        }}
-                                                        className="mr-2"
-                                                      />
-                                                      {polda.name === "SATKER POLRI" ? "Pilih SATKER" : "Pilih Semua"}
-                                                    </Label>
-                                                    {polda?.subDestination?.map(
-                                                      (polres: any) => (
-                                                        <Label
-                                                          key={polres.id}
-                                                          className="block mt-1"
-                                                        >
-                                                                                                                     <Checkbox
-                                                             checked={checkedLevels.has(Number(polres.id))}
-                                                             onCheckedChange={() => 
-                                                               handleCheckboxChangePlacement(Number(polres.id))
-                                                             }
-                                                             className="mr-2"
-                                                           />
-                                                           {polres.name}
-                                                        </Label>
-                                                      )
-                                                    )}
-                                                  </div>
                                                 )}
                                               </div>
+
+                                              {/* Sub-items */}
+                                              {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 = polda.subDestination?.every((sub: any) => 
+                                                        fileCheckedLevels[index]?.has(Number(sub.id))
+                                                      );
+                                                      return (
+                                                        <Button
+                                                          size="sm"
+                                                          variant="outline"
+                                                          className="text-xs h-6 px-2"
+                                                          onClick={() => handleSelectAllSubItems(index, polda)}
+                                                        >
+                                                          {allSubItemsChecked ? (
+                                                            <>
+                                                              <Icon icon="material-symbols:check-indeterminate-small" width={12} height={12} className="mr-1" />
+                                                              Batal Semua
+                                                            </>
+                                                          ) : (
+                                                            <>
+                                                              <Icon icon="material-symbols:check-all" width={12} height={12} className="mr-1" />
+                                                              Pilih Semua
+                                                            </>
+                                                          )}
+                                                        </Button>
+                                                      );
+                                                    })()}
+                                                  </div>
+                                                  <div className="space-y-1">
+                                                    {polda.subDestination.map((sub: any) => (
+                                                      <Label key={sub.id} className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 transition-colors cursor-pointer text-xs">
+                                                        <Checkbox
+                                                          checked={fileCheckedLevels[index]?.has(Number(sub.id)) || false}
+                                                          onCheckedChange={() => handleFileCheckboxChangePlacement(index, Number(sub.id))}
+                                                        />
+                                                        <span className="text-gray-700">{sub.name}</span>
+                                                      </Label>
+                                                    ))}
+                                                  </div>
+                                                </div>
+                                              )}
+                                            </div>
                                           ))}
                                         </div>
+                                        <div className="flex justify-end gap-3 border-t border-gray-200 pt-4">
+                                          <DialogClose asChild>
+                                            <Button variant="outline">
+                                              {t("cancel", { defaultValue: "Batal" })}
+                                            </Button>
+                                          </DialogClose>
+                                          <DialogClose asChild>
+                                            <Button>
+                                              {t("save", { defaultValue: "Simpan" })}
+                                            </Button>
+                                          </DialogClose>
+                                        </div>
                                       </DialogContent>
                                     </Dialog>
                                   </div>
-                                )}
-                              </div>
-                              {/* {isUserMabesApprover && (
-                                <div className="flex flex-row gap-2">
-                                  <div className="flex items-center space-x-2">
-                                    <Checkbox
-                                      id="terms"
-                                      value="all"
-                                      checked={filePlacements[index]?.includes(
-                                        "all"
-                                      )}
-                                      onCheckedChange={(e) =>
-                                        setupPlacement(index, "all", Boolean(e))
-                                      }
-                                    />
-                                    <label
-                                      htmlFor="terms"
-                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                    >
-                                      {t("all", { defaultValue: "All" })}
-                                    </label>
-                                  </div>
-                                  <div className="flex items-center space-x-2">
-                                    <Checkbox
-                                      id="terms"
-                                      checked={filePlacements[index]?.includes(
-                                        "mabes"
-                                      )}
-                                      onCheckedChange={(e) =>
-                                        setupPlacement(
-                                          index,
-                                          "mabes",
-                                          Boolean(e)
-                                        )
-                                      }
-                                    />
-                                    <label
-                                      htmlFor="terms"
-                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                    >
-                                      Nasional
-                                    </label>
-                                  </div>
-                                  <div className="flex items-center space-x-2">
-                                    <Checkbox
-                                      id="terms"
-                                      checked={filePlacements[index]?.includes(
-                                        "polda"
-                                      )}
-                                      onCheckedChange={(e) =>
-                                        setupPlacement(
-                                          index,
-                                          "polda",
-                                          Boolean(e)
-                                        )
-                                      }
-                                    />
-                                    <label
-                                      htmlFor="terms"
-                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                    >
-                                      Wilayah
-                                    </label>
-                                    {wilayahPublish.polda && (
-                                      <UnitMapping
-                                        unit="Polda"
-                                        isDetail={false}
-                                        sendDataToParent={(data: any) =>
-                                          setSelectedPolda(data)
-                                        }
-                                      />
-                                    )}
-                                  </div>
-
-                                  <div className="flex items-center space-x-2">
-                                    <Checkbox
-                                      id="terms"
-                                      checked={filePlacements[index]?.includes(
-                                        "international"
-                                      )}
-                                      onCheckedChange={(e) =>
-                                        setupPlacement(
-                                          index,
-                                          "international",
-                                          Boolean(e)
-                                        )
-                                      }
-                                    />
-                                    <label
-                                      htmlFor="terms"
-                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                    >
-                                      Internasional
-                                    </label>
-                                  </div>
                                 </div>
-                              )} */}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                  
+                  {/* Section Komentar */}
+                  <div className="border-t border-gray-200 pt-6">
+                    <div className="space-y-4">
+                      <div>
+                        <Label htmlFor="comment" className="text-sm font-medium text-gray-900 mb-2 block">
+                          Komentar / Catatan:
+                        </Label>
+                        <Textarea
+                          id="comment"
+                          placeholder="Tulis komentar atau catatan untuk konten ini..."
+                          value={description}
+                          onChange={(e) => setDescription(e.target.value)}
+                          className="min-h-[100px] resize-none"
+                        />
+                      </div>
+
+                      {/* Template Komentar */}
+                      <div className="space-y-3">
+                        {status == "3" || status == "4" ? (
+                          <div>
+                            <p className="text-sm font-medium text-gray-700 mb-2">Template Komentar Penolakan:</p>
+                            <div className="flex flex-wrap gap-2">
+                              {[
+                                "Kualitas media kurang baik",
+                                "Deskripsi kurang lengkap", 
+                                "Judul kurang tepat"
+                              ].map((template) => (
+                                <Button
+                                  key={template}
+                                  size="sm"
+                                  variant={description === template ? "default" : "outline"}
+                                  className="text-xs"
+                                  onClick={() => setDescription(template)}
+                                >
+                                  {template}
+                                </Button>
+                              ))}
                             </div>
                           </div>
-                        ))
-                      : ""}
+                        ) : (
+                          <div>
+                            <p className="text-sm font-medium text-gray-700 mb-2">Template Komentar Persetujuan:</p>
+                            <div className="flex flex-wrap gap-2">
+                              {[
+                                "Konten sangat bagus",
+                                "Konten menarik"
+                              ].map((template) => (
+                                <Button
+                                  key={template}
+                                  size="sm"
+                                  variant={description === template ? "default" : "outline"}
+                                  className="text-xs"
+                                  onClick={() => setDescription(template)}
+                                >
+                                  {template}
+                                </Button>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
                   </div>
-                  <div className="flex flex-col gap-4">
-                    <Textarea
-                      placeholder="Type your message here."
-                      value={description}
-                      onChange={(e) => setDescription(e.target.value)}
-                    />
-                  </div>
-                  {status == "3" || status == "4" ? (
-                    <div className="flex flex-row gap-2">
-                      <Button
-                        size="sm"
-                        color={
-                          description === "Kualitas media kurang baik"
-                            ? "primary"
-                            : "default"
-                        }
-                        className="cursor-pointer"
-                        onClick={() =>
-                          setDescription("Kualitas media kurang baik")
-                        }
-                      >
-                        Kualitas media kurang baik
-                      </Button>
 
-                      <Button
-                        size="sm"
-                        color={
-                          description === "Deskripsi kurang lengkap"
-                            ? "primary"
-                            : "default"
-                        }
-                        className="cursor-pointer"
-                        onClick={() =>
-                          setDescription("Deskripsi kurang lengkap")
-                        }
-                      >
-                        Deskripsi kurang lengkap
-                      </Button>
-                      <Button
-                        size="sm"
-                        color={
-                          description === "Judul kurang tepat"
-                            ? "primary"
-                            : "default"
-                        }
-                        className="cursor-pointer"
-                        onClick={() => setDescription("Judul kurang tepat")}
-                      >
-                        Judul kurang tepat
-                      </Button>
-                    </div>
-                  ) : (
-                    <div className="flex flex-row gap-2">
-                      <Button
-                        size="sm"
-                        color={
-                          description === "Konten sangat bagus"
-                            ? "primary"
-                            : "default"
-                        }
-                        className="cursor-pointer"
-                        onClick={() => setDescription("Konten sangat bagus")}
-                      >
-                        Konten sangat bagus
-                      </Button>
-                      <Button
-                        size="sm"
-                        color={
-                          description === "Konten menarik"
-                            ? "primary"
-                            : "default"
-                        }
-                        className="cursor-pointer"
-                        onClick={() => setDescription("Konten menarik")}
-                      >
-                        Konten menarik
-                      </Button>
-                    </div>
-                  )}
-                  <DialogFooter>
-                    <div className="flex flex-row gap-2 justify-end">
-                      {" "}
+                  <DialogFooter className="border-t border-gray-200 pt-4">
+                    <div className="flex flex-row gap-3 justify-end w-full">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => setModalOpen(false)}
+                        className="min-w-[100px]"
+                      >
+                        {t("cancel", { defaultValue: "Batal" })}
+                      </Button>
                       <Button
                         type="button"
-                        color="primary"
                         onClick={() => submit()}
+                        className="min-w-[100px]"
                       >
-                        {t("submit", { defaultValue: "Submit" })}
-                      </Button>
-                      <Button
-                        type="button"
-                        color="destructive"
-                        onClick={() => {
-                          setModalOpen(false);
-                        }}
-                      >
-                        {t("cancel", { defaultValue: "Cancel" })}
+                        {t("submit", { defaultValue: "Kirim" })}
                       </Button>
                     </div>
                   </DialogFooter>