From 285bcad1d88d5f82b0691dc0f230a312bf6a8362 Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Sat, 23 Aug 2025 22:04:54 +0700 Subject: [PATCH] fixing --- components/form/content/audio-detail-form.tsx | 521 ++++---- components/form/content/image-detail-form.tsx | 1075 ++++++++++------- components/form/content/teks-detail-form.tsx | 521 ++++---- components/form/content/video-detail-form.tsx | 514 ++++---- components/landing-page/hero-new.tsx | 145 ++- 5 files changed, 1561 insertions(+), 1215 deletions(-) diff --git a/components/form/content/audio-detail-form.tsx b/components/form/content/audio-detail-form.tsx index d9c6c794..b1f3049f 100644 --- a/components/form/content/audio-detail-form.tsx +++ b/components/form/content/audio-detail-form.tsx @@ -198,6 +198,12 @@ export default function FormAudioDetail() { }> >([]); + useEffect(() => { + if (Number(userLevelId) === 216 && Number(roleId) === 3) { + setIsUserMabesApprover(true); + } + }, [userLevelId, roleId]); + // Fungsi untuk mengupdate state individual file const handleFileUnitChange = ( fileIndex: number, @@ -1298,6 +1304,13 @@ export default function FormAudioDetail() {

{file.fileName}

+ {isUserMabesApprover ? ( + "" + ) : ( +

+ Selesai +

+ )} - - - - - Daftar Wilayah POLDA dan POLRES - - -
- {listDest.map((polda: any) => ( -
- {/* Header POLDA */} -
- - {polda.subDestination && ( - - )} -
+ {item.label} + +
+ ))} - {/* Sub-items */} - {polda.subDestination && - expandedPolda[polda.id] && ( -
- {/* Tombol Pilih Semua untuk sub-items */} -
- {(() => { - const allSubItemsChecked = - polda.subDestination?.every( - (sub: any) => - fileCheckedLevels[ - index - ]?.has( - Number(sub.id) - ) - ); - return ( - + {/* Tombol Kustom sejajar dengan checkbox */} +
+ + + + + + + + Daftar Wilayah POLDA dan POLRES + + +
+ {listDest.map((polda: any) => ( +
+ {/* Header POLDA */} +
+ + {polda.subDestination && ( +
-
- {polda.subDestination.map( - (sub: any) => ( -
+ + {/* Sub-items */} + {polda.subDestination && + expandedPolda[polda.id] && ( +
+ {/* Tombol Pilih Semua untuk sub-items */} +
+ {(() => { + const allSubItemsChecked = + polda.subDestination?.every( + (sub: any) => fileCheckedLevels[ index ]?.has( Number( sub.id ) - ) || false - } - onCheckedChange={() => - handleFileCheckboxChangePlacement( + ) + ); + return ( + + ); + })()} +
+
+ {polda.subDestination.map( + (sub: any) => ( + + ) + )} +
-
- )} -
- ))} -
-
- - - - - - -
- - + )} +
+ ))} +
+
+ + + + + + +
+ + +
- - )} + )} + - + ) : ( + "" + )} ))} diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx index 2c3c68a5..2272ef83 100644 --- a/components/form/content/image-detail-form.tsx +++ b/components/form/content/image-detail-form.tsx @@ -20,7 +20,6 @@ import { import { Checkbox } from "@/components/ui/checkbox"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; - import { Switch } from "@/components/ui/switch"; import Cookies from "js-cookie"; import { @@ -163,18 +162,28 @@ export default function FormImageDetail() { const [isUserMabesApprover, setIsUserMabesApprover] = useState(false); const [approval, setApproval] = useState(); // State untuk setiap file secara individual - const [fileUnitSelections, setFileUnitSelections] = useState>([]); + const [fileUnitSelections, setFileUnitSelections] = useState< + Array<{ + semua: boolean; + nasional: boolean; + wilayah: boolean; + international: boolean; + polda: boolean; + polres: boolean; + satker: boolean; + }> + >([]); + + useEffect(() => { + if (Number(userLevelId) === 216 && Number(roleId) === 3) { + setIsUserMabesApprover(true); + } + }, [userLevelId, roleId]); // State untuk setiap file secara individual - checklist levels - const [fileCheckedLevels, setFileCheckedLevels] = useState>>([]); + const [fileCheckedLevels, setFileCheckedLevels] = useState< + Array> + >([]); // State global untuk kompatibilitas (akan dihapus nanti) const [unitSelection, setUnitSelection] = useState({ @@ -191,12 +200,16 @@ export default function FormImageDetail() { const [selectedTarget, setSelectedTarget] = useState(""); const [files, setFiles] = useState([]); const [rejectedFiles, setRejectedFiles] = useState([]); - const [expandedPolda, setExpandedPolda] = useState>({}); - + const [expandedPolda, setExpandedPolda] = useState>( + {} + ); + // State untuk melacak apakah perubahan berasal dari checkbox utama - const [isUpdatingFromMainCheckbox, setIsUpdatingFromMainCheckbox] = useState(false); + const [isUpdatingFromMainCheckbox, setIsUpdatingFromMainCheckbox] = + useState(false); // State untuk melacak jenis perubahan spesifik - const [mainCheckboxChangeType, setMainCheckboxChangeType] = useState(""); + const [mainCheckboxChangeType, setMainCheckboxChangeType] = + useState(""); const [wilayahPublish, setWilayahPublish] = React.useState({ semua: false, nasional: false, @@ -263,7 +276,11 @@ export default function FormImageDetail() { // useEffect untuk sinkronisasi checkbox modal dengan checkbox utama useEffect(() => { - if (listDest.length > 0 && isUpdatingFromMainCheckbox && mainCheckboxChangeType) { + if ( + listDest.length > 0 && + isUpdatingFromMainCheckbox && + mainCheckboxChangeType + ) { syncModalWithMainCheckbox(); } }, [isUpdatingFromMainCheckbox, mainCheckboxChangeType]); @@ -279,43 +296,59 @@ export default function FormImageDetail() { const updateMainCheckboxFromModalLegacy = () => { if (!isUpdatingFromMainCheckbox && listDest.length > 0) { // Hitung item yang dipilih berdasarkan checkedLevels - const checkedPoldaCount = listDest.filter((item: any) => - item.levelNumber === 2 && - item.name !== "SATKER POLRI" && - checkedLevels.has(Number(item.id)) + const checkedPoldaCount = listDest.filter( + (item: any) => + item.levelNumber === 2 && + item.name !== "SATKER POLRI" && + 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 + + 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"); - const checkedSatkerCount = satkerItem ? ( - (checkedLevels.has(Number(satkerItem.id)) ? 1 : 0) + - (satkerItem.subDestination?.filter((sub: any) => checkedLevels.has(Number(sub.id))).length || 0) - ) : 0; - + + const satkerItem: any = listDest.find( + (item: any) => item.name === "SATKER POLRI" + ); + const checkedSatkerCount = satkerItem + ? (checkedLevels.has(Number(satkerItem.id)) ? 1 : 0) + + (satkerItem.subDestination?.filter((sub: any) => + checkedLevels.has(Number(sub.id)) + ).length || 0) + : 0; + // 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 - setUnitSelection(prev => { + setUnitSelection((prev) => { const newState = { ...prev }; - + // Update individual checkboxes newState.polda = hasSelectedPolda; newState.polres = hasSelectedPolres; newState.satker = hasSelectedSatker; - + // Update checkbox "semua" berdasarkan semua checkbox yang aktif - newState.semua = newState.nasional && newState.wilayah && newState.international && hasSelectedPolda && hasSelectedPolres && hasSelectedSatker; - + newState.semua = + newState.nasional && + newState.wilayah && + newState.international && + hasSelectedPolda && + hasSelectedPolres && + hasSelectedSatker; + return newState; }); } @@ -325,7 +358,7 @@ export default function FormImageDetail() { const syncModalWithMainCheckbox = () => { if (isUpdatingFromMainCheckbox) { const newCheckedLevels = new Set(checkedLevels); - + // Handle checklist actions - menambahkan semua item ke modal if (mainCheckboxChangeType === "polda_checked") { // Checklist semua polda @@ -334,47 +367,53 @@ export default function FormImageDetail() { 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((item: any) => item.name === "SATKER POLRI"); - if (satkerItem) { - newCheckedLevels.add(Number(satkerItem.id)); - // Checklist semua sub-item yang ada di bawah SATKER (bukan POLRES) - if (satkerItem.subDestination) { - satkerItem.subDestination.forEach((sub: any) => { - newCheckedLevels.add(Number(sub.id)); - }); - } - } - } else if (mainCheckboxChangeType === "semua_checked") { - // Checklist semua item - listDest.forEach((item: any) => { - newCheckedLevels.add(Number(item.id)); - // Checklist semua sub-item di bawah setiap item - if (item.subDestination) { - item.subDestination.forEach((sub: any) => { - newCheckedLevels.add(Number(sub.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( + (item: any) => item.name === "SATKER POLRI" + ); + if (satkerItem) { + newCheckedLevels.add(Number(satkerItem.id)); + // Checklist semua sub-item yang ada di bawah SATKER (bukan POLRES) + if (satkerItem.subDestination) { + satkerItem.subDestination.forEach((sub: any) => { + newCheckedLevels.add(Number(sub.id)); + }); + } + } + } else if (mainCheckboxChangeType === "semua_checked") { + // Checklist semua item + listDest.forEach((item: any) => { + newCheckedLevels.add(Number(item.id)); + // Checklist semua sub-item di bawah setiap item + if (item.subDestination) { + item.subDestination.forEach((sub: any) => { + newCheckedLevels.add(Number(sub.id)); + }); + } + }); } // Handle unchecklist actions - menghapus item dari modal else if (mainCheckboxChangeType === "polres_unchecked") { @@ -400,7 +439,9 @@ export default function FormImageDetail() { }); } else if (mainCheckboxChangeType === "satker_unchecked") { // Clear satker dan semua sub-item di bawahnya dari checkedLevels - const satkerItem: any = listDest.find((item: any) => item.name === "SATKER POLRI"); + const satkerItem: any = listDest.find( + (item: any) => item.name === "SATKER POLRI" + ); if (satkerItem) { newCheckedLevels.delete(Number(satkerItem.id)); if (satkerItem.subDestination) { @@ -413,9 +454,9 @@ export default function FormImageDetail() { // Clear semua newCheckedLevels.clear(); } - + setCheckedLevels(newCheckedLevels); - + // Reset flag setelah sinkronisasi selesai setIsUpdatingFromMainCheckbox(false); setMainCheckboxChangeType(""); @@ -428,7 +469,7 @@ export default function FormImageDetail() { key: keyof typeof unitSelection, value: boolean ) => { - setFileUnitSelections(prev => { + setFileUnitSelections((prev) => { const newSelections = [...prev]; const currentSelection = { ...newSelections[fileIndex] }; @@ -445,14 +486,19 @@ export default function FormImageDetail() { // 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)) - ); - + 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."); + alert( + "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES." + ); return prev; // Batalkan perubahan } } @@ -503,15 +549,18 @@ export default function FormImageDetail() { // Validasi khusus untuk POLRES if (key === "polres" && value) { // Cek apakah ada POLDA yang sudah dipilih di modal - const hasSelectedPolda = listDest.some((item: any) => - item.levelNumber === 2 && - item.name !== "SATKER POLRI" && - checkedLevels.has(Number(item.id)) + const hasSelectedPolda = listDest.some( + (item: any) => + item.levelNumber === 2 && + item.name !== "SATKER POLRI" && + checkedLevels.has(Number(item.id)) ); - + if (!hasSelectedPolda) { // Jika tidak ada POLDA yang dipilih, tampilkan peringatan dan batalkan - alert("Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES."); + alert( + "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES." + ); // Reset flag karena perubahan dibatalkan setIsUpdatingFromMainCheckbox(false); setMainCheckboxChangeType(""); @@ -571,23 +620,32 @@ export default function FormImageDetail() { }; // Fungsi untuk mengupdate checklist levels untuk file tertentu - const handleFileCheckboxChangePlacement = (fileIndex: number, levelId: number) => { + const handleFileCheckboxChangePlacement = ( + fileIndex: number, + levelId: number + ) => { setFileCheckedLevels((prev) => { const newArray = [...prev]; const currentFileLevels = new Set(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") { + 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) => { @@ -596,9 +654,11 @@ export default function FormImageDetail() { } } 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; + 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) => { @@ -606,13 +666,13 @@ export default function FormImageDetail() { }); } } - + newArray[fileIndex] = currentFileLevels; - + // Update checkbox utama berdasarkan perubahan di modal // Pindahkan ke sini agar state sudah ter-update setTimeout(() => updateMainCheckboxFromModal(fileIndex), 0); - + return newArray; }); }; @@ -622,12 +682,12 @@ export default function FormImageDetail() { setFileCheckedLevels((prev) => { const newArray = [...prev]; const currentFileLevels = new Set(newArray[fileIndex]); - + // Cek apakah semua sub-items sudah ter-checklist - const allSubItemsChecked = polda.subDestination?.every((sub: any) => + 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) => { @@ -644,12 +704,12 @@ export default function FormImageDetail() { currentFileLevels.add(Number(sub.id)); }); } - + newArray[fileIndex] = currentFileLevels; - + // Update checkbox utama berdasarkan perubahan di modal setTimeout(() => updateMainCheckboxFromModal(fileIndex), 0); - + return newArray; }); }; @@ -657,56 +717,75 @@ export default function FormImageDetail() { // 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))) { + 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; - }); + }, + 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) @@ -714,18 +793,24 @@ export default function FormImageDetail() { setCheckedLevels((prev: Set) => { const updatedLevels = new Set(prev); const isCurrentlyChecked = updatedLevels.has(levelId); - + if (isCurrentlyChecked) { updatedLevels.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") { + 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) => { updatedLevels.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) => { @@ -734,9 +819,11 @@ export default function FormImageDetail() { } } else { updatedLevels.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; + 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) => { @@ -785,7 +872,7 @@ export default function FormImageDetail() { const temp = []; const unitSelections = []; const checkedLevelsArray = []; - + for (let i = 0; i < length; i++) { temp.push([]); // Inisialisasi state untuk setiap file @@ -801,7 +888,7 @@ export default function FormImageDetail() { // Inisialisasi checkedLevels untuk setiap file checkedLevelsArray.push(new Set()); } - + setFilePlacements(temp); setFileUnitSelections(unitSelections); setFileCheckedLevels(checkedLevelsArray); @@ -971,7 +1058,9 @@ export default function FormImageDetail() { } // Hanya auto-checklist "all" jika polda, polres, dan mabes ter-checklist // JANGAN include satker dalam perhitungan auto "all" - const nonSatkerItems = now.filter(item => item !== "satker" && item !== "all"); + const nonSatkerItems = now.filter( + (item) => item !== "satker" && item !== "all" + ); if (nonSatkerItems.length === 3 && !now.includes("all")) { now.push("all"); } @@ -986,7 +1075,9 @@ export default function FormImageDetail() { temp[index] = now; // Hapus "all" jika tidak semua item ter-checklist if (now.includes("all")) { - const nonSatkerItems = now.filter(item => item !== "satker" && item !== "all"); + const nonSatkerItems = now.filter( + (item) => item !== "satker" && item !== "all" + ); if (nonSatkerItems.length < 3) { const newData = now.filter((b) => b !== "all"); temp[index] = newData; @@ -995,19 +1086,23 @@ 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) => { + const updateModalChecklistLevels = ( + fileIndex: number, + placement: string, + checked: boolean + ) => { if (!listDest || listDest.length === 0) return; - + setFileCheckedLevels((prev) => { const newArray = [...prev]; const currentFileLevels = new Set(newArray[fileIndex]); - + if (checked) { if (placement === "polda") { // Checklist semua POLDA (bukan SATKER POLRI) @@ -1032,7 +1127,9 @@ export default function FormImageDetail() { }); } else if (placement === "satker") { // Checklist SATKER POLRI dan semua sub-item di bawahnya - const satkerItem: any = listDest.find((item: any) => item.name === "SATKER POLRI"); + const satkerItem: any = listDest.find( + (item: any) => item.name === "SATKER POLRI" + ); if (satkerItem) { currentFileLevels.add(Number(satkerItem.id)); if (satkerItem.subDestination) { @@ -1066,7 +1163,9 @@ export default function FormImageDetail() { }); } else if (placement === "satker") { // Unchecklist SATKER POLRI dan semua sub-item di bawahnya - const satkerItem: any = listDest.find((item: any) => item.name === "SATKER POLRI"); + const satkerItem: any = listDest.find( + (item: any) => item.name === "SATKER POLRI" + ); if (satkerItem) { currentFileLevels.delete(Number(satkerItem.id)); if (satkerItem.subDestination) { @@ -1077,7 +1176,7 @@ export default function FormImageDetail() { } } } - + newArray[fileIndex] = currentFileLevels; return newArray; }); @@ -1439,231 +1538,388 @@ export default function FormImageDetail() { - {t("leave-comment", { defaultValue: "Kelola Persetujuan Konten" })} + {t("leave-comment", { + defaultValue: "Kelola Persetujuan Konten", + })} - -
- {status == "2" && files?.map((file, index) => ( -
- {/* Header File */} -
-
-
- {`files-${index handleImageLoad(e, index)} - className={`h-[80px] object-cover ${ - portraitMap[index] ? "w-auto" : "!w-[120px]" - }`} - /> -
-
-

File {index + 1}

-

{file.fileName}

-
-
- -
- {/* Section Pengaturan Distribusi */} -
-
- - Pengaturan Distribusi -
- - {/* Checkbox Tingkat Utama */} -
-
-

Tingkat Distribusi:

-
- {[ - { key: "semua", label: "Semua" }, - { key: "nasional", label: "Nasional" }, - { key: "wilayah", label: "Wilayah" }, - { key: "international", label: "Internasional" }, - ].map((item, idx) => ( -
- { - handleFileUnitChange( - index, - item.key as keyof typeof unitSelection, - value as boolean - ); - setupPlacement(index, item.key, Boolean(value)); - }} - /> - -
- ))} +
+ {status == "2" && + files?.map((file, index) => ( +
+ {/* Header File */} +
+
+
+ {`files-${index handleImageLoad(e, index)} + className={`h-[80px] object-cover ${ + portraitMap[index] ? "w-auto" : "!w-[120px]" + }`} + /> +
+
+

+ File {index + 1} +

+

+ {file.fileName} +

+ {isUserMabesApprover ? ( + "" + ) : ( +

+ Selesai +

+ )}
+ +
- {/* Detail Wilayah */} - {fileUnitSelections[index]?.wilayah && ( -
-

Detail Wilayah:

- - {/* Checkbox Sub-kategori dengan tombol Kustom sejajar */} -
- {[ - { key: "polda", label: "POLDA" }, - { key: "polres", label: "POLRES" }, - { key: "satker", label: "SATKER" }, - ].map((item, idx) => ( -
- { - handleFileUnitChange( - index, - item.key as keyof typeof unitSelection, - value as boolean - ); - setupPlacement(index, item.key, Boolean(value)); - }} - /> - -
- ))} - - {/* Tombol Kustom sejajar dengan checkbox */} -
- - - - - - - - Daftar Wilayah POLDA dan POLRES - - -
- {listDest.map((polda: any) => ( -
- {/* Header POLDA */} -
- - {polda.subDestination && ( - - )} -
+ {/* Section Pengaturan Distribusi */} + {isUserMabesApprover ? ( +
+
+ + Pengaturan Distribusi +
- {/* Sub-items */} - {polda.subDestination && expandedPolda[polda.id] && ( -
- {/* Tombol Pilih Semua untuk sub-items */} -
- {(() => { - const allSubItemsChecked = polda.subDestination?.every((sub: any) => - fileCheckedLevels[index]?.has(Number(sub.id)) - ); - return ( - - ); - })()} -
-
- {polda.subDestination.map((sub: any) => ( - - ))} -
-
- )} -
- ))} -
-
- - - - - - -
- -
+ {/* Checkbox Tingkat Utama */} +
+
+

+ Tingkat Distribusi: +

+
+ {[ + { key: "semua", label: "Semua" }, + { key: "nasional", label: "Nasional" }, + { key: "wilayah", label: "Wilayah" }, + { + key: "international", + label: "Internasional", + }, + ].map((item, idx) => ( +
+ { + handleFileUnitChange( + index, + item.key as keyof typeof unitSelection, + value as boolean + ); + setupPlacement( + index, + item.key, + Boolean(value) + ); + }} + /> + +
+ ))}
+ + {/* Detail Wilayah */} + {fileUnitSelections[index]?.wilayah && ( +
+

+ Detail Wilayah: +

+ + {/* Checkbox Sub-kategori dengan tombol Kustom sejajar */} +
+ {[ + { key: "polda", label: "POLDA" }, + { key: "polres", label: "POLRES" }, + { key: "satker", label: "SATKER" }, + ].map((item, idx) => ( +
+ { + handleFileUnitChange( + index, + item.key as keyof typeof unitSelection, + value as boolean + ); + setupPlacement( + index, + item.key, + Boolean(value) + ); + }} + /> + +
+ ))} + + {/* Tombol Kustom sejajar dengan checkbox */} +
+ + + + + + + + Daftar Wilayah POLDA dan POLRES + + +
+ {listDest.map((polda: any) => ( +
+ {/* Header POLDA */} +
+ + {polda.subDestination && ( + + )} +
+ + {/* Sub-items */} + {polda.subDestination && + expandedPolda[polda.id] && ( +
+ {/* Tombol Pilih Semua untuk sub-items */} +
+ {(() => { + const allSubItemsChecked = + polda.subDestination?.every( + (sub: any) => + fileCheckedLevels[ + index + ]?.has( + Number( + sub.id + ) + ) + ); + return ( + + ); + })()} +
+
+ {polda.subDestination.map( + (sub: any) => ( + + ) + )} +
+
+ )} +
+ ))} +
+
+ + + + + + +
+ + +
+
+
+ )}
- )} -
+
+ ) : ( + "" + )}
-
- ))} + ))}
- + {/* Section Komentar */}
-