UI & API Menu Inovasi, SubMenu Program Kreatif Desa

package.json

@@ -1,6 +1,6 @@
 {
   "name": "desa-darmasaba",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

prisma/data/ekonomi/jumlah-pengangguran/detail-data-pengangguran.json

@@ -0,0 +1,51 @@
+[
+    {
+      "month": "Jan",
+      "year": 2025,
+      "totalUnemployment": 160,
+      "educatedUnemployment": 95,
+      "uneducatedUnemployment": 65,
+      "percentageChange": null
+    },
+    {
+      "month": "Feb",
+      "year": 2025,
+      "totalUnemployment": 155,
+      "educatedUnemployment": 90,
+      "uneducatedUnemployment": 65,
+      "percentageChange": -3.1
+    },
+    {
+      "month": "Mar",
+      "year": 2025,
+      "totalUnemployment": 150,
+      "educatedUnemployment": 88,
+      "uneducatedUnemployment": 62,
+      "percentageChange": -3.2
+    },
+    {
+      "month": "Apr",
+      "year": 2025,
+      "totalUnemployment": 148,
+      "educatedUnemployment": 85,
+      "uneducatedUnemployment": 63,
+      "percentageChange": -1.3
+    },
+    {
+      "month": "Mei",
+      "year": 2025,
+      "totalUnemployment": 145,
+      "educatedUnemployment": 82,
+      "uneducatedUnemployment": 63,
+      "percentageChange": -2.0
+    },
+    {
+      "month": "Jun",
+      "year": 2025,
+      "totalUnemployment": 140,
+      "educatedUnemployment": 80,
+      "uneducatedUnemployment": 60,
+      "percentageChange": -3.4
+    }
+  ]
+  

prisma/migrations/20250708152314_nico_8_jul_25_1/migration.sql

@@ -0,0 +1,77 @@
+-- CreateTable
+CREATE TABLE "GrafikMenganggurBerdasarkanUsia" (
+    "id" TEXT NOT NULL,
+    "usia18_25" TEXT NOT NULL,
+    "usia26_35" TEXT NOT NULL,
+    "usia36_45" TEXT NOT NULL,
+    "usia46_keatas" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "GrafikMenganggurBerdasarkanUsia_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "GrafikMenganggurBerdasarkanPendidikan" (
+    "id" TEXT NOT NULL,
+    "SD" TEXT NOT NULL,
+    "SMP" TEXT NOT NULL,
+    "SMA" TEXT NOT NULL,
+    "D3" TEXT NOT NULL,
+    "S1" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "GrafikMenganggurBerdasarkanPendidikan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "GrafikJumlahPendudukMiskin" (
+    "id" UUID NOT NULL,
+    "year" INTEGER NOT NULL,
+    "totalPoorPopulation" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "GrafikJumlahPendudukMiskin_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "SektorUnggulanDesa" (
+    "id" UUID NOT NULL,
+    "name" VARCHAR(100) NOT NULL,
+    "description" TEXT,
+    "value" DOUBLE PRECISION,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "SektorUnggulanDesa_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DataDemografiPekerjaan" (
+    "id" TEXT NOT NULL,
+    "pekerjaan" TEXT NOT NULL,
+    "lakiLaki" INTEGER NOT NULL,
+    "perempuan" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "DataDemografiPekerjaan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "GrafikJumlahPendudukMiskin_year_key" ON "GrafikJumlahPendudukMiskin"("year");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "SektorUnggulanDesa_name_key" ON "SektorUnggulanDesa"("name");

prisma/migrations/20250709153651_nico_9_jul_25_1/migration.sql

@@ -0,0 +1,19 @@
+-- CreateTable
+CREATE TABLE "DetailDataPengangguran" (
+    "id" UUID NOT NULL,
+    "month" VARCHAR(20) NOT NULL,
+    "year" INTEGER NOT NULL,
+    "totalUnemployment" INTEGER NOT NULL,
+    "educatedUnemployment" INTEGER NOT NULL,
+    "uneducatedUnemployment" INTEGER NOT NULL,
+    "percentageChange" DOUBLE PRECISION,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "DetailDataPengangguran_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "DetailDataPengangguran_month_year_key" ON "DetailDataPengangguran"("month", "year");

prisma/migrations/20250710032516_nico_10_jul_25_1/migration.sql

@@ -0,0 +1,133 @@
+-- CreateTable
+CREATE TABLE "ApbDesa" (
+    "id" TEXT NOT NULL,
+    "tahun" INTEGER NOT NULL,
+    "pendapatanId" TEXT NOT NULL,
+    "belanjaId" TEXT NOT NULL,
+    "pembiayaanId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "ApbDesa_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Pendapatan" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "value" INTEGER NOT NULL,
+
+    CONSTRAINT "Pendapatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Belanja" (
+    "id" TEXT NOT NULL,
+    "penyelenggaraan" INTEGER NOT NULL,
+    "pelaksanaanPembangunan" INTEGER NOT NULL,
+    "pembinaanMasyarakat" INTEGER NOT NULL,
+    "pemberdayaanMasyarakat" INTEGER NOT NULL,
+    "penanggulanganBencana" INTEGER NOT NULL,
+    "total" INTEGER NOT NULL,
+
+    CONSTRAINT "Belanja_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Pembiayaan" (
+    "id" TEXT NOT NULL,
+    "silpa" INTEGER NOT NULL,
+
+    CONSTRAINT "Pembiayaan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KlasifikasiBelanja" (
+    "id" TEXT NOT NULL,
+    "jenis" TEXT NOT NULL,
+    "persen" DOUBLE PRECISION NOT NULL,
+    "total" INTEGER NOT NULL,
+    "apbDesaId" TEXT NOT NULL,
+
+    CONSTRAINT "KlasifikasiBelanja_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "RincianBelanja" (
+    "id" TEXT NOT NULL,
+    "nama" TEXT NOT NULL,
+    "jumlah" INTEGER NOT NULL,
+    "klasifikasiBelanjaId" TEXT NOT NULL,
+
+    CONSTRAINT "RincianBelanja_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KegiatanSubak" (
+    "id" TEXT NOT NULL,
+    "nama" TEXT NOT NULL,
+    "jumlah" INTEGER NOT NULL,
+    "apbDesaId" TEXT NOT NULL,
+
+    CONSTRAINT "KegiatanSubak_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_ApbDesaToKegiatanSubak" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_ApbDesaToKegiatanSubak_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateTable
+CREATE TABLE "_BelanjaToKlasifikasiBelanja" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_BelanjaToKlasifikasiBelanja_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateTable
+CREATE TABLE "_KlasifikasiBelanjaToRincianBelanja" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_KlasifikasiBelanjaToRincianBelanja_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateIndex
+CREATE INDEX "_ApbDesaToKegiatanSubak_B_index" ON "_ApbDesaToKegiatanSubak"("B");
+
+-- CreateIndex
+CREATE INDEX "_BelanjaToKlasifikasiBelanja_B_index" ON "_BelanjaToKlasifikasiBelanja"("B");
+
+-- CreateIndex
+CREATE INDEX "_KlasifikasiBelanjaToRincianBelanja_B_index" ON "_KlasifikasiBelanjaToRincianBelanja"("B");
+
+-- AddForeignKey
+ALTER TABLE "ApbDesa" ADD CONSTRAINT "ApbDesa_pendapatanId_fkey" FOREIGN KEY ("pendapatanId") REFERENCES "Pendapatan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ApbDesa" ADD CONSTRAINT "ApbDesa_belanjaId_fkey" FOREIGN KEY ("belanjaId") REFERENCES "Belanja"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ApbDesa" ADD CONSTRAINT "ApbDesa_pembiayaanId_fkey" FOREIGN KEY ("pembiayaanId") REFERENCES "Pembiayaan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_ApbDesaToKegiatanSubak" ADD CONSTRAINT "_ApbDesaToKegiatanSubak_A_fkey" FOREIGN KEY ("A") REFERENCES "ApbDesa"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_ApbDesaToKegiatanSubak" ADD CONSTRAINT "_ApbDesaToKegiatanSubak_B_fkey" FOREIGN KEY ("B") REFERENCES "KegiatanSubak"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_BelanjaToKlasifikasiBelanja" ADD CONSTRAINT "_BelanjaToKlasifikasiBelanja_A_fkey" FOREIGN KEY ("A") REFERENCES "Belanja"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_BelanjaToKlasifikasiBelanja" ADD CONSTRAINT "_BelanjaToKlasifikasiBelanja_B_fkey" FOREIGN KEY ("B") REFERENCES "KlasifikasiBelanja"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_KlasifikasiBelanjaToRincianBelanja" ADD CONSTRAINT "_KlasifikasiBelanjaToRincianBelanja_A_fkey" FOREIGN KEY ("A") REFERENCES "KlasifikasiBelanja"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_KlasifikasiBelanjaToRincianBelanja" ADD CONSTRAINT "_KlasifikasiBelanjaToRincianBelanja_B_fkey" FOREIGN KEY ("B") REFERENCES "RincianBelanja"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/20250710034841_nico_10_jul_25_2/migration.sql

@@ -0,0 +1,34 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `pelaksanaanPembangunan` on the `Belanja` table. All the data in the column will be lost.
+  - You are about to drop the column `pemberdayaanMasyarakat` on the `Belanja` table. All the data in the column will be lost.
+  - You are about to drop the column `pembinaanMasyarakat` on the `Belanja` table. All the data in the column will be lost.
+  - You are about to drop the column `penanggulanganBencana` on the `Belanja` table. All the data in the column will be lost.
+  - You are about to drop the column `penyelenggaraan` on the `Belanja` table. All the data in the column will be lost.
+  - Added the required column `name` to the `Belanja` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `updatedAt` to the `Belanja` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `value` to the `Belanja` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `total` to the `Pendapatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `updatedAt` to the `Pendapatan` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Belanja" DROP COLUMN "pelaksanaanPembangunan",
+DROP COLUMN "pemberdayaanMasyarakat",
+DROP COLUMN "pembinaanMasyarakat",
+DROP COLUMN "penanggulanganBencana",
+DROP COLUMN "penyelenggaraan",
+ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "isActive" BOOLEAN NOT NULL DEFAULT true,
+ADD COLUMN     "name" TEXT NOT NULL,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL,
+ADD COLUMN     "value" INTEGER NOT NULL;
+
+-- AlterTable
+ALTER TABLE "Pendapatan" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "isActive" BOOLEAN NOT NULL DEFAULT true,
+ADD COLUMN     "total" INTEGER NOT NULL,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL;

prisma/migrations/20250710035010_nico_10_jul_25_3/migration.sql

@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `total` on the `Belanja` table. All the data in the column will be lost.
+  - You are about to drop the column `total` on the `Pendapatan` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Belanja" DROP COLUMN "total";
+
+-- AlterTable
+ALTER TABLE "Pendapatan" DROP COLUMN "total";

prisma/migrations/20250710040514_nico_10_jul_25_4/migration.sql

@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `silpa` on the `Pembiayaan` table. All the data in the column will be lost.
+  - Added the required column `name` to the `Pembiayaan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `value` to the `Pembiayaan` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Pembiayaan" DROP COLUMN "silpa",
+ADD COLUMN     "name" TEXT NOT NULL,
+ADD COLUMN     "value" INTEGER NOT NULL;

prisma/schema.prisma

@@ -90,6 +90,10 @@ model FileStorage {
   KontakItem KontakItem[]
 
   Pegawai Pegawai[]
+
+  DesaDigital DesaDigital[]
+
+  KolaborasiInovasi KolaborasiInovasi[]
 }
 
 //========================================= MENU PPID ========================================= //
@@ -150,7 +154,7 @@ model DaftarInformasiPublik {
   id             String   @id @default(cuid())
   jenisInformasi String
   deskripsi      String
-  tanggal        String
+  tanggal        DateTime @db.Date
   createdAt      DateTime @default(now())
   updatedAt      DateTime @updatedAt
   deletedAt      DateTime @default(now())
@@ -1123,19 +1127,19 @@ model PosisiOrganisasi {
 }
 
 model Pegawai {
-  id            String    @id @default(uuid()) @db.Uuid
-  namaLengkap   String    @db.VarChar(255)
-  gelarAkademik String?   @db.VarChar(100)
-  image FileStorage? @relation(fields: [imageId], references: [id])
-  imageId String?
-  tanggalMasuk  DateTime? @db.Date
-  email         String?   @unique @db.VarChar(255)
-  telepon       String?   @db.VarChar(20)
-  alamat        String?   @db.Text
-  posisiId      String    @db.VarChar(50)
-  isActive      Boolean   @default(true)
-  createdAt     DateTime  @default(now())
-  updatedAt     DateTime  @updatedAt
+  id            String       @id @default(uuid()) @db.Uuid
+  namaLengkap   String       @db.VarChar(255)
+  gelarAkademik String?      @db.VarChar(100)
+  image         FileStorage? @relation(fields: [imageId], references: [id])
+  imageId       String?
+  tanggalMasuk  DateTime?    @db.Date
+  email         String?      @unique @db.VarChar(255)
+  telepon       String?      @db.VarChar(20)
+  alamat        String?      @db.Text
+  posisiId      String       @db.VarChar(50)
+  isActive      Boolean      @default(true)
+  createdAt     DateTime     @default(now())
+  updatedAt     DateTime     @updatedAt
 
   posisi PosisiOrganisasi @relation(fields: [posisiId], references: [id])
 
@@ -1201,3 +1205,170 @@ model StatistikKemiskinan {
   createdAt         DateTime           @default(now())
   updatedAt         DateTime           @updatedAt
 }
+
+// ========================================= JUMLAH PENDUDUK USIA KERJA YANG MENGANGGUR ========================================= //
+model GrafikMenganggurBerdasarkanUsia {
+  id            String   @id @default(cuid())
+  usia18_25     String
+  usia26_35     String
+  usia36_45     String
+  usia46_keatas String
+  createdAt     DateTime @default(now())
+  updatedAt     DateTime @updatedAt
+  deletedAt     DateTime @default(now())
+  isActive      Boolean  @default(true)
+}
+
+model GrafikMenganggurBerdasarkanPendidikan {
+  id        String   @id @default(cuid())
+  SD        String
+  SMP       String
+  SMA       String
+  D3        String
+  S1        String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= JUMLAH PENDUDUK MISKIN ========================================= //
+model GrafikJumlahPendudukMiskin {
+  id                  String   @id @default(uuid()) @db.Uuid // Menggunakan UUID sebagai primary key
+  year                Int      @unique // Tahun data (e.g., 2024, 2025)
+  totalPoorPopulation Int // Jumlah penduduk miskin (e.g., 4800000)
+  createdAt           DateTime @default(now())
+  updatedAt           DateTime @updatedAt
+  deletedAt           DateTime @default(now())
+  isActive            Boolean  @default(true)
+}
+
+// ========================================= SEKTOR UNGGULAN DESA ========================================= //
+model SektorUnggulanDesa {
+  id          String   @id @default(uuid()) @db.Uuid // Menggunakan UUID sebagai primary key
+  name        String   @unique @db.VarChar(100) // Nama sektor (e.g., "Sektor Pertanian", "Sektor Peternakan")
+  description String?  @db.Text // Deskripsi lengkap tentang sektor
+  value       Float? // Nilai kuantitatif sektor (misalnya, kontribusi PDB, jumlah produksi, dll.)
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  deletedAt   DateTime @default(now())
+  isActive    Boolean  @default(true)
+}
+
+// ========================================= DEMOGRAFI PEKERJAAN ========================================= //
+model DataDemografiPekerjaan {
+  id        String   @id @default(cuid())
+  pekerjaan String
+  lakiLaki  Int
+  perempuan Int
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= JUMLAH PENGANGGURAN ========================================= //
+model DetailDataPengangguran {
+  id                     String   @id @default(uuid()) @db.Uuid
+  month                  String   @db.VarChar(20)
+  year                   Int
+  totalUnemployment      Int
+  educatedUnemployment   Int
+  uneducatedUnemployment Int
+  percentageChange       Float?
+  createdAt              DateTime @default(now())
+  updatedAt              DateTime @updatedAt
+  deletedAt              DateTime @default(now())
+  isActive               Boolean  @default(true)
+
+  @@unique([month, year])
+}
+
+// ========================================= PADESA PENDAPATAN ASLI DESA ========================================= //
+model ApbDesa {
+  id         String       @id @default(uuid())
+  tahun      Int
+  pembiayaan Pembiayaan[] @relation("ApbDesaPembiayaan")
+  belanja    Belanja[]    @relation("ApbDesaBelanja")
+  pendapatan Pendapatan[] @relation("ApbDesaPendapatan")
+  createdAt  DateTime     @default(now())
+  updatedAt  DateTime     @updatedAt
+  deletedAt  DateTime     @default(now())
+  isActive   Boolean      @default(true)
+}
+
+model Pendapatan {
+  id        String    @id @default(uuid())
+  name      String
+  value     Int
+  ApbDesa   ApbDesa[] @relation("ApbDesaPendapatan")
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
+  deletedAt DateTime  @default(now())
+  isActive  Boolean   @default(true)
+}
+
+model Belanja {
+  id        String    @id @default(uuid())
+  name      String
+  value     Int
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
+  deletedAt DateTime  @default(now())
+  isActive  Boolean   @default(true)
+  ApbDesa   ApbDesa[] @relation("ApbDesaBelanja")
+}
+
+model Pembiayaan {
+  id        String    @id @default(uuid())
+  name      String
+  value     Int
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
+  deletedAt DateTime  @default(now())
+  isActive  Boolean   @default(true)
+  ApbDesa   ApbDesa[] @relation("ApbDesaPembiayaan")
+}
+
+// ========================================= INOVASI ========================================= //
+// ========================================= DESA DIGITAL / SMART VILLAGE ========================================= //
+model DesaDigital {
+  id        String      @id @default(cuid())
+  name      String
+  deskripsi String      @db.Text
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}
+
+// ========================================= PROGRAM KREATIF ========================================= //
+model ProgramKreatif {
+  id        String   @id @default(cuid())
+  name      String
+  slug      String   @db.Text //deskripsi singkat
+  deskripsi String   @db.Text //deskripsi panjang
+  icon      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= KOLABORASI INOVASI ========================================= //
+model KolaborasiInovasi {
+  id          String      @id @default(cuid())
+  name        String
+  tahun       Int
+  slug        String      @db.Text //deskripsi singkat
+  deskripsi   String      @db.Text //deskripsi panjang
+  kolaborator String
+  image       FileStorage @relation(fields: [imageId], references: [id])
+  imageId     String
+  createdAt   DateTime    @default(now())
+  updatedAt   DateTime    @updatedAt
+  deletedAt   DateTime    @default(now())
+  isActive    Boolean     @default(true)
+}

prisma/seed.ts

@@ -21,6 +21,7 @@ import kategoriProduk from "./data/ekonomi/pasar-desa/kategori-produk.json";
 import hubunganOrganisasi from "./data/ekonomi/struktur-organisasi/hubungan-organisasi.json";
 import posisiOrganisasi from "./data/ekonomi/struktur-organisasi/posisi-organisasi.json";
 import pegawai from "./data/ekonomi/struktur-organisasi/pegawai.json";
+import detailDataPengangguran from './data/ekonomi/jumlah-pengangguran/detail-data-pengangguran.json';
 
 (async () => {
   for (const l of layanan) {
@@ -431,6 +432,29 @@ import pegawai from "./data/ekonomi/struktur-organisasi/pegawai.json";
     });
   }
   console.log("hubungan organisasi success ...");
+
+  for (const d of detailDataPengangguran) {
+    await prisma.detailDataPengangguran.upsert({
+      where: {
+        month_year: { month: d.month, year: d.year },
+      },
+      update: {
+        totalUnemployment: d.totalUnemployment,
+        educatedUnemployment: d.educatedUnemployment,
+        uneducatedUnemployment: d.uneducatedUnemployment,
+        percentageChange: d.percentageChange,
+      },
+      create: {
+        month: d.month,
+        year: d.year,
+        totalUnemployment: d.totalUnemployment,
+        educatedUnemployment: d.educatedUnemployment,
+        uneducatedUnemployment: d.uneducatedUnemployment,
+        percentageChange: d.percentageChange,
+      },
+    });
+  }
+  console.log("📊 detailDataPengangguran success ...");
 })()
   .then(() => prisma.$disconnect())
   .catch((e) => {

src/app/admin/(dashboard)/_com/header.tsx

@@ -19,7 +19,7 @@ const HeaderSearch = ({
   onChange,
 }: HeaderSearchProps) => {
   return (
-    <Grid>
+    <Grid mb={10}>
       <GridCol span={{ base: 12, md: 9 }}>
         <Title order={3}>{title}</Title>
       </GridCol>

src/app/admin/(dashboard)/_com/judulListTab.tsx

@@ -5,31 +5,50 @@ import { IconCircleDashedPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React from 'react';
 
-const JudulListTab = ({ title = "", href = "#", placeholder = "pencarian", searchIcon = <IconSearch size={20} /> }) => {
+type JudulListTabProps = {
+  title: string;
+  href: string;
+  placeholder: string;
+  searchIcon: React.ReactNode;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+
+
+
+const JudulListTab = ({
+  title = "",
+  href = "#",
+  placeholder = "pencarian",
+  searchIcon = <IconSearch size={20} />,
+  value,
+  onChange 
+}: JudulListTabProps) => {
   const router = useRouter();
 
   const handleNavigate = () => {
     router.push(href);
   };
 
-
-
   return (
     <Grid mb={10}>
       <GridCol span={{ base: 12, md: 8 }}>
-        <Text fz={{base: "md", md: "xl"}} fw={"bold"}>{title}</Text>
+        <Text fz={{ base: "md", md: "xl" }} fw={"bold"}>{title}</Text>
       </GridCol>
-      <GridCol span={{ base: 9, md: 3}} ta="right">
+      <GridCol span={{ base: 9, md: 3 }} ta="right">
         <Paper radius={"lg"} bg={colors['white-1']}>
           <TextInput
             radius="lg"
             placeholder={placeholder}
             leftSection={searchIcon}
             w="100%"
+            value={value}
+            onChange={onChange}
           />
         </Paper>
       </GridCol>
-      <GridCol span={{ base: 3, md: 1}} ta="right">
+      <GridCol span={{ base: 3, md: 1 }} ta="right">
         <Button onClick={handleNavigate} bg={colors['blue-button']}>
           <IconCircleDashedPlus size={25} />
         </Button>

src/app/admin/(dashboard)/_state/desa/berita.ts

@@ -80,13 +80,33 @@ const berita = proxy({
           };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.desa.berita["find-many"].get();
-      if (res.status === 200) {
-        berita.findMany.data = (res.data?.data ) ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+  
+    async load(page = 1, limit = 10) {
+      berita.findMany.loading = true;
+      berita.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.desa.berita["find-many"].get({
+          query: {
+            page,
+            limit,
+          },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          berita.findMany.data = res.data.data ?? [];
+          berita.findMany.totalPages = res.data.totalPages ?? 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita paginated:", err);
+      } finally {
+        berita.findMany.loading = false;
       }
     },
   },
+  
   findUnique: {
     data: null as
       | Prisma.BeritaGetPayload<{

src/app/admin/(dashboard)/_state/ekonomi/PADesa.ts

@@ -0,0 +1,887 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateApbDesa = z.object({
+  tahun: z.number().min(4, "Tahun minimal 4 karakter"),
+  pembiayaanIds: z.array(z.string().uuid()).nonempty("Pilih minimal 1 pembiayaan"),
+  belanjaIds: z.array(z.string().uuid()).nonempty("Pilih minimal 1 belanja"),
+  pendapatanIds: z.array(z.string().uuid()).nonempty("Pilih minimal 1 pendapatan"),
+});
+
+const ApbDesaDefaultForm = {
+  tahun: 0,
+  pendapatanIds: [] as string[],
+  belanjaIds: [] as string[],
+  pembiayaanIds: [] as string[],
+};
+
+const ApbDesa = proxy({
+  create: {
+    form: { ...ApbDesaDefaultForm },
+    loading: false,
+    async submit() {
+      const cek = templateApbDesa.safeParse(this.form);
+      if (!cek.success) {
+        const err = cek.error.issues.map((v) => v.message).join("\n");
+        return toast.error(err);
+      }
+
+      try {
+        this.loading = true;
+        const res = await ApiFetch.api.ekonomi.pendapatanaslidesa.apbdesa[
+          "create"
+        ].post(this.form);
+        if (res.status === 200) {
+          toast.success("Berhasil menambahkan APB Desa");
+          ApbDesa.findMany.load();
+          this.reset();
+        } else {
+          toast.error(res.data?.message || "Gagal menambahkan APB Desa");
+        }
+      } catch (error) {
+        console.error("Create error:", error);
+        toast.error("Gagal menambahkan APB Desa");
+      } finally {
+        this.loading = false;
+      }
+    },
+    reset() {
+      this.form = { ...ApbDesaDefaultForm };
+    },
+  },
+  findMany: {
+    data: null as 
+    | Prisma.ApbDesaGetPayload<{
+      include: {
+        pendapatan: true;
+        belanja: true;
+        pembiayaan: true;
+      };
+    }>[]
+    | null,
+    loading: false,
+    async load() {
+      try {
+        this.loading = true;
+        const res = await ApiFetch.api.ekonomi.pendapatanaslidesa.apbdesa[
+          "find-many"
+        ].get();
+        if (res.status === 200) {
+          this.data = res.data?.data ?? [];
+        } else {
+          toast.error(res.data?.message || "Gagal mengambil APB Desa");
+        }
+      } catch (error) {
+        console.error("Find many error:", error);
+        toast.error("Gagal mengambil APB Desa");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...ApbDesaDefaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(
+          `/api/ekonomi/pendapatanaslidesa/apbdesa/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error("Gagal mengambil APB Desa");
+        }
+        const result = await response.json();
+    
+        if (!result.success) {
+          throw new Error(result.message || "Gagal memuat APB Desa");
+        }
+    
+        const data = result.data;
+    
+        this.id = id;
+        this.form = {
+          tahun: data.tahun || 0,
+          pendapatanIds: data.pendapatan?.map((p: any) => p.id) || [],
+          belanjaIds: data.belanja?.map((b: any) => b.id) || [],
+          pembiayaanIds: data.pembiayaan?.map((p: any) => p.id) || [],
+        };
+    
+        return data;
+      } catch (error) {
+        console.error("Error loading APB Desa:", error);
+        toast.error("Gagal memuat data APB Desa");
+        return null;
+      }
+    },
+    async update() {
+      try {
+        this.loading = true;
+        const response = await fetch(
+          `/api/ekonomi/pendapatanaslidesa/apbdesa/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(this.form),
+          }
+        );
+        if (!response.ok) {
+          throw new Error("Gagal memperbarui APB Desa");
+        }
+        const data = await response.json();
+        toast.success("APB Desa berhasil diperbarui");
+        return data;
+      } catch (error) {
+        console.error("Error updating APB Desa:", error);
+        toast.error("Gagal memperbarui APB Desa");
+        throw error;
+      } finally {
+        this.loading = false;
+      }
+    },
+    reset() {
+      this.id = "";
+      this.form = { ...ApbDesaDefaultForm };
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      try {
+        this.loading = true;
+        const response = await fetch(
+          `/api/ekonomi/pendapatanaslidesa/apbdesa/del/${id}`,
+          {
+            method: "DELETE",
+          }
+        );
+        if (!response.ok) {
+          throw new Error("Gagal menghapus APB Desa");
+        }
+        toast.success("APB Desa berhasil dihapus");
+        return true;
+      } catch (error) {
+        console.error("Error deleting APB Desa:", error);
+        toast.error("Gagal menghapus APB Desa");
+        return false;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.ApbDesaGetPayload<{
+      include: { pendapatan: true; belanja: true; pembiayaan: true };
+    }> | null,
+  
+    async load(id: string) {
+      try {
+        const response = await fetch(
+          `/api/ekonomi/pendapatanaslidesa/apbdesa/${id}`
+        );
+        if (!response.ok) {
+          throw new Error("Gagal mengambil detail APB Desa");
+        }
+        const result = await response.json();
+  
+        if (!result.success) {
+          throw new Error(result.message || "Gagal mengambil data");
+        }
+  
+        this.data = result.data; // ✅ fix utama di sini
+        return result.data;
+      } catch (error) {
+        console.error("Error loading APB Desa detail:", error);
+        toast.error("Gagal memuat detail APB Desa");
+        return null;
+      }
+    },
+  },
+});
+
+const templatePendapatan = z.object({
+  name: z.string().min(2, "Nama harus diisi"),
+  value: z.number().int().positive("Nilai harus angka positif"),
+});
+
+const PendapatanDefaultForm = {
+  name: "",
+  value: 0,
+};
+
+const pendapatan = proxy({
+  create: {
+    form: { ...PendapatanDefaultForm },
+    loading: false,
+    async submit() {
+      const cek = templatePendapatan.safeParse(this.form);
+      if (!cek.success) {
+        const err = cek.error.issues.map((v) => v.message).join("\n");
+        return toast.error(err);
+      }
+
+      try {
+        this.loading = true;
+        const res =
+          await ApiFetch.api.ekonomi.pendapatanaslidesa.pendapatanasli[
+            "create"
+          ].post(this.form);
+        if (res.status === 200) {
+          toast.success("Berhasil menambahkan Pendapatan Asli");
+          pendapatan.findMany.load();
+          this.reset();
+        } else {
+          toast.error(res.data?.message || "Gagal menambahkan Pendapatan Asli");
+        }
+      } catch (error) {
+        console.error("Create error:", error);
+        toast.error("Gagal menambahkan Pendapatan Asli");
+      } finally {
+        this.loading = false;
+      }
+    },
+    reset() {
+      this.form = { ...PendapatanDefaultForm };
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {
+      // Change to arrow function
+      pendapatan.findMany.loading = true; // Use the full path to access the property
+      pendapatan.findMany.page = page;
+      try {
+        const res =
+          await ApiFetch.api.ekonomi.pendapatanaslidesa.pendapatanasli[
+            "find-many"
+          ].get({
+            query: { page, limit },
+          });
+
+        if (res.status === 200 && res.data?.success) {
+          pendapatan.findMany.data = res.data.data || [];
+          pendapatan.findMany.total = res.data.total || 0;
+          pendapatan.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load pendapatan:", res.data?.message);
+          pendapatan.findMany.data = [];
+          pendapatan.findMany.total = 0;
+          pendapatan.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading pendapatan:", error);
+        pendapatan.findMany.data = [];
+        pendapatan.findMany.total = 0;
+        pendapatan.findMany.totalPages = 1;
+      } finally {
+        pendapatan.findMany.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...PendapatanDefaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(`/api/ekonomi/pendapatanaslidesa/pendapatanasli/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            value: data.value,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading pendapatan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templatePendapatan.safeParse(pendapatan.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        pendapatan.update.loading = true;
+        const response = await fetch(`/api/ekonomi/pendapatanaslidesa/pendapatanasli/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            value: this.form.value,
+          }),
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update pendapatan");
+          await pendapatan.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate pendapatan");
+        }
+      } catch (error) {
+        console.error("Error updating pendapatan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengupdate pendapatan"
+        );
+        return false;
+      } finally {
+        pendapatan.update.loading = false;
+      }
+    },
+    reset() {
+      pendapatan.update.id = "";
+      pendapatan.update.form = { ...PendapatanDefaultForm };
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        pendapatan.delete.loading = true;
+
+        const response = await fetch(
+          `/api/ekonomi/pendapatanaslidesa/pendapatanasli/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Pendapatan Asli berhasil dihapus");
+          await pendapatan.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus Pendapatan Asli");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus Pendapatan Asli");
+      } finally {
+        pendapatan.delete.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PendapatanGetPayload<{
+      select: { isActive: boolean };
+    }> | null,
+    async load(id: string) {
+      const res = await fetch(
+        `/api/ekonomi/pendapatanaslidesa/pendapatanasli/${id}`
+      );
+      if (res.ok) {
+        const json = await res.json();
+        pendapatan.findUnique.data = json.data
+          ? {
+              ...json.data,
+              isActive: json.data.isActive ?? true, // Fallback ke aktif:true jika tidak ada data
+            }
+          : null;
+      } else {
+        pendapatan.findUnique.data = null;
+      }
+    },
+  },
+});
+
+const templateBelanja = z.object({
+  name: z.string().min(2, "Nama harus diisi"),
+  value: z.number().int().positive("Nilai harus angka positif"),
+});
+
+const BelanjaDefaultForm = {
+  name: "",
+  value: 0,
+};
+
+const belanja = proxy({
+  create: {
+    form: { ...BelanjaDefaultForm },
+    loading: false,
+    async submit() {
+      const cek = templateBelanja.safeParse(this.form);
+      if (!cek.success) {
+        const err = cek.error.issues.map((v) => v.message).join("\n");
+        return toast.error(err);
+      }
+
+      try {
+        this.loading = true;
+        const res = await ApiFetch.api.ekonomi.pendapatanaslidesa.belanja[
+          "create"
+        ].post(this.form);
+        if (res.status === 200) {
+          toast.success("Berhasil menambahkan Belanja");
+          belanja.findMany.load();
+          this.reset();
+        } else {
+          toast.error(res.data?.message || "Gagal menambahkan Belanja");
+        }
+      } catch (error) {
+        console.error("Create error:", error);
+        toast.error("Gagal menambahkan Belanja");
+      } finally {
+        this.loading = false;
+      }
+    },
+    reset() {
+      this.form = { ...BelanjaDefaultForm };
+    },
+  },
+  findMany: {
+    data: [] as Array<{
+      id: string;
+      name: string;
+      value: number;
+    }>,
+    loading: false,
+    async load() {
+      try {
+        this.loading = true;
+        const res = await ApiFetch.api.ekonomi.pendapatanaslidesa.belanja[
+          "find-many"
+        ].get();
+        if (res.status === 200) {
+          this.data = res.data?.data ?? [];
+        } else {
+          toast.error(res.data?.message || "Gagal mengambil Belanja");
+        }
+      } catch (error) {
+        console.error("Find many error:", error);
+        toast.error("Gagal mengambil Belanja");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...BelanjaDefaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(`/api/ekonomi/pendapatanaslidesa/belanja/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            value: data.value,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading belanja:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateBelanja.safeParse(belanja.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        belanja.update.loading = true;
+        const response = await fetch(`/api/ekonomi/pendapatanaslidesa/belanja/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            value: this.form.value,
+          }),
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update belanja");
+          await belanja.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate belanja");
+        }
+      } catch (error) {
+        console.error("Error updating belanja:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengupdate belanja"
+        );
+        return false;
+      } finally {
+        belanja.update.loading = false;
+      }
+    },
+    reset() {
+      belanja.update.id = "";
+      belanja.update.form = { ...BelanjaDefaultForm };
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        belanja.delete.loading = true;
+
+        const response = await fetch(
+          `/api/ekonomi/pendapatanaslidesa/belanja/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Belanja berhasil dihapus");
+          await belanja.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus Belanja");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus Belanja");
+      } finally {
+        belanja.delete.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.BelanjaGetPayload<{
+      select: { isActive: boolean };
+    }> | null,
+    async load(id: string) {
+      const res = await fetch(`/api/ekonomi/pendapatanaslidesa/belanja/${id}`);
+      if (res.ok) {
+        const json = await res.json();
+        belanja.findUnique.data = json.data
+          ? {
+              ...json.data,
+              isActive: json.data.isActive ?? true, // Fallback ke aktif:true jika tidak ada data
+            }
+          : null;
+      } else {
+        belanja.findUnique.data = null;
+      }
+    },
+  },
+});
+
+const templatePembiayaan = z.object({
+  name: z.string().min(2, "Nama harus diisi"),
+  value: z.number().int().positive("Nilai harus angka positif"),
+});
+
+const PembiayaanDefaultForm = {
+  name: "",
+  value: 0,
+};
+
+const pembiayaan = proxy({
+  create: {
+    form: { ...PembiayaanDefaultForm },
+    loading: false,
+    async submit() {
+      const cek = templatePembiayaan.safeParse(this.form);
+      if (!cek.success) {
+        const err = cek.error.issues.map((v) => v.message).join("\n");
+        return toast.error(err);
+      }
+
+      try {
+        this.loading = true;
+        const res = await ApiFetch.api.ekonomi.pendapatanaslidesa.pembiayaan[
+          "create"
+        ].post(this.form);
+        if (res.status === 200) {
+          toast.success("Berhasil menambahkan Pembiayaan");
+          pembiayaan.findMany.load();
+          this.reset();
+        } else {
+          toast.error(res.data?.message || "Gagal menambahkan Pembiayaan");
+        }
+      } catch (error) {
+        console.error("Create error:", error);
+        toast.error("Gagal menambahkan Pembiayaan");
+      } finally {
+        this.loading = false;
+      }
+    },
+    reset() {
+      this.form = { ...PembiayaanDefaultForm };
+    },
+  },
+  findMany: {
+    data: [] as Array<{
+      id: string;
+      name: string;
+      value: number;
+    }>,
+    loading: false,
+    async load() {
+      try {
+        this.loading = true;
+        const res = await ApiFetch.api.ekonomi.pendapatanaslidesa.pembiayaan[
+          "find-many"
+        ].get();
+        if (res.status === 200) {
+          this.data = res.data?.data ?? [];
+        } else {
+          toast.error(res.data?.message || "Gagal mengambil Pembiayaan");
+        }
+      } catch (error) {
+        console.error("Find many error:", error);
+        toast.error("Gagal mengambil Pembiayaan");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...PembiayaanDefaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(`/api/ekonomi/pendapatanaslidesa/pembiayaan/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            value: data.value,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading pembiayaan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templatePembiayaan.safeParse(pembiayaan.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        pembiayaan.update.loading = true;
+        const response = await fetch(`/api/ekonomi/pendapatanaslidesa/pembiayaan/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            value: this.form.value,
+          }),
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update pembiayaan");
+          await pembiayaan.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate pembiayaan");
+        }
+      } catch (error) {
+        console.error("Error updating pembiayaan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengupdate pembiayaan"
+        );
+        return false;
+      } finally {
+        pembiayaan.update.loading = false;
+      }
+    },
+    reset() {
+      pembiayaan.update.id = "";
+      pembiayaan.update.form = { ...PembiayaanDefaultForm };
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        pembiayaan.delete.loading = true;
+
+        const response = await fetch(
+          `/api/ekonomi/pendapatanaslidesa/pembiayaan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Pembiayaan berhasil dihapus");
+          await pembiayaan.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus Pembiayaan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus Pembiayaan");
+      } finally {
+        pembiayaan.delete.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PembiayaanGetPayload<{
+      select: { isActive: boolean };
+    }> | null,
+    async load(id: string) {
+      const res = await fetch(
+        `/api/ekonomi/pendapatanaslidesa/pembiayaan/${id}`
+      );
+      if (res.ok) {
+        const json = await res.json();
+        pembiayaan.findUnique.data = json.data
+          ? {
+              ...json.data,
+              isActive: json.data.isActive ?? true, // Fallback ke aktif:true jika tidak ada data
+            }
+          : null;
+      } else {
+        pembiayaan.findUnique.data = null;
+      }
+    },
+  },
+});
+
+const PendapatanAsliDesa = proxy({
+  ApbDesa,
+  belanja,
+  pembiayaan,
+  pendapatan,
+});
+
+export default PendapatanAsliDesa;

src/app/admin/(dashboard)/_state/ekonomi/demografi-pekerjaan.ts

@@ -0,0 +1,197 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateDemografiPekerjaan = z.object({
+  pekerjaan: z.string().min(1, "Pekerjaan harus diisi"),
+  lakiLaki: z.number().min(1, "Laki - Laki harus diisi"),
+  perempuan: z.number().min(1, "Perempuan harus diisi"),
+});
+
+type DemografiPekerjaan = Prisma.DataDemografiPekerjaanGetPayload<{
+  select: {
+    pekerjaan: true;
+    lakiLaki: true;
+    perempuan: true;
+  };
+}>;
+
+const defaultForm: DemografiPekerjaan = {
+  pekerjaan: "",
+  lakiLaki: 0,
+  perempuan: 0,
+};
+
+const demografiPekerjaan = proxy({
+  create: {
+    form: defaultForm,
+    loading: false,
+    async create() {
+      const cek = templateDemografiPekerjaan.safeParse(
+        demografiPekerjaan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      try {
+        demografiPekerjaan.create.loading = true;
+        const res = await ApiFetch.api.ekonomi.demografipekerjaan[
+          "create"
+        ].post(demografiPekerjaan.create.form);
+
+        if (res.status === 200) {
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            demografiPekerjaan.create.form = { ...defaultForm };
+            demografiPekerjaan.findMany.load();
+            return id;
+          }
+        }
+        toast.error("failed create");
+        return null;
+      } catch (error) {
+        console.log((error as Error).message);
+        return null;
+      } finally {
+        demografiPekerjaan.create.loading = false;
+      }
+    },
+  },
+
+  findMany: {
+    data: null as
+      | Prisma.DataDemografiPekerjaanGetPayload<{
+          omit: { isActive: true };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.ekonomi.demografipekerjaan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        demografiPekerjaan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+
+  findUnique: {
+    data: null as Prisma.DataDemografiPekerjaanGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/ekonomi/demografipekerjaan/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          demografiPekerjaan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch demografiPekerjaan:", res.statusText);
+          demografiPekerjaan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching demografiPekerjaan:", error);
+        demografiPekerjaan.findUnique.data = null;
+      }
+    },
+  },
+
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      const formData = {
+        pekerjaan: this.form.pekerjaan,
+        lakiLaki: this.form.lakiLaki,
+        perempuan: this.form.perempuan,
+      };
+
+      const cek = templateDemografiPekerjaan.safeParse(formData);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+
+      try {
+        this.loading = true;
+        const res = await fetch(`/api/ekonomi/demografipekerjaan/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+
+        const result = await res.json();
+
+        if (!res.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+
+        toast.success("Berhasil update data!");
+        await demografiPekerjaan.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Update error:", error);
+        toast.error("Gagal update data demografi pekerjaan");
+        throw error;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        demografiPekerjaan.delete.loading = true;
+
+        const response = await fetch(
+          `/api/ekonomi/demografipekerjaan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Demografi pekerjaan berhasil dihapus"
+          );
+          await demografiPekerjaan.findMany.load();
+        } else {
+          toast.error(result?.message || "Gagal menghapus demografi pekerjaan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus persentase kelahiran");
+      } finally {
+        demografiPekerjaan.delete.loading = false;
+      }
+    },
+  },
+});
+export default demografiPekerjaan

src/app/admin/(dashboard)/_state/ekonomi/jumlah-penduduk-miskin.ts

@@ -0,0 +1,180 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateJumlahPendudukMiskin = z.object({
+    year: z.number().min(1, "Data tahun harus diisi"),
+    totalPoorPopulation: z.number().min(1, "Data total penduduk miskin harus diisi"),
+});
+
+type JumlahPendudukMiskin = Prisma.GrafikJumlahPendudukMiskinGetPayload<{
+    select: {
+        id: true;
+        year: true;
+        totalPoorPopulation: true;
+    };
+}>;
+
+const defaultForm: Omit<JumlahPendudukMiskin, 'id'> & { id?: string } = {
+    year: 0,
+    totalPoorPopulation: 0,
+};
+
+const jumlahPendudukMiskin = proxy({
+    create: {
+        form: defaultForm,
+        loading: false,
+        async create() {
+          const cek = templateJumlahPendudukMiskin.safeParse(
+            jumlahPendudukMiskin.create.form
+          );
+          if (!cek.success) {
+            const err = `[${cek.error.issues
+              .map((v) => `${v.path.join(".")}`)
+              .join("\n")}] required`;
+            return toast.error(err);
+          }
+          try {
+            jumlahPendudukMiskin.create.loading = true;
+            const res = await ApiFetch.api.ekonomi.jumlahpendudukmiskin[
+              "create"
+            ].post(jumlahPendudukMiskin.create.form);
+            if (res.status === 200) {
+              const id = res.data?.data?.id;
+              if (id) {
+                toast.success("Success create");
+                jumlahPendudukMiskin.create.form = {
+                  year: 0,
+                  totalPoorPopulation: 0,
+                };
+                jumlahPendudukMiskin.findMany.load();
+                return id;
+              }
+            }
+            return toast.error("failed create");
+          } catch (error) {
+            console.log((error as Error).message);
+          } finally {
+            jumlahPendudukMiskin.create.loading = false;
+          }
+        },
+      },
+      findMany: {
+        data: null as
+          | Prisma.GrafikJumlahPendudukMiskinGetPayload<{
+              select: { id: true; year: true; totalPoorPopulation: true; };
+            }>[]
+          | null,
+        loading: false,
+        async load() {
+          const res = await ApiFetch.api.ekonomi.jumlahpendudukmiskin[
+            "find-many"
+          ].get();
+          if (res.status === 200) {
+            jumlahPendudukMiskin.findMany.data = res.data?.data ?? [];
+          }
+        },
+      },
+      findUnique: {
+        data: null as Prisma.GrafikJumlahPendudukMiskinGetPayload<{
+          select: { id: true; year: true; totalPoorPopulation: true; };
+        }> | null,
+        async load(id: string) {
+          try {
+            const res = await fetch(
+              `/api/ekonomi/jumlahpendudukmiskin/${id}`
+            );
+            if (res.ok) {
+              const data = await res.json();
+              jumlahPendudukMiskin.findUnique.data = data.data ?? null;
+            } else {
+              console.error("Failed to fetch data", res.status, res.statusText);
+              jumlahPendudukMiskin.findUnique.data = null;
+            }
+          } catch (error) {
+            console.error("Error loading grafik jumlah penduduk miskin:", error);
+            jumlahPendudukMiskin.findUnique.data = null;
+          }
+        },
+      },
+      update: {
+        id: "",
+        form: {...defaultForm},
+        loading: false,
+        async byId() {
+          // Method implementation if needed
+        },
+        async submit() {
+          const id = this.id;
+          if (!id) {
+            toast.warn("ID tidak valid");
+            return null;
+          }
+          const cek = templateJumlahPendudukMiskin.safeParse(this.form);
+          if (!cek.success) {
+            const err = `[${cek.error.issues.map((v) => (v.path as string[]).join(".")).join("\n")}] required`;
+            toast.error(err);
+            return null;
+          }
+          this.loading = true;
+          try {
+            const response = await fetch(
+              `/api/ekonomi/jumlahpendudukmiskin/${id}`, {
+              method: "PUT",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify(this.form),
+            });
+            const result = await response.json();
+            if (!response.ok || !result?.success) {
+              throw new Error(result?.message || "Gagal update data");
+            }
+            toast.success("Berhasil update data!");
+            await jumlahPendudukMiskin.findMany.load();
+            return result.data;
+          } catch (error) {
+            console.error("Error update data grafik jumlah penduduk miskin:", error);
+            toast.error("Gagal update data grafik jumlah penduduk miskin");
+          } finally {
+            this.loading = false;
+          }
+        },
+      },
+      delete: {
+        loading: false,
+        async byId(id: string) {
+          if (!id) return toast.warn("ID tidak valid");
+    
+          try {
+            jumlahPendudukMiskin.delete.loading = true;
+    
+            const response = await fetch(`/api/ekonomi/jumlahpendudukmiskin/del/${id}`, {
+              method: "DELETE",
+              headers: {
+                "Content-Type": "application/json",
+              },
+            });
+    
+            const result = await response.json();
+    
+            if (response.ok && result?.success) {
+              toast.success(result.message || "Grafik jumlah penduduk miskin berhasil dihapus");
+              await jumlahPendudukMiskin.findMany.load(); // refresh list
+            } else {
+              toast.error(result?.message || "Gagal menghapus grafik jumlah penduduk miskin");
+            }
+          } catch (error) {
+            console.error("Gagal delete grafik jumlah penduduk miskin:", error);
+            toast.error("Terjadi kesalahan saat menghapus grafik jumlah penduduk miskin");
+          } finally {
+            jumlahPendudukMiskin.delete.loading = false;
+          }
+        },
+      }
+})
+export default jumlahPendudukMiskin
+    
+    

src/app/admin/(dashboard)/_state/ekonomi/jumlah-pengangguran.ts

@@ -0,0 +1,243 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateJumlahPengngguran = z.object({
+  month: z.string().min(1, "Bulan harus diisi"),
+  year: z.number().min(1, "Tahun harus diisi"),
+  totalUnemployment: z.number().min(1, "Total pengangguran harus diisi"),
+  educatedUnemployment: z
+    .number()
+    .min(1, "Pengangguran pendidikan harus diisi"),
+  uneducatedUnemployment: z
+    .number()
+    .min(1, "Pengangguran tidak pendidikan harus diisi"),
+  percentageChange: z.number().min(0, "Persentase perubahan harus diisi"),
+});
+
+type JumlahPengangguran = {
+  month: string;
+  year: number;
+  totalUnemployment: number;
+  educatedUnemployment: number;
+  uneducatedUnemployment: number;
+  percentageChange: number;
+};
+
+const jumlahPengangguranForm: JumlahPengangguran = {
+  month: "",
+  year: 0,
+  totalUnemployment: 0,
+  educatedUnemployment: 0,
+  uneducatedUnemployment: 0,
+  percentageChange: 0,
+};
+
+const jumlahPengangguran = proxy({
+  findByMonthYear: {
+    data: null as any,
+    loading: false,
+    load: async ({ month, year }: { month: string; year: number }) => {
+      jumlahPengangguran.findByMonthYear.loading = true;
+      try {
+        const res = await fetch(
+          `/api/ekonomi/jumlahpengangguran/detaildatapengangguran/month/${month}/year/${year}`
+        );
+        const json = await res.json();
+        jumlahPengangguran.findByMonthYear.data = json.data;
+        return json.data;
+      } catch (err) {
+        console.error("Gagal ambil data bulan/tahun:", err);
+      } finally {
+        jumlahPengangguran.findByMonthYear.loading = false;
+      }
+    },
+  },
+  create: {
+    form: jumlahPengangguranForm,
+    loading: false,
+    async create() {
+      const cek = templateJumlahPengngguran.safeParse(
+        jumlahPengangguran.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      try {
+        jumlahPengangguran.create.loading = true;
+        const res =
+          await ApiFetch.api.ekonomi.jumlahpengangguran.detaildatapengangguran[
+            "create"
+          ].post(jumlahPengangguran.create.form);
+
+        if (res.status === 200) {
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            jumlahPengangguran.create.form = { ...jumlahPengangguranForm };
+            jumlahPengangguran.findMany.load();
+            return id;
+          }
+        }
+        toast.error("failed create");
+        return null;
+      } catch (error) {
+        console.log((error as Error).message);
+        return null;
+      } finally {
+        jumlahPengangguran.create.loading = false;
+      }
+    },
+  },
+
+  findMany: {
+    data: null as
+      | Prisma.DetailDataPengangguranGetPayload<{
+          omit: { isActive: true };
+        }>[]
+      | null,
+    async load() {
+      const res =
+        await ApiFetch.api.ekonomi.jumlahpengangguran.detaildatapengangguran[
+          "find-many"
+        ].get();
+      if (res.status === 200) {
+        jumlahPengangguran.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+
+  findUnique: {
+    data: null as Prisma.DetailDataPengangguranGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/ekonomi/jumlahpengangguran/detaildatapengangguran/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          jumlahPengangguran.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch jumlahPengangguran:", res.statusText);
+          jumlahPengangguran.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching jumlahPengangguran:", error);
+        jumlahPengangguran.findUnique.data = null;
+      }
+    },
+  },
+
+  update: {
+    id: "",
+    form: { ...jumlahPengangguranForm },
+    loading: false,
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      const formData = {
+        month: this.form.month,
+        year: this.form.year,
+        totalUnemployment: this.form.totalUnemployment,
+        educatedUnemployment: this.form.educatedUnemployment,
+        uneducatedUnemployment: this.form.uneducatedUnemployment,
+        percentageChange: this.form.percentageChange,
+      };
+
+      const cek = templateJumlahPengngguran.safeParse(formData);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+
+      try {
+        this.loading = true;
+        const res = await fetch(
+          `/api/ekonomi/jumlahpengangguran/detaildatapengangguran/${id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(formData),
+          }
+        );
+
+        const result = await res.json();
+
+        if (!res.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+
+        toast.success("Berhasil update data!");
+        await jumlahPengangguran.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Update error:", error);
+        toast.error("Gagal update data jumlah pengangguran");
+        throw error;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        jumlahPengangguran.delete.loading = true;
+
+        const response = await fetch(
+          `/api/ekonomi/jumlahpengangguran/detaildatapengangguran/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Jumlah pengangguran berhasil dihapus"
+          );
+          await jumlahPengangguran.findMany.load();
+        } else {
+          toast.error(result?.message || "Gagal menghapus jumlah pengangguran");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus jumlah pengangguran");
+      } finally {
+        jumlahPengangguran.delete.loading = false;
+      }
+    },
+  },
+});
+
+const jumlahPengangguranState = proxy({
+  jumlahPengangguran,
+});
+
+export default jumlahPengangguranState;

src/app/admin/(dashboard)/_state/ekonomi/sektor-unggulan-desa.ts

@@ -0,0 +1,202 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateGrafikSektorUnggulan = z.object({
+  name: z.string().min(2, "Nama harus diisi"),
+  description: z.string().min(2, "Deskripsi harus diisi"),
+  value: z.number().min(1, "Nilai harus diisi"),
+});
+
+interface SektorUnggulanForm {
+  id?: string;
+  name: string;
+  description: string;
+  value: number;
+}
+
+const defaultForm: SektorUnggulanForm = {
+  name: "",
+  description: "",
+  value: 0,
+};
+
+const grafikSektorUnggulan = proxy({
+  create: {
+    form: defaultForm,
+    loading: false,
+    async create() {
+      const cek = templateGrafikSektorUnggulan.safeParse(
+        grafikSektorUnggulan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        grafikSektorUnggulan.create.loading = true;
+        const res = await ApiFetch.api.ekonomi.sektourunggulandesa[
+          "create"
+        ].post(grafikSektorUnggulan.create.form);
+        if (res.status === 200) {
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            grafikSektorUnggulan.create.form = {
+              name: "",
+              description: "",
+              value: 0,
+            };
+            grafikSektorUnggulan.findMany.load();
+            return id;
+          }
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        grafikSektorUnggulan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.SektorUnggulanDesaGetPayload<{
+          select: {
+            id: true;
+            name: true;
+            description: true;
+            value: true;
+            createdAt: true;
+            updatedAt: true;
+          };
+        }>[]
+      | null,
+    loading: false,
+    async load() {
+      const res = await ApiFetch.api.ekonomi.sektourunggulandesa[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        grafikSektorUnggulan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.SektorUnggulanDesaGetPayload<{
+      select: {
+        id: true;
+        name: true;
+        description: true;
+        value: true;
+        createdAt: true;
+        updatedAt: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/ekonomi/sektourunggulandesa/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          grafikSektorUnggulan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          grafikSektorUnggulan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading grafik sektor unggulan desa:", error);
+        grafikSektorUnggulan.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateGrafikSektorUnggulan.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(`/api/ekonomi/sektourunggulandesa/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await grafikSektorUnggulan.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data grafik sektor unggulan desa");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        grafikSektorUnggulan.delete.loading = true;
+
+        const response = await fetch(
+          `/api/ekonomi/sektourunggulandesa/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Grafik sektor unggulan desa berhasil dihapus"
+          );
+          await grafikSektorUnggulan.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus grafik sektor unggulan desa"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error(
+          "Terjadi kesalahan saat menghapus grafik sektor unggulan desa"
+        );
+      } finally {
+        grafikSektorUnggulan.delete.loading = false;
+      }
+    },
+  },
+});
+export default grafikSektorUnggulan;

src/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi.ts

@@ -30,9 +30,9 @@ const posisiOrganisasi = proxy({
 
       try {
         this.loading = true;
-        const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["posisi-organisasi"]["create"].post(
-          this.form
-        );
+        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
+          "posisi-organisasi"
+        ]["create"].post(this.form);
         if (res.status === 200) {
           toast.success("Berhasil menambahkan posisi organisasi");
           posisiOrganisasi.findMany.load();
@@ -62,12 +62,15 @@ const posisiOrganisasi = proxy({
         return null;
       }
       try {
-        const response = await fetch(`/api/ekonomi/struktur-organisasi/posisi-organisasi/${id}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const response = await fetch(
+          `/api/ekonomi/struktur-organisasi/posisi-organisasi/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
@@ -160,7 +163,9 @@ const posisiOrganisasi = proxy({
     }>,
     async load() {
       try {
-        const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["posisi-organisasi"]["find-many"].get();
+        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
+          "posisi-organisasi"
+        ]["find-many"].get();
         if (res.status === 200) {
           // The API now returns the id field, so we can use it directly
           this.data = res.data?.data ?? [];
@@ -209,238 +214,278 @@ const posisiOrganisasi = proxy({
 });
 
 const templatePegawai = z.object({
-    namaLengkap: z.string().min(1, "Nama wajib diisi"),
-    gelarAkademik: z.string().optional(),
-    imageId: z.string().nullable().optional(),
-    tanggalMasuk: z.string().optional(), // ISO format
-    email: z.string().email("Email tidak valid").optional(),
-    telepon: z.string().optional(),
-    alamat: z.string().optional(),
-    posisiId: z.string().min(1, "Posisi wajib diisi"),
-    isActive: z.boolean().default(true),
-  });
-  
-  const pegawaiDefaultForm = {
-    namaLengkap: "",
-    gelarAkademik: "",
-    imageId: "",
-    tanggalMasuk: "",
-    email: "",
-    telepon: "",
-    alamat: "",
-    posisiId: "",
-    isActive: true,
-  };
-  
-  const pegawai = proxy({
-    create: {
-      form: { ...pegawaiDefaultForm },
-      loading: false,
-      async submit() {
-        const cek = templatePegawai.safeParse(pegawai.create.form);
-        if (!cek.success) {
-          const err = cek.error.issues.map(i => i.message).join("\n");
-          toast.error(err);
-          return;
-        }
-  
-        try {
-          pegawai.create.loading = true;
-          const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["pegawai"]["create"].post(
-            pegawai.create.form
-          );
-          if (res.status === 200) {
-            toast.success("Pegawai berhasil ditambahkan");
-            await pegawai.findMany.load();
-          } else {
-            toast.error(res.data?.message ?? "Gagal tambah pegawai");
-          }
-        } catch (error) {
-          console.error("Gagal create:", error);
-          toast.error("Terjadi kesalahan saat menambahkan pegawai");
-        } finally {
-          pegawai.create.loading = false;
-        }
-      },
-    },
-    findMany: {
-      data: null as (Prisma.PegawaiGetPayload<{ include: { posisi: true, image: true } }> & { isActive: boolean })[] | null,
-      async load() {
-        try {
-          const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["pegawai"]["find-many"].get();
-          if (res.status === 200) {
-            pegawai.findMany.data = (res.data?.data ?? []).map((item: any) => ({
-              ...item,
-              posisi: item.posisi || { id: '', nama: '' }, // Ensure posisi exists with required fields
-              isActive: item.isActive ?? true // Default to true if not provided
-            }));
-          } else {
-            console.error('Failed to load pegawai:', res.data?.message);
-          }
-        } catch (error) {
-          console.error('Error loading pegawai:', error);
-          pegawai.findMany.data = [];
-        }
-      },
-    },
-    findUnique: {
-      data: null as (Prisma.PegawaiGetPayload<{ include: { posisi: true, image: true } }> & { isActive: boolean }) | null,
-      async load(id: string) {
-        const res = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/${id}`);
-        if (res.ok) {
-          const json = await res.json();
-          pegawai.findUnique.data = json.data ? {
-            ...json.data,
-            isActive: json.data.isActive ?? json.data.aktif ?? true // Fallback ke aktif:true jika tidak ada data
-          } : null;
-        } else {
-          pegawai.findUnique.data = null;
-        }
-      },
-    },
-  
-    delete: {
-      loading: false,
-      async byId(id: string) {
-        if (!id) return toast.warn("ID tidak valid");
-        try {
-          pegawai.delete.loading = true;
-          const res = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/del/${id}`, {
-            method: "DELETE",
-          });
-          const json = await res.json();
-          if (res.ok) {
-            toast.success(json.message ?? "Berhasil hapus pegawai");
-            await pegawai.findMany.load();
-          } else {
-            toast.error(json.message ?? "Gagal hapus pegawai");
-          }
-        } catch (error) {
-          console.error("Gagal delete:", error);
-          toast.error("Terjadi kesalahan saat menghapus");
-        } finally {
-          pegawai.delete.loading = false;
-        }
-      },
-    },
-  
-     edit: {
-       id: "",
-       form: { ...pegawaiDefaultForm },
-       loading: false,
-   
-       async load(id: string) {
-         if (!id) {
-           toast.warn("ID tidak valid");
-           return null;
-         }
-         
-         try {
-           const response = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/${id}`, {
-             method: 'GET',
-             headers: {
-               'Content-Type': 'application/json',
-             },
-           });
-           
-           if (!response.ok) {
-             throw new Error(`HTTP error! status: ${response.status}`);
-           }
-           
-           const result = await response.json();
-           
-           if (result?.success) {
-             const data = result.data;
-             this.id = data.id;
-             this.form = {
-               namaLengkap: data.namaLengkap,
-               gelarAkademik: data.gelarAkademik,
-               imageId: data.imageId,
-               tanggalMasuk: data.tanggalMasuk,
-               email: data.email,
-               telepon: data.telepon,
-               alamat: data.alamat,
-               posisiId: data.posisiId,
-               isActive: data.isActive,
-             };
-             return data; // Return the loaded data
-           } else {
-             throw new Error(result?.message || "Gagal memuat data");
-           }
-         } catch (error) {
-           console.error("Error loading berita:", error);
-           toast.error(error instanceof Error ? error.message : "Gagal memuat data");
-           return null;
-         }
-       },
-   
-       async submit() {
-         const cek = templatePegawai.safeParse(pegawai.edit.form);
-         if (!cek.success) {
-           const err = `[${cek.error.issues
-             .map((v) => `${v.path.join(".")}`)
-             .join("\n")}] required`;
-           toast.error(err);
-           return false;
-         }
-       
-         try {
-           pegawai.edit.loading = true;
-           
-           // Format tanggalMasuk to ISO string if it exists
-           const formattedTanggalMasuk = this.form.tanggalMasuk 
-             ? new Date(this.form.tanggalMasuk).toISOString()
-             : undefined;
-             
-           const response = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/${this.id}`, {
-             method: 'PUT',
-             headers: {
-               'Content-Type': 'application/json',
-             },
-             body: JSON.stringify({
-               id: this.id,
-               namaLengkap: this.form.namaLengkap,
-               gelarAkademik: this.form.gelarAkademik,
-               imageId: this.form.imageId || null,
-               tanggalMasuk: formattedTanggalMasuk,
-               email: this.form.email,
-               telepon: this.form.telepon,
-               alamat: this.form.alamat,
-               posisiId: this.form.posisiId,
-               isActive: this.form.isActive,
-             }),
-           });
-           
-           if (!response.ok) {
-             const errorData = await response.json().catch(() => ({}));
-             throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
-           }
-           
-           const result = await response.json();
-       
-           if (result.success) {
-             toast.success("Berhasil update pegawai");
-             await pegawai.findMany.load(); // refresh list
-             return true;
-           } else {
-             throw new Error(result.message || "Gagal update pegawai");
-           }
-         } catch (error) {
-           console.error("Error updating pegawai:", error);
-           toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat update pegawai");
-           return false;
-         } finally {
-           pegawai.edit.loading = false;
-         }
-       },
-   
-       reset() {
-         pegawai.edit.id = "";
-         pegawai.edit.form = { ...pegawaiDefaultForm };
-       },
-     },
-  });
+  namaLengkap: z.string().min(1, "Nama wajib diisi"),
+  gelarAkademik: z.string().optional(),
+  imageId: z.string().nullable().optional(),
+  tanggalMasuk: z.string().optional(), // ISO format
+  email: z.string().email("Email tidak valid").optional(),
+  telepon: z.string().optional(),
+  alamat: z.string().optional(),
+  posisiId: z.string().min(1, "Posisi wajib diisi"),
+  isActive: z.boolean().default(true),
+});
 
+const pegawaiDefaultForm = {
+  namaLengkap: "",
+  gelarAkademik: "",
+  imageId: "",
+  tanggalMasuk: "",
+  email: "",
+  telepon: "",
+  alamat: "",
+  posisiId: "",
+  isActive: true,
+};
+
+const pegawai = proxy({
+  create: {
+    form: { ...pegawaiDefaultForm },
+    loading: false,
+    async submit() {
+      const cek = templatePegawai.safeParse(pegawai.create.form);
+      if (!cek.success) {
+        const err = cek.error.issues.map((i) => i.message).join("\n");
+        toast.error(err);
+        return;
+      }
+
+      try {
+        pegawai.create.loading = true;
+        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
+          "pegawai"
+        ]["create"].post(pegawai.create.form);
+        if (res.status === 200) {
+          toast.success("Pegawai berhasil ditambahkan");
+          await pegawai.findMany.load();
+        } else {
+          toast.error(res.data?.message ?? "Gagal tambah pegawai");
+        }
+      } catch (error) {
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan pegawai");
+      } finally {
+        pegawai.create.loading = false;
+      }
+    },
+  },
+
+  // In struktur-organisasi.ts
+findMany: {
+  data: null as any[] | null,
+  page: 1,
+  totalPages: 1,
+  total: 0,
+  loading: false,
+  load: async (page = 1, limit = 10) => {  // Change to arrow function
+    pegawai.findMany.loading = true;  // Use the full path to access the property
+    pegawai.findMany.page = page;
+    try {
+      const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
+        "pegawai"
+      ]["find-many"].get({
+        query: { page, limit },
+      });
+
+      if (res.status === 200 && res.data?.success) {
+        pegawai.findMany.data = res.data.data || [];
+        pegawai.findMany.total = res.data.total || 0;
+        pegawai.findMany.totalPages = res.data.totalPages || 1;
+      } else {
+        console.error("Failed to load pegawai:", res.data?.message);
+        pegawai.findMany.data = [];
+        pegawai.findMany.total = 0;
+        pegawai.findMany.totalPages = 1;
+      }
+    } catch (error) {
+      console.error("Error loading pegawai:", error);
+      pegawai.findMany.data = [];
+      pegawai.findMany.total = 0;
+      pegawai.findMany.totalPages = 1;
+    } finally {
+      pegawai.findMany.loading = false;
+    }
+  },
+},
+  findUnique: {
+    data: null as
+      | (Prisma.PegawaiGetPayload<{
+          include: { posisi: true; image: true };
+        }> & { isActive: boolean })
+      | null,
+    async load(id: string) {
+      const res = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/${id}`);
+      if (res.ok) {
+        const json = await res.json();
+        pegawai.findUnique.data = json.data
+          ? {
+              ...json.data,
+              isActive: json.data.isActive ?? json.data.aktif ?? true, // Fallback ke aktif:true jika tidak ada data
+            }
+          : null;
+      } else {
+        pegawai.findUnique.data = null;
+      }
+    },
+  },
+
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        pegawai.delete.loading = true;
+        const res = await fetch(
+          `/api/ekonomi/struktur-organisasi/pegawai/del/${id}`,
+          {
+            method: "DELETE",
+          }
+        );
+        const json = await res.json();
+        if (res.ok) {
+          toast.success(json.message ?? "Berhasil hapus pegawai");
+          await pegawai.findMany.load();
+        } else {
+          toast.error(json.message ?? "Gagal hapus pegawai");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus");
+      } finally {
+        pegawai.delete.loading = false;
+      }
+    },
+  },
+
+  edit: {
+    id: "",
+    form: { ...pegawaiDefaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/ekonomi/struktur-organisasi/pegawai/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            namaLengkap: data.namaLengkap,
+            gelarAkademik: data.gelarAkademik,
+            imageId: data.imageId,
+            tanggalMasuk: data.tanggalMasuk,
+            email: data.email,
+            telepon: data.telepon,
+            alamat: data.alamat,
+            posisiId: data.posisiId,
+            isActive: data.isActive,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading berita:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async submit() {
+      const cek = templatePegawai.safeParse(pegawai.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        pegawai.edit.loading = true;
+
+        // Format tanggalMasuk to ISO string if it exists
+        const formattedTanggalMasuk = this.form.tanggalMasuk
+          ? new Date(this.form.tanggalMasuk).toISOString()
+          : undefined;
+
+        const response = await fetch(
+          `/api/ekonomi/struktur-organisasi/pegawai/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              id: this.id,
+              namaLengkap: this.form.namaLengkap,
+              gelarAkademik: this.form.gelarAkademik,
+              imageId: this.form.imageId || null,
+              tanggalMasuk: formattedTanggalMasuk,
+              email: this.form.email,
+              telepon: this.form.telepon,
+              alamat: this.form.alamat,
+              posisiId: this.form.posisiId,
+              isActive: this.form.isActive,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update pegawai");
+          await pegawai.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update pegawai");
+        }
+      } catch (error) {
+        console.error("Error updating pegawai:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update pegawai"
+        );
+        return false;
+      } finally {
+        pegawai.edit.loading = false;
+      }
+    },
+
+    reset() {
+      pegawai.edit.id = "";
+      pegawai.edit.form = { ...pegawaiDefaultForm };
+    },
+  },
+});
 
 // Schema Zod untuk form validasi
 const templateHubunganOrganisasiForm = z.object({
@@ -474,7 +519,9 @@ const hubunganOrganisasi = proxy({
 
       try {
         hubunganOrganisasi.create.loading = true;
-        const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["hubungan-organisasi"]["create"].post(hubunganOrganisasi.create.form);
+        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
+          "hubungan-organisasi"
+        ]["create"].post(hubunganOrganisasi.create.form);
 
         if (res.status === 200 && res.data?.success) {
           hubunganOrganisasi.findMany.load();
@@ -482,7 +529,7 @@ const hubunganOrganisasi = proxy({
         } else {
           return toast.error(res.data?.message || "Gagal menambahkan data");
         }
-      } catch (error) { 
+      } catch (error) {
         console.error("Gagal create:", error);
         toast.error("Terjadi kesalahan saat menambahkan");
       } finally {
@@ -490,7 +537,7 @@ const hubunganOrganisasi = proxy({
       }
     },
   },
-  findMany: {   
+  findMany: {
     data: null as Array<{
       id: string;
       atasanId: string;
@@ -528,20 +575,29 @@ const hubunganOrganisasi = proxy({
 
     async load() {
       try {
-        const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["hubungan-organisasi"]["find-many"].get();
+        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
+          "hubungan-organisasi"
+        ]["find-many"].get();
 
         if (res.status === 200) {
-          hubunganOrganisasi.findMany.data = (res.data?.data ?? []).map((item: any) => ({
-            ...item,
-            atasan: item.atasan ? {
-              ...item.atasan,
-              isActive: item.atasan.isActive ?? item.atasan.aktif ?? true
-            } : null,
-            bawahan: item.bawahan ? {
-              ...item.bawahan,
-              isActive: item.bawahan.isActive ?? item.bawahan.aktif ?? true
-            } : null
-          }));
+          hubunganOrganisasi.findMany.data = (res.data?.data ?? []).map(
+            (item: any) => ({
+              ...item,
+              atasan: item.atasan
+                ? {
+                    ...item.atasan,
+                    isActive: item.atasan.isActive ?? item.atasan.aktif ?? true,
+                  }
+                : null,
+              bawahan: item.bawahan
+                ? {
+                    ...item.bawahan,
+                    isActive:
+                      item.bawahan.isActive ?? item.bawahan.aktif ?? true,
+                  }
+                : null,
+            })
+          );
         } else {
           hubunganOrganisasi.findMany.data = [];
         }
@@ -591,7 +647,9 @@ const hubunganOrganisasi = proxy({
 
     async load(id: string) {
       try {
-        const res = await fetch(`/api/ekonomi/struktur-organisasi/hubungan-organisasi/${id}`);
+        const res = await fetch(
+          `/api/ekonomi/struktur-organisasi/hubungan-organisasi/${id}`
+        );
         const result = await res.json();
 
         if (res.ok && result?.success) {
@@ -616,7 +674,9 @@ const hubunganOrganisasi = proxy({
       if (!id) return toast.warn("ID tidak valid");
 
       try {
-        const res = await fetch(`/api/ekonomi/struktur-organisasi/hubungan-organisasi/${id}`);
+        const res = await fetch(
+          `/api/ekonomi/struktur-organisasi/hubungan-organisasi/${id}`
+        );
         const result = await res.json();
 
         if (res.ok && result?.success) {
@@ -633,7 +693,9 @@ const hubunganOrganisasi = proxy({
         }
       } catch (error) {
         console.error("Error loading:", error);
-        toast.error(error instanceof Error ? error.message : "Gagal memuat data");
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
         return null;
       }
     },
@@ -690,9 +752,12 @@ const hubunganOrganisasi = proxy({
 
       try {
         hubunganOrganisasi.delete.loading = true;
-        const res = await fetch(`/api/ekonomi/struktur-organisasi/hubungan-organisasi/del/${id}`, {
-          method: "DELETE",
-        });
+        const res = await fetch(
+          `/api/ekonomi/struktur-organisasi/hubungan-organisasi/del/${id}`,
+          {
+            method: "DELETE",
+          }
+        );
 
         const result = await res.json();
         if (res.ok && result?.success) {

src/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur.ts

@@ -0,0 +1,376 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateGrafikUsiaKerjaYangMenganggur = z.object({
+  usia18_25: z.string().min(1, "Data usia 18-25 harus diisi"),
+  usia26_35: z.string().min(1, "Data usia 26-35 harus diisi"),
+  usia36_45: z.string().min(1, "Data usia 36-45 harus diisi"),
+  usia46_keatas: z.string().min(1, "Data usia 46 keatas harus diisi"),
+}); 
+
+type GrafikUsiaKerjaYangMenganggur = Prisma.GrafikMenganggurBerdasarkanUsiaGetPayload<{
+  select: {
+    id: true;
+    usia18_25: true;
+    usia26_35: true;
+    usia36_45: true;
+    usia46_keatas: true;
+  };
+}>;
+
+const defaultForm: Omit<GrafikUsiaKerjaYangMenganggur, 'id'> & { id?: string } = {
+  usia18_25: "",
+  usia26_35: "",
+  usia36_45: "",
+  usia46_keatas: "",
+};
+
+const grafikBerdasarkanUsiaKerjaNganggur = proxy({
+  create: {
+    form: defaultForm,
+    loading: false,
+    async create() {
+      const cek = templateGrafikUsiaKerjaYangMenganggur.safeParse(
+        grafikBerdasarkanUsiaKerjaNganggur.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        grafikBerdasarkanUsiaKerjaNganggur.create.loading = true;
+        const res = await ApiFetch.api.ekonomi.grafikusiakerjayangmenganggur[
+          "create"
+        ].post(grafikBerdasarkanUsiaKerjaNganggur.create.form);
+        if (res.status === 200) {
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            grafikBerdasarkanUsiaKerjaNganggur.create.form = {
+              usia18_25: "",
+              usia26_35: "",
+              usia36_45: "",
+              usia46_keatas: "",
+            };
+            grafikBerdasarkanUsiaKerjaNganggur.findMany.load();
+            return id;
+          }
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        grafikBerdasarkanUsiaKerjaNganggur.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.GrafikMenganggurBerdasarkanUsiaGetPayload<{
+          omit: { isActive: true };
+        }>[]
+      | null,
+    loading: false,
+    async load() {
+      const res = await ApiFetch.api.ekonomi.grafikusiakerjayangmenganggur[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        grafikBerdasarkanUsiaKerjaNganggur.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.GrafikMenganggurBerdasarkanUsiaGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/ekonomi/grafikusiakerjayangmenganggur/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          grafikBerdasarkanUsiaKerjaNganggur.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          grafikBerdasarkanUsiaKerjaNganggur.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan usia kerja yang menganggur:", error);
+        grafikBerdasarkanUsiaKerjaNganggur.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: {...defaultForm},
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateGrafikUsiaKerjaYangMenganggur.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(
+          `/api/ekonomi/grafikusiakerjayangmenganggur/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await grafikBerdasarkanUsiaKerjaNganggur.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data grafik berdasarkan usia kerja yang menganggur");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        grafikBerdasarkanUsiaKerjaNganggur.delete.loading = true;
+
+        const response = await fetch(`/api/ekonomi/grafikusiakerjayangmenganggur/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Grafik berdasarkan usia kerja yang menganggur berhasil dihapus");
+          await grafikBerdasarkanUsiaKerjaNganggur.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus grafik berdasarkan usia kerja yang menganggur");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus grafik berdasarkan usia kerja yang menganggur");
+      } finally {
+        grafikBerdasarkanUsiaKerjaNganggur.delete.loading = false;
+      }
+    },
+  }
+});
+
+const templateGrafikBerpendidikanYangMenganggur = z.object({
+  SD: z.string().min(1, "Data SD harus diisi"),
+  SMP: z.string().min(1, "Data SMP harus diisi"),
+  SMA: z.string().min(1, "Data SMA harus diisi"),
+  D3: z.string().min(1, "Data D3 harus diisi"),
+  S1: z.string().min(1, "Data S1 harus diisi"),
+}); 
+
+type GrafikBerpendidikanYangMenganggur = Prisma.GrafikMenganggurBerdasarkanPendidikanGetPayload<{
+  select: {
+    id: true;
+    SD: true;
+    SMP: true;
+    SMA: true;
+    D3: true;
+    S1: true;
+  };
+}>;
+
+const defaultFormBerpendidikan: Omit<GrafikBerpendidikanYangMenganggur, 'id'> & { id?: string } = {
+  SD: "",
+  SMP: "",
+  SMA: "",
+  D3: "",
+  S1: "",
+};
+
+const grafikBerdasarkanPendidikan = proxy({
+  create: {
+    form: defaultFormBerpendidikan,
+    loading: false,
+    async create() {
+      const cek = templateGrafikBerpendidikanYangMenganggur.safeParse(
+        grafikBerdasarkanPendidikan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        grafikBerdasarkanPendidikan.create.loading = true;
+        const res = await ApiFetch.api.ekonomi.grafikmenganggurberdasarkanpendidikan[
+          "create"
+        ].post(grafikBerdasarkanPendidikan.create.form);
+        if (res.status === 200) {
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            grafikBerdasarkanPendidikan.create.form = {
+              SD: "",
+              SMP: "",
+              SMA: "",
+              D3: "",
+              S1: "",
+            };
+            grafikBerdasarkanPendidikan.findMany.load();
+            return id;
+          }
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        grafikBerdasarkanPendidikan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.GrafikMenganggurBerdasarkanPendidikanGetPayload<{
+          omit: { isActive: true };
+        }>[]
+      | null,
+    loading: false,
+    async load() {
+      const res = await ApiFetch.api.ekonomi.grafikmenganggurberdasarkanpendidikan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        grafikBerdasarkanPendidikan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.GrafikMenganggurBerdasarkanPendidikanGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/ekonomi/grafikmenganggurberdasarkanpendidikan/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          grafikBerdasarkanPendidikan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          grafikBerdasarkanPendidikan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan usia kerja yang menganggur:", error);
+        grafikBerdasarkanPendidikan.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: {...defaultFormBerpendidikan},
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateGrafikBerpendidikanYangMenganggur.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(
+          `/api/ekonomi/grafikmenganggurberdasarkanpendidikan/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await grafikBerdasarkanPendidikan.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data grafik berdasarkan pendidikan yang menganggur");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        grafikBerdasarkanPendidikan.delete.loading = true;
+
+        const response = await fetch(`/api/ekonomi/grafikmenganggurberdasarkanpendidikan/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Grafik berdasarkan pendidikan yang menganggur berhasil dihapus");
+          await grafikBerdasarkanPendidikan.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus grafik berdasarkan pendidikan yang menganggur");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus grafik berdasarkan pendidikan yang menganggur");
+      } finally {
+        grafikBerdasarkanPendidikan.delete.loading = false;
+      }
+    },
+  }
+});
+
+const grafikNganggur = proxy({
+  grafikBerdasarkanUsiaKerjaNganggur,
+  grafikBerdasarkanPendidikan
+})
+
+export default grafikNganggur;

src/app/admin/(dashboard)/_state/inovasi/desa-digital.ts

@@ -0,0 +1,216 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  name: z.string().min(1).max(50),
+  deskripsi: z.string().min(1).max(5000),
+  imageId: z.string().min(1).max(50),
+});
+
+const defaultForm = {
+  name: "",
+  deskripsi: "",
+  imageId: "",
+};
+
+const desaDigitalState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(desaDigitalState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        desaDigitalState.create.loading = true;
+        const res = await ApiFetch.api.inovasi.desadigital["create"].post(
+          desaDigitalState.create.form
+        );
+        if (res.status === 200) {
+          desaDigitalState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        desaDigitalState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DesaDigitalGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.inovasi.desadigital["find-many"].get();
+      if (res.status === 200) {
+        desaDigitalState.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DesaDigitalGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/inovasi/desadigital/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          desaDigitalState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          desaDigitalState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading desa digital:", error);
+        desaDigitalState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        desaDigitalState.delete.loading = true;
+        const response = await fetch(`/api/inovasi/desadigital/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        const result = await response.json();
+
+        if (response.ok) {
+          toast.success(result.message || "Desa Digital berhasil dihapus");
+          await desaDigitalState.findMany.load();
+        } else {
+          toast.error(result?.message || "Gagal menghapus desa digital");
+        }
+      } catch (error) {
+        console.log((error as Error).message);
+        toast.error("Terjadi kesalahan saat menghapus desa digital");
+      } finally {
+        desaDigitalState.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(`/api/inovasi/desadigital/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            imageId: data.imageId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading desa digital:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateForm.safeParse(desaDigitalState.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        desaDigitalState.edit.loading = true;
+        const response = await fetch(
+          `/api/inovasi/desadigital/${desaDigitalState.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              deskripsi: this.form.deskripsi,
+              imageId: this.form.imageId,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update desa digital");
+          await desaDigitalState.findMany.load();
+          return true;
+        } else {
+          throw new Error(result?.message || "Gagal update desa digital");
+        }
+      } catch (error) {
+        console.error("Error updating desa digital:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update desa digital"
+        );
+        return false;
+      } finally {
+        desaDigitalState.edit.loading = false;
+      }
+    },
+    reset() {
+      desaDigitalState.edit.id = "";
+      desaDigitalState.edit.form = { ...defaultForm };
+    },
+  },
+});
+export default desaDigitalState;

src/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi.ts

@@ -0,0 +1,234 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+    name: z.string().min(1, "Nama minimal 1 karakter"),
+    tahun: z.number().min(4, "Tahun minimal 4 karakter"),
+    slug: z.string().min(1, "Deskripsi singkat minimal 1 karakter"),
+    deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
+    kolaborator: z.string().min(1, "Kolaborator minimal 1 karakter"),
+    imageId: z.string().min(1, "Image ID minimal 1 karakter"),
+})
+
+const defaultForm = {
+    name: "",
+    tahun: 0,
+    slug: "",
+    deskripsi: "",
+    kolaborator: "",
+    imageId: "",
+}
+
+const kolaborasiInovasiState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(kolaborasiInovasiState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kolaborasiInovasiState.create.loading = true;
+        const res = await ApiFetch.api.inovasi.kolaborasiinovasi["create"].post(
+          kolaborasiInovasiState.create.form
+        );
+        if (res.status === 200) {
+          kolaborasiInovasiState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        kolaborasiInovasiState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {
+      // Change to arrow function
+      kolaborasiInovasiState.findMany.loading = true; // Use the full path to access the property
+      kolaborasiInovasiState.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.inovasi.kolaborasiinovasi["find-many"].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          kolaborasiInovasiState.findMany.data = res.data.data || [];
+          kolaborasiInovasiState.findMany.total = res.data.total || 0;
+          kolaborasiInovasiState.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load grafik berdasarkan jenis kelamin:",
+            res.data?.message
+          );
+          kolaborasiInovasiState.findMany.data = [];
+          kolaborasiInovasiState.findMany.total = 0;
+          kolaborasiInovasiState.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan jenis kelamin:", error);
+        kolaborasiInovasiState.findMany.data = [];
+        kolaborasiInovasiState.findMany.total = 0;
+        kolaborasiInovasiState.findMany.totalPages = 1;
+      } finally {
+        kolaborasiInovasiState.findMany.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/inovasi/kolaborasiinovasi/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            tahun: data.tahun,
+            slug: data.slug,
+            deskripsi: data.deskripsi,
+            kolaborator: data.kolaborator,
+            imageId: data.imageId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data");
+        }
+      } catch (error) {
+        console.error("Error loading kolaborasi inovasi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateForm.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(`/api/inovasi/kolaborasiinovasi/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await kolaborasiInovasiState.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data kolaborasi inovasi");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KolaborasiInovasiGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/inovasi/kolaborasiinovasi/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kolaborasiInovasiState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kolaborasiInovasiState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading kolaborasi inovasi:", error);
+        kolaborasiInovasiState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kolaborasiInovasiState.delete.loading = true;
+
+        const response = await fetch(`/api/inovasi/kolaborasiinovasi/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kolaborasi inovasi berhasil dihapus");
+          await kolaborasiInovasiState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kolaborasi inovasi");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kolaborasi inovasi");
+      } finally {
+        kolaborasiInovasiState.delete.loading = false;
+      }
+    },
+  },
+});
+
+export default kolaborasiInovasiState;
+    

src/app/admin/(dashboard)/_state/inovasi/program-kreatif.ts

@@ -0,0 +1,227 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  name: z.string().min(1, "Nama minimal 1 karakter"),
+  deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  slug: z.string().min(1, "Deskripsi singkat minimal 1 karakter"),
+  icon: z.string().min(1, "Icon minimal 1 karakter"),
+});
+
+const defaultForm = {
+  name: "",
+  deskripsi: "",
+  slug: "",
+  icon: "",
+};
+
+const programKreatifState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(programKreatifState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        programKreatifState.create.loading = true;
+        const res = await ApiFetch.api.inovasi.programkreatif["create"].post(
+          programKreatifState.create.form
+        );
+        if (res.status === 200) {
+          programKreatifState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        programKreatifState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {
+      // Change to arrow function
+      programKreatifState.findMany.loading = true; // Use the full path to access the property
+      programKreatifState.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.inovasi.programkreatif["find-many"].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          programKreatifState.findMany.data = res.data.data || [];
+          programKreatifState.findMany.total = res.data.total || 0;
+          programKreatifState.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load grafik berdasarkan jenis kelamin:",
+            res.data?.message
+          );
+          programKreatifState.findMany.data = [];
+          programKreatifState.findMany.total = 0;
+          programKreatifState.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan jenis kelamin:", error);
+        programKreatifState.findMany.data = [];
+        programKreatifState.findMany.total = 0;
+        programKreatifState.findMany.totalPages = 1;
+      } finally {
+        programKreatifState.findMany.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/inovasi/programkreatif/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            slug: data.slug,
+            icon: data.icon,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data");
+        }
+      } catch (error) {
+        console.error("Error loading program kreatif:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateForm.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(`/api/inovasi/programkreatif/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await programKreatifState.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data program kreatif");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.ProgramKreatifGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/inovasi/programkreatif/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          programKreatifState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          programKreatifState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading program kreatif:", error);
+        programKreatifState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        programKreatifState.delete.loading = true;
+
+        const response = await fetch(`/api/inovasi/programkreatif/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Program kreatif berhasil dihapus");
+          await programKreatifState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus program kreatif");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus program kreatif");
+      } finally {
+        programKreatifState.delete.loading = false;
+      }
+    },
+  },
+});
+
+export default programKreatifState;

src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran.ts

@@ -34,15 +34,17 @@ const persentasekelahiran = proxy({
     async create() {
       const cek = templatePersentase.safeParse(persentasekelahiran.create.form);
       if (!cek.success) {
-        const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
         toast.error(err);
         return null;
       }
       try {
         persentasekelahiran.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.persentasekelahiran["create"].post(
-          persentasekelahiran.create.form
-        );
+        const res = await ApiFetch.api.kesehatan.persentasekelahiran[
+          "create"
+        ].post(persentasekelahiran.create.form);
 
         if (res.status === 200) {
           const id = res.data?.data?.id;
@@ -65,11 +67,15 @@ const persentasekelahiran = proxy({
   },
 
   findMany: {
-    data: null as Prisma.DataKematian_KelahiranGetPayload<{
-      omit: { isActive: true };
-    }>[] | null,
+    data: null as
+      | Prisma.DataKematian_KelahiranGetPayload<{
+          omit: { isActive: true };
+        }>[]
+      | null,
     async load() {
-      const res = await ApiFetch.api.kesehatan.persentasekelahiran["find-many"].get();
+      const res = await ApiFetch.api.kesehatan.persentasekelahiran[
+        "find-many"
+      ].get();
       if (res.status === 200) {
         persentasekelahiran.findMany.data = res.data?.data ?? [];
       }
@@ -97,62 +103,61 @@ const persentasekelahiran = proxy({
     },
   },
 
-update: {
-  id: "",
-  form: { ...defaultForm },
-  loading: false,
-  async submit() {
-    const id = this.id;
-    if (!id) {
-      toast.warn("ID tidak valid");
-      return null;
-    }
-
-    const formData = {
-      tahun: this.form.tahun,
-      kematianKasar: this.form.kematianKasar,
-      kelahiranKasar: this.form.kelahiranKasar,
-      kematianBayi: this.form.kematianBayi,
-    };
-
-    const cek = templatePersentase.safeParse(formData);
-    if (!cek.success) {
-      const err = `[${cek.error.issues
-        .map((v) => `${v.path.join(".")}`)
-        .join("\n")}] required`;
-      toast.error(err);
-      return null;
-    }
-
-    try {
-      this.loading = true;
-      const res = await fetch(`/api/kesehatan/persentasekelahiran/${id}`, {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(formData),
-      });
-
-      const result = await res.json();
-
-      if (!res.ok || !result?.success) {
-        throw new Error(result?.message || "Gagal update data");
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
       }
 
-      toast.success("Berhasil update data!");
-      await persentasekelahiran.findMany.load();
-      return result.data;
-    } catch (error) {
-      console.error("Update error:", error);
-      toast.error("Gagal update data persentase kelahiran");
-      throw error;
-    } finally {
-      this.loading = false;
-    }
-  },
-},
+      const formData = {
+        tahun: this.form.tahun,
+        kematianKasar: this.form.kematianKasar,
+        kelahiranKasar: this.form.kelahiranKasar,
+        kematianBayi: this.form.kematianBayi,
+      };
 
+      const cek = templatePersentase.safeParse(formData);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+
+      try {
+        this.loading = true;
+        const res = await fetch(`/api/kesehatan/persentasekelahiran/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+
+        const result = await res.json();
+
+        if (!res.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+
+        toast.success("Berhasil update data!");
+        await persentasekelahiran.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Update error:", error);
+        toast.error("Gagal update data persentase kelahiran");
+        throw error;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
 
   delete: {
     loading: false,
@@ -162,22 +167,29 @@ update: {
       try {
         persentasekelahiran.delete.loading = true;
 
-        const response = await fetch(`/api/kesehatan/persentasekelahiran/del/${id}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const response = await fetch(
+          `/api/kesehatan/persentasekelahiran/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
 
         const result = await response.json();
 
         if (response.ok && result?.success) {
-          toast.success(result.message || "Persentase kelahiran berhasil dihapus");
+          toast.success(
+            result.message || "Persentase kelahiran berhasil dihapus"
+          );
           await persentasekelahiran.findMany.load();
         } else {
-          toast.error(result?.message || "Gagal menghapus persentase kelahiran");
+          toast.error(
+            result?.message || "Gagal menghapus persentase kelahiran"
+          );
         }
-      } catch (error) { 
+      } catch (error) {
         console.error("Gagal delete:", error);
         toast.error("Terjadi kesalahan saat menghapus persentase kelahiran");
       } finally {

src/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -16,17 +17,9 @@ const defaultForm = {
   tanggal: "",
 };
 
-type DaftarInformasi = Prisma.DaftarInformasiPublikGetPayload<{
-  select: {
-    jenisInformasi: true;
-    deskripsi: true;
-    tanggal: true;
-  };
-}>;
-
 const daftarInformasiPublik = proxy({
   create: {
-    form: {} as DaftarInformasi,
+    form: {...defaultForm},
     loading: false,
     async create() {
       const cek = templateDaftarInformasi.safeParse(
@@ -56,15 +49,38 @@ const daftarInformasiPublik = proxy({
     },
   },
   findMany: {
-    data: null as
-      | Prisma.DaftarInformasiPublikGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.ppid.daftarinformasipublik[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        daftarInformasiPublik.findMany.data = res.data?.data ?? [];
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      daftarInformasiPublik.findMany.loading = true;  // Use the full path to access the property
+      daftarInformasiPublik.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.ppid.daftarinformasipublik[
+          "find-many"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          daftarInformasiPublik.findMany.data = res.data.data || [];
+          daftarInformasiPublik.findMany.total = res.data.total || 0;
+          daftarInformasiPublik.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load daftar informasi publik:", res.data?.message);
+          daftarInformasiPublik.findMany.data = [];
+          daftarInformasiPublik.findMany.total = 0;
+          daftarInformasiPublik.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading daftar informasi publik:", error);
+        daftarInformasiPublik.findMany.data = [];
+        daftarInformasiPublik.findMany.total = 0;
+        daftarInformasiPublik.findMany.totalPages = 1;
+      } finally {
+        daftarInformasiPublik.findMany.loading = false;
       }
     },
   },
@@ -186,7 +202,9 @@ const daftarInformasiPublik = proxy({
       }
       try {
         daftarInformasiPublik.edit.loading = true;
-
+        const formattedTanggal = this.form.tanggal
+        ? new Date(this.form.tanggal).toISOString()
+        : undefined;
         const response = await fetch(
           `/api/ppid/daftarinformasipublik/${this.id}`,
           {
@@ -197,7 +215,7 @@ const daftarInformasiPublik = proxy({
             body: JSON.stringify({
               jenisInformasi: this.form.jenisInformasi,
               deskripsi: this.form.deskripsi,
-              tanggal: this.form.tanggal,
+              tanggal: formattedTanggal,
             }),
           }
         );

src/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -9,71 +10,75 @@ const templateGrafikJenisKelamin = z.object({
   perempuan: z.string().min(1, "Data perempuan harus diisi"),
 }); 
 
-type GrafikJenisKelamin = Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
-  select: {
-    id: true;
-    laki: true;
-    perempuan: true;
-  };
-}>;
-
-const defaultForm: Omit<GrafikJenisKelamin, 'id'> & { id?: string } = {
+const defaultForm = {
   laki: "",
   perempuan: "",
 };
 
 const grafikBerdasarkanJenisKelamin = proxy({
   create: {
-    form: defaultForm,
+    form: {...defaultForm},
     loading: false,
-    async create() {
-      const cek = templateGrafikJenisKelamin.safeParse(
-        grafikBerdasarkanJenisKelamin.create.form
-      );
+    async create(){
+      const cek = templateGrafikJenisKelamin.safeParse(grafikBerdasarkanJenisKelamin.create.form);
       if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
+        const err = cek.error.issues.map((i) => i.message).join("\n");
+        toast.error(err);
+        return;
       }
+
       try {
         grafikBerdasarkanJenisKelamin.create.loading = true;
         const res = await ApiFetch.api.ppid.grafikberdasarkanjeniskelamin[
           "create"
         ].post(grafikBerdasarkanJenisKelamin.create.form);
         if (res.status === 200) {
-          const id = res.data?.data?.id;
-          if (id) {
-            toast.success("Success create");
-            grafikBerdasarkanJenisKelamin.create.form = {
-              laki: "",
-              perempuan: "",
-            };
-            grafikBerdasarkanJenisKelamin.findMany.load();
-            return id;
-          }
+          toast.success("Grafik berdasarkan jenis kelamin berhasil ditambahkan");
+          await grafikBerdasarkanJenisKelamin.findMany.load();
+        } else {
+          toast.error(res.data?.message ?? "Gagal tambah grafik berdasarkan jenis kelamin");
         }
-        return toast.error("failed create");
       } catch (error) {
-        console.log((error as Error).message);
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan grafik berdasarkan jenis kelamin");
       } finally {
         grafikBerdasarkanJenisKelamin.create.loading = false;
       }
     },
   },
   findMany: {
-    data: null as
-      | Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
-          omit: { isActive: true };
-        }>[]
-      | null,
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.ppid.grafikberdasarkanjeniskelamin[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        grafikBerdasarkanJenisKelamin.findMany.data = res.data?.data ?? [];
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      grafikBerdasarkanJenisKelamin.findMany.loading = true;  // Use the full path to access the property
+      grafikBerdasarkanJenisKelamin.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.ppid.grafikberdasarkanjeniskelamin[
+          "find-many"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          grafikBerdasarkanJenisKelamin.findMany.data = res.data.data || [];
+          grafikBerdasarkanJenisKelamin.findMany.total = res.data.total || 0;
+          grafikBerdasarkanJenisKelamin.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load grafik berdasarkan jenis kelamin:", res.data?.message);
+          grafikBerdasarkanJenisKelamin.findMany.data = [];
+          grafikBerdasarkanJenisKelamin.findMany.total = 0;
+          grafikBerdasarkanJenisKelamin.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan jenis kelamin:", error);
+        grafikBerdasarkanJenisKelamin.findMany.data = [];
+        grafikBerdasarkanJenisKelamin.findMany.total = 0;
+        grafikBerdasarkanJenisKelamin.findMany.totalPages = 1;
+      } finally {
+        grafikBerdasarkanJenisKelamin.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -11,17 +12,7 @@ const templateGrafikResponden = z.object({
   tidakbaik: z.string().min(1, "Data tidak baik harus diisi"),
 });
 
-type GrafikResponden = Prisma.GrafikBerdasarkanRespondenGetPayload<{
-  select: {
-    id: true;
-    sangatbaik: true;
-    baik: true;
-    kurangbaik: true;
-    tidakbaik: true;
-  };
-}>;
-
-const defaultForm: Omit<GrafikResponden, 'id'> & { id?: string } = {
+const defaultForm = {
   sangatbaik: "",
   baik: "",
   kurangbaik: "",
@@ -30,7 +21,7 @@ const defaultForm: Omit<GrafikResponden, 'id'> & { id?: string } = {
 
 const grafikBerdasarkanResponden = proxy({
   create: {
-    form: defaultForm,
+    form: {...defaultForm},
     loading: false,
     async create() {
       const cek = templateGrafikResponden.safeParse(
@@ -48,40 +39,52 @@ const grafikBerdasarkanResponden = proxy({
           "create"
         ].post(grafikBerdasarkanResponden.create.form);
         if (res.status === 200) {
-          const id = res.data?.data?.id;
-          if (id) {
-            toast.success("Success create");
-            grafikBerdasarkanResponden.create.form = {
-              sangatbaik: "",
-              baik: "",
-              kurangbaik: "",
-              tidakbaik: "",
-            };
-            grafikBerdasarkanResponden.findMany.load();
-            return id;
-          }
+          toast.success("Grafik berdasarkan responden berhasil ditambahkan");
+          await grafikBerdasarkanResponden.findMany.load();
+        } else {
+          toast.error(res.data?.message ?? "Gagal tambah grafik berdasarkan responden");
         }
-        return toast.error("failed create");
       } catch (error) {
-        console.log((error as Error).message);
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan grafik berdasarkan responden");
       } finally {
         grafikBerdasarkanResponden.create.loading = false;
       }
     },
   },
   findMany: {
-    data: null as
-      | Prisma.GrafikBerdasarkanRespondenGetPayload<{
-          omit: { isActive: true };
-        }>[]
-      | null,
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.ppid.grafikberdasarkanresponden[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        grafikBerdasarkanResponden.findMany.data = res.data?.data ?? [];
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      grafikBerdasarkanResponden.findMany.loading = true;  // Use the full path to access the property
+      grafikBerdasarkanResponden.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.ppid.grafikberdasarkanresponden[
+          "find-many"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          grafikBerdasarkanResponden.findMany.data = res.data.data || [];
+          grafikBerdasarkanResponden.findMany.total = res.data.total || 0;
+          grafikBerdasarkanResponden.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load grafik berdasarkan responden:", res.data?.message);
+          grafikBerdasarkanResponden.findMany.data = [];
+          grafikBerdasarkanResponden.findMany.total = 0;
+          grafikBerdasarkanResponden.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafikBerdasarkanResponden:", error);
+        grafikBerdasarkanResponden.findMany.data = [];
+        grafikBerdasarkanResponden.findMany.total = 0;
+        grafikBerdasarkanResponden.findMany.totalPages = 1;
+      } finally {
+        grafikBerdasarkanResponden.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanUmur.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -11,17 +12,7 @@ const templateGrafikUmur = z.object({
   lansia: z.string().min(1, "Data lansia harus diisi"),
 });
 
-type GrafikUmur = Prisma.GrafikBerdasarkanUmurGetPayload<{
-  select: {
-    id: true;
-    remaja: true;
-    dewasa: true;
-    orangtua: true;
-    lansia: true;
-  };
-}>;
-
-const defaultForm: Omit<GrafikUmur, "id"> & { id?: string } = {
+const defaultForm = {
   remaja: "",
   dewasa: "",
   orangtua: "",
@@ -30,7 +21,7 @@ const defaultForm: Omit<GrafikUmur, "id"> & { id?: string } = {
 
 const grafikBerdasarkanUmur = proxy({
   create: {
-    form: defaultForm,
+    form: {...defaultForm},
     loading: false,
     async create() {
       const cek = templateGrafikUmur.safeParse(
@@ -70,18 +61,38 @@ const grafikBerdasarkanUmur = proxy({
     },
   },
   findMany: {
-    data: null as
-      | Prisma.GrafikBerdasarkanUmurGetPayload<{
-          omit: { isActive: true };
-        }>[]
-      | null,
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        grafikBerdasarkanUmur.findMany.data = res.data?.data ?? [];
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      grafikBerdasarkanUmur.findMany.loading = true;  // Use the full path to access the property
+      grafikBerdasarkanUmur.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
+          "find-many"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          grafikBerdasarkanUmur.findMany.data = res.data.data || [];
+          grafikBerdasarkanUmur.findMany.total = res.data.total || 0;
+          grafikBerdasarkanUmur.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load grafik berdasarkan umur:", res.data?.message);
+          grafikBerdasarkanUmur.findMany.data = [];
+          grafikBerdasarkanUmur.findMany.total = 0;
+          grafikBerdasarkanUmur.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan umur:", error);
+        grafikBerdasarkanUmur.findMany.data = [];
+        grafikBerdasarkanUmur.findMany.total = 0;
+        grafikBerdasarkanUmur.findMany.totalPages = 1;
+      } finally {
+        grafikBerdasarkanUmur.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikHasilKepuasan.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -9,22 +10,14 @@ const templateGrafikHasilKepuasanMasyarakat = z.object({
   kepuasan: z.string().min(1, "Kepuasan harus diisi"),
 });
 
-type GrafikHasilKepuasanMasyarakat = Prisma.IndeksKepuasanMasyarakatGetPayload<{
-  select: {
-    id: true;
-    label: true;
-    kepuasan: true;
-  };
-}>;
-
-const defaultForm: Omit<GrafikHasilKepuasanMasyarakat, 'id'> & { id?: string } = {
+const defaultForm = {
   label: "",
   kepuasan: "",
 };
 
 const grafikHasilKepuasanMasyarakat = proxy({
   create: {
-    form: defaultForm,
+    form: {...defaultForm},
     loading: false,
     async create() {
       const cek = templateGrafikHasilKepuasanMasyarakat.safeParse(
@@ -38,42 +31,52 @@ const grafikHasilKepuasanMasyarakat = proxy({
       }
       try {
         grafikHasilKepuasanMasyarakat.create.loading = true;
-        const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat["create"].post(
-          grafikHasilKepuasanMasyarakat.create.form
-        );
+        const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat["create"].post(grafikHasilKepuasanMasyarakat.create.form);
         if (res.status === 200) {
-          const id = res.data?.data?.id;
-          if (id) {
-            toast.success("Success create");
-            grafikHasilKepuasanMasyarakat.create.form = {
-              label: "",
-              kepuasan: "",
-            };
-            grafikHasilKepuasanMasyarakat.findMany.load();
-            return id;
-          }
+          toast.success("Grafik hasil kepuasan masyarakat berhasil ditambahkan");
+          await grafikHasilKepuasanMasyarakat.findMany.load();
+        } else {
+          toast.error(res.data?.message ?? "Gagal tambah grafik hasil kepuasan masyarakat");
         }
-        
-        return toast.error("failed create");
       } catch (error) {
-        console.log((error as Error).message);
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan grafik hasil kepuasan masyarakat");
       } finally {
         grafikHasilKepuasanMasyarakat.create.loading = false;
       }
     },
   },
   findMany: {
-    data: null as
-      | Prisma.IndeksKepuasanMasyarakatGetPayload<{
-          omit: { isActive: true };
-        }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        grafikHasilKepuasanMasyarakat.findMany.data = res.data?.data ?? [];
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      grafikHasilKepuasanMasyarakat.findMany.loading = true;  // Use the full path to access the property
+      grafikHasilKepuasanMasyarakat.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat["find-many"].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          grafikHasilKepuasanMasyarakat.findMany.data = res.data.data || [];
+          grafikHasilKepuasanMasyarakat.findMany.total = res.data.total || 0;
+          grafikHasilKepuasanMasyarakat.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load grafik hasil kepuasan masyarakat:", res.data?.message);
+          grafikHasilKepuasanMasyarakat.findMany.data = [];
+          grafikHasilKepuasanMasyarakat.findMany.total = 0;
+          grafikHasilKepuasanMasyarakat.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik hasil kepuasan masyarakat:", error);
+        grafikHasilKepuasanMasyarakat.findMany.data = [];
+        grafikHasilKepuasanMasyarakat.findMany.total = 0;
+        grafikHasilKepuasanMasyarakat.findMany.totalPages = 1;
+      } finally {
+        grafikHasilKepuasanMasyarakat.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/desa/berita/[id]/edit/page.tsx

@@ -18,8 +18,6 @@ import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useProxy } from "valtio/utils";
-
-
 import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
 import colors from "@/con/colors";
 import ApiFetch from "@/lib/api-fetch";

src/app/admin/(dashboard)/desa/berita/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Grid, GridCol, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -29,12 +29,21 @@ function Berita() {
 function ListBerita({ search }: { search: string }) {
   const beritaState = useProxy(stateDashboardBerita)
   const router = useRouter()
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = beritaState.berita.findMany;
 
+
+  // Fetch pertama kali
   useShallowEffect(() => {
-    beritaState.berita.findMany.load()
-  }, [])
+    load(page, 10); // awal page = 1
+  }, [page]);
 
-  const filteredData = (beritaState.berita.findMany.data || []).filter(item => {
+  const filteredData = (data || []).filter((item) => {
     const keyword = search.toLowerCase();
     return (
       item.judul.toLowerCase().includes(keyword) ||
@@ -42,67 +51,85 @@ function ListBerita({ search }: { search: string }) {
     );
   });
 
-
-  if (!beritaState.berita.findMany.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={500} />
-      </Stack>
-    )
+  if (loading || !data) {
+    return <Skeleton h={500} />;
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
+      <Paper bg={colors["white-1"]} p={"md"}>
         <Stack>
           <Grid>
             <GridCol span={{ base: 12, md: 11 }}>
-              <Text fz={"xl"} fw={"bold"}>List Berita</Text>
+              <Text fz={"xl"} fw={"bold"}>
+                List Berita
+              </Text>
             </GridCol>
             <GridCol span={{ base: 12, md: 1 }}>
-              <Button onClick={() => router.push("/admin/desa/berita/create")} bg={colors['blue-button']}>
+              <Button
+                onClick={() => router.push("/admin/desa/berita/create")}
+                bg={colors["blue-button"]}
+              >
                 <IconCircleDashedPlus size={25} />
               </Button>
             </GridCol>
           </Grid>
           <Box style={{ overflowX: "auto" }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+            <Table
+              striped
+              withRowBorders
+              withTableBorder
+              style={{ minWidth: "700px" }}
+            >
               <TableThead>
                 <TableTr>
                   <TableTh w={250}>Judul</TableTh>
                   <TableTh w={250}>Kategori</TableTh>
                   <TableTh w={250}>Image</TableTh>
                   <TableTh w={200}>Detail</TableTh>
-
                 </TableTr>
               </TableThead>
-              <TableTbody >
+              <TableTbody>
                 {filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd >
+                    <TableTd>
                       <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.judul}</Text>
+                        <Text truncate="end" fz={"sm"}>
+                          {item.judul}
+                        </Text>
                       </Box>
                     </TableTd>
-                    <TableTd >{item.kategoriBerita?.name}</TableTd>
+                    <TableTd>{item.kategoriBerita?.name}</TableTd>
                     <TableTd>
                       <Image w={100} src={item.image?.link} alt="gambar" />
                     </TableTd>
                     <TableTd>
-                      <Button bg={"green"} onClick={() => router.push(`/admin/desa/berita/${item.id}`)}>
+                      <Button
+                        bg={"green"}
+                        onClick={() =>
+                          router.push(`/admin/desa/berita/${item.id}`)
+                        }
+                      >
                         <IconDeviceImacCog size={25} />
                       </Button>
                     </TableTd>
-
                   </TableTr>
                 ))}
               </TableTbody>
-            </Table> </Box>
+            </Table>
+          </Box>
         </Stack>
       </Paper>
-
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
-  )
+  );
 }
-
 export default Berita;

src/app/admin/(dashboard)/desa/gallery/foto/page.tsx

@@ -3,7 +3,7 @@ import colors from '@/con/colors';
 import { Box, Button, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import JudulListTab from '../../../_com/jusulListTab';
+import JudulListTab from '../../../_com/judulListTab';
 import { useProxy } from 'valtio/utils';
 import stateGallery from '../../../_state/desa/gallery';
 import { useShallowEffect } from '@mantine/hooks';

src/app/admin/(dashboard)/desa/gallery/video/page.tsx

@@ -3,7 +3,7 @@ import colors from '@/con/colors';
 import { Box, Button, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import JudulListTab from '../../../_com/jusulListTab';
+import JudulListTab from '../../../_com/judulListTab';
 import { useProxy } from 'valtio/utils';
 import stateGallery from '../../../_state/desa/gallery';
 import { useShallowEffect } from '@mantine/hooks';

src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import JudulListTab from '@/app/admin/(dashboard)/_com/jusulListTab';
+import JudulListTab from '@/app/admin/(dashboard)/_com/judulListTab';
 import colors from '@/con/colors';
 import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';

src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import JudulListTab from '@/app/admin/(dashboard)/_com/jusulListTab';
+import JudulListTab from '@/app/admin/(dashboard)/_com/judulListTab';
 import colors from '@/con/colors';
 import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';

src/app/admin/(dashboard)/desa/penghargaan/page.tsx

@@ -6,7 +6,7 @@ import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
-import JudulListTab from '../../_com/jusulListTab';
+import JudulListTab from '../../_com/judulListTab';
 import { useState } from 'react';
 import HeaderSearch from '../../_com/header';
 

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/_lib/layoutTabs.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const tabs = [
+    {
+      label: "APB Desa",
+      value: "apbdesa",
+      href: "/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa"
+    },
+    {
+      label: "Pendapatan",
+      value: "pendapatan",
+      href: "/admin/ekonomi/PADesa-pendapatan-asli-desa/pendapatan"
+    },
+    {
+      label: "Belanja",
+      value: "belanja",
+      href: "/admin/ekonomi/PADesa-pendapatan-asli-desa/belanja"
+    },
+    {
+      label: "Pembiayaan",
+      value: "pembiayaan",
+      href: "/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan"
+    },
+    
+  ];
+  const curentTab = tabs.find(tab => tab.href === pathname)
+  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+  const handleTabChange = (value: string | null) => {
+    const tab = tabs.find(t => t.value === value)
+    if (tab) {
+      router.push(tab.href)
+    }
+    setActiveTab(value)
+  }
+
+  useEffect(() => {
+    const match = tabs.find(tab => tab.href === pathname)
+    if (match) {
+      setActiveTab(match.value)
+    }
+  }, [pathname])
+
+  return (
+    <Stack>
+      <Title order={3}>Pendapatan Asli Desa</Title>
+      <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+          {tabs.map((e, i) => (
+            <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+          ))}
+        </TabsList>
+        {tabs.map((e, i) => (
+          <TabsPanel key={i} value={e.value}>
+            {/* Konten dummy, bisa diganti tergantung routing */}
+            <></>
+          </TabsPanel>
+        ))}
+      </Tabs>
+      {children}
+    </Stack>
+  );
+}
+
+export default LayoutTabs;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/[id]/edit/page.tsx

@@ -0,0 +1,234 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
+import colors from '@/con/colors';
+import { Box, Button, MultiSelect, Paper, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditAPBDesa() {
+  const apbState = useProxy(PendapatanAsliDesa.ApbDesa);
+  const router = useRouter();
+  const params = useParams();
+
+  const [formData, setFormData] = useState({
+    tahun: apbState.update.form.tahun || '',
+    pendapatanIds: apbState.update.form.pendapatanIds || [],
+    belanjaIds: apbState.update.form.belanjaIds || [],
+    pembiayaanIds: apbState.update.form.pembiayaanIds || [],
+  });
+
+  // Load APB desa by id saat pertama kali
+  useEffect(() => {
+    const loadAPBdesa = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await apbState.update.load(id);
+        if (data) {
+          setFormData({
+            tahun: data.tahun || 0,
+            pendapatanIds: data.pendapatan?.map((p: any) => p.id) || [],
+            belanjaIds: data.belanja?.map((b: any) => b.id) || [],
+            pembiayaanIds: data.pembiayaan?.map((p: any) => p.id) || [],
+          });
+        }
+      } catch (error) {
+        console.error("Error loading APBdesa:", error);
+        toast.error("Gagal memuat data APBdesa");
+      }
+    };
+
+    loadAPBdesa();
+  }, [params?.id]); // ✅ hapus beritaState dari dependency
+
+  const handleSubmit = async () => {
+
+    try {
+      // Update global state with form data
+      apbState.update.form = {
+        ...apbState.update.form,
+        tahun: Number(formData.tahun),
+        pendapatanIds: formData.pendapatanIds,
+        belanjaIds: formData.belanjaIds,
+        pembiayaanIds: formData.pembiayaanIds,
+      };
+
+      await apbState.update.update();
+      toast.success("APB Desa berhasil diperbarui!");
+      router.push("/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa");
+    } catch (error) {
+      console.error("Error updating APBdesa:", error);
+      toast.error("Terjadi kesalahan saat memperbarui APBdesa");
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit APB Desa</Title>
+          <TextInput
+            type='number'
+            value={formData.tahun}
+            onChange={(val) => {
+              setFormData({ ...formData, tahun: val.target.value });
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Tahun</Text>}
+            placeholder="masukkan tahun"
+          />
+          <SelectPendapatan
+            selectedIds={formData.pendapatanIds}
+            onSelectionChange={(ids) => {
+              setFormData({ ...formData, pendapatanIds: ids });
+            }}
+          />
+          <SelectBelanja
+            selectedIds={formData.belanjaIds}
+            onSelectionChange={(ids) => {
+              setFormData({ ...formData, belanjaIds: ids });
+            }}
+          />
+          <SelectPembiayaan
+            selectedIds={formData.pembiayaanIds}
+            onSelectionChange={(ids) => {
+              setFormData({ ...formData, pembiayaanIds: ids });
+            }}
+          />
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+
+
+  /* Select Pendapatan */
+  interface SelectPendapatanProps {
+    selectedIds: string[];
+    onSelectionChange: (ids: string[]) => void;
+  }
+
+  function SelectPendapatan({
+    selectedIds = [],
+    onSelectionChange,
+  }: SelectPendapatanProps) {
+    const pendapatanState = useProxy(PendapatanAsliDesa.pendapatan);
+
+    useShallowEffect(() => {
+      pendapatanState.findMany.load().then(() => {
+        console.log("Pendapatan berhasil dimuat:", pendapatanState.findMany.data);
+      });
+    }, []);
+
+    if (!pendapatanState.findMany.data) {
+      return <Skeleton height={38} />;
+    }
+
+    return (
+      <MultiSelect
+        label={<Text fz={"sm"} fw={"bold"}>Pendapatan</Text>}
+        data={pendapatanState.findMany.data.map(p => ({
+          value: p.id,
+          label: p.name
+        }))}
+        value={selectedIds}
+        onChange={onSelectionChange}
+        searchable
+        clearable
+        placeholder="Pilih pendapatan..."
+        nothingFoundMessage="Tidak ditemukan"
+      />
+    );
+  }
+
+  /* Select Belanja */
+  interface SelectBelanjaProps {
+    selectedIds: string[];
+    onSelectionChange: (ids: string[]) => void;
+  }
+
+  function SelectBelanja({
+    selectedIds = [],
+    onSelectionChange,
+  }: SelectBelanjaProps) {
+    const belanjaState = useProxy(PendapatanAsliDesa.belanja);
+
+    useShallowEffect(() => {
+      belanjaState.findMany.load().then(() => {
+        console.log("Belanja berhasil dimuat:", belanjaState.findMany.data);
+      });
+    }, []);
+
+    if (!belanjaState.findMany.data) {
+      return <Skeleton height={38} />;
+    }
+
+    return (
+      <MultiSelect
+        label={<Text fz={"sm"} fw={"bold"}>Belanja</Text>}
+        data={belanjaState.findMany.data.map(b => ({
+          value: b.id,
+          label: b.name
+        }))}
+        value={selectedIds}
+        onChange={onSelectionChange}
+        searchable
+        clearable
+        placeholder="Pilih belanja..."
+        nothingFoundMessage="Tidak ditemukan"
+      />
+    );
+  }
+
+  /* Select Pembiayaan */
+  interface SelectPembiayaanProps {
+    selectedIds: string[];
+    onSelectionChange: (ids: string[]) => void;
+  }
+
+  function SelectPembiayaan({
+    selectedIds = [],
+    onSelectionChange,
+  }: SelectPembiayaanProps) {
+    const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan);
+
+    useShallowEffect(() => {
+      pembiayaanState.findMany.load().then(() => {
+        console.log("Pembiayaan berhasil dimuat:", pembiayaanState.findMany.data);
+      });
+    }, []);
+
+    if (!pembiayaanState.findMany.data) {
+      return <Skeleton height={38} />;
+    }
+
+    return (
+      <MultiSelect
+        label={<Text fz={"sm"} fw={"bold"}>Pembiayaan</Text>}
+        data={pembiayaanState.findMany.data.map(b => ({
+          value: b.id,
+          label: b.name
+        }))}
+        value={selectedIds}
+        onChange={onSelectionChange}
+        searchable
+        clearable
+        placeholder="Pilih pembiayaan..."
+        nothingFoundMessage="Tidak ditemukan"
+      />
+    );
+  }
+}
+
+export default EditAPBDesa;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/[id]/page.tsx

@@ -0,0 +1,152 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+
+
+function DetailAPBDesa() {
+  const apbState = useProxy(PendapatanAsliDesa.ApbDesa)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    console.log("PARAM ID:", params?.id)
+    apbState.findUnique.load(params?.id as string)
+  }, [])
+
+  const formatRupiah = (value: number) => {
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+    }).format(value);
+  };
+
+  const handleHapus = () => {
+    if (selectedId) {
+      apbState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa")
+    }
+  }
+
+  if (!apbState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={40} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail APB Desa</Text>
+          {apbState.findUnique.data ? (
+            <Paper key={apbState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Tahun</Text>
+                  <Text fz={"lg"}>{apbState.findUnique.data?.tahun}</Text>
+                </Box>
+                <Box>
+                  <Stack gap={"xs"}>
+                    <Text fw={"bold"} fz={"lg"}>Detail Pembiayaan</Text>
+                    {(apbState.findUnique.data?.pembiayaan || []).map((item) => (
+                      <Text fz={"lg"} key={item.id}>
+                        {item.name}: {formatRupiah(Number(item.value))}
+                      </Text>
+                    ))}
+                    <Text fz={"lg"} fw={"bold"}>
+                      Total: {formatRupiah((apbState.findUnique.data?.pembiayaan || [])
+                        .reduce((sum, item) => sum + Number(item.value), 0))}
+                    </Text>
+                  </Stack>
+                </Box>
+                <Box>
+                  <Stack gap={"xs"}>
+                    <Text fw={"bold"} fz={"lg"}>Detail Belanja</Text>
+                    {(apbState.findUnique.data?.belanja || []).map((item) => (
+                      <Text fz={"lg"} key={item.id}>
+                        {item.name}: {formatRupiah(Number(item.value))}
+                      </Text>
+                    ))}
+                    <Text fz={"lg"} fw={"bold"}>
+                      Total: {formatRupiah((apbState.findUnique.data?.belanja || [])
+                        .reduce((sum, item) => sum + Number(item.value), 0))}
+                    </Text>
+                  </Stack>
+                </Box>
+                <Box>
+                  <Stack gap={"xs"}>
+                    <Text fw={"bold"} fz={"lg"}>Detail Pendapatan</Text>
+                    {(apbState.findUnique.data?.pendapatan || []).map((item) => (
+                      <Text fz={"lg"} key={item.id}>
+                        {item.name}: {formatRupiah(Number(item.value))}
+                      </Text>
+                    ))}
+                    <Text fz={"lg"} fw={"bold"}>
+                      Total: {formatRupiah((apbState.findUnique.data?.pendapatan || [])
+                        .reduce((sum, item) => sum + Number(item.value), 0))}
+                    </Text>
+                  </Stack>
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (apbState.findUnique.data) {
+                        setSelectedId(apbState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={apbState.delete.loading || !apbState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (apbState.findUnique.data) {
+                        router.push(`/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/${apbState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!apbState.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus APB Desa ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailAPBDesa;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/create/page.tsx

@@ -0,0 +1,190 @@
+'use client'
+import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
+import colors from '@/con/colors';
+import { Box, Button, MultiSelect, Paper, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+function CreateAPBDesa() {
+  const apbDesaState = useProxy(PendapatanAsliDesa.ApbDesa)
+  const router = useRouter()
+
+  const resetForm = () => {
+    apbDesaState.create.form = {
+      tahun: 0,
+      pendapatanIds: [],
+      belanjaIds: [],
+      pembiayaanIds: [],
+    }
+  }
+
+  const handleSubmit = async () => {
+    await apbDesaState.create.submit()
+    resetForm()
+    router.push("/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa")
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create APB Desa</Title>
+          <TextInput
+            type='number'
+            value={apbDesaState.create.form.tahun}
+            onChange={(val) => {
+              apbDesaState.create.form.tahun = Number(val.target.value);
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Tahun</Text>}
+            placeholder="masukkan tahun"
+          />
+          <SelectPendapatan
+            selectedIds={apbDesaState.create.form.pendapatanIds}
+            onSelectionChange={(ids) => {
+              apbDesaState.create.form.pendapatanIds = ids;
+            }}
+          />
+          <SelectBelanja
+            selectedIds={apbDesaState.create.form.belanjaIds}
+            onSelectionChange={(ids) => {
+              apbDesaState.create.form.belanjaIds = ids;
+            }}
+          />
+          <SelectPembiayaan
+            selectedIds={apbDesaState.create.form.pembiayaanIds}
+            onSelectionChange={(ids) => {
+              apbDesaState.create.form.pembiayaanIds = ids;
+            }}
+          />
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+
+/* Select Pendapatan */
+  interface SelectPendapatanProps {
+    selectedIds: string[];
+    onSelectionChange: (ids: string[]) => void;
+  }
+
+  function SelectPendapatan({
+    selectedIds = [],
+    onSelectionChange,
+  }: SelectPendapatanProps) {
+    const pendapatanState = useProxy(PendapatanAsliDesa.pendapatan);
+
+    useShallowEffect(() => {
+      pendapatanState.findMany.load().then(() => {
+        console.log("Pendapatan berhasil dimuat:", pendapatanState.findMany.data);
+      });
+    }, []);
+
+    if (!pendapatanState.findMany.data) {
+      return <Skeleton height={38} />;
+    }
+
+    return (
+      <MultiSelect
+        label={<Text fz={"sm"} fw={"bold"}>Pendapatan</Text>}
+        data={pendapatanState.findMany.data.map(p => ({
+          value: p.id,
+          label: p.name
+        }))}
+        value={selectedIds}
+        onChange={onSelectionChange}
+        searchable
+        clearable
+        placeholder="Pilih pendapatan..."
+        nothingFoundMessage="Tidak ditemukan"
+      />
+    );
+  }
+
+  /* Select Belanja */
+  interface SelectBelanjaProps {
+    selectedIds: string[];
+    onSelectionChange: (ids: string[]) => void;
+  }
+
+  function SelectBelanja({
+    selectedIds = [],
+    onSelectionChange,
+  }: SelectBelanjaProps) {
+    const belanjaState = useProxy(PendapatanAsliDesa.belanja);
+
+    useShallowEffect(() => {
+      belanjaState.findMany.load().then(() => {
+        console.log("Belanja berhasil dimuat:", belanjaState.findMany.data);
+      });
+    }, []);
+
+    if (!belanjaState.findMany.data) {
+      return <Skeleton height={38} />;
+    }
+
+    return (
+      <MultiSelect
+        label={<Text fz={"sm"} fw={"bold"}>Belanja</Text>}
+        data={belanjaState.findMany.data.map(b => ({
+          value: b.id,
+          label: b.name
+        }))}
+        value={selectedIds}
+        onChange={onSelectionChange}
+        searchable
+        clearable
+        placeholder="Pilih belanja..."
+        nothingFoundMessage="Tidak ditemukan"
+      />
+    );
+  }
+
+  /* Select Pembiayaan */
+  interface SelectPembiayaanProps {
+    selectedIds: string[];
+    onSelectionChange: (ids: string[]) => void;
+  }
+
+  function SelectPembiayaan({
+    selectedIds = [],
+    onSelectionChange,
+  }: SelectPembiayaanProps) {
+    const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan);
+
+    useShallowEffect(() => {
+      pembiayaanState.findMany.load().then(() => {
+        console.log("Pembiayaan berhasil dimuat:", pembiayaanState.findMany.data);
+      });
+    }, []);
+
+    if (!pembiayaanState.findMany.data) {
+      return <Skeleton height={38} />;
+    }
+
+    return (
+      <MultiSelect
+        label={<Text fz={"sm"} fw={"bold"}>Pembiayaan</Text>}
+        data={pembiayaanState.findMany.data.map(b => ({
+          value: b.id,
+          label: b.name
+        }))}
+        value={selectedIds}
+        onChange={onSelectionChange}
+        searchable
+        clearable
+        placeholder="Pilih pembiayaan..."
+        nothingFoundMessage="Tidak ditemukan"
+      />
+    );
+  }
+}
+
+export default CreateAPBDesa;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/page.tsx

@@ -0,0 +1,106 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import PendapatanAsliDesa from '../../../_state/ekonomi/PADesa';
+
+
+function APBDesa() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='APB Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListAPBDesa search={search} />
+    </Box>
+  );
+}
+
+function ListAPBDesa({ search }: { search: string }) {
+  const apbDesaState = useProxy(PendapatanAsliDesa.ApbDesa)
+  const router = useRouter();
+
+  const formatRupiah = (value: number) => {
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+    }).format(value);
+  };
+
+  useShallowEffect(() => {
+    apbDesaState.findMany.load();
+  }, [])
+
+  const filteredData = (apbDesaState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.tahun.toString().toLowerCase().includes(keyword) ||
+      item.pembiayaan.map((item) => item.value.toString()).includes(keyword) ||
+      item.belanja.map((item) => item.value.toString()).includes(keyword) ||
+      item.pendapatan.map((item) => item.value.toString()).includes(keyword)
+    );
+  });
+
+  if (!apbDesaState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List APB Desa'
+          href='/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Tahun</TableTh>
+              <TableTh>Pembiayaan</TableTh>
+              <TableTh>Belanja</TableTh>
+              <TableTh>Pendapatan</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.tahun}</TableTd>
+                <TableTd>{formatRupiah(item.pembiayaan.reduce((sum, item) => sum + Number(item.value), 0))}</TableTd>
+                <TableTd>{formatRupiah(item.belanja.reduce((sum, item) => sum + Number(item.value), 0))}</TableTd>
+                <TableTd>{formatRupiah(item.pendapatan.reduce((sum, item) => sum + Number(item.value), 0))}</TableTd>
+                <TableTd>
+                  <Button
+                    bg={"green"}
+                    onClick={() =>
+                      router.push(`/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/${item.id}`)
+                    }
+                  >
+                    <IconDeviceImacCog size={25} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default APBDesa;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/[id]/page.tsx

@@ -0,0 +1,112 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditBelanja() {
+  const belanjaState = useProxy(PendapatanAsliDesa.belanja);
+  const router = useRouter();
+  const params = useParams();
+
+  const [formData, setFormData] = useState({
+    name: belanjaState.update.form.name || '',
+    value: belanjaState.update.form.value || '',
+  });
+
+  const formatRupiah = (value: number | string) => {
+    const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+    }).format(number);
+  };
+
+  const unformatRupiah = (value: string) => {
+    return Number(value.replace(/\D/g, ''));
+  };
+
+  useEffect(() => {
+    const loadBelanja = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await belanjaState.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            value: data.value || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading belanja:", error);
+        toast.error("Gagal memuat data belanja");
+      }
+    };
+
+    loadBelanja();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      belanjaState.update.form = {
+        ...belanjaState.update.form,
+        name: formData.name,
+        value: Number(formData.value),
+      }
+
+      await belanjaState.update.update();
+      toast.success("Jenis Belanja berhasil diperbarui!");
+      router.push("/admin/ekonomi/PADesa-pendapatan-asli-desa/belanja");
+    } catch (error) {
+      console.error("Error updating jenis belanja:", error);
+      toast.error("Terjadi kesalahan saat memperbarui jenis belanja");
+    }
+  }
+
+  return (
+    <Box>
+    <Box mb={10}>
+      <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+        <IconArrowBack color={colors['blue-button']} size={25} />
+      </Button>
+    </Box>
+
+    <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+      <Stack gap={"xs"}>
+        <Title order={4}>Edit Jenis Pendapatan</Title>
+        <TextInput
+          value={formData.name}
+          onChange={(val) => {
+            setFormData({ ...formData, name: val.target.value });
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Nama Jenis Pendapatan</Text>}
+          placeholder='Masukkan nama Jenis Pendapatan'
+        />
+        <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nilai</Text>}
+          placeholder='Masukkan nilai'
+          value={formatRupiah(formData.value)}
+          onChange={(val) => {
+            const raw = val.currentTarget.value;
+            const cleanValue = unformatRupiah(raw);
+            setFormData({ ...formData, value: cleanValue });
+          }}
+        />
+        <Group>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+        </Group>
+      </Stack>
+    </Paper>
+  </Box>
+  );
+}
+
+export default EditBelanja;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/create/page.tsx

@@ -0,0 +1,77 @@
+'use client'
+import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+function CreateBelanja() {
+  const belanjaState = useProxy(PendapatanAsliDesa.belanja)
+  const router = useRouter()
+
+  const formatRupiah = (value: number | string) => {
+    const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+    }).format(number);
+  };
+
+  const unformatRupiah = (value: string) => {
+    return Number(value.replace(/\D/g, ''));
+  };
+
+  const resetForm = () => {
+    belanjaState.create.form = {
+      name: "",
+      value: 0,
+    }
+  }
+
+  const handleSubmit = async () => {
+    await belanjaState.create.submit();
+    resetForm()
+    router.push("/admin/ekonomi/PADesa-pendapatan-asli-desa/belanja")
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Jenis Belanja</Title>
+          <TextInput
+            value={belanjaState.create.form.name}
+            onChange={(val) => {
+              belanjaState.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Jenis Belanja</Text>}
+            placeholder='Masukkan nama jenis belanja'
+          />
+          <TextInput
+            type='text'
+            value={formatRupiah(belanjaState.create.form.value)}
+            onChange={(val) => {
+              const raw = val.currentTarget.value;
+              const cleanValue = unformatRupiah(raw);
+              belanjaState.create.form.value = cleanValue;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nilai</Text>}
+            placeholder='Masukkan nilai'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateBelanja;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/page.tsx

@@ -0,0 +1,139 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import PendapatanAsliDesa from '../../../_state/ekonomi/PADesa';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+
+
+function Belanja() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Belanja'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListBelanja search={search} />
+    </Box>
+  );
+}
+
+function ListBelanja({ search }: { search: string }) {
+  const belanjaState = useProxy(PendapatanAsliDesa.belanja)
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  
+  const formatRupiah = (value: number) => {
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+    }).format(value);
+  };
+
+  const totalBelanja = belanjaState.findMany.data.reduce((sum, item) => sum + item.value, 0);
+
+  const handleDelete = () => {
+    if (selectedId) {
+      belanjaState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      belanjaState.findMany.load()
+    }
+  }
+
+  useShallowEffect(() => {
+    belanjaState.findMany.load();
+  }, [])
+
+  const filteredData = (belanjaState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.value.toString().toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!belanjaState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Belanja'
+          href='/admin/ekonomi/PADesa-pendapatan-asli-desa/belanja/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama</TableTh>
+              <TableTh>Nilai</TableTh>
+              <TableTh>Persentase</TableTh>
+              <TableTh>Edit</TableTh>
+              <TableTh>Delete</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>{formatRupiah(item.value)}</TableTd>
+                <TableTd>{((item.value / totalBelanja) * 100).toFixed(0)}%</TableTd>
+                <TableTd>
+                  <Button color='green' onClick={() => router.push(`/admin/ekonomi/PADesa-pendapatan-asli-desa/belanja/${item.id}`)}>
+                    <IconEdit size={20} />
+                  </Button>
+                </TableTd>
+                <TableTd>
+                  <Button
+                    color='red'
+                    disabled={belanjaState.delete.loading}
+                    onClick={() => {
+                      setSelectedId(item.id)
+                      setModalHapus(true)
+                    }}>
+                    <IconTrash size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+            <TableTr>
+              <TableTd colSpan={4}>
+                <Text fw={'bold'}>Total</Text>
+              </TableTd>
+              <TableTd>
+                {formatRupiah(belanjaState.findMany.data.reduce((total, item) => total + item.value, 0))}
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus belanja ini?'
+      />
+    </Box>
+  );
+}
+
+export default Belanja;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/layout.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import LayoutTabs from './_lib/layoutTabs';
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <LayoutTabs>
+      {children}
+    </LayoutTabs>
+  );
+}
+
+export default Layout;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/page.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-function Page() {
-  return (
-    <div>
-      PADesa-pendapatan-asli-desa
-    </div>
-  );
-}
-
-export default Page;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/[id]/page.tsx

@@ -0,0 +1,112 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditPembiayaan() {
+  const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan);
+  const router = useRouter();
+  const params = useParams();
+
+  const [formData, setFormData] = useState({
+    name: pembiayaanState.update.form.name || '',
+    value: pembiayaanState.update.form.value || '',
+  });
+
+  const formatRupiah = (value: number | string) => {
+    const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+    }).format(number);
+  };
+
+  const unformatRupiah = (value: string) => {
+    return Number(value.replace(/\D/g, ''));
+  };
+
+  useEffect(() => {
+    const loadPembiayaan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await pembiayaanState.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            value: data.value || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading pembiayaan:", error);
+        toast.error("Gagal memuat data pembiayaan");
+      }
+    };
+
+    loadPembiayaan();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      pembiayaanState.update.form = {
+        ...pembiayaanState.update.form,
+        name: formData.name,
+        value: Number(formData.value),
+      }
+
+      await pembiayaanState.update.update();
+      toast.success("Jenis Pembiayaan berhasil diperbarui!");
+      router.push("/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan");
+    } catch (error) {
+      console.error("Error updating jenis pembiayaan:", error);
+      toast.error("Terjadi kesalahan saat memperbarui jenis pembiayaan");
+    }
+  }
+
+  return (
+    <Box>
+    <Box mb={10}>
+      <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+        <IconArrowBack color={colors['blue-button']} size={25} />
+      </Button>
+    </Box>
+
+    <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+      <Stack gap={"xs"}>
+        <Title order={4}>Edit Jenis Pembiayaan</Title>
+        <TextInput
+          value={formData.name}
+          onChange={(val) => {
+            setFormData({ ...formData, name: val.target.value });
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Nama Jenis Pembiayaan</Text>}
+          placeholder='Masukkan nama Jenis Pembiayaan'
+        />
+        <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nilai</Text>}
+          placeholder='Masukkan nilai'
+          value={formatRupiah(formData.value)}
+          onChange={(val) => {
+            const raw = val.currentTarget.value;
+            const cleanValue = unformatRupiah(raw);
+            setFormData({ ...formData, value: cleanValue });
+          }}
+        />
+        <Group>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+        </Group>
+      </Stack>
+    </Paper>
+  </Box>
+  );
+}
+
+export default EditPembiayaan;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/create/page.tsx

@@ -0,0 +1,78 @@
+'use client'
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
+import { useRouter } from 'next/navigation';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Title, TextInput, Group, Text } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+
+function CreatePembiayaan() {
+  const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan)
+  const router = useRouter()
+
+  const formatRupiah = (value: number | string) => {
+    const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+    }).format(number);
+  };
+
+  const unformatRupiah = (value: string) => {
+    return Number(value.replace(/\D/g, ''));
+  };
+
+  const resetForm = () => {
+    pembiayaanState.create.form = {
+      name: "",
+      value: 0,
+    }
+  }
+
+  const handleSubmit = async () => {
+    await pembiayaanState.create.submit();
+    resetForm()
+    router.push("/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan")
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Jenis Pembiayaan</Title>
+          <TextInput
+            value={pembiayaanState.create.form.name}
+            onChange={(val) => {
+              pembiayaanState.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Jenis Pembiayaan</Text>}
+            placeholder='Masukkan nama jenis pembiayaan'
+          />
+          <TextInput
+            type='text'
+            value={formatRupiah(pembiayaanState.create.form.value)}
+            onChange={(val) => {
+              const raw = val.currentTarget.value;
+              const cleanValue = unformatRupiah(raw);
+              pembiayaanState.create.form.value = cleanValue;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nilai</Text>}
+            placeholder='Masukkan nilai'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreatePembiayaan;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/page.tsx

@@ -0,0 +1,138 @@
+'use client'
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import React, { useState } from 'react';
+import HeaderSearch from '../../../_com/header';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import PendapatanAsliDesa from '../../../_state/ekonomi/PADesa';
+import { useProxy } from 'valtio/utils';
+import { useRouter } from 'next/navigation';
+import { useShallowEffect } from '@mantine/hooks';
+import colors from '@/con/colors';
+import JudulList from '../../../_com/judulList';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function Pembiayaan() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Pembiayaan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPembiayaan search={search} />
+    </Box>
+  );
+}
+
+function ListPembiayaan({ search }: { search: string }) {
+  const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan)
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const formatRupiah = (value: number) => {
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+    }).format(value);
+  };
+
+  const totalPembiayaan = pembiayaanState.findMany.data.reduce((sum, item) => sum + item.value, 0);
+
+  const handleDelete = () => {
+    if (selectedId) {
+      pembiayaanState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      pembiayaanState.findMany.load()
+    }
+  }
+
+  useShallowEffect(() => {
+    pembiayaanState.findMany.load();
+  }, [])
+
+  const filteredData = (pembiayaanState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.value.toString().toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!pembiayaanState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Pembiayaan'
+          href='/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama</TableTh>
+              <TableTh>Nilai</TableTh>
+              <TableTh>Persentase</TableTh>
+              <TableTh>Edit</TableTh>
+              <TableTh>Delete</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>{formatRupiah(item.value)}</TableTd>
+                <TableTd>{((item.value / totalPembiayaan) * 100).toFixed(0)}%</TableTd>
+                <TableTd>
+                  <Button color='green' onClick={() => router.push(`/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/${item.id}`)}>
+                    <IconEdit size={20} />
+                  </Button>
+                </TableTd>
+                <TableTd>
+                  <Button
+                    color='red'
+                    disabled={pembiayaanState.delete.loading}
+                    onClick={() => {
+                      setSelectedId(item.id)
+                      setModalHapus(true)
+                    }}>
+                    <IconTrash size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+            <TableTr>
+              <TableTd colSpan={4}>
+                <Text fw={'bold'}>Total</Text>
+              </TableTd>
+              <TableTd>
+                {formatRupiah(pembiayaanState.findMany.data.reduce((total, item) => total + item.value, 0))}
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus pembiayaan ini?'
+      />
+    </Box>
+  )
+}
+
+export default Pembiayaan;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/[id]/page.tsx

@@ -0,0 +1,112 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditPendapatan() {
+  const pendapatanState = useProxy(PendapatanAsliDesa.pendapatan);
+  const router = useRouter();
+  const params = useParams();
+
+  const [formData, setFormData] = useState({
+    name: pendapatanState.update.form.name || '',
+    value: pendapatanState.update.form.value || '',
+  });
+
+  const formatRupiah = (value: number | string) => {
+    const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+    }).format(number);
+  };
+
+  const unformatRupiah = (value: string) => {
+    return Number(value.replace(/\D/g, ''));
+  };
+
+  useEffect(() => {
+    const loadPendapatan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await pendapatanState.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            value: data.value || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading pendapatan:", error);
+        toast.error("Gagal memuat data pendapatan");
+      }
+    };
+
+    loadPendapatan();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      pendapatanState.update.form = {
+        ...pendapatanState.update.form,
+        name: formData.name,
+        value: Number(formData.value),
+      }
+
+      await pendapatanState.update.update();
+      toast.success("Jenis Pendapatan berhasil diperbarui!");
+      router.push("/admin/ekonomi/PADesa-pendapatan-asli-desa/pendapatan");
+    } catch (error) {
+      console.error("Error updating jenis pendapatan:", error);
+      toast.error("Terjadi kesalahan saat memperbarui jenis pendapatan");
+    }
+  }
+
+  return (
+    <Box>
+    <Box mb={10}>
+      <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+        <IconArrowBack color={colors['blue-button']} size={25} />
+      </Button>
+    </Box>
+
+    <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+      <Stack gap={"xs"}>
+        <Title order={4}>Edit Jenis Pendapatan</Title>
+        <TextInput
+          value={formData.name}
+          onChange={(val) => {
+            setFormData({ ...formData, name: val.target.value });
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Nama Jenis Pendapatan</Text>}
+          placeholder='Masukkan nama Jenis Pendapatan'
+        />
+        <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nilai</Text>}
+          placeholder='Masukkan nilai'
+          value={formatRupiah(formData.value)}
+          onChange={(val) => {
+            const raw = val.currentTarget.value;
+            const cleanValue = unformatRupiah(raw);
+            setFormData({ ...formData, value: cleanValue });
+          }}
+        />
+        <Group>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+        </Group>
+      </Stack>
+    </Paper>
+  </Box>
+  );
+}
+
+export default EditPendapatan;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/create/page.tsx

@@ -0,0 +1,77 @@
+'use client'
+import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+function CreatePendapatan() {
+  const pendapatanState = useProxy(PendapatanAsliDesa.pendapatan)
+  const router = useRouter()
+
+  const formatRupiah = (value: number | string) => {
+    const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+    }).format(number);
+  };
+
+  const unformatRupiah = (value: string) => {
+    return Number(value.replace(/\D/g, ''));
+  };
+
+  const resetForm = () => {
+    pendapatanState.create.form = {
+      name: "",
+      value: 0,
+    }
+  }
+
+  const handleSubmit = async () => {
+    await pendapatanState.create.submit();
+    resetForm()
+    router.push("/admin/ekonomi/PADesa-pendapatan-asli-desa/pendapatan")
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Jenis Pendapatan</Title>
+          <TextInput
+            value={pendapatanState.create.form.name}
+            onChange={(val) => {
+              pendapatanState.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Jenis Pendapatan</Text>}
+            placeholder='Masukkan nama jenis pendapatan'
+          />
+          <TextInput
+            type='text'
+            value={formatRupiah(pendapatanState.create.form.value)}
+            onChange={(val) => {
+              const raw = val.currentTarget.value;
+              const cleanValue = unformatRupiah(raw);
+              pendapatanState.create.form.value = cleanValue;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nilai</Text>}
+            placeholder='Masukkan nilai'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreatePendapatan;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/page.tsx

@@ -0,0 +1,136 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import PendapatanAsliDesa from '../../../_state/ekonomi/PADesa';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+
+
+function Pendapatan() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Pendapatan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPendapatan search={search} />
+    </Box>
+  );
+}
+
+function ListPendapatan({ search }: { search: string }) {
+  const pendapatanState = useProxy(PendapatanAsliDesa.pendapatan)
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  
+  const formatRupiah = (value: number) => {
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+    }).format(value);
+  };
+  
+
+  const handleDelete = () => {
+    if (selectedId) {
+      pendapatanState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      pendapatanState.findMany.load()
+    }
+  }
+
+  useShallowEffect(() => {
+    pendapatanState.findMany.load();
+  }, [])
+
+  const filteredData = (pendapatanState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.value.toString().toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!pendapatanState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Pendapatan'
+          href='/admin/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama</TableTh>
+              <TableTh>Nilai</TableTh>
+              <TableTh>Edit</TableTh>
+              <TableTh>Delete</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>{formatRupiah(item.value)}</TableTd>
+                <TableTd>
+                  <Button color='green' onClick={() => router.push(`/admin/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/${item.id}`)}>
+                    <IconEdit size={20} />
+                  </Button>
+                </TableTd>
+                <TableTd>
+                  <Button
+                    color='red'
+                    disabled={pendapatanState.delete.loading}
+                    onClick={() => {
+                      setSelectedId(item.id)
+                      setModalHapus(true)
+                    }}>
+                    <IconTrash size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+            <TableTr>
+              <TableTd colSpan={4}>
+                <Text fw={'bold'}>Total</Text>
+              </TableTd>
+              <TableTd>
+                {formatRupiah(pendapatanState.findMany.data.reduce((total, item) => total + item.value, 0))}
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus pendapatan ini?'
+      />
+    </Box>
+  );
+}
+
+export default Pendapatan;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/[id]/page.tsx

@@ -0,0 +1,102 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import demografiPekerjaan from '../../../_state/ekonomi/demografi-pekerjaan';
+
+function EditDemografiPekerjaan() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const stateDemografi = useProxy(demografiPekerjaan)
+
+  const id = params.id
+
+  useEffect(() => {
+    if (!id) return;
+    stateDemografi.update.id = id;
+    stateDemografi.findUnique.load(id)
+      .then(() => {
+        const data = stateDemografi.findUnique.data;
+        if (data) {
+          stateDemografi.update.form = {
+            pekerjaan: String(data.pekerjaan || ''),
+            lakiLaki: Number(data.lakiLaki || 0),
+            perempuan: Number(data.perempuan || 0)
+          };
+        }
+      })
+      .catch(error => {
+        console.error('Error loading data:', error);
+        toast.error('Gagal memuat data');
+      });
+  }, [id]);
+
+  // Di handleSubmit, ubah menjadi:
+  const handleSubmit = async () => {
+    try {
+      stateDemografi.update.id = id;
+      await stateDemografi.update.submit();
+      toast.success('Data berhasil diperbarui');
+      router.push('/admin/ekonomi/demografi-pekerjaan');
+    } catch (error) {
+      console.error('Error updating data:', error);
+      toast.error('Gagal memperbarui data');
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+        <Stack>
+          <Title order={3}>Edit Demografi Pekerjaan</Title>
+          <TextInput
+            label="Pekerjaan"
+            placeholder="masukkan pekerjaan"
+            value={stateDemografi.update.form.pekerjaan}
+            onChange={(val) => {
+              stateDemografi.update.form.pekerjaan = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Jumlah Pekerja Laki - Laki"
+            type="number"
+            placeholder="masukkan jumlah pekerja laki - laki"
+            value={stateDemografi.update.form.lakiLaki}
+            onChange={(val) => {
+              stateDemografi.update.form.lakiLaki = Number(val.currentTarget.value);
+            }}
+          />
+          <TextInput
+            label="Jumlah Pekerja Perempuan"
+            type="number"
+            placeholder="masukkan jumlah pekerja perempuan"
+            value={stateDemografi.update.form.perempuan}
+            onChange={(val) => {
+              stateDemografi.update.form.perempuan = Number(val.currentTarget.value);
+            }}
+          />
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Simpan Perubahan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default EditDemografiPekerjaan;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/create/page.tsx

@@ -1,41 +1,90 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import demografiPekerjaan from '../../../_state/ekonomi/demografi-pekerjaan';
 
 function CreateDemografiPekerjaan() {
-  const router = useRouter();
+  const stateDemografi = useProxy(demografiPekerjaan);
+  const [chartData, setChartData] = useState<any[]>([]);
+  const router = useRouter()
+
+  const resetForm = () => {
+    stateDemografi.create.form = {
+      pekerjaan: "",
+      lakiLaki: 0,
+      perempuan: 0,
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await stateDemografi.create.create();
+    if (id) {
+      const idStr = String(id);
+      await stateDemografi.findUnique.load(idStr);
+      if (stateDemografi.findUnique.data) {
+        setChartData([stateDemografi.findUnique.data]);
+      }
+    }
+    resetForm();
+    router.push("/admin/ekonomi/demografi-pekerjaan");
+  }
   return (
     <Box>
       <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
         </Button>
       </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Demografi Pekerjaan</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pekerjaan</Text>}
-          placeholder='Masukkan pekerjaan'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Laki - Laki</Text>}
-          placeholder='Masukkan jumlah pekerja laki - laki'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Perempuan</Text>}
-          placeholder='Masukkan jumlah pekerja perempuan'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
+      <Box>
+        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+          <Title order={4}>Tambah Demografi Pekerjaan</Title>
+          <Stack gap={"xs"}>
+            <TextInput
+              label="Pekerjaan"
+              type="text"
+              value={stateDemografi.create.form.pekerjaan}
+              placeholder="Masukkan pekerjaan"
+              onChange={(val) => {
+                stateDemografi.create.form.pekerjaan = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Jumlah Pekerja Laki - Laki"
+              type="number"
+              value={stateDemografi.create.form.lakiLaki}
+              placeholder="Masukkan jumlah pekerja laki - laki"
+              onChange={(val) => {
+                stateDemografi.create.form.lakiLaki = Number(val.currentTarget.value);
+              }}
+            />
+            <TextInput
+              label="Jumlah Pekerja Perempuan"
+              type="number"
+              value={stateDemografi.create.form.perempuan}
+              placeholder="Masukkan jumlah pekerja perempuan"
+              onChange={(val) => {
+                stateDemografi.create.form.perempuan = Number(val.currentTarget.value);
+              }}
+            />
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                mt={10}
+                onClick={handleSubmit}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/detail/page.tsx

@@ -1,62 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailDemografiPekerjaan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Demografi Pekerjaan</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fw={"bold"}>Pekerjaan</Text>
-                <Text>Karyawan</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Jumlah Pekerja Laki - Laki</Text>
-                <Text>200</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Jumlah Pekerja Perempuan</Text>
-                <Text>100</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/ekonomi/demografi-pekerjaan/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailDemografiPekerjaan;
-

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/edit/page.tsx

@@ -1,42 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-
-function EditDemografiPekerjaan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Demografi Pekerjaan</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pekerjaan</Text>}
-          placeholder='Masukkan pekerjaan'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Laki - Laki</Text>}
-          placeholder='Masukkan jumlah pekerja laki - laki'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Perempuan</Text>}
-          placeholder='Masukkan jumlah pekerja perempuan'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditDemografiPekerjaan;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx

@@ -1,26 +1,83 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { BarChart } from '@mantine/charts';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
-import { useRouter } from 'next/navigation';
+import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+import demografiPekerjaan from '../../_state/ekonomi/demografi-pekerjaan';
 
 function DemografiPekerjaan() {
+  const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
         title='Demografi Pekerjaan'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListDemografiPekerjaan/>
+      <ListDemografiPekerjaan search={search} />
     </Box>
   );
 }
 
-function ListDemografiPekerjaan() {
+function ListDemografiPekerjaan({ search }: { search: string }) {
+  type DemografiPekerjaan = {
+    id: string;
+    pekerjaan: string;
+    lakiLaki: number;
+    perempuan: number;
+  }
+
   const router = useRouter();
+  const stateDemografi = useProxy(demografiPekerjaan)
+  const [chartData, setChartData] = useState<DemografiPekerjaan[]>([]);
+  const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const handleDelete = () => {
+    if (selectedId) {
+      stateDemografi.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      stateDemografi.findMany.load()
+    }
+  }
+
+  useShallowEffect(() => {
+    setMounted(true)
+    stateDemografi.findMany.load()
+  }, [])
+
+  useEffect(() => {
+    setMounted(true);
+    if (stateDemografi.findMany.data) {
+      setChartData(stateDemografi.findMany.data.map((item) => ({
+        id: item.id,
+        pekerjaan: item.pekerjaan,
+        lakiLaki: Number(item.lakiLaki),
+        perempuan: Number(item.perempuan),
+      })));
+    }
+  }, [stateDemografi.findMany.data]);
+
+  const filteredData = (stateDemografi.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.pekerjaan.toLowerCase().includes(keyword) ||
+      item.lakiLaki.toString().toLowerCase().includes(keyword) ||
+      item.perempuan.toString().toLowerCase().includes(keyword)
+    );
+  });
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -34,23 +91,75 @@ function ListDemografiPekerjaan() {
               <TableTh>Pekerjaan</TableTh>
               <TableTh>Jumlah Pekerja Laki - Laki</TableTh>
               <TableTh>Jumlah Pekerja Perempuan</TableTh>
-              <TableTh>Detail</TableTh>
-              </TableTr>
+              <TableTh>Edit</TableTh>
+              <TableTh>Delete</TableTh>
+            </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
-              <TableTd>Karyawan</TableTd>
-              <TableTd>200</TableTd>
-              <TableTd>100</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/ekonomi/demografi-pekerjaan/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.pekerjaan}</TableTd>
+                <TableTd>{item.lakiLaki}</TableTd>
+                <TableTd>{item.perempuan}</TableTd>
+                <TableTd>
+                  <Button color='green' onClick={() => router.push(`/admin/ekonomi/demografi-pekerjaan/${item.id}`)}>
+                    <IconEdit size={20} />
+                  </Button>
+                </TableTd>
+                <TableTd>
+                  <Button
+                    color='red'
+                    disabled={stateDemografi.delete.loading}
+                    onClick={() => {
+                      setSelectedId(item.id)
+                      setModalHapus(true)
+                    }}>
+                    <IconTrash size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
-        </Table>  
+        </Table>
       </Paper>
+
+      {/* Chart */}
+      {!mounted && !chartData ? (
+        <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
+            <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+          </Paper>
+        </Box>
+      ) : (
+        <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Title pb={10} order={4}>Data Kelahiran & Kematian</Title>
+            {mounted && chartData.length > 0 && (
+              <Box w={{ base: '100%', md: '30%' }}>
+                <BarChart
+                  h={450}
+                  data={chartData}
+                  dataKey="pekerjaan"
+                  type="stacked"
+                  series={[
+                    { name: 'lakiLaki', color: 'red.6', label: 'Laki - Laki' },
+                    { name: 'perempuan', color: 'orange.6', label: 'Perempuan' },
+                  ]}
+                />
+              </Box>
+            )}
+          </Paper>
+        </Box>
+      )}
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus demografi pekerjaan ini?'
+      />
     </Box>
   );
 }

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/create/page.tsx

@@ -1,38 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-
-function CreateJumlahPendudukMiskin() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Jumlah Penduduk Miskin</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Tahun</Text>}
-          placeholder='Masukkan tahun'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Jumlah Penduduk Miskin</Text>}
-          placeholder='Masukkan jumlah penduduk miskin'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default CreateJumlahPendudukMiskin;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/detail/page.tsx

@@ -1,58 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailJumlahPendudukMiskin() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Jumlah Penduduk Miskin</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fw={"bold"}>Tahun</Text>
-                <Text>2024</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Jumlah Penduduk Miskin</Text>
-                <Text>100</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-miskin-2024-2025/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailJumlahPendudukMiskin;
-

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/edit/page.tsx

@@ -1,38 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-
-function EditJumlahPendudukMiskin() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Jumlah Penduduk Miskin</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Tahun</Text>}
-          placeholder='Masukkan tahun'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Jumlah Penduduk Miskin</Text>}
-          placeholder='Masukkan jumlah penduduk miskin'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditJumlahPendudukMiskin;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/page.tsx

@@ -1,56 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
-import { useRouter } from 'next/navigation';
-
-function JumlahPendudukMiskin() {
-  return (
-    <Box>
-      <HeaderSearch
-        title='Jumlah Penduduk Miskin'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-      />
-      <ListJumlahPendudukMiskin/>
-    </Box>
-  );
-}
-
-function ListJumlahPendudukMiskin() {
-  const router = useRouter();
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Jumlah Penduduk Miskin'
-          href='/admin/ekonomi/jumlah-penduduk-miskin-2024-2025/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Tahun</TableTh>
-              <TableTh>Jumlah Penduduk Miskin</TableTh>
-              <TableTh>Detail</TableTh>
-              </TableTr>
-          </TableThead>
-          <TableTbody>
-            <TableTr>
-              <TableTd>2024</TableTd>
-              <TableTd>100</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-miskin-2024-2025/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          </TableTbody>
-        </Table>  
-      </Paper>
-    </Box>
-  );
-}
-
-export default JumlahPendudukMiskin;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/[id]/page.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import jumlahPendudukMiskin from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-penduduk-miskin';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function EditJumlahPendudukMiskin() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const stateJPM = useProxy(jumlahPendudukMiskin)
+
+  const id = params.id
+
+  // Load data saat komponen mount
+  useEffect(() => {
+    if (id) {
+      stateJPM.findUnique.load(id).then(() => {
+        const data = stateJPM.findUnique.data
+        if (data) {
+          stateJPM.update.form = {
+            year: data.year || 0,
+            totalPoorPopulation: data.totalPoorPopulation || 0,
+          }
+        }
+      })
+    }
+  }, [id])
+
+  const handleSubmit = async () => {
+    // Set the ID before submitting
+    stateJPM.update.id = id;
+    await stateJPM.update.submit();
+    router.push('/admin/ekonomi/jumlah-penduduk-miskin-2024-2025')
+  }
+return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+        <Stack>
+          <Title order={3}>Edit Jumlah Penduduk Miskin</Title>
+          <TextInput
+            label="Tahun"
+            placeholder="masukkan tahun"
+            value={stateJPM.update.form.year}
+            onChange={(val) => {
+              stateJPM.update.form.year = Number(val.currentTarget.value);
+            }}
+          />
+          <TextInput
+            label="Jumlah Penduduk Miskin"
+            type="number"
+            placeholder="masukkan jumlah penduduk miskin"
+            value={stateJPM.update.form.totalPoorPopulation}
+            onChange={(val) => {
+              stateJPM.update.form.totalPoorPopulation = Number(val.currentTarget.value);
+            }}
+          />
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default EditJumlahPendudukMiskin;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/create/page.tsx

@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import jumlahPendudukMiskin from '../../../_state/ekonomi/jumlah-penduduk-miskin';
+
+function CreateJumlahPendudukMiskin() {
+  const stateJPM = useProxy(jumlahPendudukMiskin);
+  const [chartData, setChartData] = useState<any[]>([]);
+  const router = useRouter()
+
+  const resetForm = () => {
+    stateJPM.create.form = {
+      year: 0,
+      totalPoorPopulation: 0,
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await stateJPM.create.create();
+    if (id) {
+      const idStr = String(id);
+      await stateJPM.findUnique.load(idStr);
+      if (stateJPM.findUnique.data) {
+        setChartData([stateJPM.findUnique.data]);
+      }
+    }
+    resetForm();
+    router.push("/admin/ekonomi/jumlah-penduduk-miskin-2024-2025");
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
+        </Button>
+      </Box>
+      <Box>
+        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+          <Title order={4}>Tambah Grafik Hasil Kepuasan Masyarakat</Title>
+          <Stack gap={"xs"}>
+            <TextInput
+              label="Tahun"
+              type="number"
+              value={stateJPM.create.form.year}
+              placeholder="Masukkan tahun"
+              onChange={(val) => {
+                stateJPM.create.form.year = Number(val.currentTarget.value);
+              }}
+            />
+            <TextInput
+              label="Jumlah Penduduk Miskin"
+              type="number"
+              value={stateJPM.create.form.totalPoorPopulation}
+              placeholder="Masukkan jumlah penduduk miskin"
+              onChange={(val) => {
+                stateJPM.create.form.totalPoorPopulation = Number(val.currentTarget.value);
+              }}
+            />
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                mt={10}
+                onClick={handleSubmit}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default CreateJumlahPendudukMiskin;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/page.tsx

@@ -0,0 +1,169 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import jumlahPendudukMiskin from '../../_state/ekonomi/jumlah-penduduk-miskin';
+import { Bar, BarChart, Legend, XAxis, YAxis, Tooltip } from 'recharts';
+import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+
+function JumlahPendudukMiskin() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Jumlah Penduduk Miskin'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListJumlahPendudukMiskin search={search} />
+    </Box>
+  );
+}
+
+function ListJumlahPendudukMiskin({ search }: { search: string }) {
+  type JPMGrafik = {
+    id: string;
+    year: number;
+    totalPoorPopulation: number;
+  }
+  const stateJPM = useProxy(jumlahPendudukMiskin);
+  const [chartData, setChartData] = useState<JPMGrafik[]>([]);
+  const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 768px)')
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+
+  const handleDelete = () => {
+    if (selectedId) {
+      stateJPM.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      stateJPM.findMany.load()
+    }
+  }
+
+  useShallowEffect(() => {
+    setMounted(true)
+    stateJPM.findMany.load()
+  }, [])
+
+  useEffect(() => {
+    setMounted(true);
+    if (stateJPM.findMany.data) {
+      setChartData(stateJPM.findMany.data.map((item) => ({
+        id: item.id,
+        year: Number(item.year),
+        totalPoorPopulation: Number(item.totalPoorPopulation),
+      })));
+    }
+  }, [stateJPM.findMany.data]);
+
+  const filteredData = (stateJPM.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.year.toString().toLowerCase().includes(keyword) ||
+      item.totalPoorPopulation.toString().toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stateJPM.findMany.data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Stack gap={'xs'}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulList
+            title='List Jumlah Penduduk Miskin'
+            href='/admin/ekonomi/jumlah-penduduk-miskin-2024-2025/create'
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Tahun</TableTh>
+                <TableTh>Jumlah Penduduk Miskin</TableTh>
+                <TableTh>Edit</TableTh>
+                <TableTh>Delete</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.year}</TableTd>
+                  <TableTd>{item.totalPoorPopulation}</TableTd>
+                  <TableTd>
+                    <Button color='green' onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-miskin-2024-2025/${item.id}`)}>
+                      <IconEdit size={20} />
+                    </Button>
+                  </TableTd>
+                  <TableTd>
+                    <Button
+                      color='red'
+                      disabled={stateJPM.delete.loading}
+                      onClick={() => {
+                        setSelectedId(item.id)
+                        setModalHapus(true)
+                      }}>
+                      <IconTrash size={20} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Paper>
+
+        {/* Chart */}
+        {!mounted && !chartData ? (
+          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Title pb={10} order={3}>Grafik Jumlah Penduduk Miskin</Title>
+              <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+            </Paper>
+          </Box>
+        ) : (
+          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Title pb={10} order={4}>Grafik Jumlah Penduduk Miskin</Title>
+              {mounted && chartData.length > 0 && (
+                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
+                  <XAxis dataKey="year" />
+                  <YAxis />
+                  <Tooltip />
+                  <Legend />
+                  <Bar dataKey="totalPoorPopulation" fill={colors['blue-button']} name="Jumlah Penduduk Miskin" />
+                </BarChart>
+              )}
+            </Paper>
+          </Box>
+        )}
+      </Stack>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus grafik jumlah penduduk miskin ini?'
+      />
+    </Box>
+  );
+}
+
+export default JumlahPendudukMiskin;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/_lib/layoutTabs.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "Pengangguran Berdasarkan Usia",
+            value: "pengangguranberdasarkanusia",
+            href: "/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia"
+        },
+        {
+            label: "Pengangguran Berdasarkan Pendidikan",
+            value: "pengangguranberdasarkanpendidikan",
+            href: "/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan"
+        },
+    ];
+    const curentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const handleTabChange = (value: string | null) => {
+        const tab = tabs.find(t => t.value === value)
+        if (tab) {
+            router.push(tab.href)
+        }
+        setActiveTab(value)
+    }
+
+    useEffect(() => {
+        const match = tabs.find(tab => tab.href === pathname)
+        if (match) {
+            setActiveTab(match.value)
+        }
+    }, [pathname])
+
+    return (
+        <Stack>
+            <Title order={3}>Jumlah Penduduk Usia Kerja yang Menganggur</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+                    ))}
+                </TabsList>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
+                    </TabsPanel>
+                ))}
+            </Tabs>
+            {children}
+        </Stack>
+    );
+}
+
+export default LayoutTabs;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/layout.tsx

@@ -0,0 +1,9 @@
+import LayoutTabs from "./_lib/layoutTabs";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <LayoutTabs>
+      {children}
+    </LayoutTabs>
+  );
+}

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/page.tsx

@@ -1,31 +0,0 @@
-import colors from "@/con/colors";
-import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from "@mantine/core";
-import PengangguranBerdasarkanUsia from "./pengangguran_berdasarkan_usia/page";
-import PengangguranBerdasarkanPendidikan from "./pengangguran_berdasarkan_pendidikan/page";
-
-export default function Page() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <Title order={3}>Jumlah Penduduk Usia Kerja yang Menganggur</Title>
-        <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Pengangguran Berdasarkan Usia"}>
-          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-            <TabsTab value={"Pengangguran Berdasarkan Usia"}>
-              Pengangguran Berdasarkan Usia
-            </TabsTab>
-            <TabsTab value={"Pengangguran Berdasarkan Pendidikan"}>
-              Pengangguran Berdasarkan Pendidikan
-            </TabsTab>
-          </TabsList>
-
-          <TabsPanel value={"Pengangguran Berdasarkan Usia"}>
-            <PengangguranBerdasarkanUsia />
-          </TabsPanel>
-          <TabsPanel value={"Pengangguran Berdasarkan Pendidikan"}>
-            <PengangguranBerdasarkanPendidikan/>
-          </TabsPanel>
-        </Tabs>
-      </Stack>
-    </Box>
-  );
-}

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/[id]/page.tsx

@@ -0,0 +1,109 @@
+'use client'
+import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function EditGrafikBerdasarkanPendidikan() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanPendidikan)
+  const id = params.id
+
+  useEffect(() => {
+    if(id){
+      stategrafik.findUnique.load(id).then(() => {
+        const data = stategrafik.findUnique.data
+        if(data){
+          stategrafik.update.form = {
+            SD: data.SD || '',
+            SMP: data.SMP || '',
+            SMA: data.SMA || '',
+            D3: data.D3 || '',
+            S1: data.S1 || '',
+          }
+        }
+      })
+    }
+  }, [id])
+
+  const handleSubmit = async () => {
+    stategrafik.update.id = id;
+    await stategrafik.update.submit();
+    router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan')
+  }
+
+  return (
+    <Box>
+    <Box mb={10}>
+      <Button variant="subtle" onClick={() => router.back()}>
+        <IconArrowBack size={20} />
+      </Button>
+    </Box>
+    <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+      <Stack>
+        <Title order={3}>Edit Grafik Pengangguran Berdasarkan Pendidikan</Title>
+        <TextInput
+          label="SD"
+          type='number'
+          placeholder="masukkan jumlah"
+          value={stategrafik.update.form.SD}
+          onChange={(val) => {
+            stategrafik.update.form.SD = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="SMP"
+          type="number"
+          placeholder="masukkan jumlah"
+          value={stategrafik.update.form.SMP}
+          onChange={(val) => {
+            stategrafik.update.form.SMP = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="SMA"
+          type="number"
+          placeholder="masukkan jumlah"
+          value={stategrafik.update.form.SMA}
+          onChange={(val) => {
+            stategrafik.update.form.SMA = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="D3"
+          type="number"
+          placeholder="masukkan jumlah"
+          value={stategrafik.update.form.D3}
+          onChange={(val) => {
+            stategrafik.update.form.D3 = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="S1"
+          type="number"
+          placeholder="masukkan jumlah"
+          value={stategrafik.update.form.S1}
+          onChange={(val) => {
+            stategrafik.update.form.S1 = val.currentTarget.value;
+          }}
+        />
+        <Button
+          mt={10}
+          bg={colors['blue-button']}
+          onClick={handleSubmit}
+        >
+          Submit
+        </Button>
+      </Stack>
+    </Paper>
+  </Box>
+  );
+}
+
+export default EditGrafikBerdasarkanPendidikan;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create/page.tsx

@@ -1,54 +1,111 @@
 'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
 import { useRouter } from 'next/navigation';
+import grafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
+import { useProxy } from 'valtio/utils';
+import { useState } from 'react';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Title, TextInput } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
 
 
-function CreatePengangguranBerdasarkanPendidikan() {
+function CreateGrafikBerdasarkanPendidikan() {
   const router = useRouter();
+  const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanPendidikan)
+  const [donutData, setDonutData] = useState<any[]>([]);
+
+  const resetForm = () => {
+    stategrafik.create.form = {
+      ...stategrafik.create.form,
+      SD: "",
+      SMP: "",
+      SMA: "",
+      D3: "",
+      S1: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await stategrafik.create.create();
+    if (id) {
+      const idStr = String(id);
+      await stategrafik.findUnique.load(idStr);
+      if (stategrafik.findUnique.data) {
+        setDonutData([stategrafik.findUnique.data]);
+      }
+    }
+    resetForm();
+    router.push("/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan")
+  }
   return (
     <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Pengangguran Berdasarkan Pendidikan</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SD</Text>}
-          placeholder='Masukkan pendidikan sd'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMP</Text>}
-          placeholder='Masukkan pendidikan smp'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMA</Text>}
-          placeholder='Masukkan pendidikan sma'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S1</Text>}
-          placeholder='Masukkan pendidikan s1'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S2</Text>}
-          placeholder='Masukkan pendidikan s2'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S3</Text>}
-          placeholder='Masukkan pendidikan s3'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
+       <Box mb={10}>
+         <Button variant="subtle" onClick={() => router.back()}>
+           <IconArrowBack size={20} />
+         </Button>
+       </Box>
+       <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+         <Stack>
+           <Title order={3}>Create Grafik Pengangguran Berdasarkan Pendidikan</Title>
+           <TextInput
+             label="SD"
+             type='number'
+             placeholder="masukkan jumlah"
+             value={stategrafik.create.form.SD}
+             onChange={(val) => {
+               stategrafik.create.form.SD = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="SMP"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stategrafik.create.form.SMP}
+             onChange={(val) => {
+               stategrafik.create.form.SMP = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="SMA"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stategrafik.create.form.SMA}
+             onChange={(val) => {
+               stategrafik.create.form.SMA = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="D3"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stategrafik.create.form.D3}
+             onChange={(val) => {
+               stategrafik.create.form.D3 = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="S1"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stategrafik.create.form.S1}
+             onChange={(val) => {
+               stategrafik.create.form.S1 = val.currentTarget.value;
+             }}
+           />
+           <Button
+             mt={10}
+             bg={colors['blue-button']}
+             onClick={handleSubmit}
+           >
+             Submit
+           </Button>
+         </Stack>
+       </Paper>
+     </Box>
   );
 }
 
-export default CreatePengangguranBerdasarkanPendidikan;
+export default CreateGrafikBerdasarkanPendidikan;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/detail/page.tsx

@@ -1,74 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailPengangguranBerdasarkanPendidikan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Pengangguran Berdasarkan Pendidikan</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-             <Box>
-             <Text fw={"bold"}>Pendidikan SD</Text>
-             <Text>50</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Pendidikan SMP</Text>
-             <Text>60</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Pendidikan SMA</Text>
-             <Text>80</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Pendidikan S1</Text>
-             <Text>40</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Pendidikan S2</Text>
-             <Text>20</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Pendidikan S3</Text>
-             <Text>10</Text>
-             </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailPengangguranBerdasarkanPendidikan;
-

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/edit/page.tsx

@@ -1,54 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-
-function EditPengangguranBerdasarkanPendidikan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Pengangguran Berdasarkan Pendidikan</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SD</Text>}
-          placeholder='Masukkan pendidikan sd'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMP</Text>}
-          placeholder='Masukkan pendidikan smp'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMA</Text>}
-          placeholder='Masukkan pendidikan sma'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S1</Text>}
-          placeholder='Masukkan pendidikan s1'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S2</Text>}
-          placeholder='Masukkan pendidikan s2'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S3</Text>}
-          placeholder='Masukkan pendidikan s3'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditPengangguranBerdasarkanPendidikan;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/page.tsx

@@ -1,49 +1,215 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import JudulListTab from '../../../_com/jusulListTab';
+import { useEffect, useState } from 'react';
+import { Cell, Pie, PieChart } from 'recharts';
+import { useProxy } from 'valtio/utils';
+import JudulListTab from '../../../_com/judulListTab';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import grafikNganggur from '../../../_state/ekonomi/usia-kerja-nganggur';
 
-function PengangguranBerdasarkanPendidikan() {
-  const router = useRouter();
+function GrafikBerdasarkanPendidikan() {
   return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-       <Stack gap={"xs"}>
-       <JudulListTab
-          title='Pengangguran Berdasarkan Pendidikan'
-          href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create'
-          placeholder='pencarian'
-          searchIcon={<IconSearch size={20} />}
-        />
-        <Title order={4}>List Pengangguran Berdasarkan Pendidikan</Title>
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Pendidikan SD</TableTh>
-              <TableTh>Pendidikan SMP</TableTh>
-              <TableTh>Pendidikan SMA</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            <TableTr>
-              <TableTd>80</TableTd>
-              <TableTd>40</TableTd>
-              <TableTd>20</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          </TableTbody>
-        </Table>
-       </Stack>
-      </Paper>
+    <Box>
+      <Stack gap={"xs"}>
+        <Title order={3}>Grafik Pengangguran Berdasarkan Pendidikan</Title>
+        <ListGrafikBerdasarkanPendidikan />
+      </Stack>
     </Box>
   );
 }
 
-export default PengangguranBerdasarkanPendidikan;
+function ListGrafikBerdasarkanPendidikan() {
+  const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanPendidikan)
+  const [donutData, setDonutData] = useState<any[]>([]);
+  const [mounted, setMounted] = useState(false);
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+  const [search, setSearch] = useState("");
+
+
+  const handleDelete = async () => {
+    if (selectedId) {
+      await stategrafik.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      stategrafik.findMany.load()
+    }
+  }
+
+  useShallowEffect(() => {
+    setMounted(true);
+    stategrafik.findMany.load()
+  }, []);
+
+  useEffect(() => {
+    if (stategrafik.findMany.data) {
+      const SD = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SD || 0), 0);
+      const SMP = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SMP || 0), 0);
+      const SMA = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SMA || 0), 0);
+      const D3 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.D3 || 0), 0);
+      const S1 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.S1 || 0), 0);
+      setDonutData([
+        { name: 'SD', value: SD, color: colors['blue-button'], key: 'SD' },
+        { name: 'SMP', value: SMP, color: '#10A85AFF', key: 'SMP' },
+        { name: 'SMA', value: SMA, color: '#C07B13FF', key: 'SMA' },
+        { name: 'D3', value: D3, color: '#1094A8FF', key: 'D3' },
+        { name: 'S1', value: S1, color: '#A83610FF', key: 'S1' },
+      ]);
+    }
+  }, [stategrafik.findMany.data])
+
+  const filteredData = (stategrafik.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.SD.toString().toLowerCase().includes(keyword) ||
+      item.SMP.toString().toLowerCase().includes(keyword) ||
+      item.SMA.toString().toLowerCase().includes(keyword) ||
+      item.D3.toString().toLowerCase().includes(keyword) ||
+      item.S1.toString().toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stategrafik.findMany.data) {
+    return (
+      <Box>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Paper bg={colors['white-1']} p={"md"}>
+          <JudulListTab
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            title='List Grafik Pengangguran Berdasarkan Pendidikan'
+            href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create'
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={16} />}
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>SD</TableTh>
+                <TableTh>SMP</TableTh>
+                <TableTh>SMA</TableTh>
+                <TableTh>D3</TableTh>
+                <TableTh>S1</TableTh>
+                <TableTh>Edit</TableTh>
+                <TableTh>Delete</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length === 0 ? (
+                <TableTr>
+                  <TableTd colSpan={6}>
+                    <Text ta='center' c='dimmed'>Belum ada data grafik responden</Text>
+                  </TableTd>
+                </TableTr>
+              ) : (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.SD}</TableTd>
+                    <TableTd>{item.SMP}</TableTd>
+                    <TableTd>{item.SMA}</TableTd>
+                    <TableTd>{item.D3}</TableTd>
+                    <TableTd>{item.S1}</TableTd>
+                    <TableTd>
+                      <Button color='green' onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/${item.id}`)}>
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color='red'
+                        disabled={stategrafik.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}>
+                        <IconTrash size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              )}
+            </TableTbody>
+
+          </Table>
+        </Paper>
+
+        {/* Chart */}
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title pb={10} order={3}>Grafik Pengangguran Berdasarkan Pendidikan</Title>
+              {mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
+                <PieChart
+                  width={800} height={300}
+                  data={donutData}
+                >
+                  <Pie
+                    dataKey="value"
+                    nameKey="name"
+                    data={donutData}
+                    cx={500}
+                    cy={150}
+                    innerRadius={60}
+                    outerRadius={115}
+                    label={true}
+                  >
+                    {donutData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                </PieChart>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={colors['blue-button']} w={20} h={20} />
+                  <Text>SD : {donutData.find((entry) => entry.name === 'SD')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#10A85AFF'} w={20} h={20} />
+                  <Text>SMP : {donutData.find((entry) => entry.name === 'SMP')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#C07B13FF'} w={20} h={20} />
+                  <Text>SMA : {donutData.find((entry) => entry.name === 'SMA')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#1094A8FF'} w={20} h={20} />
+                  <Text>D3 : {donutData.find((entry) => entry.name === 'D3')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#A83610FF'} w={20} h={20} />
+                  <Text>S1 : {donutData.find((entry) => entry.name === 'S1')?.value}</Text>
+                </Flex>
+              </Box>
+              ) : (
+                <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+              )}
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus grafik pengangguran berdasarkan pendidikan ini?'
+      />
+    </Box>
+  );
+}
+
+export default GrafikBerdasarkanPendidikan;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/[id]/page.tsx

@@ -0,0 +1,99 @@
+'use client'
+import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur)
+  const id = params.id
+
+  useEffect(() => {
+    if(id){
+      stategrafik.findUnique.load(id).then(() => {
+        const data = stategrafik.findUnique.data
+        if(data){
+          stategrafik.update.form = {
+            usia18_25: data.usia18_25 || '',
+            usia26_35: data.usia26_35 || '',
+            usia36_45: data.usia36_45 || '',
+            usia46_keatas: data.usia46_keatas || '',
+          }
+        }
+      })
+    }
+  }, [id])
+
+  const handleSubmit = async () => {
+    stategrafik.update.id = id;
+    await stategrafik.update.submit();
+    router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia')
+  }
+
+  return (
+    <Box>
+    <Box mb={10}>
+      <Button variant="subtle" onClick={() => router.back()}>
+        <IconArrowBack size={20} />
+      </Button>
+    </Box>
+    <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+      <Stack>
+        <Title order={3}>Edit Grafik Pengangguran Berdasarkan Usia Kerja</Title>
+        <TextInput
+          label="Usia 18 - 25"
+          type='number'
+          placeholder="masukkan jumlah"
+          value={stategrafik.update.form.usia18_25}
+          onChange={(val) => {
+            stategrafik.update.form.usia18_25 = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="Usia 26 - 35"
+          type="number"
+          placeholder="masukkan jumlah"
+          value={stategrafik.update.form.usia26_35}
+          onChange={(val) => {
+            stategrafik.update.form.usia26_35 = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="Usia 36 - 45"
+          type="number"
+          placeholder="masukkan jumlah"
+          value={stategrafik.update.form.usia36_45}
+          onChange={(val) => {
+            stategrafik.update.form.usia36_45 = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="Usia 46 +"
+          type="number"
+          placeholder="masukkan jumlah"
+          value={stategrafik.update.form.usia46_keatas}
+          onChange={(val) => {
+            stategrafik.update.form.usia46_keatas = val.currentTarget.value;
+          }}
+        />
+        <Button
+          mt={10}
+          bg={colors['blue-button']}
+          onClick={handleSubmit}
+        >
+          Submit
+        </Button>
+      </Stack>
+    </Paper>
+  </Box>
+  );
+}
+
+export default EditGrafikBerdasarkanUsiaKerjaYangMenganggur;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create/page.tsx

@@ -1,45 +1,101 @@
 'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
 import { useRouter } from 'next/navigation';
+import grafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
+import { useProxy } from 'valtio/utils';
+import { useState } from 'react';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Title, TextInput } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
 
-function CreatePengangguranBerdasarkanUsia() {
+
+function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
   const router = useRouter();
+  const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur)
+  const [donutData, setDonutData] = useState<any[]>([]);
+
+  const resetForm = () => {
+    stategrafik.create.form = {
+      ...stategrafik.create.form,
+      usia18_25: "",
+      usia26_35: "",
+      usia36_45: "",
+      usia46_keatas: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await stategrafik.create.create();
+    if (id) {
+      const idStr = String(id);
+      await stategrafik.findUnique.load(idStr);
+      if (stategrafik.findUnique.data) {
+        setDonutData([stategrafik.findUnique.data]);
+      }
+    }
+    resetForm();
+    router.push("/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia")
+  }
   return (
     <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Pengangguran Berdasarkan Usia</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Usia 18 - 25</Text>}
-          placeholder='Masukkan usia'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Usia 26 - 35</Text>}
-          placeholder='Masukkan usia'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Usia 36 - 45</Text>}
-          placeholder='Masukkan usia'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Usia 46 +</Text>}
-          placeholder='Masukkan usia'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
+       <Box mb={10}>
+         <Button variant="subtle" onClick={() => router.back()}>
+           <IconArrowBack size={20} />
+         </Button>
+       </Box>
+       <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+         <Stack>
+           <Title order={3}>Create Grafik Pengangguran Berdasarkan Usia Kerja</Title>
+           <TextInput
+             label="Usia 18 - 25"
+             type='number'
+             placeholder="masukkan jumlah"
+             value={stategrafik.create.form.usia18_25}
+             onChange={(val) => {
+               stategrafik.create.form.usia18_25 = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="Usia 26 - 35"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stategrafik.create.form.usia26_35}
+             onChange={(val) => {
+               stategrafik.create.form.usia26_35 = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="Usia 36 - 45"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stategrafik.create.form.usia36_45}
+             onChange={(val) => {
+               stategrafik.create.form.usia36_45 = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="Usia 46 +"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stategrafik.create.form.usia46_keatas}
+             onChange={(val) => {
+               stategrafik.create.form.usia46_keatas = val.currentTarget.value;
+             }}
+           />
+           <Button
+             mt={10}
+             bg={colors['blue-button']}
+             onClick={handleSubmit}
+           >
+             Submit
+           </Button>
+         </Stack>
+       </Paper>
+     </Box>
   );
 }
 
-export default CreatePengangguranBerdasarkanUsia;
+export default CreateGrafikBerdasarkanUsiaKerjaYangMenganggur;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/detail/page.tsx

@@ -1,70 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailPengangguranBerdasarkanUsia() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Pengangguran Berdasarkan Usia</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fw={"bold"}>Usia 18 - 25</Text>
-                <Text>80</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Usia 26 - 35</Text>
-                <Text>40</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Usia 36 - 45</Text>
-                <Text>20</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Usia 46 +</Text>
-                <Text>10</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Total</Text>
-                <Text>150</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailPengangguranBerdasarkanUsia;
-

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/edit/page.tsx

@@ -1,47 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-
-
-function EditPengangguranBerdasarkanUsia() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Pengangguran Berdasarkan Usia</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Usia 18 - 25</Text>}
-          placeholder='Masukkan usia'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Usia 26 - 35</Text>}
-          placeholder='Masukkan usia'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Usia 36 - 45</Text>}
-          placeholder='Masukkan usia'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Usia 46 +</Text>}
-          placeholder='Masukkan usia'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditPengangguranBerdasarkanUsia;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/page.tsx

@@ -1,49 +1,206 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import JudulListTab from '../../../_com/jusulListTab';
+import { useEffect, useState } from 'react';
+import { Cell, Pie, PieChart } from 'recharts';
+import { useProxy } from 'valtio/utils';
+import JudulListTab from '../../../_com/judulListTab';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import grafikNganggur from '../../../_state/ekonomi/usia-kerja-nganggur';
 
-function PengangguranBerdasarkanUsia() {
-  const router = useRouter();
+function GrafikBerdasarkanUsiaKerjaYangMenganggur() {
   return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-       <Stack gap={"xs"}>
-       <JudulListTab
-          title='Pengangguran Berdasarkan Usia'
-          href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create'
-          placeholder='pencarian'
-          searchIcon={<IconSearch size={20} />}
-        />
-        <Title order={4}>List Pengangguran Berdasarkan Usia</Title>
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Usia 18 - 25</TableTh>
-              <TableTh>Usia 26 - 35</TableTh>
-              <TableTh>Usia 36 - 45</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            <TableTr>
-              <TableTd>80</TableTd>
-              <TableTd>40</TableTd>
-              <TableTd>20</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          </TableTbody>
-        </Table>
-       </Stack>
-      </Paper>
+    <Box>
+      <Stack gap={"xs"}>
+        <Title order={3}>Grafik Pengangguran Berdasarkan Usia Kerja</Title>
+        <ListGrafikBerdasarkanUsiaKerjaYangMenganggur />
+      </Stack>
     </Box>
   );
 }
 
-export default PengangguranBerdasarkanUsia;
+function ListGrafikBerdasarkanUsiaKerjaYangMenganggur() {
+  const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur)
+  const [donutData, setDonutData] = useState<any[]>([]);
+  const [mounted, setMounted] = useState(false);
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+  const [search, setSearch] = useState("");
+
+
+  const handleDelete = async () => {
+    if (selectedId) {
+      await stategrafik.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      stategrafik.findMany.load()
+    }
+  }
+
+  useShallowEffect(() => {
+    setMounted(true);
+    stategrafik.findMany.load()
+  }, []);
+
+  useEffect(() => {
+    if (stategrafik.findMany.data) {
+      const totalUsia18_25 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia18_25 || 0), 0);
+      const totalUsia26_35 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia26_35 || 0), 0);
+      const totalUsia36_45 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia36_45 || 0), 0);
+      const totalUsia46_keatas = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia46_keatas || 0), 0);
+      setDonutData([
+        { name: 'usia18_25', value: totalUsia18_25, color: colors['blue-button'], key: 'usia18_25' },
+        { name: 'usia26_35', value: totalUsia26_35, color: '#10A85AFF', key: 'usia26_35' },
+        { name: 'usia36_45', value: totalUsia36_45, color: '#C07B13FF', key: 'usia36_45' },
+        { name: 'usia46_keatas', value: totalUsia46_keatas, color: '#1094A8FF', key: 'usia46_keatas' },
+      ]);
+    }
+  }, [stategrafik.findMany.data])
+
+  const filteredData = (stategrafik.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.usia18_25.toString().toLowerCase().includes(keyword) ||
+      item.usia26_35.toString().toLowerCase().includes(keyword) ||
+      item.usia36_45.toString().toLowerCase().includes(keyword) ||
+      item.usia46_keatas.toString().toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stategrafik.findMany.data) {
+    return (
+      <Box>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Paper bg={colors['white-1']} p={"md"}>
+          <JudulListTab
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            title='List Pengangguran Berdasarkan Usia Kerja'
+            href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create'
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={16} />}
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Usia 18-25</TableTh>
+                <TableTh>Usia 26-35</TableTh>
+                <TableTh>Usia 36-45</TableTh>
+                <TableTh>Usia 46 +</TableTh>
+                <TableTh>Edit</TableTh>
+                <TableTh>Delete</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length === 0 ? (
+                <TableTr>
+                  <TableTd colSpan={6}>
+                    <Text ta='center' c='dimmed'>Belum ada data grafik responden</Text>
+                  </TableTd>
+                </TableTr>
+              ) : (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.usia18_25}</TableTd>
+                    <TableTd>{item.usia26_35}</TableTd>
+                    <TableTd>{item.usia36_45}</TableTd>
+                    <TableTd>{item.usia46_keatas}</TableTd>
+                    <TableTd>
+                      <Button color='green' onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/${item.id}`)}>
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color='red'
+                        disabled={stategrafik.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}>
+                        <IconTrash size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              )}
+            </TableTbody>
+
+          </Table>
+        </Paper>
+
+        {/* Chart */}
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title pb={10} order={3}>Grafik Pengangguran Berdasarkan Usia Kerja</Title>
+              {mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
+                <PieChart
+                  width={800} height={300}
+                  data={donutData}
+                >
+                  <Pie
+                    dataKey="value"
+                    nameKey="name"
+                    data={donutData}
+                    cx={500}
+                    cy={150}
+                    innerRadius={60}
+                    outerRadius={115}
+                    label={true}
+                  >
+                    {donutData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                </PieChart>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={colors['blue-button']} w={20} h={20} />
+                  <Text>Usia 18-25 : {donutData.find((entry) => entry.name === 'usia18_25')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#10A85AFF'} w={20} h={20} />
+                  <Text>Usia 26-35 : {donutData.find((entry) => entry.name === 'usia26_35')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#C07B13FF'} w={20} h={20} />
+                  <Text>Usia 36-45 : {donutData.find((entry) => entry.name === 'usia36_45')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#1094A8FF'} w={20} h={20} />
+                  <Text>Usia 46 + : {donutData.find((entry) => entry.name === 'usia46_keatas')?.value}</Text>
+                </Flex>
+              </Box>
+              ) : (
+                <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+              )}
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus grafik pengangguran berdasarkan usia kerja ini?'
+      />
+    </Box>
+  );
+}
+
+export default GrafikBerdasarkanUsiaKerjaYangMenganggur;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/create/page.tsx

@@ -1,45 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-function CreateJumlahPengangguran() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Jumlah Pengangguran</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pengangguran Terdidik</Text>}
-          placeholder='Masukkan pengangguran terdidik'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Usia Produktif</Text>}
-          placeholder='Masukkan usia produktif'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Sedang Mencari Kerja</Text>}
-          placeholder='Masukkan sedang mencari kerja'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pengangguran Tidak Terdidik</Text>}
-          placeholder='Masukkan pengangguran tidak terdidik'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default CreateJumlahPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/detail/page.tsx

@@ -1,66 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailJumlahPengangguran() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Jumlah Pengangguran</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-             <Box>
-             <Text fw={"bold"}>Pengangguran Terdidik</Text>
-             <Text>100</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Usia Produktif</Text>
-             <Text>200</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Sedang Mencari Kerja</Text>
-             <Text>300</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Pengangguran Tidak Terdidik</Text>
-             <Text>30</Text>
-             </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/ekonomi/jumlah-pengangguran-2024-2025/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailJumlahPengangguran;
-

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/edit/page.tsx

@@ -1,45 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-function EditJumlahPengangguran() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Jumlah Pengangguran</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pengangguran Terdidik</Text>}
-          placeholder='Masukkan pengangguran terdidik'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Usia Produktif</Text>}
-          placeholder='Masukkan usia produktif'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Sedang Mencari Kerja</Text>}
-          placeholder='Masukkan sedang mencari kerja'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pengangguran Tidak Terdidik</Text>}
-          placeholder='Masukkan pengangguran tidak terdidik'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditJumlahPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/page.tsx

@@ -1,58 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
-import { useRouter } from 'next/navigation';
-
-function JumlahPengangguran() {
-  return (
-    <Box>
-      <HeaderSearch
-        title='Jumlah Pengangguran 2024-2025'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-      />
-      <ListJumlahPengangguran/>
-    </Box>
-  );
-}
-
-function ListJumlahPengangguran() {
-  const router = useRouter();
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Jumlah Pengangguran 2024-2025'
-          href='/admin/ekonomi/jumlah-pengangguran-2024-2025/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Pengangguran Terdidik</TableTh>
-              <TableTh>Usia Produktif</TableTh>
-              <TableTh>Sedang Mencari Kerja</TableTh>
-              <TableTh>Detail</TableTh>
-              </TableTr>
-          </TableThead>
-          <TableTbody>
-            <TableTr>
-              <TableTd>100</TableTd>
-              <TableTd>200</TableTd>
-              <TableTd>300</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/ekonomi/jumlah-pengangguran-2024-2025/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          </TableTbody>
-        </Table>  
-      </Paper>
-    </Box>
-  );
-}
-
-export default JumlahPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/edit/page.tsx

@@ -0,0 +1,185 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import jumlahPengangguranState from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-pengangguran';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditDetailDataPengangguran() {
+  const stateDetail = useProxy(jumlahPengangguranState.jumlahPengangguran)
+  const router = useRouter();
+  const params = useParams()
+
+  const [formData, setFormData] = useState({
+    month: stateDetail.update.form.month,
+    year: stateDetail.update.form.year,
+    totalUnemployment: stateDetail.update.form.totalUnemployment,
+    educatedUnemployment: stateDetail.update.form.educatedUnemployment,
+    uneducatedUnemployment: stateDetail.update.form.uneducatedUnemployment,
+    percentageChange: stateDetail.update.form.percentageChange || 0, // Ensure it's always a number
+  })
+
+  const calculateTotalAndChange = async () => {
+    const total = formData.educatedUnemployment + formData.uneducatedUnemployment;
+
+    // Ambil data bulan sebelumnya
+    const monthOrder = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
+    const currentIndex = monthOrder.findIndex(
+      (m) => m.toLowerCase() === formData.month.toLowerCase()
+    );
+
+    let percentageChange = 0;
+    if (currentIndex > 0) {
+      const prevMonth = monthOrder[currentIndex - 1];
+      const prev = await stateDetail.findByMonthYear.load({
+        month: prevMonth,
+        year: formData.year,
+      });
+
+      if (prev?.totalUnemployment) {
+        percentageChange = Number(
+          (((total - prev.totalUnemployment) / prev.totalUnemployment) * 100).toFixed(1)
+        );
+      }
+    }
+
+    setFormData({
+      ...formData,
+      totalUnemployment: total,
+      percentageChange,
+    });
+
+    return { total, percentageChange };
+  };
+
+  useEffect(() => {
+    const loadDetail = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+  
+      try {
+        await stateDetail.findUnique.load(id); // ambil by ID
+        const data = stateDetail.findUnique.data;
+  
+        if (data) {
+          // Set the ID for update
+          stateDetail.update.id = id;
+          
+          // Isi state Valtio untuk update
+          stateDetail.update.form = { 
+            ...data,
+            percentageChange: data.percentageChange || 0 // Ensure it's always a number
+          };
+  
+          // Isi local formData supaya input bisa dikontrol
+          setFormData({
+            month: data.month,
+            year: data.year,
+            totalUnemployment: data.totalUnemployment,
+            educatedUnemployment: data.educatedUnemployment,
+            uneducatedUnemployment: data.uneducatedUnemployment,
+            percentageChange: data.percentageChange || 0, // Ensure it's always a number
+          });
+        }
+      } catch (error) {
+        console.error("Error loading detail:", error);
+        toast.error("Gagal memuat data detail");
+      }
+    };
+  
+    loadDetail();
+  }, [params?.id]);
+  
+
+  const handleSubmit = async () => {
+    const { total, percentageChange } = await calculateTotalAndChange();
+    try {
+      stateDetail.update.form = {
+        ...formData,
+        totalUnemployment: total,
+        percentageChange,
+      };
+  
+      const success = await stateDetail.update.submit();
+      if (success) {
+        toast.success("Detail data pengangguran berhasil diperbarui!");
+        router.push("/admin/ekonomi/jumlah-pengangguran/detail-data-pengangguran");
+      }
+    } catch (error) {
+      console.error("Error updating:", error);
+      toast.error("Terjadi kesalahan saat memperbarui data");
+    }
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Title order={4}>Edit Detail Data Pengangguran</Title>
+        <Stack gap="xs">
+          <TextInput
+            label="Bulan"
+            value={formData.month}
+            placeholder="Contoh: Jan, Feb, Mar"
+            onChange={(val) => (setFormData({
+              ...formData,
+              month: val.currentTarget.value
+            }))}
+          />
+          <TextInput
+            label="Tahun"
+            type="number"
+            value={formData.year}
+            onChange={(val) => (setFormData({
+              ...formData,
+              year: Number(val.currentTarget.value)
+            }))}
+          />
+          <TextInput
+            label="Pengangguran Terdidik"
+            type="number"
+            value={formData.educatedUnemployment}
+            onChange={(val) => (setFormData({
+              ...formData,
+              educatedUnemployment: Number(val.currentTarget.value)
+            }))}
+          />
+          <TextInput
+            label="Pengangguran Tidak Terdidik"
+            type="number"
+            value={formData.uneducatedUnemployment}
+            onChange={(val) => (setFormData({
+              ...formData,
+              uneducatedUnemployment: Number(val.currentTarget.value)
+            }))}
+          />
+          <Text fz="sm" fw={500}>
+            Total Otomatis: {formData.totalUnemployment}
+          </Text>
+          <Text fz="sm" fw={500}>
+            Perubahan Otomatis:{" "}
+            {formData.percentageChange !== null
+              ? `${formData.percentageChange}%`
+              : '-'}
+          </Text>
+          <Group>
+            <Button bg={colors['blue-button']} mt={10} onClick={handleSubmit}>
+              Submit
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditDetailDataPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/page.tsx

@@ -0,0 +1,111 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import jumlahPengangguranState from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-pengangguran';
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function DetailJumlahPengangguran() {
+  const router = useRouter();
+  const params = useParams()
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const stateDetail = useProxy(jumlahPengangguranState.jumlahPengangguran)
+
+  useShallowEffect(() => {
+    stateDetail.findUnique.load(params?.id as string)
+  }, [params?.id])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateDetail.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/ekonomi/jumlah-pengangguran/detail-data-pengangguran")
+    }
+  }
+
+  if (!stateDetail.findUnique.data) {
+    return (
+      <Box>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Data Pengangguran</Text>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fw={"bold"}>Pengangguran Terdidik</Text>
+                <Text>{stateDetail.findUnique.data?.educatedUnemployment}</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Pengangguran Tidak Terdidik</Text>
+                <Text>{stateDetail.findUnique.data?.uneducatedUnemployment}</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Perubahan</Text>
+                <Text>{stateDetail.findUnique.data?.percentageChange}</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Tahun</Text>
+                <Text>{stateDetail.findUnique.data?.year}</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Bulan</Text>
+                <Text>{stateDetail.findUnique.data?.month}</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Total Pengangguran</Text>
+                <Text>{stateDetail.findUnique.data?.totalUnemployment}</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button
+                  onClick={() => {
+                    if (stateDetail.findUnique.data) {
+                      setSelectedId(stateDetail.findUnique.data.id);
+                      setModalHapus(true);
+                    }
+                  }}
+                  disabled={stateDetail.delete.loading || !stateDetail.findUnique.data}
+                  color={"red"}>
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push(`/admin/ekonomi/jumlah-pengangguran/detail-data-pengangguran/${stateDetail.findUnique.data?.id}/edit`)} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus data ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailJumlahPengangguran;
+

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/create/page.tsx

@@ -0,0 +1,139 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import jumlahPengangguranState from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-pengangguran';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function CreateJumlahPengangguran() {
+  const stateDetail = useProxy(jumlahPengangguranState.jumlahPengangguran)
+  const [chartData, setChartData] = useState<any[]>([]);
+  const router = useRouter();
+
+  const resetForm = () => {
+    stateDetail.create.form = {
+      month: "",
+      year: 0,
+      totalUnemployment: 0,
+      educatedUnemployment: 0,
+      uneducatedUnemployment: 0,
+      percentageChange: 0,
+    }
+  }
+
+  const calculateTotalAndChange = async () => {
+    const total =
+      stateDetail.create.form.educatedUnemployment +
+      stateDetail.create.form.uneducatedUnemployment;
+
+    stateDetail.create.form.totalUnemployment = total;
+
+    // Ambil data bulan sebelumnya
+    const monthOrder = [
+      'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
+      'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'
+    ];
+    const currentIndex = monthOrder.findIndex(
+      (m) => m.toLowerCase() === stateDetail.create.form.month.toLowerCase()
+    );
+
+    if (currentIndex > 0) {
+      const prevMonth = monthOrder[currentIndex - 1];
+      const prev = await stateDetail.findByMonthYear.load({
+        month: prevMonth,
+        year: stateDetail.create.form.year,
+      });
+
+      if (prev?.totalUnemployment) {
+        const change = ((total - prev.totalUnemployment) / prev.totalUnemployment) * 100;
+        stateDetail.create.form.percentageChange = Number(change.toFixed(1));
+      } else {
+        stateDetail.create.form.percentageChange = 0;
+      }
+    } else {
+      stateDetail.create.form.percentageChange = 0;
+    }
+  };
+
+  const handleSubmit = async () => {
+    await calculateTotalAndChange();
+    const id = await stateDetail.create.create();
+    if (id) {
+      await stateDetail.findUnique.load(String(id));
+      if (stateDetail.findUnique.data) {
+        setChartData([stateDetail.findUnique.data]);
+      }
+      resetForm();
+      router.push('/admin/ekonomi/jumlah-pengangguran/detail-data-pengangguran');
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Title order={4}>Tambah Detail Data Pengangguran</Title>
+        <Stack gap="xs">
+          <TextInput
+            label="Bulan"
+            value={stateDetail.create.form.month}
+            placeholder="Contoh: Jan, Feb, Mar"
+            onChange={(e) => (stateDetail.create.form.month = e.currentTarget.value)}
+          />
+          <TextInput
+            label="Tahun"
+            type="number"
+            value={stateDetail.create.form.year}
+            onChange={(e) =>
+              (stateDetail.create.form.year = Number(e.currentTarget.value))
+            }
+          />
+          <TextInput
+            label="Pengangguran Terdidik"
+            type="number"
+            value={stateDetail.create.form.educatedUnemployment}
+            onChange={(e) => {
+              stateDetail.create.form.educatedUnemployment = Number(
+                e.currentTarget.value,
+              );
+            }}
+          />
+          <TextInput
+            label="Pengangguran Tidak Terdidik"
+            type="number"
+            value={stateDetail.create.form.uneducatedUnemployment}
+            onChange={(e) => {
+              stateDetail.create.form.uneducatedUnemployment = Number(
+                e.currentTarget.value,
+              );
+            }}
+          />
+          <Text fz="sm" fw={500}>
+            Total Otomatis: {stateDetail.create.form.totalUnemployment}
+          </Text>
+          <Text fz="sm" fw={500}>
+            Perubahan Otomatis:{" "}
+            {stateDetail.create.form.percentageChange !== null
+              ? `${stateDetail.create.form.percentageChange}%`
+              : '-'}
+          </Text>
+          <Group>
+            <Button bg={colors['blue-button']} mt={10} onClick={handleSubmit}>
+              Submit
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateJumlahPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/page.tsx

@@ -0,0 +1,148 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+import { BarChart } from '@mantine/charts';
+import jumlahPengangguranState from '../../_state/ekonomi/jumlah-pengangguran';
+import JudulListTab from '../../_com/judulListTab';
+
+function DetailDataPengangguran() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Title order={3}>Detail Data Pengangguran</Title>
+        <ListDetailDataPengangguran />
+      </Stack>
+    </Box>
+  );
+}
+
+function ListDetailDataPengangguran() {
+
+  type DetailDataPengangguran = {
+    id: string;
+    month: string;
+    year: number;
+    educatedUnemployment: number;
+    uneducatedUnemployment: number;
+    percentageChange: number;
+    totalUnemployment: number;
+  }
+  const [chartData, setChartData] = useState<DetailDataPengangguran[]>([]);
+  const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
+  const stateDetail = useProxy(jumlahPengangguranState.jumlahPengangguran)
+  const router = useRouter();
+  const [search, setSearch] = useState("")
+
+  useShallowEffect(() => {
+    setMounted(true)
+    stateDetail.findMany.load()
+  }, [])
+
+  useEffect(() => {
+    setMounted(true);
+    if (stateDetail.findMany.data) {
+      setChartData(stateDetail.findMany.data.map((item) => ({
+        id: item.id,
+        month: item.month,
+        year: item.year,
+        educatedUnemployment: Number(item.educatedUnemployment),
+        uneducatedUnemployment: Number(item.uneducatedUnemployment),
+        percentageChange: Number(item.percentageChange),
+        totalUnemployment: Number(item.totalUnemployment),
+      })));
+    }
+  }, [stateDetail.findMany.data]);
+
+  const filteredData = (stateDetail.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.month.toLowerCase().includes(keyword) ||
+      item.year.toString().toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stateDetail.findMany.data) {
+    return (
+      <Box>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+  return (
+    <Box>
+      <Stack gap={"md"}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulListTab
+            title='List Detail Data Pengangguran'
+            href='/admin/ekonomi/jumlah-pengangguran/detail-data-pengangguran/create'
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={16} />}
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Bulan</TableTh>
+                <TableTh>Terdidik</TableTh>
+                <TableTh>Tidak Terdidik</TableTh>
+                <TableTh>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.month}</TableTd>
+                  <TableTd>{item.educatedUnemployment}</TableTd>
+                  <TableTd>{item.uneducatedUnemployment}</TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push(`/admin/ekonomi/jumlah-pengangguran/detail-data-pengangguran/${item.id}`)}>
+                      <IconDeviceImac size={20} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Paper>
+
+        {/* Chart */}
+        {!mounted && !chartData ? (
+          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
+              <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+            </Paper>
+          </Box>
+        ) : (
+          <Box style={{ width: '100%', minWidth: 300, height: 550, minHeight: 300 }}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Title pb={10} order={4}>Data Kelahiran & Kematian</Title>
+              {mounted && chartData.length > 0 && (
+                <Box w={{ base: '100%', md: '70%' }}>
+                  <BarChart
+                    h={450}
+                    data={chartData}
+                    dataKey="month"
+                    series={[
+                      { name: 'educatedUnemployment', color: 'red.6', label: 'Terdidik' },
+                      { name: 'uneducatedUnemployment', color: 'orange.6', label: 'Tidak Terdidik' },
+                    ]}
+                  />
+                </Box>
+              )}
+            </Paper>
+          </Box>
+        )}
+      </Stack>
+    </Box>
+  );
+}
+
+export default DetailDataPengangguran;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/[id]/edit/page.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import grafikSektorUnggulan from '@/app/admin/(dashboard)/_state/ekonomi/sektor-unggulan-desa';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function EditSektorUnggulanDesa() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const stateGrafik = useProxy(grafikSektorUnggulan)
+
+  const id = params.id
+
+  // Load data saat komponen mount
+  useEffect(() => {
+    if (id) {
+      stateGrafik.findUnique.load(id).then(() => {
+        const data = stateGrafik.findUnique.data
+        if (data) {
+          stateGrafik.update.form = {
+            name: data.name || '',
+            description: data.description || '',
+            value: data.value || 0,
+          }
+        }
+      })
+    }
+  }, [id])
+
+  const handleSubmit = async () => {
+    // Set the ID before submitting
+    stateGrafik.update.id = id;
+    await stateGrafik.update.submit();
+    router.push('/admin/ekonomi/sektor-unggulan-desa')
+  }
+return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+        <Stack>
+          <Title order={3}>Edit Sektor Unggulan Desa</Title>
+          <TextInput
+            label="Nama Sektor Unggulan"
+            placeholder="masukkan nama sektor unggulan"
+            value={stateGrafik.update.form.name}
+            onChange={(val) => {
+              stateGrafik.update.form.name = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Deskripsi Sektor Unggulan"
+            placeholder="masukkan deskripsi sektor unggulan"
+            value={stateGrafik.update.form.description}
+            onChange={(val) => {
+              stateGrafik.update.form.description = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Jumlah"
+            type="number"
+            placeholder="masukkan jumlah"
+            value={stateGrafik.update.form.value}
+            onChange={(val) => {
+              stateGrafik.update.form.value = Number(val.currentTarget.value);
+            }}
+          />
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default EditSektorUnggulanDesa;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/[id]/page.tsx

@@ -0,0 +1,105 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import grafikSektorUnggulan from '../../../_state/ekonomi/sektor-unggulan-desa';
+
+function DetailSektorUnggulanDesa() {
+  const stateGrafik = useProxy(grafikSektorUnggulan)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    stateGrafik.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateGrafik.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/ekonomi/sektor-unggulan-desa")
+    }
+  }
+
+  if (!stateGrafik.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Sektor Unggulan Desa</Text>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Sektor Unggulan</Text>
+                <Text fz={"lg"}>{stateGrafik.findUnique.data?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Sektor Unggulan</Text>
+                <Text fz={"lg"}>{stateGrafik.findUnique.data?.description}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Jumlah Sektor Unggulan</Text>
+                <Text fz={"lg"}>{stateGrafik.findUnique.data?.value}</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button
+                    onClick={() => {
+                      if (stateGrafik.findUnique.data) {
+                        setSelectedId(stateGrafik.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={!stateGrafik.findUnique.data}
+                    color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateGrafik.findUnique.data) {
+                        router.push(`/admin/ekonomi/sektor-unggulan-desa/${stateGrafik.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateGrafik.findUnique.data}
+                    color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus sektor unggulan ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailSektorUnggulanDesa;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/create/page.tsx

@@ -1,43 +1,89 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
-
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import grafikSektorUnggulan from '../../../_state/ekonomi/sektor-unggulan-desa';
 
 function CreateSektorUnggulanDesa() {
-  const router = useRouter();
+  const stateGrafik= useProxy(grafikSektorUnggulan);
+  const [chartData, setChartData] = useState<any[]>([]);
+  const router = useRouter()
+
+  const resetForm = () => {
+    stateGrafik.create.form = {
+      name: "",
+      description: "",
+      value: 0,
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await stateGrafik.create.create();
+    if (id) {
+      const idStr = String(id);
+      await stateGrafik.findUnique.load(idStr);
+      if (stateGrafik.findUnique.data) {
+        setChartData([stateGrafik.findUnique.data]);
+      }
+    }
+    resetForm();
+    router.push("/admin/ekonomi/sektor-unggulan-desa");
+  }
   return (
     <Box>
       <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
         </Button>
       </Box>
-
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Sektor Unggulan Desa</Title>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama Sektor Unggulan</Text>}
-            placeholder='Masukkan nama sektor unggulan'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Sektor Unggulan</Text>
-            <KeamananEditor
-              showSubmit={false}
+      <Box>
+        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+          <Title order={4}>Tambah Grafik Hasil Kepuasan Masyarakat</Title>
+          <Stack gap={"xs"}>
+            <TextInput
+              label="Nama Sektor Unggulan"
+              type="text"
+              value={stateGrafik.create.form.name}
+              placeholder="Masukkan nama sektor unggulan"
+              onChange={(val) => {
+                stateGrafik.create.form.name = val.currentTarget.value;
+              }}
             />
-          </Box>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Jumlah Sektor Unggulan</Text>}
-            placeholder='Masukkan jumlah sektor unggulan'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
+            <TextInput
+              label="Deskripsi Sektor Unggulan"
+              type="text"
+              value={stateGrafik.create.form.description}
+              placeholder="Masukkan deskripsi sektor unggulan"
+              onChange={(val) => {
+                stateGrafik.create.form.description = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Jumlah"
+              type="number"
+              value={stateGrafik.create.form.value}
+              placeholder="Masukkan jumlah"
+              onChange={(val) => {
+                stateGrafik.create.form.value = Number(val.currentTarget.value);
+              }}
+            />
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                mt={10}
+                onClick={handleSubmit}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
     </Box>
   );
 }

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/detail/page.tsx

@@ -1,62 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailSektorUnggulanDesa() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Sektor Unggulan Desa</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-             <Box>
-             <Text fw={"bold"}>Nama Sektor Unggulan</Text>
-             <Text>Petani</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Deskripsi Sektor Unggulan</Text>
-             <Text>BIBD</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Jumlah Sektor Unggulan</Text>
-             <Text>200</Text>
-             </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/ekonomi/sektor-unggulan-desa/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailSektorUnggulanDesa;
-

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/edit/page.tsx

@@ -1,45 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
-
-
-function EditSektorUnggulanDesa() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Sektor Unggulan Desa</Title>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama Sektor Unggulan</Text>}
-            placeholder='Masukkan nama sektor unggulan'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Sektor Unggulan</Text>
-            <KeamananEditor
-              showSubmit={false}
-            />
-          </Box>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Jumlah Sektor Unggulan</Text>}
-            placeholder='Masukkan jumlah sektor unggulan'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default EditSektorUnggulanDesa;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/page.tsx

@@ -1,26 +1,65 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
 import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import grafikSektorUnggulan from '../../_state/ekonomi/sektor-unggulan-desa';
+import { useProxy } from 'valtio/utils';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
 
 function SektorUnggulanDesa() {
+  const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
         title='Sektor Unggulan Desa'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListSektorUnggulanDesa/>
+      <ListSektorUnggulanDesa search={search} />
     </Box>
   );
 }
 
-function ListSektorUnggulanDesa() {
+function ListSektorUnggulanDesa({ search }: { search: string }) {
   const router = useRouter();
+  const state = useProxy(grafikSektorUnggulan);
+  const [chartData, setChartData] = useState<{id: string; name: string; description: string | null; value: number | null}[]>([]);
+  const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  const filteredData = (state.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      (item.value?.toString() || '').toLowerCase().includes(keyword)
+    );
+  });
+
+  useShallowEffect(() => {
+    setMounted(true)
+    state.findMany.load()
+  }, [])
+
+  useEffect(() => {
+    setMounted(true);
+    if (state.findMany.data) {
+      setChartData(state.findMany.data.map((item) => ({
+        id: item.id,
+        name: item.name,
+        description: item.description,
+        value: Number(item.value),
+      })));
+    }
+  }, [state.findMany.data]);
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -34,21 +73,48 @@ function ListSektorUnggulanDesa() {
               <TableTh>Nama Sektor Unggulan</TableTh>
               <TableTh>Deskripsi Sektor Unggulan</TableTh>
               <TableTh>Detail</TableTh>
-              </TableTr>
+            </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
-              <TableTd>Sektor 1</TableTd>
-              <TableTd>Deskripsi Sektor 1</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/ekonomi/sektor-unggulan-desa/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>{item.description}</TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/ekonomi/sektor-unggulan-desa/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
-        </Table>  
+        </Table>
       </Paper>
+
+      {/* Chart */}
+      {!mounted && !chartData ? (
+          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Title pb={10} order={3}>Grafik Hasil Kepuasan Masyarakat</Title>
+              <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+            </Paper>
+          </Box>
+        ) : (
+          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Title pb={10} order={4}>Grafik Sektor Unggulan Desa</Title>
+              {mounted && chartData.length > 0 && (
+                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
+                  <XAxis dataKey="name" />
+                  <YAxis />
+                  <Tooltip />
+                  <Legend />
+                  <Bar dataKey="value" fill={colors['blue-button']} name="Jumlah" />
+                </BarChart>
+              )}
+            </Paper>
+          </Box>
+        )}
     </Box>
   );
 }

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/edit/page.tsx

@@ -55,10 +55,6 @@ export default function EditPegawai() {
     isActive: true,
   });
 
-  const statusOptions = [
-    { value: true, label: 'Aktif' },
-    { value: false, label: 'Tidak Aktif' },
-  ];
 
   // Format date to YYYY-MM-DD for date input
   const formatDateForInput = (dateString: string) => {
@@ -120,6 +116,8 @@ export default function EditPegawai() {
         posisiId: formData.posisiId.trim(),
         isActive: formData.isActive,
       };
+    
+
 
       if (id && !stateOrganisasi.edit.id) {
         stateOrganisasi.edit.id = id;
@@ -134,6 +132,9 @@ export default function EditPegawai() {
       console.error("Error updating pegawai:", error);
       toast.error(error instanceof Error ? error.message : "Gagal memperbarui data pegawai");
     }
+
+
+
   };
 
   return (
@@ -254,16 +255,17 @@ export default function EditPegawai() {
           />
           <Select
             label="Status Pegawai"
-            data={statusOptions.map((s) => ({
-              value: String(s.value),
-              label: s.label,
-            }))}
-            value={String(formData.isActive)}
+            data={[
+              { value: 'true', label: 'Aktif' },
+              { value: 'false', label: 'Tidak Aktif' },
+            ]}
+            value={String(formData.isActive)} // 'true' atau 'false'
             onChange={(val) => {
               setFormData({ ...formData, isActive: val === 'true' });
             }}
           />
 
+
           <Group>
             <Button
               onClick={handleSubmit}

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/page.tsx

@@ -1,14 +1,14 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Badge, Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { Badge, Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, ThemeIcon } from '@mantine/core';
+import { IconCheck, IconDeviceImacCog, IconSearch, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import JudulList from '../../../_com/judulList';
 import strukturorganisasiState from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
-import { useState } from 'react';
 
 function Pegawai() {
   const [search, setSearch] = useState("");
@@ -30,52 +30,33 @@ function ListPegawai({ search }: { search: string }) {
   const stateOrganisasi = useProxy(strukturorganisasiState.pegawai);
   const router = useRouter();
 
-  useShallowEffect(() => {
-    const loadData = async () => {
-      console.log('1. Starting to load pegawai data...');
-      try {
-        // Clear existing data to ensure we see the loading state
-        stateOrganisasi.findMany.data = [];
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateOrganisasi.findMany;
 
-        // Load new data
-        await stateOrganisasi.findMany.load();
+  useEffect(() => {
+    load(page, 10);
+  }, [page]);
 
-        // Log the raw response and state
-        console.log('2. Raw API response:', stateOrganisasi.findMany.data);
-
-        // Type guard to ensure data is an array
-        const data = stateOrganisasi.findMany.data || [];
-        console.log(`3. Loaded ${data.length} pegawai records`);
-        if (data.length > 0) {
-          console.log('4. First record sample:', data[0]);
-        }
-      } catch (error) {
-        console.error('Error loading pegawai data:', error);
-        stateOrganisasi.findMany.data = [];
-      }
-    };
-
-    loadData();
-
-    // Cleanup function
-    return () => {
-      console.log('Cleanup: Unmounting component');
-    };
-  }, []);
-
-  const filteredData = (stateOrganisasi.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.namaLengkap?.toLowerCase().includes(keyword) ||
-      item.gelarAkademik?.toLowerCase().includes(keyword) ||
-      item.telepon?.toLowerCase().includes(keyword) ||
-      item.posisi?.nama?.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = useMemo(() => {
+    if (!data) return [];
+    return data.filter(item => {
+      const keyword = search.toLowerCase();
+      return (
+        item.namaLengkap?.toLowerCase().includes(keyword) ||
+        item.gelarAkademik?.toLowerCase().includes(keyword) ||
+        item.telepon?.toLowerCase().includes(keyword) ||
+        item.posisi?.nama?.toLowerCase().includes(keyword)
+      );
+    });
+  }, [data, search]); 
 
   // Handle loading state
-  if (stateOrganisasi.findMany.data === null) {
-    console.log('Showing loading state');
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton height={300} />
@@ -83,10 +64,7 @@ function ListPegawai({ search }: { search: string }) {
     );
   }
 
-  // Check if data is an empty array
-  const data = stateOrganisasi.findMany.data || [];
   if (data.length === 0) {
-    console.log('No data available to display');
     return (
       <Box py={10}>
         <Paper p="md" ta="center">
@@ -97,53 +75,84 @@ function ListPegawai({ search }: { search: string }) {
   }
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
+      <Paper bg={colors['white-1']} p={'md'} h={{base: 770, md: 650}}>
         <JudulList
           title='List Pegawai'
           href='/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create'
         />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama</TableTh>
-              <TableTh>Gelar Akademik</TableTh>
-              <TableTh>Telepon</TableTh>
-              <TableTh>Posisi</TableTh>
-              <TableTh>Aktif</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {(() => {
-              console.log('Rendering table with items:', stateOrganisasi.findMany.data);
-              return null;
-            })()}
-            {([...filteredData]
-              .sort((a, b) => {
-                if (a.isActive === b.isActive) {
-                  return a.namaLengkap.localeCompare(b.namaLengkap); // kalau status sama, urut nama
-                }
-                return Number(b.isActive) - Number(a.isActive); // aktif duluan
-              }) // Aktif di atas
-            ).map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.namaLengkap}</TableTd>
-                <TableTd>{item.gelarAkademik}</TableTd>
-                <TableTd>{item.telepon}</TableTd>
-                <TableTd>{item.posisi?.nama}</TableTd>
-                <TableTd>
-                  <Badge color={item.isActive ? "green" : "red"}>{item.isActive ? "Aktif" : "Tidak Aktif"}</Badge>
-                </TableTd>
-                <TableTd>
-                  <Button bg={"green"} onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${item.id}`)}>
-                    <IconDeviceImacCog size={25} />
-                  </Button>
-                </TableTd>
+        <Box style={{ overflowX: "auto" }}>
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama</TableTh>
+                <TableTh>Gelar Akademik</TableTh>
+                <TableTh>Telepon</TableTh>
+                <TableTh>Posisi</TableTh>
+                <TableTh>Aktif</TableTh>
+                <TableTh>Detail</TableTh>
               </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+            </TableThead>
+            <TableTbody>
+              {(() => {
+                console.log('Rendering table with items:', stateOrganisasi.findMany.data);
+                return null;
+              })()}
+              {([...filteredData]
+                .sort((a, b) => {
+                  if (a.isActive === b.isActive) {
+                    return a.namaLengkap.localeCompare(b.namaLengkap); // kalau status sama, urut nama
+                  }
+                  return Number(b.isActive) - Number(a.isActive); // aktif duluan
+                }) // Aktif di atas
+              ).map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.namaLengkap}</TableTd>
+                  <TableTd>{item.gelarAkademik}</TableTd>
+                  <TableTd>{item.telepon}</TableTd>
+                  <TableTd>{item.posisi?.nama}</TableTd>
+                  <TableTd>
+                    <Group gap="xs" wrap="nowrap">
+                      <Box visibleFrom="sm">
+                        <Badge color={item.isActive ? "green" : "red"}>
+                          {item.isActive ? "Aktif" : "Tidak Aktif"}
+                        </Badge>
+                      </Box>
+                      <Box hiddenFrom="sm">
+                        {item.isActive ? (
+                          <ThemeIcon color="green" variant="light" size="sm">
+                            <IconCheck size={16} />
+                          </ThemeIcon>
+                        ) : (
+                          <ThemeIcon color="red" variant="light" size="sm">
+                            <IconX size={16} />
+                          </ThemeIcon>
+                        )}
+                      </Box>
+                    </Group>
+                  </TableTd>
+                  <TableTd>
+                    <Button bg={"green"} onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${item.id}`)}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+     <Center>
+     <Pagination
+        value={page}
+        onChange={(newPage) => {
+          load(newPage, 10);
+          window.scrollTo(0, 0); 
+        }}
+        total={totalPages}
+        mt="md"
+        mb="md"
+      />
+     </Center>
     </Box>
   );
 }

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/page.tsx

@@ -1,15 +1,15 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
 import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import JudulList from '../../../_com/judulList';
-import { useProxy } from 'valtio/utils';
-import { useShallowEffect } from '@mantine/hooks';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import strukturorganisasiState from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
-import { useState } from 'react';
 
 function PosisiOrganisasi() {
   const [search, setSearch] = useState("");
@@ -33,7 +33,7 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
 
-  useShallowEffect(() => {
+  useEffect(() => {
     stateOrganisasi.findMany.load()
   }, [])
 

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/edit/page.tsx

@@ -0,0 +1,137 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import desaDigitalState from '@/app/admin/(dashboard)/_state/inovasi/desa-digital';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditPenghargaan() {
+  const stateDesaDigital = useProxy(desaDigitalState)
+  const router = useRouter()
+  const params = useParams()
+  const [previewImage, setPreviewImage] = useState<string | null>(null)
+  const [file, setFile] = useState<File | null>(null)
+  const [formData, setFormData] = useState({
+    name: stateDesaDigital.findUnique.data?.name || '',
+    deskripsi: stateDesaDigital.findUnique.data?.deskripsi || '',
+    imageId: stateDesaDigital.findUnique.data?.imageId || '',
+  })
+
+  useEffect(() => {
+    const loadPenghargaan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await stateDesaDigital.edit.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading desa digital smart village:", error);
+        toast.error("Gagal memuat data desa digital smart village");
+      }
+    };
+
+    loadPenghargaan();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      stateDesaDigital.edit.form = {
+        ...stateDesaDigital.edit.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        imageId: formData.imageId,
+      }
+
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        stateDesaDigital.edit.form.imageId = uploaded.id;
+      }
+
+      await stateDesaDigital.edit.update();
+      toast.success("Desa digital smart village berhasil diperbarui!");
+      router.push("/admin/inovasi/desa-digital-smart-village");
+    } catch (error) {
+      console.error("Error updating desa digital smart village:", error);
+      toast.error("Terjadi kesalahan saat memperbarui desa digital smart village");
+    }
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Desa Digital Smart Village</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
+
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+                stateDesaDigital.edit.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditPenghargaan;

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/page.tsx

@@ -0,0 +1,107 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import desaDigitalState from '../../../_state/inovasi/desa-digital';
+
+function DetailDesaDigital() {
+  const stateDesaDigital = useProxy(desaDigitalState)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const router = useRouter()
+  const params = useParams()
+
+  useShallowEffect(() => {
+    stateDesaDigital.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateDesaDigital.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/inovasi/desa-digital-smart-village")
+    }
+  }
+
+  if (!stateDesaDigital.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Desa Digital Smart Village</Text>
+          {stateDesaDigital.findUnique.data ? (
+            <Paper key={stateDesaDigital.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{stateDesaDigital.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateDesaDigital.findUnique.data?.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={stateDesaDigital.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (stateDesaDigital.findUnique.data) {
+                        setSelectedId(stateDesaDigital.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={stateDesaDigital.delete.loading || !stateDesaDigital.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateDesaDigital.findUnique.data) {
+                        router.push(`/admin/inovasi/desa-digital-smart-village/${stateDesaDigital.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateDesaDigital.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus desa digital smart village ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailDesaDigital;

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/create/page.tsx

@@ -1,48 +1,115 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import desaDigitalState from '../../../_state/inovasi/desa-digital';
 
 
 function CreateDesaDigital() {
-  const router = useRouter();
+  const stateDesaDigital = useProxy(desaDigitalState)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const router = useRouter()
+
+  const resetForm = () => {
+    stateDesaDigital.create.form = {
+      name: "",
+      deskripsi: "",
+      imageId: "",
+    }
+    setPreviewImage(null)
+    setFile(null)
+  }
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.error("Silahkan pilih file gambar terlebih dahulu")
+    }
+
+    try {
+      // Upload the image first
+      const uploadRes = await ApiFetch.api.fileStorage.create.post({
+        file: file,
+        name: file.name
+      })
+
+      const uploaded = uploadRes.data?.data
+      if (!uploaded?.id) {
+        return toast.error("Gagal upload gambar")
+      }
+
+      // Set the image ID in the form
+      stateDesaDigital.create.form.imageId = uploaded.id
+
+      // Submit the form
+      const success = await stateDesaDigital.create.create()
+      
+      if (success) {
+        resetForm()
+        router.push("/admin/inovasi/desa-digital-smart-village")
+      }
+    } catch (error) {
+      console.error("Error in handleSubmit:", error)
+      toast.error("Terjadi kesalahan saat menyimpan data")
+    }
+
+  }
   return (
     <Box>
       <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
         <Stack gap={"xs"}>
-          <Title order={4}>Create Desa Digital Smart Village</Title>
+          <Title order={3}>Create Desa Digital Smart Village</Title>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Inovasi</Text>}
-          placeholder='Masukkan nama inovasi'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Inovasi</Text>}
-          placeholder='Masukkan deskripsi singkat inovasi'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Image</Text>}
-          placeholder='Masukkan image'
+            value={stateDesaDigital.create.form.name}
+            onChange={(val) => {
+              stateDesaDigital.create.form.name = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Desa Digital Smart Village</Text>}
+            placeholder="masukkan nama desa digital smart village"
           />
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Inovasi</Text>
-            <KeamananEditor
-              showSubmit={false}
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <CreateEditor
+              value={stateDesaDigital.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                stateDesaDigital.create.form.deskripsi = htmlContent;
+              }}
             />
           </Box>
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Konten</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/detail/page.tsx

@@ -1,66 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconImageInPicture, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailDesaDigital() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Desa Digital Smart Village</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fw={"bold"}>Nama Inovasi</Text>
-                <Text>Pelayanan Admin Digital</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Deskripsi Singkat Inovasi</Text>
-                <Text>Deskripsi Singkat Inovasi</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Image</Text>
-                <IconImageInPicture size={20} />
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Deskripsi Inovasi</Text>
-                <Text>Deskripsi Inovasi</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/inovasi/desa-digital-smart-village/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailDesaDigital;
-

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/edit/page.tsx

@@ -1,49 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
-
-
-function EditDesaDigital() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Desa Digital Smart Village</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Inovasi</Text>}
-          placeholder='Masukkan nama inovasi'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Inovasi</Text>}
-          placeholder='Masukkan deskripsi singkat inovasi'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Image</Text>}
-          placeholder='Masukkan image'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Inovasi</Text>
-            <KeamananEditor
-              showSubmit={false}
-            />
-          </Box>
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditDesaDigital;