// index.tsx (Updated)

import ConfirmAlert from '@/components/custom-alert/custom-alert';
import { DataTable } from '@/components/sakip-punya/DataTable';
import SakipNodeModal from '@/components/sakip-punya/sakipnodemodal';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useAuthBreadcrumbOperator } from '@/hooks/use-auth-breadcrumb-operator';
import AppLayout from '@/layouts/app-layout';
import { SakipNode } from '@/types';
import { router } from '@inertiajs/react';
import { PlusCircle } from 'lucide-react';
import { useState } from 'react';
import { toast, Toaster } from 'sonner';

type AlertType = 'delete';

type Props = {
    sakipMisiList: SakipNode[];
    sakipTujuanRpjmdList: SakipNode[];
    sakipIndikatorTujuanRpjmdList: SakipNode[];
    sakipSasaranRpjmdList: SakipNode[];
    sakipIndikatorSasaranRpjmdList: SakipNode[];
    sakipTujuanPdList: SakipNode[];
    sakipIndikatorTujuanPdList: SakipNode[];
    sakipSasaranPdList: SakipNode[];
    sakipIndikatorSasaranPdList: SakipNode[];
    sakipSasaranProgramList: SakipNode[];
    sakipIndikatorSasaranProgramList: SakipNode[];
    sakipSasaranKegiatanList: SakipNode[];
    sakipIndikatorSasaranKegiatanList: SakipNode[];
    sakipSasaranSubKegiatanList: SakipNode[];
    sakipIndikatorSasaranSubKegiatanList: SakipNode[];
    sakipSasaranSubKegiatanStafList: SakipNode[];
    sakipIndikatorSasaranSubKegiatanStafList: SakipNode[];
};

export default function SakipIndex({
    sakipMisiList,
    sakipTujuanRpjmdList,
    sakipIndikatorTujuanRpjmdList,
    sakipSasaranRpjmdList,
    sakipIndikatorSasaranRpjmdList,
    sakipTujuanPdList,
    sakipIndikatorTujuanPdList,
    sakipSasaranPdList,
    sakipIndikatorSasaranPdList,
    sakipSasaranProgramList,
    sakipIndikatorSasaranProgramList,
    sakipSasaranKegiatanList,
    sakipIndikatorSasaranKegiatanList,
    sakipSasaranSubKegiatanList,
    sakipIndikatorSasaranSubKegiatanList,
    sakipSasaranSubKegiatanStafList,
    sakipIndikatorSasaranSubKegiatanStafList,
}: Props) {
    const breadcrumbs = useAuthBreadcrumbOperator();

    const [openAlert, setOpenAlert] = useState(false);
    const [alertType, setAlertType] = useState<AlertType>();

    // --- STATE MANAGEMENT UNTUK SEMUA MODAL DAN ITEM TERPILIH ---
    // Misi
    const [openModalMisi, setOpenModalMisi] = useState(false);
    const [selectedItemMisi, setSelectedItemMisi] = useState<SakipNode | null>(
        null,
    );

    // Tujuan RPJMD
    const [openModalTujuanRpjmd, setOpenModalTujuanRpjmd] = useState(false);
    const [selectedItemTujuanRpjmd, setSelectedItemTujuanRpjmd] =
        useState<SakipNode | null>(null);

    // Indikator tujuan
    const [openModalIndikatorTujuanRpjmd, setOpenModalIndikatorTujuanRpjmd] =
        useState(false);
    const [
        selectedItemIndikatorTujuanRpjmd,
        setSelectedItemIndikatorTujuanRpjmd,
    ] = useState<SakipNode | null>(null);

    // Sasaran RPJMD
    const [openModalSasaranRpjmd, setOpenModalSasaranRpjmd] = useState(false);
    const [selectedItemSasaranRpjmd, setSelectedItemSasaranRpjmd] =
        useState<SakipNode | null>(null);
    const [openModalIndikatorSasaranRpjmd, setOpenModalIndikatorSasaranRpjmd] =
        useState(false);
    const [
        selectedItemIndikatorSasaranRpjmd,
        setSelectedItemIndikatorSasaranRpjmd,
    ] = useState<SakipNode | null>(null);

    // Tujuan PD
    const [openModalTujuanPd, setOpenModalTujuanPd] = useState(false);
    const [selectedItemTujuanPd, setSelectedItemTujuanPd] =
        useState<SakipNode | null>(null);
    const [openModalIndikatorTujuanPd, setOpenModalIndikatorTujuanPd] =
        useState(false);
    const [selectedItemIndikatorTujuanPd, setSelectedItemIndikatorTujuanPd] =
        useState<SakipNode | null>(null);

    // Sasaran Pd
    const [openModalSasaranPd, setOpenModalSasaranPd] = useState(false);
    const [selectedItemSasaranPd, setSelectedItemSasaranPd] =
        useState<SakipNode | null>(null);
    const [openModalIndikatorSasaranPd, setOpenModalIndikatorSasaranPd] =
        useState(false);
    const [selectedItemIndikatorSasaranPd, setSelectedItemIndikatorSasaranPd] =
        useState<SakipNode | null>(null);

    // Sasaran Program
    const [openModalSasaranProgram, setOpenModalSasaranProgram] =
        useState(false);
    const [selectedItemSasaranProgram, setSelectedItemSasaranProgram] =
        useState<SakipNode | null>(null);
    const [
        openModalIndikatorSasaranProgram,
        setOpenModalIndikatorSasaranProgram,
    ] = useState(false);
    const [
        selectedItemIndikatorSasaranProgram,
        setSelectedItemIndikatorSasaranProgram,
    ] = useState<SakipNode | null>(null);

    // Sasaran Kegiatan
    const [openModalSasaranKegiatan, setOpenModalSasaranKegiatan] =
        useState(false);
    const [selectedItemSasaranKegiatan, setSelectedItemSasaranKegiatan] =
        useState<SakipNode | null>(null);
    const [
        openModalIndikatorSasaranKegiatan,
        setOpenModalIndikatorSasaranKegiatan,
    ] = useState(false);
    const [
        selectedItemIndikatorSasaranKegiatan,
        setSelectedItemIndikatorSasaranKegiatan,
    ] = useState<SakipNode | null>(null);

    // Sasaran SubKegiatan
    const [openModalSasaranSubKegiatan, setOpenModalSasaranSubKegiatan] =
        useState(false);
    const [selectedItemSasaranSubKegiatan, setSelectedItemSasaranSubKegiatan] =
        useState<SakipNode | null>(null);
    const [
        openModalIndikatorSasaranSubKegiatan,
        setOpenModalIndikatorSasaranSubKegiatan,
    ] = useState(false);
    const [
        selectedItemIndikatorSasaranSubKegiatan,
        setSelectedItemIndikatorSasaranSubKegiatan,
    ] = useState<SakipNode | null>(null);

    // Sasaran SubKegiatanStaf
    const [
        openModalSasaranSubKegiatanStaf,
        setOpenModalSasaranSubKegiatanStaf,
    ] = useState(false);
    const [
        selectedItemSasaranSubKegiatanStaf,
        setSelectedItemSasaranSubKegiatanStaf,
    ] = useState<SakipNode | null>(null);
    const [
        openModalIndikatorSasaranSubKegiatanStaf,
        setOpenModalIndikatorSasaranSubKegiatanStaf,
    ] = useState(false);
    const [
        selectedItemIndikatorSasaranSubKegiatanStaf,
        setSelectedItemIndikatorSasaranSubKegiatanStaf,
    ] = useState<SakipNode | null>(null);

    // --- HELPERS DAN FUNGSI CRUD UNIVERSAL ---

    const resetAllModals = () => {
        setSelectedItemMisi(null);
        setSelectedItemTujuanRpjmd(null);
        setSelectedItemIndikatorTujuanRpjmd(null);
        setSelectedItemSasaranRpjmd(null);
        setSelectedItemIndikatorSasaranRpjmd(null);
        setSelectedItemTujuanPd(null);
        setSelectedItemIndikatorTujuanPd(null);
        setSelectedItemSasaranPd(null);
        setSelectedItemIndikatorSasaranPd(null);
        setSelectedItemSasaranProgram(null);
        setSelectedItemIndikatorSasaranProgram(null);
        setSelectedItemSasaranKegiatan(null);
        setSelectedItemIndikatorSasaranKegiatan(null);
        setSelectedItemSasaranSubKegiatan(null);
        setSelectedItemIndikatorSasaranSubKegiatan(null);
        setSelectedItemSasaranSubKegiatanStaf(null);
        setSelectedItemIndikatorSasaranSubKegiatanStaf(null);
    };

    const closeAllModals = () => {
        setOpenModalMisi(false);
        setOpenModalTujuanRpjmd(false);
        setOpenModalIndikatorTujuanRpjmd(false);
        setOpenModalSasaranRpjmd(false);
        setOpenModalIndikatorSasaranRpjmd(false);
        setOpenModalTujuanPd(false);
        setOpenModalIndikatorTujuanPd(false);
        setOpenModalSasaranPd(false);
        setOpenModalIndikatorSasaranPd(false);
        setOpenModalSasaranProgram(false);
        setOpenModalIndikatorSasaranProgram(false);
        setOpenModalSasaranKegiatan(false);
        setOpenModalIndikatorSasaranKegiatan(false);
        setOpenModalSasaranSubKegiatan(false);
        setOpenModalIndikatorSasaranSubKegiatan(false);
        setOpenModalSasaranSubKegiatanStaf(false);
        setOpenModalIndikatorSasaranSubKegiatanStaf(false);
    };

    const getActiveResource = (): { name: string; item: SakipNode } | null => {
        if (selectedItemMisi)
            return { name: 'sakipmisi', item: selectedItemMisi };
        if (selectedItemTujuanRpjmd)
            return { name: 'sakiptujuanrpjmd', item: selectedItemTujuanRpjmd };
        if (selectedItemIndikatorTujuanRpjmd)
            return {
                name: 'sakipindikatortujuanrpjmd',
                item: selectedItemIndikatorTujuanRpjmd,
            };
        if (selectedItemSasaranRpjmd)
            return {
                name: 'sakipsasaranrpjmd',
                item: selectedItemSasaranRpjmd,
            };
        if (selectedItemIndikatorSasaranRpjmd)
            return {
                name: 'sakipindikatorsasaranrpjmd',
                item: selectedItemIndikatorSasaranRpjmd,
            };
        if (selectedItemTujuanPd)
            return { name: 'sakiptujuanpd', item: selectedItemTujuanPd };
        if (selectedItemIndikatorTujuanPd)
            return {
                name: 'sakipindikatortujuanpd',
                item: selectedItemIndikatorTujuanPd,
            };
        if (selectedItemSasaranPd)
            return { name: 'sakipsasaranpd', item: selectedItemSasaranPd };
        if (selectedItemIndikatorSasaranPd)
            return {
                name: 'sakipindikatorsasaranpd',
                item: selectedItemIndikatorSasaranPd,
            };
        if (selectedItemSasaranProgram)
            return {
                name: 'sakipsasaranprogram',
                item: selectedItemSasaranProgram,
            };
        if (selectedItemIndikatorSasaranProgram)
            return {
                name: 'sakipindikatorsasaranprogram',
                item: selectedItemIndikatorSasaranProgram,
            };
        if (selectedItemSasaranKegiatan)
            return {
                name: 'sakipsasarankegiatan',
                item: selectedItemSasaranKegiatan,
            };
        if (selectedItemIndikatorSasaranKegiatan)
            return {
                name: 'sakipindikatorsasarankegiatan',
                item: selectedItemIndikatorSasaranKegiatan,
            };
        if (selectedItemSasaranSubKegiatan)
            return {
                name: 'sakipsasaransubkegiatan',
                item: selectedItemSasaranSubKegiatan,
            };
        if (selectedItemIndikatorSasaranSubKegiatan)
            return {
                name: 'sakipindikatorsasaransubkegiatan',
                item: selectedItemIndikatorSasaranSubKegiatan,
            };
        if (selectedItemSasaranSubKegiatanStaf)
            return {
                name: 'sakipsasaransubkegiatanstaf',
                item: selectedItemSasaranSubKegiatanStaf,
            };
        if (selectedItemIndikatorSasaranSubKegiatanStaf)
            return {
                name: 'sakipindikatorsasaransubkegiatanstaf',
                item: selectedItemIndikatorSasaranSubKegiatanStaf,
            };
        return null;
    };

    // ⬅️ FUNGSI INI AKAN DIPASS KE MODAL
    const handleSave = (
        data: {
            id?: number;
            uraian: string;
            satuan?: string | null;
            target?: string | null;
            kategori: string;
            formulasi?: string | null;
            keterangan?: string | null;
            sumber_data?: string | null;
            tipe?: string | null;
            parent_id?: number | null;
        },
        resourceName: string,
    ) => {
        const isEdit = Boolean(data.id);
        const url = isEdit ? `/${resourceName}/${data.id}` : `/${resourceName}`;

        if (isEdit) {
            router.put(url, data, {
                preserveScroll: true,
                onSuccess: () => {
                    toast.success('Data berhasil diperbarui!');
                    closeAllModals();
                    resetAllModals();
                },
                onError: (errors) => {
                    toast.error('Gagal edit data!');
                },
            });
        } else {
            router.post(url, data, {
                preserveScroll: true,
                onSuccess: () => {
                    toast.success('Data berhasil ditambahkan!');
                    closeAllModals();
                    resetAllModals();
                },
                onError: (errors) => {
                    toast.error('Gagal menambahkan data!');
                },
            });
        }
    };

    const handleDelete = (id: number, resourceName: string) => {
        router.delete(`/${resourceName}/${id}`, {
            preserveScroll: true,
            onSuccess: () => {
                toast.success('Data berhasil dihapus!');
                setOpenAlert(false);
                resetAllModals();
            },
            onError: (errors) => {
                const errorMsg =
                    errors && Object.values(errors).length > 0
                        ? Object.values(errors).join(', ')
                        : 'Terjadi kesalahan saat menghapus data.';
                toast.error(`Gagal menghapus data: ${errorMsg}`);
            },
        });
    };

    // --- FIELD DEFINITIONS UNTUK SEMUA LEVEL (Select Options) ---

    const selectOptionsMisi = sakipMisiList.map((item) => ({
        value: String(item.id),
        label: item.uraian,
    }));

    const selectOptionsTujuanRpjmd = sakipTujuanRpjmdList.map((item) => ({
        value: String(item.id),
        label: item.uraian,
    }));
    const selectOptionsIndikatorTujuanRpjmd = sakipIndikatorTujuanRpjmdList.map(
        (item) => ({
            value: String(item.id),
            label: item.uraian,
        }),
    );

    const selectOptionsSasaranRpjmd = sakipSasaranRpjmdList.map((item) => ({
        value: String(item.id),
        label: item.uraian,
    }));
    const selectOptionsIndikatorSasaranRpjmd =
        sakipIndikatorSasaranRpjmdList.map((item) => ({
            value: String(item.id),
            label: item.uraian,
        }));

    const selectOptionsTujuanPd = sakipTujuanPdList.map((item) => ({
        value: String(item.id),
        label: item.uraian,
    }));
    const selectOptionsIndikatorTujuanPd = sakipIndikatorTujuanPdList.map(
        (item) => ({
            value: String(item.id),
            label: item.uraian,
        }),
    );

    const selectOptionsSasaranPd = sakipSasaranPdList.map((item) => ({
        value: String(item.id),
        label: item.uraian,
    }));
    const selectOptionsIndikatorSasaranPd = sakipIndikatorSasaranPdList.map(
        (item) => ({
            value: String(item.id),
            label: item.uraian,
        }),
    );

    const selectOptionsSasaranProgram = sakipSasaranProgramList.map((item) => ({
        value: String(item.id),
        label: item.uraian,
    }));
    const selectOptionsIndikatorSasaranProgram =
        sakipIndikatorSasaranProgramList.map((item) => ({
            value: String(item.id),
            label: item.uraian,
        }));

    const selectOptionsSasaranKegiatan = sakipSasaranKegiatanList.map(
        (item) => ({ value: String(item.id), label: item.uraian }),
    );
    const selectOptionsIndikatorSasaranKegiatan =
        sakipIndikatorSasaranKegiatanList.map((item) => ({
            value: String(item.id),
            label: item.uraian,
        }));

    const selectOptionsSasaranSubKegiatan = sakipSasaranSubKegiatanList.map(
        (item) => ({ value: String(item.id), label: item.uraian }),
    );
    const selectOptionsIndikatorSasaranSubKegiatan =
        sakipIndikatorSasaranSubKegiatanList.map((item) => ({
            value: String(item.id),
            label: item.uraian,
        }));

    const selectOptionsSasaranSubKegiatanStaf =
        sakipSasaranSubKegiatanStafList.map((item) => ({
            value: String(item.id),
            label: item.uraian,
        }));

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl px-6 py-4">
                <span>
                    <h1 className="text-2xl font-bold uppercase">
                        Kertas Kerja
                    </h1>
                    <p className="text-sm text-muted-foreground">
                        Halaman ini digunakan untuk menampilkan kertas kerja
                    </p>
                </span>
                <Tabs defaultValue="misi">
                    <TabsList className="scrollbar-hide flex h-[40px] w-full overflow-x-auto bg-white/80 whitespace-nowrap">
                        <TabsTrigger value="misi">Misi</TabsTrigger>
                        <TabsTrigger value="tujuan-rpjmd">
                            Tujuan RPJMD
                        </TabsTrigger>
                        <TabsTrigger value="sasaran-rpjmd">
                            Sasaran RPJMD
                        </TabsTrigger>
                        <TabsTrigger value="tujuan-pd">Tujuan PD</TabsTrigger>
                        <TabsTrigger value="sasaran-pd">Sasaran PD</TabsTrigger>
                        <TabsTrigger value="sasaran-program">
                            Sasaran Program
                        </TabsTrigger>
                        <TabsTrigger value="sasaran-kegiatan">
                            Sasaran Kegiatan
                        </TabsTrigger>
                        <TabsTrigger value="sasaran-sub-kegiatan">
                            Sasaran Sub Kegiatan
                        </TabsTrigger>
                        <TabsTrigger value="sasaran-sub-kegiatan-staf">
                            Sasaran Sub Kegiatan Staf
                        </TabsTrigger>
                    </TabsList>
                    <TabsContent value="misi">
                        <div className="mt-2 flex w-full flex-col gap-4">
                            <div className="flex justify-end">
                                <Button
                                    variant="secondary"
                                    size="sm"
                                    className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                    onClick={() => {
                                        resetAllModals();
                                        setOpenModalMisi(true);
                                    }}
                                >
                                    <PlusCircle className="h-4 w-4" />
                                    Tambah
                                </Button>
                            </div>
                            <DataTable
                                data={sakipMisiList}
                                columns={[{ key: 'uraian', label: 'Misi' }]}
                                onEdit={(item) => {
                                    setSelectedItemMisi(item);
                                    setOpenModalMisi(true);
                                }}
                                onDelete={(item) => {
                                    setSelectedItemMisi(item);
                                    setAlertType('delete');
                                    setOpenAlert(true);
                                }}
                            />
                        </div>
                    </TabsContent>
                    <TabsContent value="tujuan-rpjmd">
                        <div className="flex w-full flex-col gap-8">
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalTujuanRpjmd(true);
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipTujuanRpjmdList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Tujuan RPJMD',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemTujuanRpjmd(item);
                                        setOpenModalTujuanRpjmd(true);
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemTujuanRpjmd(item);
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalIndikatorTujuanRpjmd(
                                                true,
                                            );
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipIndikatorTujuanRpjmdList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Indikator Tujuan RPJMD',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemIndikatorTujuanRpjmd(
                                            item,
                                        );
                                        setOpenModalIndikatorTujuanRpjmd(true);
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemIndikatorTujuanRpjmd(
                                            item,
                                        );
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                        </div>
                    </TabsContent>
                    <TabsContent value="sasaran-rpjmd">
                        <div className="flex w-full flex-col gap-8">
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalSasaranRpjmd(true);
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipSasaranRpjmdList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Sasaran RPJMD',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemSasaranRpjmd(item);
                                        setOpenModalSasaranRpjmd(true);
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemSasaranRpjmd(item);
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalIndikatorSasaranRpjmd(
                                                true,
                                            );
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipIndikatorSasaranRpjmdList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Indikator Sasaran RPJMD',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemIndikatorSasaranRpjmd(
                                            item,
                                        );
                                        setOpenModalIndikatorSasaranRpjmd(true);
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemIndikatorSasaranRpjmd(
                                            item,
                                        );
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                        </div>
                    </TabsContent>
                    <TabsContent value="tujuan-pd">
                        <div className="flex w-full flex-col gap-8">
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalTujuanPd(true);
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipTujuanPdList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Tujuan Perangkat Daerah',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemTujuanPd(item);
                                        setOpenModalTujuanPd(true);
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemTujuanPd(item);
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalIndikatorTujuanPd(true);
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipIndikatorTujuanPdList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Indikator Tujuan Perangkat Daerah',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemIndikatorTujuanPd(item);
                                        setOpenModalIndikatorTujuanPd(true);
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemIndikatorTujuanPd(item);
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                        </div>
                    </TabsContent>
                    <TabsContent value="sasaran-pd">
                        <div className="flex w-full flex-col gap-8">
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalSasaranPd(true);
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipSasaranPdList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Sasaran Perangkat Daerah',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemSasaranPd(item);
                                        setOpenModalSasaranPd(true);
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemSasaranPd(item);
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalIndikatorSasaranPd(
                                                true,
                                            );
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipIndikatorSasaranPdList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Indikator Sasaran Perangkat Daerah',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemIndikatorSasaranPd(item);
                                        setOpenModalIndikatorSasaranPd(true);
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemIndikatorSasaranPd(item);
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                        </div>
                    </TabsContent>
                    <TabsContent value="sasaran-program">
                        <div className="flex w-full flex-col gap-8">
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalSasaranProgram(true);
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipSasaranProgramList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Sasaran Program',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemSasaranProgram(item);
                                        setOpenModalSasaranProgram(true);
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemSasaranProgram(item);
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalIndikatorSasaranProgram(
                                                true,
                                            );
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipIndikatorSasaranProgramList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Indikator Sasaran Program',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemIndikatorSasaranProgram(
                                            item,
                                        );
                                        setOpenModalIndikatorSasaranProgram(
                                            true,
                                        );
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemIndikatorSasaranProgram(
                                            item,
                                        );
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                        </div>
                    </TabsContent>
                    <TabsContent value="sasaran-kegiatan">
                        <div className="flex w-full flex-col gap-8">
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalSasaranKegiatan(true);
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipSasaranKegiatanList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Sasaran Kegiatan',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemSasaranKegiatan(item);
                                        setOpenModalSasaranKegiatan(true);
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemSasaranKegiatan(item);
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalIndikatorSasaranKegiatan(
                                                true,
                                            );
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipIndikatorSasaranKegiatanList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Indikator Sasaran Kegiatan',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemIndikatorSasaranKegiatan(
                                            item,
                                        );
                                        setOpenModalIndikatorSasaranKegiatan(
                                            true,
                                        );
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemIndikatorSasaranKegiatan(
                                            item,
                                        );
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                        </div>
                    </TabsContent>
                    <TabsContent value="sasaran-sub-kegiatan">
                        <div className="flex w-full flex-col gap-8">
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalSasaranSubKegiatan(
                                                true,
                                            );
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipSasaranSubKegiatanList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Sasaran Sub Kegiatan',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemSasaranSubKegiatan(item);
                                        setOpenModalSasaranSubKegiatan(true);
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemSasaranSubKegiatan(item);
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalIndikatorSasaranSubKegiatan(
                                                true,
                                            );
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipIndikatorSasaranSubKegiatanList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Indikator Sasaran Sub Kegiatan',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemIndikatorSasaranSubKegiatan(
                                            item,
                                        );
                                        setOpenModalIndikatorSasaranSubKegiatan(
                                            true,
                                        );
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemIndikatorSasaranSubKegiatan(
                                            item,
                                        );
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                        </div>
                    </TabsContent>
                    <TabsContent value="sasaran-sub-kegiatan-staf">
                        <div className="flex w-full flex-col gap-8">
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalSasaranSubKegiatanStaf(
                                                true,
                                            );
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={sakipSasaranSubKegiatanStafList}
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Sasaran Sub Kegiatan Staf',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemSasaranSubKegiatanStaf(
                                            item,
                                        );
                                        setOpenModalSasaranSubKegiatanStaf(
                                            true,
                                        );
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemSasaranSubKegiatanStaf(
                                            item,
                                        );
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                            <div className="mt-2 flex w-full flex-col gap-4">
                                <div className="flex justify-end">
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        className="flex items-center gap-2 bg-amber-300 text-black hover:bg-amber-500"
                                        onClick={() => {
                                            resetAllModals();
                                            setOpenModalIndikatorSasaranSubKegiatanStaf(
                                                true,
                                            );
                                        }}
                                    >
                                        <PlusCircle className="h-4 w-4" />
                                        Tambah
                                    </Button>
                                </div>
                                <DataTable
                                    data={
                                        sakipIndikatorSasaranSubKegiatanStafList
                                    }
                                    columns={[
                                        {
                                            key: 'uraian',
                                            label: 'Indikator Sasaran Sub Kegiatan Staf',
                                        },
                                    ]}
                                    onEdit={(item) => {
                                        setSelectedItemIndikatorSasaranSubKegiatanStaf(
                                            item,
                                        );
                                        setOpenModalIndikatorSasaranSubKegiatanStaf(
                                            true,
                                        );
                                    }}
                                    onDelete={(item) => {
                                        setSelectedItemIndikatorSasaranSubKegiatanStaf(
                                            item,
                                        );
                                        setAlertType('delete');
                                        setOpenAlert(true);
                                    }}
                                />
                            </div>
                        </div>
                    </TabsContent>
                </Tabs>
            </div>

            {/* ================================== */}
            {/* === CONFIRM ALERT UNIVERSAL === */}
            {/* ================================== */}
            <ConfirmAlert
                title={`Konfirmasi ${alertType}`}
                message={`Apakah Anda yakin ingin ${alertType === 'delete' ? 'menghapus' : ''} data ini?`}
                submessage={`"${getActiveResource()?.item?.uraian || 'data yang dipilih'}"`}
                open={openAlert}
                onOpenChange={setOpenAlert}
                onConfirm={() => {
                    const activeResource = getActiveResource();
                    if (alertType === 'delete' && activeResource) {
                        handleDelete(
                            activeResource.item.id,
                            activeResource.name,
                        );
                    }
                }}
            />

            {/* ================================== */}
            {/* === MODAL INPUT/EDIT UNIVERSAL === ⬅️ NEW MODALS */}
            {/* ================================== */}

            {/* Misi Modal (Top Level - No Parent) */}
            <SakipNodeModal
                isOpen={openModalMisi}
                onOpenChange={(open) => {
                    setOpenModalMisi(open);
                    if (!open) setSelectedItemMisi(null);
                }}
                selectedItem={selectedItemMisi}
                onSave={(data) => handleSave(data, 'sakipmisi')}
                resourceName="misi"
                title="Misi"
            />

            {/* Tujuan RPJMD Modal (Parent: Misi) */}
            <SakipNodeModal
                isOpen={openModalTujuanRpjmd}
                onOpenChange={(open) => {
                    setOpenModalTujuanRpjmd(open);
                    if (!open) setSelectedItemTujuanRpjmd(null);
                }}
                selectedItem={selectedItemTujuanRpjmd}
                onSave={(data) => handleSave(data, 'sakiptujuanrpjmd')}
                resourceName="tujuan rpjmd"
                title="Tujuan RPJMD"
                parentOptions={selectOptionsMisi}
                parentLabel="Misi"
            />

            {/* Indikator Tujuan RPJMD Modal (Parent: Tujuan RPJMD) */}
            <SakipNodeModal
                isOpen={openModalIndikatorTujuanRpjmd}
                onOpenChange={(open) => {
                    setOpenModalIndikatorTujuanRpjmd(open);
                    if (!open) setSelectedItemIndikatorTujuanRpjmd(null);
                }}
                selectedItem={selectedItemIndikatorTujuanRpjmd}
                onSave={(data) => handleSave(data, 'sakipindikatortujuanrpjmd')}
                resourceName="indikator tujuan rpjmd"
                title="Indikator Tujuan RPJMD"
                parentOptions={selectOptionsTujuanRpjmd}
                parentLabel="Tujuan RPJMD"
            />

            {/* Sasaran RPJMD Modal (Parent: Tujuan RPJMD) */}
            <SakipNodeModal
                isOpen={openModalSasaranRpjmd}
                onOpenChange={(open) => {
                    setOpenModalSasaranRpjmd(open);
                    if (!open) setSelectedItemSasaranRpjmd(null);
                }}
                selectedItem={selectedItemSasaranRpjmd}
                onSave={(data) => handleSave(data, 'sakipsasaranrpjmd')}
                resourceName="sasaran rpjmd"
                title="Sasaran RPJMD"
                parentOptions={selectOptionsIndikatorTujuanRpjmd}
                parentLabel="Indikator Tujuan RPJMD"
            />

            {/* Indikator Sasaran RPJMD Modal (Parent: Sasaran RPJMD) */}
            <SakipNodeModal
                isOpen={openModalIndikatorSasaranRpjmd}
                onOpenChange={(open) => {
                    setOpenModalIndikatorSasaranRpjmd(open);
                    if (!open) setSelectedItemIndikatorSasaranRpjmd(null);
                }}
                selectedItem={selectedItemIndikatorSasaranRpjmd}
                onSave={(data) =>
                    handleSave(data, 'sakipindikatorsasaranrpjmd')
                }
                resourceName="indikator sasaran rpjmd"
                title="Indikator Sasaran RPJMD"
                parentOptions={selectOptionsSasaranRpjmd}
                parentLabel="Sasaran RPJMD"
            />

            {/* Tujuan PD Modal (Parent: Indikator Sasaran RPJMD) */}
            <SakipNodeModal
                isOpen={openModalTujuanPd}
                onOpenChange={(open) => {
                    setOpenModalTujuanPd(open);
                    if (!open) setSelectedItemTujuanPd(null);
                }}
                selectedItem={selectedItemTujuanPd}
                onSave={(data) => handleSave(data, 'sakiptujuanpd')}
                resourceName="tujuan pd"
                title="Tujuan PD"
                parentOptions={selectOptionsIndikatorSasaranRpjmd}
                parentLabel="Sasaran RPJMD"
            />

            {/* Indikator Tujuan PD Modal (Parent: Tujuan PD) */}
            <SakipNodeModal
                isOpen={openModalIndikatorTujuanPd}
                onOpenChange={(open) => {
                    setOpenModalIndikatorTujuanPd(open);
                    if (!open) setSelectedItemIndikatorTujuanPd(null);
                }}
                selectedItem={selectedItemIndikatorTujuanPd}
                onSave={(data) => handleSave(data, 'sakipindikatortujuanpd')}
                resourceName="indikator tujuan pd"
                title="Indikator Tujuan PD"
                parentOptions={selectOptionsTujuanPd}
                parentLabel="Tujuan Perangkat Daerah"
            />

            {/* Sasaran PD Modal (Parent: Indikator Tujuan PD) */}
            <SakipNodeModal
                isOpen={openModalSasaranPd}
                onOpenChange={(open) => {
                    setOpenModalSasaranPd(open);
                    if (!open) setSelectedItemSasaranPd(null);
                }}
                selectedItem={selectedItemSasaranPd}
                onSave={(data) => handleSave(data, 'sakipsasaranpd')}
                resourceName="sasaran pd"
                title="Sasaran Perangkat Daerah"
                parentOptions={selectOptionsIndikatorTujuanPd}
                parentLabel="Indikator Tujuan Perangkat Daerah"
            />

            {/* Indikator Sasaran PD Modal (Parent: Sasaran PD) */}
            <SakipNodeModal
                isOpen={openModalIndikatorSasaranPd}
                onOpenChange={(open) => {
                    setOpenModalIndikatorSasaranPd(open);
                    if (!open) setSelectedItemIndikatorSasaranPd(null);
                }}
                selectedItem={selectedItemIndikatorSasaranPd}
                onSave={(data) => handleSave(data, 'sakipindikatorsasaranpd')}
                resourceName="indikator sasaran pd"
                title="Indikator Sasaran Perangkat Daerah"
                parentOptions={selectOptionsSasaranPd}
                parentLabel="Sasaran Perangkat Daerah"
            />

            {/* Sasaran Program Modal (Parent: Indikator Sasaran PD) */}
            <SakipNodeModal
                isOpen={openModalSasaranProgram}
                onOpenChange={(open) => {
                    setOpenModalSasaranProgram(open);
                    if (!open) setSelectedItemSasaranProgram(null);
                }}
                selectedItem={selectedItemSasaranProgram}
                onSave={(data) => handleSave(data, 'sakipsasaranprogram')}
                resourceName="sasaran program"
                title="Sasaran Program"
                parentOptions={selectOptionsIndikatorSasaranPd}
                parentLabel="Indikator Sasaran Perangkat Daerah"
            />

            {/* Indikator Sasaran Program Modal (Parent: Sasaran Program) */}
            <SakipNodeModal
                isOpen={openModalIndikatorSasaranProgram}
                onOpenChange={(open) => {
                    setOpenModalIndikatorSasaranProgram(open);
                    if (!open) setSelectedItemIndikatorSasaranProgram(null);
                }}
                selectedItem={selectedItemIndikatorSasaranProgram}
                onSave={(data) =>
                    handleSave(data, 'sakipindikatorsasaranprogram')
                }
                resourceName="indikator sasaran program"
                title="Indikator Sasaran Program"
                parentOptions={selectOptionsSasaranProgram}
                parentLabel="Sasaran Program"
            />

            {/* Sasaran Kegiatan Modal (Parent: Indikator Sasaran Program) */}
            <SakipNodeModal
                isOpen={openModalSasaranKegiatan}
                onOpenChange={(open) => {
                    setOpenModalSasaranKegiatan(open);
                    if (!open) setSelectedItemSasaranKegiatan(null);
                }}
                selectedItem={selectedItemSasaranKegiatan}
                onSave={(data) => handleSave(data, 'sakipsasarankegiatan')}
                resourceName="sasaran kegiatan"
                title="Sasaran Kegiatan"
                parentOptions={selectOptionsIndikatorSasaranProgram}
                parentLabel="Indikator Sasaran Program"
            />

            {/* Indikator Sasaran Kegiatan Modal (Parent: Sasaran Kegiatan) */}
            <SakipNodeModal
                isOpen={openModalIndikatorSasaranKegiatan}
                onOpenChange={(open) => {
                    setOpenModalIndikatorSasaranKegiatan(open);
                    if (!open) setSelectedItemIndikatorSasaranKegiatan(null);
                }}
                selectedItem={selectedItemIndikatorSasaranKegiatan}
                onSave={(data) =>
                    handleSave(data, 'sakipindikatorsasarankegiatan')
                }
                resourceName="indikator sasaran kegiatan"
                title="Indikator Sasaran Kegiatan"
                parentOptions={selectOptionsSasaranKegiatan}
                parentLabel="Sasaran Kegiatan"
            />

            {/* Sasaran Sub Kegiatan Modal (Parent: Indikator Sasaran Kegiatan) */}
            <SakipNodeModal
                isOpen={openModalSasaranSubKegiatan}
                onOpenChange={(open) => {
                    setOpenModalSasaranSubKegiatan(open);
                    if (!open) setSelectedItemSasaranSubKegiatan(null);
                }}
                selectedItem={selectedItemSasaranSubKegiatan}
                onSave={(data) => handleSave(data, 'sakipsasaransubkegiatan')}
                resourceName="sasaran sub kegiatan"
                title="Sasaran Sub Kegiatan"
                parentOptions={selectOptionsIndikatorSasaranKegiatan}
                parentLabel="Indikator Sasaran Kegiatan"
            />

            {/* Indikator Sasaran Sub Kegiatan Modal (Parent: Sasaran Sub Kegiatan) */}
            <SakipNodeModal
                isOpen={openModalIndikatorSasaranSubKegiatan}
                onOpenChange={(open) => {
                    setOpenModalIndikatorSasaranSubKegiatan(open);
                    if (!open) setSelectedItemIndikatorSasaranSubKegiatan(null);
                }}
                selectedItem={selectedItemIndikatorSasaranSubKegiatan}
                onSave={(data) =>
                    handleSave(data, 'sakipindikatorsasaransubkegiatan')
                }
                resourceName="indikator sasaran sub kegiatan"
                title="Indikator Sasaran Sub Kegiatan"
                parentOptions={selectOptionsSasaranSubKegiatan}
                parentLabel="Sasaran Sub Kegiatan"
            />

            {/* Sasaran Sub Kegiatan Staf Modal (Parent: Indikator Sasaran Sub Kegiatan) */}
            <SakipNodeModal
                isOpen={openModalSasaranSubKegiatanStaf}
                onOpenChange={(open) => {
                    setOpenModalSasaranSubKegiatanStaf(open);
                    if (!open) setSelectedItemSasaranSubKegiatanStaf(null);
                }}
                selectedItem={selectedItemSasaranSubKegiatanStaf}
                onSave={(data) => handleSave(data, 'sakipsasaransubkegstaf')}
                resourceName="sasaran sub kegiatan staf"
                title="Sasaran Sub Kegiatan Staf"
                parentOptions={selectOptionsIndikatorSasaranSubKegiatan}
                parentLabel="Indikator Sasaran Sub Kegiatan"
            />

            {/* Indikator Sasaran Sub Kegiatan Staf Modal (Parent: Sasaran Sub Kegiatan Staf) */}
            <SakipNodeModal
                isOpen={openModalIndikatorSasaranSubKegiatanStaf}
                onOpenChange={(open) => {
                    setOpenModalIndikatorSasaranSubKegiatanStaf(open);
                    if (!open)
                        setSelectedItemIndikatorSasaranSubKegiatanStaf(null);
                }}
                selectedItem={selectedItemIndikatorSasaranSubKegiatanStaf}
                onSave={(data) =>
                    handleSave(data, 'sakipindikatorsasaransubkegstaf')
                }
                resourceName="indikator sasaran sub kegiatan staf"
                title="Indikator Sasaran Sub Kegiatan Staf"
                parentOptions={selectOptionsSasaranSubKegiatanStaf}
                parentLabel="Sasaran Sub Kegiatan Staf"
            />

            <Toaster position="top-right" richColors closeButton />
        </AppLayout>
    );
}