API & UI Menu Landing Page, Submenu Prestasi Desa

package.json

@@ -40,6 +40,7 @@
     "@tiptap/react": "^2.11.7",
     "@tiptap/starter-kit": "^2.11.7",
     "@types/bun": "^1.2.2",
+    "@types/leaflet": "^1.9.20",
     "@types/lodash": "^4.17.16",
     "add": "^2.0.6",
     "animate.css": "^4.1.1",
@@ -53,6 +54,7 @@
     "framer-motion": "^12.23.5",
     "get-port": "^7.1.0",
     "jotai": "^2.12.3",
+    "leaflet": "^1.9.4",
     "list": "^2.0.19",
     "lodash": "^4.17.21",
     "motion": "^12.4.1",
@@ -64,6 +66,7 @@
     "prisma": "^6.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-leaflet": "^5.0.0",
     "react-simple-toasts": "^6.1.0",
     "react-toastify": "^11.0.5",
     "readdirp": "^4.1.1",

prisma/data/landing-page/profile.json

@@ -0,0 +1,8 @@
+[
+    {
+      "id": "edit",
+      "name": "I.B Surya Prabhawa Manuaba, S.H., M.H.",
+      "position": "Perbekel Darmasaba periode 2021-2027"
+    }
+  ]
+  

prisma/data/lingkungan/edukasi-lingkungan/contoh-kegiatan-di-desa-darmasaba.json

@@ -0,0 +1,7 @@
+[
+    {
+      "id": "edit",
+      "judul": "Contoh Kegiatan di Desa Darmasaba",
+      "deskripsi": "<ul><li><p>Pelatihan membuat kompos dari sampah rumah tangga</p></li><li><p>Gerakan Jumat Bersih rutin</p></li><li><p>Workshop membuat ecobrick</p></li><li><p>Lomba kebersihan antar banjar</p></li><li><p>Sosialisasi lingkungan di sekolah dan posyandu</p></li></ul>"
+    }
+  ]

prisma/data/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan.json

@@ -0,0 +1,7 @@
+[
+  {
+    "id": "edit",
+    "judul": "Materi Edukasi yang Diberikan",
+    "deskripsi": "<ul><li><p>Pengelolaan Sampah (Pilah sampah organik dan anorganik)</p></li><li><p>Pencegahan pencemaran lingkungan (air, udara, dan tanah)</p></li><li><p>Pemanfaatan lahan hijau dan penghijauan desa</p></li><li><p>Daur ulang dan kreatifitas dari sampah</p></li><li><p>Bahaya pembakaran sampah sembarangan</p></li></ul>"
+  }
+]

prisma/data/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan.json

@@ -0,0 +1,7 @@
+[
+  {
+    "id": "edit",
+    "judul": "Tujuan Edukasi Lingkungan",
+    "deskripsi": "<ul><li><p>Meningkatkan kesadaran masyarakat tentang pentingnya lingkungan bersih dan sehat</p></li><li><p>Mendorong partisipasi warga dalam kegiatan pengelolaan sampah, penghijauan, dan konservasi</p></li><li><p>Mengurangi dampak negatif terhadap lingkungan dari kegiatan manusia</p></li><li><p>Membentuk generasi muda yang peduli terhadap isu-isu lingkungan</p></li></ul>"
+  }
+]

prisma/data/lingkungan/konservasi-adat-bali/bentuk-konservasi.json

@@ -0,0 +1,7 @@
+[
+    {
+      "id": "edit",
+      "judul": "Bentuk Konservasi Berdasarkan Adat",
+      "deskripsi": "<ul><li><p>Pelestarian Hutan Adat seperti Alas Pala Sangeh atau Wana Kerthi</p></li><li><p>Subak: Sistem pengelolaan irigasi tradisional yang menjunjung kebersamaan dan keberlanjutan</p></li><li><p>Hari Raya Tumpek Uduh: Perayaan khusus untuk menghormati pohon dan tumbuhan</p></li><li><p>Perarem dan Awig-Awig: Aturan adat desa yang mengatur larangan menebang pohon sembarangan, membuang limbah ke sungai, dll.</p></li><li><p>Ritual penyucian alam seperti Melasti, Piodalan Segara, dan lainnya</p></li></ul>"
+    }
+  ]

prisma/data/lingkungan/konservasi-adat-bali/filosofi-tri-hita.json

@@ -0,0 +1,7 @@
+[
+    {
+      "id": "edit",
+      "judul": "Filosofi Tri Hita Karuna",
+      "deskripsi": "<ul><li><p>Parahyangan: Hubungan manusia dengan Tuhan</p></li><li><p>Pawongan: Hubungan antar manusia</p></li><li><p>Palemahan: Hubungan manusia dengan alam</p></li></ul>"
+    }
+  ]

prisma/data/lingkungan/konservasi-adat-bali/nilai-konservasi-adat.json

@@ -0,0 +1,7 @@
+[
+  {
+    "id": "edit",
+    "judul": "Nilai Konservasi Adat",
+    "deskripsi": "<ul><li><p>Menjaga keseimbangan ekosistem</p></li><li><p>Melestarikan spiritualitas lokal dan kesucian alam</p></li><li><p>Menumbuhkan kesadaran kolektif untuk hidup selaras dengan lingkungan</p></li><li><p>Menjaga keberlangsungan sumber daya alam untuk generasi mendatang</p></li></ul>"
+  }
+]

prisma/migrations/20250718031959_nico_18_jul_25/migration.sql

@@ -0,0 +1,67 @@
+-- CreateTable
+CREATE TABLE "PengaduanMasyarakat" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "nomorTelepon" TEXT NOT NULL,
+    "nik" TEXT NOT NULL,
+    "judulPengaduan" TEXT NOT NULL,
+    "lokasiKejadian" TEXT NOT NULL,
+    "imageId" TEXT NOT NULL,
+    "deskripsiPengaduan" TEXT NOT NULL,
+    "jenisPengaduanId" 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 "PengaduanMasyarakat_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "JenisPengaduan" (
+    "id" TEXT NOT NULL,
+    "nama" 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 "JenisPengaduan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PengelolaanSampah" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "icon" 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 "PengelolaanSampah_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KeteranganBankSampahTerdekat" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "alamat" TEXT NOT NULL,
+    "namaTempatMaps" TEXT NOT NULL,
+    "linkPetunjukArah" TEXT NOT NULL,
+    "lat" DOUBLE PRECISION NOT NULL,
+    "lng" DOUBLE PRECISION 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 "KeteranganBankSampahTerdekat_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "PengaduanMasyarakat" ADD CONSTRAINT "PengaduanMasyarakat_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PengaduanMasyarakat" ADD CONSTRAINT "PengaduanMasyarakat_jenisPengaduanId_fkey" FOREIGN KEY ("jenisPengaduanId") REFERENCES "JenisPengaduan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20250721095104_nico_21_jul_25/migration.sql

@@ -0,0 +1,144 @@
+-- CreateTable
+CREATE TABLE "ProgramPenghijauan" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "icon" 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 "ProgramPenghijauan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DataLingkunganDesa" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "jumlah" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "icon" 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 "DataLingkunganDesa_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KegiatanDesa" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsiSingkat" TEXT NOT NULL,
+    "deskripsiLengkap" TEXT NOT NULL,
+    "tanggal" TIMESTAMP(3) NOT NULL,
+    "lokasi" TEXT NOT NULL,
+    "partisipan" INTEGER NOT NULL,
+    "imageId" 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,
+    "kategoriKegiatanId" TEXT NOT NULL,
+
+    CONSTRAINT "KegiatanDesa_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KategoriKegiatan" (
+    "id" TEXT NOT NULL,
+    "nama" 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 "KategoriKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TujuanEdukasiLingkungan" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" 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 "TujuanEdukasiLingkungan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "MateriEdukasiLingkungan" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" 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 "MateriEdukasiLingkungan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ContohEdukasiLingkungan" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" 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 "ContohEdukasiLingkungan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "FilosofiTriHita" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" 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 "FilosofiTriHita_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "BentukKonservasiBerdasarkanAdat" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" 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 "BentukKonservasiBerdasarkanAdat_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "NilaiKonservasiAdat" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" 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 "NilaiKonservasiAdat_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "KegiatanDesa" ADD CONSTRAINT "KegiatanDesa_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "KegiatanDesa" ADD CONSTRAINT "KegiatanDesa_kategoriKegiatanId_fkey" FOREIGN KEY ("kategoriKegiatanId") REFERENCES "KategoriKegiatan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20250722071634_nico_22_jul_25/migration.sql

@@ -0,0 +1,56 @@
+-- CreateTable
+CREATE TABLE "PejabatDesa" (
+    "id" TEXT NOT NULL,
+    "name" VARCHAR(255) NOT NULL,
+    "position" TEXT NOT NULL,
+    "imageId" TEXT,
+    "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 "PejabatDesa_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ProgramInovasi" (
+    "id" TEXT NOT NULL,
+    "name" VARCHAR(255) NOT NULL,
+    "description" TEXT,
+    "imageId" TEXT,
+    "link" VARCHAR(255),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "ProgramInovasi_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "MediaSosial" (
+    "id" TEXT NOT NULL,
+    "imageId" TEXT NOT NULL,
+    "iconUrl" VARCHAR(255),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3),
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "MediaSosial_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PejabatDesa_name_key" ON "PejabatDesa"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ProgramInovasi_name_key" ON "ProgramInovasi"("name");
+
+-- AddForeignKey
+ALTER TABLE "PejabatDesa" ADD CONSTRAINT "PejabatDesa_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ProgramInovasi" ADD CONSTRAINT "ProgramInovasi_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "MediaSosial" ADD CONSTRAINT "MediaSosial_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/schema.prisma

@@ -60,6 +60,7 @@ model FileStorage {
   deletedAt                DateTime?
   isActive                 Boolean                    @default(true)
   link                     String
+  category                 String // "image" / "document" / "other"
   Berita                   Berita[]
   PotensiDesa              PotensiDesa[]
   Posyandu                 Posyandu[]
@@ -86,6 +87,133 @@ model FileStorage {
   KolaborasiInovasi        KolaborasiInovasi[]
   InfoTekno                InfoTekno[]
   PengaduanMasyarakat      PengaduanMasyarakat[]
+  KegiatanDesa             KegiatanDesa[]
+  ProgramInovasi           ProgramInovasi[]
+  PejabatDesa              PejabatDesa[]
+  MediaSosial              MediaSosial[]
+  DesaAntiKorupsi          DesaAntiKorupsi[]
+  SDGSDesa                 SDGSDesa[]
+  APBDesImage              APBDes[]                   @relation("APBDesImage")
+  APBDesFile               APBDes[]                   @relation("APBDesFile")
+
+  PrestasiDesa PrestasiDesa[]
+}
+
+//========================================= MENU LANDING PAGE ========================================= //
+//========================================= PROFILE ========================================= //
+model PejabatDesa {
+  id        String       @id @default(cuid())
+  name      String       @unique @db.VarChar(255)
+  position  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)
+}
+
+model ProgramInovasi {
+  id          String       @id @default(cuid())
+  name        String       @unique @db.VarChar(255)
+  description String?      @db.Text
+  image       FileStorage? @relation(fields: [imageId], references: [id])
+  imageId     String?
+  link        String?      @db.VarChar(255)
+  createdAt   DateTime     @default(now())
+  updatedAt   DateTime     @updatedAt
+  deletedAt   DateTime?    @default(now())
+  isActive    Boolean      @default(true)
+}
+
+model MediaSosial {
+  id        String      @id @default(cuid())
+  name      String
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  iconUrl   String?     @db.VarChar(255)
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime?
+  isActive  Boolean     @default(true)
+}
+
+//========================================= PROFILE ========================================= //
+model DesaAntiKorupsi {
+  id         String                  @id @default(cuid())
+  name       String                  @unique
+  deskripsi  String                  @db.Text
+  kategori   KategoriDesaAntiKorupsi @relation(fields: [kategoriId], references: [id])
+  kategoriId String
+  file       FileStorage             @relation(fields: [fileId], references: [id])
+  fileId     String
+  createdAt  DateTime                @default(now())
+  updatedAt  DateTime                @updatedAt
+  deletedAt  DateTime                @default(now())
+  isActive   Boolean                 @default(true)
+}
+
+model KategoriDesaAntiKorupsi {
+  id              String            @id @default(cuid())
+  name            String            @unique
+  createdAt       DateTime          @default(now())
+  updatedAt       DateTime          @updatedAt
+  deletedAt       DateTime          @default(now())
+  isActive        Boolean           @default(true)
+  DesaAntiKorupsi DesaAntiKorupsi[]
+}
+
+//========================================= SDGS Desa ========================================= //
+model SDGSDesa {
+  id        String      @id @default(cuid())
+  name      String      @unique
+  jumlah    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)
+}
+
+//========================================= APBDes ========================================= //
+model APBDes {
+  id        String      @id @default(cuid())
+  name      String      @unique
+  jumlah    String
+  image     FileStorage @relation("APBDesImage", fields: [imageId], references: [id])
+  imageId   String
+  file      FileStorage @relation("APBDesFile", fields: [fileId], references: [id])
+  fileId    String
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}
+
+//========================================= PRESTASI DESA ========================================= //
+model PrestasiDesa {
+  id         String               @id @default(cuid())
+  name       String               @unique
+  deskripsi  String               @db.Text
+  kategori   KategoriPrestasiDesa @relation(fields: [kategoriId], references: [id])
+  kategoriId 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)
+}
+
+model KategoriPrestasiDesa {
+  id           String         @id @default(cuid())
+  name         String         @unique
+  createdAt    DateTime       @default(now())
+  updatedAt    DateTime       @updatedAt
+  deletedAt    DateTime       @default(now())
+  isActive     Boolean        @default(true)
+  PrestasiDesa PrestasiDesa[]
 }
 
 //========================================= MENU PPID ========================================= //
@@ -1447,6 +1575,7 @@ model JenisPengaduan {
   PengaduanMasyarakat PengaduanMasyarakat[]
 }
 
+// ========================================= LINGKUNGAN ========================================= //
 // ========================================= PENGELOLAAN SAMPAH ========================================= //
 model PengelolaanSampah {
   id        String   @id @default(cuid())
@@ -1457,3 +1586,134 @@ model PengelolaanSampah {
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
 }
+
+model KeteranganBankSampahTerdekat {
+  id               String   @id @default(cuid())
+  name             String
+  alamat           String
+  namaTempatMaps   String
+  linkPetunjukArah String
+  lat              Float
+  lng              Float
+  createdAt        DateTime @default(now())
+  updatedAt        DateTime @updatedAt
+  deletedAt        DateTime @default(now())
+  isActive         Boolean  @default(true)
+}
+
+// ========================================= PORGRAM PENGHIJAUAN ========================================= //
+model ProgramPenghijauan {
+  id        String   @id @default(cuid())
+  name      String
+  judul     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)
+}
+
+// ========================================= DATA LINGKUNGAN DESA ========================================= //
+model DataLingkunganDesa {
+  id        String   @id @default(cuid())
+  name      String
+  jumlah    String
+  deskripsi String   @db.Text //deskripsi panjang
+  icon      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= GOTONG ROYONG ========================================= //
+model KegiatanDesa {
+  id                 String           @id @default(uuid())
+  judul              String
+  deskripsiSingkat   String
+  deskripsiLengkap   String
+  tanggal            DateTime
+  lokasi             String
+  partisipan         Int
+  image              FileStorage      @relation(fields: [imageId], references: [id])
+  imageId            String
+  createdAt          DateTime         @default(now())
+  updatedAt          DateTime         @updatedAt
+  deletedAt          DateTime         @default(now())
+  isActive           Boolean          @default(true)
+  kategoriKegiatan   KategoriKegiatan @relation(fields: [kategoriKegiatanId], references: [id])
+  kategoriKegiatanId String
+}
+
+model KategoriKegiatan {
+  id           String         @id @default(cuid())
+  nama         String
+  createdAt    DateTime       @default(now())
+  updatedAt    DateTime       @updatedAt
+  deletedAt    DateTime       @default(now())
+  isActive     Boolean        @default(true)
+  KegiatanDesa KegiatanDesa[]
+}
+
+// ========================================= EDUKASI LINGKUNGAN ========================================= //
+model TujuanEdukasiLingkungan {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model MateriEdukasiLingkungan {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model ContohEdukasiLingkungan {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= KONSERVASI ADAT BALI ========================================= //
+model FilosofiTriHita {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model BentukKonservasiBerdasarkanAdat {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model NilaiKonservasiAdat {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}

prisma/seed.ts

@@ -22,6 +22,13 @@ import hubunganOrganisasi from "./data/ekonomi/struktur-organisasi/hubungan-orga
 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';
+import tujuanEdukasiLingkungan from './data/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan.json';
+import materiEdukasiLingkungan from './data/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan.json';
+import contohEdukasiLingkungan from './data/lingkungan/edukasi-lingkungan/contoh-kegiatan-di-desa-darmasaba.json';
+import nilaiKonservasiAdat from './data/lingkungan/konservasi-adat-bali/nilai-konservasi-adat.json';
+import bentukKonservasiBerdasarkanAdat from './data/lingkungan/konservasi-adat-bali/bentuk-konservasi.json';
+import filosofiTriHita from './data/lingkungan/konservasi-adat-bali/filosofi-tri-hita.json';
+import profilePejabatDesa from './data/landing-page/profile.json';
 
 (async () => {
   for (const l of layanan) {
@@ -455,6 +462,138 @@ import detailDataPengangguran from './data/ekonomi/jumlah-pengangguran/detail-da
     });
   }
   console.log("📊 detailDataPengangguran success ...");
+
+  for (const e of tujuanEdukasiLingkungan) {
+    await prisma.tujuanEdukasiLingkungan.upsert({
+      where: {
+        id: e.id,
+      },
+      update: {
+        judul: e.judul,
+        deskripsi: e.deskripsi,
+      },
+      create: {
+        id: e.id,
+        judul: e.judul,
+        deskripsi: e.deskripsi,
+      },
+    });
+  }
+
+  console.log("tujuan edukasi lingkungan success ...");
+
+  for (const m of materiEdukasiLingkungan) {
+    await prisma.materiEdukasiLingkungan.upsert({
+      where: {
+        id: m.id,
+      },
+      update: {
+        judul: m.judul,
+        deskripsi: m.deskripsi,
+      },
+      create: {
+        id: m.id,
+        judul: m.judul,
+        deskripsi: m.deskripsi,
+      },
+    });
+  }
+
+  console.log("materi edukasi lingkungan success ...");
+
+  for (const c of contohEdukasiLingkungan) {
+    await prisma.contohEdukasiLingkungan.upsert({
+      where: {
+        id: c.id,
+      },
+      update: {
+        judul: c.judul,
+        deskripsi: c.deskripsi,
+      },
+      create: {
+        id: c.id,
+        judul: c.judul,
+        deskripsi: c.deskripsi,
+      },
+    });
+  }
+
+  console.log("contoh edukasi lingkungan success ...");
+
+  for (const f of filosofiTriHita) {
+    await prisma.filosofiTriHita.upsert({
+      where: {
+        id: f.id,
+      },
+      update: {
+        judul: f.judul,
+        deskripsi: f.deskripsi,
+      },
+      create: {
+        id: f.id,
+        judul: f.judul,
+        deskripsi: f.deskripsi,
+      },
+    });
+  }
+
+  console.log("filosofi tri hita success ...");
+
+  for (const b of bentukKonservasiBerdasarkanAdat) {
+    await prisma.bentukKonservasiBerdasarkanAdat.upsert({
+      where: {
+        id: b.id,
+      },
+      update: {
+        judul: b.judul,
+        deskripsi: b.deskripsi,
+      },
+      create: {
+        id: b.id,
+        judul: b.judul,
+        deskripsi: b.deskripsi,
+      },
+    });
+  }
+
+  console.log("bentuk konservasi berdasarkan adat success ...");
+
+
+  for (const n of nilaiKonservasiAdat) {
+    await prisma.nilaiKonservasiAdat.upsert({
+      where: {
+        id: n.id,
+      },
+      update: {
+        judul: n.judul,
+        deskripsi: n.deskripsi,
+      },
+      create: {
+        id: n.id,
+        judul: n.judul,
+        deskripsi: n.deskripsi,
+      },
+    });
+  }
+
+  console.log("nilai konservasi adat success ...");
+
+  for (const p of profilePejabatDesa) {
+    await prisma.pejabatDesa.upsert({
+      where: { id: p.id },
+      update: {
+        name: p.name,
+        position: p.position,
+      },
+      create: {
+        id: p.id,
+        name: p.name,
+        position: p.position,
+      },
+    });
+  }
+  console.log("✅ profilePejabatDesa seeded without imageId (editable later via UI)");
+
 })()
   .then(() => prisma.$disconnect())
   .catch((e) => {

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

@@ -0,0 +1,59 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { MapContainer, TileLayer, Marker, useMapEvents } from 'react-leaflet';
+import { useEffect, useState } from 'react';
+import 'leaflet/dist/leaflet.css';
+import L, { LeafletMouseEvent } from 'leaflet';
+
+type Props = {
+  defaultCenter: { lat: number; lng: number };
+  onSelect?: (pos: { lat: number; lng: number }) => void;
+  readOnly?: boolean;
+};
+
+export default function LeafletMap({ defaultCenter, onSelect, readOnly = false }: Props) {
+  const [markerPos, setMarkerPos] = useState(defaultCenter);
+
+  useEffect(() => {
+    // Aman di sini, karena ini hanya jalan di client
+    delete (L.Icon.Default.prototype as any)._getIconUrl;
+    L.Icon.Default.mergeOptions({
+      iconRetinaUrl:
+        'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
+      iconUrl:
+        'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+      shadowUrl:
+        'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+    });
+  }, []);
+
+  function LocationMarker() {
+    useMapEvents({
+      click(e: LeafletMouseEvent) {
+        if (readOnly) return;
+
+        const { lat, lng } = e.latlng;
+        setMarkerPos({ lat, lng });
+        onSelect?.({ lat, lng });
+      },
+    });
+
+    return <Marker position={markerPos} />;
+  }
+
+  return (
+    <MapContainer
+      center={defaultCenter}
+      zoom={16}
+      scrollWheelZoom
+      style={{ height: '100%', width: '100%', zIndex: 0 }}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://osm.org/copyright">OpenStreetMap</a>'
+        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+      />
+      <LocationMarker />
+    </MapContainer>
+  );
+}

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

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { MapContainer, TileLayer, Marker, useMapEvents } from 'react-leaflet';
+import { useState, useEffect } from 'react';
+import 'leaflet/dist/leaflet.css';
+import L, { LeafletMouseEvent } from 'leaflet';
+
+type Props = {
+  initialPosition: { lat: number; lng: number };
+  onChange: (pos: { lat: number; lng: number }) => void;
+};
+
+export default function LeafletMapEdit({ initialPosition, onChange }: Props) {
+  const [markerPos, setMarkerPos] = useState(initialPosition);
+
+  // ✅ Pastikan icon config cuma jalan di client
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      delete (L.Icon.Default.prototype as any)._getIconUrl;
+      L.Icon.Default.mergeOptions({
+        iconRetinaUrl:
+          'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
+        iconUrl:
+          'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+        shadowUrl:
+          'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    setMarkerPos(initialPosition);
+  }, [initialPosition]);
+
+  function LocationMarker() {
+    useMapEvents({
+      click(e: LeafletMouseEvent) {
+        const { lat, lng } = e.latlng;
+        setMarkerPos({ lat, lng });
+        onChange({ lat, lng });
+      },
+    });
+
+    return <Marker position={markerPos} />;
+  }
+
+  return (
+    <MapContainer
+      center={markerPos}
+      zoom={16}
+      scrollWheelZoom
+      style={{ height: '100%', width: '100%', zIndex: 0 }}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://osm.org/copyright">OpenStreetMap</a>'
+        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+      />
+      <LocationMarker />
+    </MapContainer>
+  );
+}

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

@@ -4,12 +4,19 @@
 import { Box, rem, Select } from '@mantine/core';
 import {
   IconChartLine,
+  IconChristmasTreeFilled,
   IconClipboardTextFilled,
+  IconDroplet,
+  IconHome,
+  IconHomeEco,
   IconLeaf,
   IconRecycle,
   IconScale,
+  IconShieldFilled,
   IconTent,
   IconTrashFilled,
+  IconTree,
+  IconTrendingUp,
   IconTrophy,
   IconTruckFilled,
 } from '@tabler/icons-react';
@@ -25,6 +32,13 @@ const iconMap = {
   scale: { label: 'Scale', icon: IconScale },
   clipboard: { label: 'Clipboard', icon: IconClipboardTextFilled },
   trash: { label: 'Trash', icon: IconTrashFilled },
+  lingkunganSehat: {label: 'Lingkungan Sehat', icon: IconHomeEco},
+  sumberOksigen: {label: 'Sumber Oksigen', icon: IconChristmasTreeFilled},
+  ekonomiBerkelanjutan: {label: 'Ekonomi Berkelanjutan', icon: IconTrendingUp},
+  mencegahBencana: {label: 'Mencegah Bencana', icon: IconShieldFilled},
+  rumah: {label: 'Rumah', icon: IconHome},
+  pohon: {label: 'Pohon', icon: IconTree},
+  air: {label: 'Air', icon: IconDroplet}
 
 };
 

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

@@ -3,12 +3,19 @@
 import { Box, rem, Select } from '@mantine/core';
 import {
   IconChartLine,
+  IconChristmasTreeFilled,
   IconClipboardTextFilled,
+  IconDroplet,
+  IconHome,
+  IconHomeEco,
   IconLeaf,
   IconRecycle,
   IconScale,
+  IconShieldFilled,
   IconTent,
   IconTrashFilled,
+  IconTree,
+  IconTrendingUp,
   IconTrophy,
   IconTruckFilled,
 } from '@tabler/icons-react';
@@ -23,6 +30,13 @@ const iconMap = {
   scale: { label: 'Scale', icon: IconScale },
   clipboard: { label: 'Clipboard', icon: IconClipboardTextFilled },
   trash: { label: 'Trash', icon: IconTrashFilled },
+  lingkunganSehat: {label: 'Lingkungan Sehat', icon: IconHomeEco},
+  sumberOksigen: {label: 'Sumber Oksigen', icon: IconChristmasTreeFilled},
+  ekonomiBerkelanjutan: {label: 'Ekonomi Berkelanjutan', icon: IconTrendingUp},
+  mencegahBencana: {label: 'Mencegah Bencana', icon: IconShieldFilled},
+  rumah: {label: 'Rumah', icon: IconHome},
+  pohon: {label: 'Pohon', icon: IconTree},
+  air: {label: 'Air', icon: IconDroplet}
 };
 
 type IconKey = keyof typeof iconMap;

src/app/admin/(dashboard)/_state/landing-page/apbdes.ts

@@ -0,0 +1,242 @@
+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 templateapbDesaForm = z.object({
+  name: z.string().min(1, "Judul minimal 1 karakter"),
+  jumlah: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  imageId: z.string().min(1, "File minimal 1"),
+  fileId: z.string().min(1, "File minimal 1"),
+});
+
+const defaultapbdesForm = {
+  name: "",
+  jumlah: "",
+  imageId: "",
+  fileId: "",
+};
+
+const apbdes = proxy({
+  create: {
+    form: { ...defaultapbdesForm },
+    loading: false,
+    async create() {
+      const cek = templateapbDesaForm.safeParse(
+        apbdes.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        apbdes.create.loading = true;
+        const res = await ApiFetch.api.landingpage.apbdes[
+          "create"
+        ].post({
+          ...apbdes.create.form,
+        });
+
+        if (res.status === 200) {
+          apbdes.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        apbdes.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.APBDesGetPayload<{
+        include: {
+          image: true;
+          file: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.apbdes[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        apbdes.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.APBDesGetPayload<{
+      include: {
+        image: true;
+        file: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/apbdes/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          apbdes.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          apbdes.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        apbdes.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        apbdes.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/apbdes/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "apbdes berhasil dihapus");
+          await apbdes.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus apbdes");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus apbdes");
+      } finally {
+        apbdes.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultapbdesForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        apbdes.edit.loading = true;
+
+        const response = await fetch(`/api/landingpage/apbdes/${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,
+            jumlah: data.jumlah,
+            imageId: data.imageId,
+            fileId: data.fileId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading apbdes:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        apbdes.edit.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateapbDesaForm.safeParse(
+        apbdes.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        apbdes.edit.loading = true;
+        const response = await fetch(
+          `/api/landingpage/apbdes/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              jumlah: this.form.jumlah,
+              imageId: this.form.imageId,
+              fileId: this.form.fileId,
+            }),
+          }
+        );
+        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 apbdes");
+          await apbdes.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengupdate apbdes"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating apbdes:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate apbdes"
+        );
+        return false;
+      } finally {
+        apbdes.edit.loading = false;
+      }
+    },
+    reset() {
+      apbdes.edit.id = "";
+      apbdes.edit.form = { ...defaultapbdesForm };
+    },
+  },
+});
+
+export default apbdes;

src/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi.ts

@@ -0,0 +1,485 @@
+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 templateDesaAntiKorupsiForm = z.object({
+  name: z.string().min(1, "Judul minimal 1 karakter"),
+  deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  kategoriId: z.string().min(1, "Kategori minimal 1"),
+  fileId: z.string().min(1, "File minimal 1"),
+});
+
+const defaultDesaAntiKorupsiForm = {
+  name: "",
+  deskripsi: "",
+  kategoriId: "",
+  fileId: "",
+};
+
+const desaAntikorupsi = proxy({
+  create: {
+    form: { ...defaultDesaAntiKorupsiForm },
+    loading: false,
+    async create() {
+      const cek = templateDesaAntiKorupsiForm.safeParse(
+        desaAntikorupsi.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        desaAntikorupsi.create.loading = true;
+        const res = await ApiFetch.api.landingpage.desaantikorupsi[
+          "create"
+        ].post({
+          ...desaAntikorupsi.create.form,
+        });
+
+        if (res.status === 200) {
+          desaAntikorupsi.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        desaAntikorupsi.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.DesaAntiKorupsiGetPayload<{
+        include: {
+          file: true;
+          kategori: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.desaantikorupsi[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        desaAntikorupsi.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DesaAntiKorupsiGetPayload<{
+      include: {
+        file: true;
+        kategori: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/desaantikorupsi/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          desaAntikorupsi.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          desaAntikorupsi.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        desaAntikorupsi.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        desaAntikorupsi.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/desaantikorupsi/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "desa anti korupsi berhasil dihapus");
+          await desaAntikorupsi.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus desa anti korupsi");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus desa anti korupsi");
+      } finally {
+        desaAntikorupsi.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultDesaAntiKorupsiForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        desaAntikorupsi.edit.loading = true;
+
+        const response = await fetch(`/api/landingpage/desaantikorupsi/${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,
+            kategoriId: data.kategoriId,
+            fileId: data.fileId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading desa anti korupsi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        desaAntikorupsi.edit.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateDesaAntiKorupsiForm.safeParse(
+        desaAntikorupsi.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        desaAntikorupsi.edit.loading = true;
+        const response = await fetch(
+          `/api/landingpage/desaantikorupsi/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              deskripsi: this.form.deskripsi,
+              kategoriId: this.form.kategoriId,
+              fileId: this.form.fileId,
+            }),
+          }
+        );
+        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 anti korupsi");
+          await desaAntikorupsi.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengupdate desa anti korupsi"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating desa anti korupsi:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate desa anti korupsi"
+        );
+        return false;
+      } finally {
+        desaAntikorupsi.edit.loading = false;
+      }
+    },
+    reset() {
+      desaAntikorupsi.edit.id = "";
+      desaAntikorupsi.edit.form = { ...defaultDesaAntiKorupsiForm };
+    },
+  },
+});
+
+// ========================================= KATEGORI desa anti korupsi ========================================= //
+const kategoriDesaAntiKorupsiForm = z.object({
+  name: z.string().min(1, "Nama minimal 1 karakter"),
+});
+
+const kategoriDesaAntiKorupsiDefaultForm = {
+  name: "",
+};
+
+const kategoriDesaAntiKorupsi = proxy({
+  create: {
+    form: { ...kategoriDesaAntiKorupsiDefaultForm },
+    loading: false,
+    async create() {
+      const cek = kategoriDesaAntiKorupsiForm.safeParse(
+        kategoriDesaAntiKorupsi.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        kategoriDesaAntiKorupsi.create.loading = true;
+        const res = await ApiFetch.api.landingpage.kategoridak["create"].post(
+          kategoriDesaAntiKorupsi.create.form
+        );
+        if (res.status === 200) {
+          kategoriDesaAntiKorupsi.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        kategoriDesaAntiKorupsi.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<{
+      id: string;
+      name: string;
+    }> | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.kategoridak["find-many"].get();
+      if (res.status === 200) {
+        kategoriDesaAntiKorupsi.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KategoriDesaAntiKorupsiGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/kategoridak/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kategoriDesaAntiKorupsi.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kategoriDesaAntiKorupsi.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kategoriDesaAntiKorupsi.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kategoriDesaAntiKorupsi.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/kategoridak/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kategori desa anti korupsi berhasil dihapus");
+          await kategoriDesaAntiKorupsi.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kategori desa anti korupsi");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kategori desa anti korupsi");
+      } finally {
+        kategoriDesaAntiKorupsi.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...kategoriDesaAntiKorupsiDefaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/landingpage/kategoridak/${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,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kategori desa anti korupsi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = kategoriDesaAntiKorupsiForm.safeParse(
+        kategoriDesaAntiKorupsi.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        kategoriDesaAntiKorupsi.edit.loading = true;
+        const response = await fetch(
+          `/api/landingpage/kategoridak/${kategoriDesaAntiKorupsi.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: kategoriDesaAntiKorupsi.edit.form.name,
+            }),
+          }
+        );
+
+        // Clone the response to avoid 'body already read' error
+        const responseClone = response.clone();
+
+        try {
+          const result = await response.json();
+
+          if (!response.ok) {
+            console.error(
+              "Update failed with status:",
+              response.status,
+              "Response:",
+              result
+            );
+            throw new Error(
+              result?.message ||
+                `Gagal mengupdate kategori desa anti korupsi (${response.status})`
+            );
+          }
+
+          if (result.success) {
+            toast.success(
+              result.message ||
+                "Berhasil memperbarui kategori desa anti korupsi"
+            );
+            await kategoriDesaAntiKorupsi.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(
+              result.message || "Gagal mengupdate kategori desa anti korupsi"
+            );
+          }
+        } catch (error) {
+          // If JSON parsing fails, try to get the response text for better error messages
+          try {
+            const text = await responseClone.text();
+            console.error("Error response text:", text);
+            throw new Error(`Gagal memproses respons dari server: ${text}`);
+          } catch (textError) {
+            console.error("Error parsing response as text:", textError);
+            console.error("Original error:", error);
+            throw new Error("Gagal memproses respons dari server");
+          }
+        }
+      } catch (error) {
+        console.error("Error updating kategori desa anti korupsi:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate kategori desa anti korupsi"
+        );
+        return false;
+      } finally {
+        kategoriDesaAntiKorupsi.edit.loading = false;
+      }
+    },
+    reset() {
+      kategoriDesaAntiKorupsi.edit.id = "";
+      kategoriDesaAntiKorupsi.edit.form = {
+        ...kategoriDesaAntiKorupsiDefaultForm,
+      };
+    },
+  },
+});
+
+const korupsiState = proxy({
+  desaAntikorupsi,
+  kategoriDesaAntiKorupsi,
+});
+export default korupsiState;

src/app/admin/(dashboard)/_state/landing-page/prestasi-desa.ts

@@ -0,0 +1,486 @@
+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 templateprestasiDesaForm = z.object({
+  name: z.string().min(1, "Judul minimal 1 karakter"),
+  deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  imageId: z.string().min(1, "File minimal 1"),
+  kategoriId: z.string().min(1, "Kategori minimal 1 karakter"),
+});
+
+const defaultprestasiDesaForm = {
+  name: "",
+  deskripsi: "",
+  imageId: "",
+  kategoriId: "",
+};
+
+const prestasiDesa = proxy({
+  create: {
+    form: { ...defaultprestasiDesaForm },
+    loading: false,
+    async create() {
+      const cek = templateprestasiDesaForm.safeParse(
+        prestasiDesa.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        prestasiDesa.create.loading = true;
+        const res = await ApiFetch.api.landingpage.prestasidesa[
+          "create"
+        ].post({
+          ...prestasiDesa.create.form,
+        });
+
+        if (res.status === 200) {
+          prestasiDesa.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        prestasiDesa.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.PrestasiDesaGetPayload<{
+        include: {
+          image: true;
+          kategori: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.prestasidesa[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        prestasiDesa.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PrestasiDesaGetPayload<{
+      include: {
+        image: true;
+        kategori: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/prestasidesa/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          prestasiDesa.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          prestasiDesa.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        prestasiDesa.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        prestasiDesa.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/prestasidesa/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "prestasi desa berhasil dihapus");
+          await prestasiDesa.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus prestasi desa");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus prestasi desa");
+      } finally {
+        prestasiDesa.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultprestasiDesaForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        prestasiDesa.edit.loading = true;
+
+        const response = await fetch(`/api/landingpage/prestasidesa/${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,
+            kategoriId: data.kategoriId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading prestasi desa:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        prestasiDesa.edit.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateprestasiDesaForm.safeParse(
+        prestasiDesa.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        prestasiDesa.edit.loading = true;
+        const response = await fetch(
+          `/api/landingpage/prestasidesa/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              deskripsi: this.form.deskripsi,
+              imageId: this.form.imageId,
+              kategoriId: this.form.kategoriId,
+            }),
+          }
+        );
+        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 prestasi desa");
+          await prestasiDesa.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengupdate prestasi desa"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating prestasi desa:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate prestasi desa"
+        );
+        return false;
+      } finally {
+        prestasiDesa.edit.loading = false;
+      }
+    },
+    reset() {
+      prestasiDesa.edit.id = "";
+      prestasiDesa.edit.form = { ...defaultprestasiDesaForm };
+    },
+  },
+});
+
+// ========================================= KATEGORI kegiatan ========================================= //
+const kategoriPrestasiForm = z.object({
+  name: z.string().min(1, "Nama minimal 1 karakter"),
+});
+
+const kategoriPrestasiDefaultForm = {
+  name: "",
+};
+
+const kategoriPrestasi = proxy({
+  create: {
+    form: { ...kategoriPrestasiDefaultForm },
+    loading: false,
+    async create() {
+      const cek = kategoriPrestasiForm.safeParse(kategoriPrestasi.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        kategoriPrestasi.create.loading = true;
+        const res = await ApiFetch.api.landingpage.kategoriprestasi[
+          "create"
+        ].post(kategoriPrestasi.create.form);
+        if (res.status === 200) {
+          kategoriPrestasi.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        kategoriPrestasi.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<{
+      id: string;
+      name: string;
+    }> | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.kategoriprestasi[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        kategoriPrestasi.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KategoriPrestasiDesaGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/landingpage/kategoriprestasi/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          kategoriPrestasi.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kategoriPrestasi.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kategoriPrestasi.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kategoriPrestasi.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/kategoriprestasi/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kategori prestasi berhasil dihapus");
+          await kategoriPrestasi.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kategori prestasi");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kategori prestasi");
+      } finally {
+        kategoriPrestasi.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...kategoriPrestasiDefaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/landingpage/kategoriprestasi/${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,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kategori prestasi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = kategoriPrestasiForm.safeParse(kategoriPrestasi.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        kategoriPrestasi.edit.loading = true;
+        const response = await fetch(
+          `/api/landingpage/kategoriprestasi/${kategoriPrestasi.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: kategoriPrestasi.edit.form.name,
+            }),
+          }
+        );
+
+        // Clone the response to avoid 'body already read' error
+        const responseClone = response.clone();
+
+        try {
+          const result = await response.json();
+
+          if (!response.ok) {
+            console.error(
+              "Update failed with status:",
+              response.status,
+              "Response:",
+              result
+            );
+            throw new Error(
+              result?.message ||
+                `Gagal mengupdate kategori prestasi (${response.status})`
+            );
+          }
+
+          if (result.success) {
+            toast.success(
+              result.message || "Berhasil memperbarui kategori prestasi"
+            );
+            await kategoriPrestasi.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(
+              result.message || "Gagal mengupdate kategori prestasi"
+            );
+          }
+        } catch (error) {
+          // If JSON parsing fails, try to get the response text for better error messages
+          try {
+            const text = await responseClone.text();
+            console.error("Error response text:", text);
+            throw new Error(`Gagal memproses respons dari server: ${text}`);
+          } catch (textError) {
+            console.error("Error parsing response as text:", textError);
+            console.error("Original error:", error);
+            throw new Error("Gagal memproses respons dari server");
+          }
+        }
+      } catch (error) {
+        console.error("Error updating kategori prestasi:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate kategori prestasi"
+        );
+        return false;
+      } finally {
+        kategoriPrestasi.edit.loading = false;
+      }
+    },
+    reset() {
+      kategoriPrestasi.edit.id = "";
+      kategoriPrestasi.edit.form = { ...kategoriPrestasiDefaultForm };
+    },
+  },
+});
+
+const prestasiState = proxy({
+  prestasiDesa,
+  kategoriPrestasi,
+});
+
+export default prestasiState;

src/app/admin/(dashboard)/_state/landing-page/profile.ts

@@ -0,0 +1,634 @@
+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 templateProgramInovasi = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  description: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+  link: z.string().min(3, "Link minimal 3 karakter"),
+});
+
+type ProgramInovasiForm = Prisma.ProgramInovasiGetPayload<{
+  select: {
+    name: true;
+    description: true;
+    imageId: true;
+    link: true;
+  };
+}>;
+
+const programInovasi = proxy({
+  create: {
+    form: {} as ProgramInovasiForm,
+    loading: false,
+    async create() {
+      // Ensure all required fields are non-null
+      const formData = {
+        name: programInovasi.create.form.name || "",
+        description: programInovasi.create.form.description || "",
+        imageId: programInovasi.create.form.imageId || "",
+        link: programInovasi.create.form.link || "",
+      };
+
+      const cek = templateProgramInovasi.safeParse(formData);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        programInovasi.create.loading = true;
+        const res = await ApiFetch.api.landingpage.programinovasi[
+          "create"
+        ].post(formData);
+        if (res.status === 200) {
+          programInovasi.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        programInovasi.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.ProgramInovasiGetPayload<{ include: { image: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.programinovasi[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        programInovasi.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.ProgramInovasiGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/programinovasi/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          programInovasi.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch program inovasi:", res.statusText);
+          programInovasi.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching program inovasi:", error);
+        programInovasi.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        programInovasi.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/programinovasi/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Program inovasi berhasil dihapus");
+          await programInovasi.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus program inovasi");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus program inovasi");
+      } finally {
+        programInovasi.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: {} as ProgramInovasiForm,
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/landingpage/programinovasi/${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,
+            description: data.description,
+            imageId: data.imageId,
+            link: data.link,
+          };
+          return data;
+        } else {
+          throw new Error(
+            result?.message || "Gagal mengambil data program inovasi"
+          );
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data program inovasi");
+      } finally {
+        programInovasi.update.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateProgramInovasi.safeParse(programInovasi.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        programInovasi.update.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/programinovasi/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              description: this.form.description,
+              imageId: this.form.imageId,
+              link: this.form.link,
+            }),
+          }
+        );
+
+        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 program inovasi");
+          await programInovasi.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update program inovasi");
+        }
+      } catch (error) {
+        console.error("Error updating program inovasi:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update program inovasi"
+        );
+        return false;
+      } finally {
+        programInovasi.update.loading = false;
+      }
+    },
+  },
+});
+
+const templatePejabatDesa = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  position: z.string().min(3, "Posisi minimal 3 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+});
+
+const defaultFormPejabatDesa = {
+  name: "",
+  position: "",
+  imageId: "",
+};
+
+type PejabatDesaForm = {
+  id: string;
+  name: string;
+  position: string;
+  imageId: string | null;
+  image?: {
+    id: string;
+    name: string;
+    link: string;
+    path: string;
+    mimeType: string;
+    realName: string;
+    isActive: boolean;
+    createdAt: Date;
+    updatedAt: Date;
+    deletedAt: Date | null;
+  } | null;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt: Date | null;
+  isActive: boolean;
+};
+
+const pejabatDesa = proxy({
+  findUnique: {
+    data: null as PejabatDesaForm | null,
+    loading: false,
+    error: null as string | null,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const response = await fetch(`/api/landingpage/pejabatdesa/${id}`);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+        if (result.success) {
+          this.data = result.data;
+          return result.data;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengambil data pejabat desa"
+          );
+        }
+      } catch (error) {
+        const errorMessage = (error as Error).message;
+        this.error = errorMessage;
+        console.error("Load pejabat desa error:", errorMessage);
+        toast.error("Terjadi kesalahan saat mengambil data pejabat desa");
+        return null;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    reset() {
+      this.data = null;
+      this.error = null;
+      this.loading = false;
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultFormPejabatDesa },
+    loading: false,
+    error: null as string | null,
+    isReadOnly: false,
+
+    initialize(profileData: PejabatDesaForm) {
+      this.id = profileData.id;
+      this.isReadOnly = false; // Semua data bisa diedit
+      this.form = {
+        name: profileData.name || "",
+        position: profileData.position || "",
+        imageId: profileData.imageId || "",
+      };
+    },
+
+    // Update form field
+    updateField(field: keyof typeof defaultFormPejabatDesa, value: string) {
+      this.form[field] = value;
+    },
+
+    // Submit form
+    async submit() {
+      // Validate form
+      const validation = templatePejabatDesa.safeParse(this.form);
+
+      if (!validation.success) {
+        const errors = validation.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return false;
+      }
+
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const response = await fetch(
+          `/api/landingpage/pejabatdesa/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(this.form),
+          }
+        );
+
+        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 profile");
+          // Refresh profile data
+          await pejabatDesa.findUnique.load(this.id);
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update profile");
+        }
+      } catch (error) {
+        const errorMessage = (error as Error).message;
+        this.error = errorMessage;
+        console.error("Update profile error:", errorMessage);
+        toast.error("Terjadi kesalahan saat update profile");
+        return false;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    reset() {
+      this.id = "";
+      this.form = { ...defaultFormPejabatDesa };
+      this.error = null;
+      this.loading = false;
+      this.isReadOnly = false;
+    },
+  },
+});
+
+const templateMediaSosial = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+  iconUrl: z.string().min(3, "Icon URL minimal 3 karakter"),
+});
+
+type MediaSosialForm = {
+  name: string;
+  imageId: string;
+  iconUrl: string;
+};
+
+const mediaSosial = proxy({
+  create: {
+    form: {} as MediaSosialForm,
+    loading: false,
+    async create() {
+      // Ensure all required fields are non-null
+      const formData = {
+        name: mediaSosial.create.form.name || "",
+        imageId: mediaSosial.create.form.imageId || "",
+        iconUrl: mediaSosial.create.form.iconUrl || "",
+      };
+
+      const cek = templateMediaSosial.safeParse(formData);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        mediaSosial.create.loading = true;
+        const res = await ApiFetch.api.landingpage.mediasosial["create"].post(
+          formData
+        );
+        if (res.status === 200) {
+          mediaSosial.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        mediaSosial.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.MediaSosialGetPayload<{ include: { image: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.mediasosial["find-many"].get();
+      if (res.status === 200) {
+        mediaSosial.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.MediaSosialGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+    
+      mediaSosial.update.loading = true;
+      try {
+        const res = await fetch(`/api/landingpage/mediasosial/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          mediaSosial.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch media sosial:", res.statusText);
+          mediaSosial.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching media sosial:", error);
+        mediaSosial.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        mediaSosial.delete.loading = true;
+
+        const response = await fetch(`/api/landingpage/mediasosial/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Media Sosial berhasil dihapus");
+          await mediaSosial.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus media sosial");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus media sosial");
+      } finally {
+        mediaSosial.delete.loading = false;
+      }
+    },
+  },
+  update: {
+      id: "",
+      form: {} as MediaSosialForm,
+      loading: false,
+  
+      async load(id: string) {
+        if (!id) {
+          toast.warn("ID tidak valid");
+          return null;
+        }
+      
+        mediaSosial.update.loading = true; // ✅ Tambahkan ini di awal
+      
+        try {
+          const response = await fetch(`/api/landingpage/mediasosial/${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 || "",
+              imageId: data.imageId || "",
+              iconUrl: data.iconUrl || "",
+            };
+            return data;
+          } else {
+            throw new Error(result?.message || "Gagal mengambil data media sosial");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengambil data media sosial");
+        } finally {
+          mediaSosial.update.loading = false; // ✅ Supaya berhenti loading walau error
+        }
+      },
+      
+      async update() {
+        const cek = templateMediaSosial.safeParse(mediaSosial.update.form);
+        if (!cek.success) {
+          const err = `[${cek.error.issues
+            .map((v) => `${v.path.join(".")}`)
+            .join("\n")}] required`;
+          toast.error(err);
+          return false;
+        }
+  
+        try {
+          mediaSosial.update.loading = true;
+  
+          const response = await fetch(`/api/landingpage/mediasosial/${this.id}`, {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              imageId: this.form.imageId,
+              iconUrl: this.form.iconUrl,
+            }),
+          });
+  
+          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 media sosial");
+            await mediaSosial.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(result.message || "Gagal update media sosial");
+          }
+        } catch (error) {
+          console.error("Error updating media sosial:", error);
+          toast.error(
+            error instanceof Error
+              ? error.message
+              : "Terjadi kesalahan saat update media sosial"
+          );
+          return false;
+        } finally {
+          mediaSosial.update.loading = false;
+        }
+      },
+    },
+});
+
+const profileLandingPageState = proxy({
+  programInovasi,
+  pejabatDesa,
+  mediaSosial,
+});
+
+export default profileLandingPageState;

src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts

@@ -0,0 +1,236 @@
+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 templatesdgsDesaForm = z.object({
+  name: z.string().min(1, "Judul minimal 1 karakter"),
+  jumlah: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  imageId: z.string().min(1, "File minimal 1"),
+});
+
+const defaultsdgsDesaForm = {
+  name: "",
+  jumlah: "",
+  imageId: "",
+};
+
+const sdgsDesa = proxy({
+  create: {
+    form: { ...defaultsdgsDesaForm },
+    loading: false,
+    async create() {
+      const cek = templatesdgsDesaForm.safeParse(
+        sdgsDesa.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        sdgsDesa.create.loading = true;
+        const res = await ApiFetch.api.landingpage.sdgsdesa[
+          "create"
+        ].post({
+          ...sdgsDesa.create.form,
+        });
+
+        if (res.status === 200) {
+          sdgsDesa.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        sdgsDesa.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.SDGSDesaGetPayload<{
+        include: {
+          image: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.sdgsdesa[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        sdgsDesa.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.SDGSDesaGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/sdgsdesa/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          sdgsDesa.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          sdgsDesa.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        sdgsDesa.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        sdgsDesa.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/sdgsdesa/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "sdgs desa berhasil dihapus");
+          await sdgsDesa.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus sdgs desa");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus sdgs desa");
+      } finally {
+        sdgsDesa.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultsdgsDesaForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        sdgsDesa.edit.loading = true;
+
+        const response = await fetch(`/api/landingpage/sdgsdesa/${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,
+            jumlah: data.jumlah,
+            imageId: data.imageId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading sdgs desa:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        sdgsDesa.edit.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templatesdgsDesaForm.safeParse(
+        sdgsDesa.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        sdgsDesa.edit.loading = true;
+        const response = await fetch(
+          `/api/landingpage/sdgsdesa/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              jumlah: this.form.jumlah,
+              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 sdgs desa");
+          await sdgsDesa.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengupdate sdgs desa"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating sdgs desa:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate sdgs desa"
+        );
+        return false;
+      } finally {
+        sdgsDesa.edit.loading = false;
+      }
+    },
+    reset() {
+      sdgsDesa.edit.id = "";
+      sdgsDesa.edit.form = { ...defaultsdgsDesaForm };
+    },
+  },
+});
+
+export default sdgsDesa;

src/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa.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"),
+  jumlah: z.string().min(1, "Jumlah minimal 1 karakter"),
+  icon: z.string().min(1, "Icon minimal 1 karakter"),
+});
+
+const defaultForm = {
+  name: "",
+  deskripsi: "",
+  jumlah: "",
+  icon: "",
+};
+
+const dataLingkunganDesaState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(dataLingkunganDesaState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        dataLingkunganDesaState.create.loading = true;
+        const res = await ApiFetch.api.lingkungan.datalingkungandesa["create"].post(
+          dataLingkunganDesaState.create.form
+        );
+        if (res.status === 200) {
+          dataLingkunganDesaState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        dataLingkunganDesaState.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
+      dataLingkunganDesaState.findMany.loading = true; // Use the full path to access the property
+      dataLingkunganDesaState.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.lingkungan.datalingkungandesa["find-many"].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          dataLingkunganDesaState.findMany.data = res.data.data || [];
+          dataLingkunganDesaState.findMany.total = res.data.total || 0;
+          dataLingkunganDesaState.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load berdasarkan data lingkungan desa :",
+            res.data?.message
+          );
+          dataLingkunganDesaState.findMany.data = [];
+          dataLingkunganDesaState.findMany.total = 0;
+          dataLingkunganDesaState.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading berdasarkan data lingkungan desa :", error);
+        dataLingkunganDesaState.findMany.data = [];
+        dataLingkunganDesaState.findMany.total = 0;
+        dataLingkunganDesaState.findMany.totalPages = 1;
+      } finally {
+        dataLingkunganDesaState.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/lingkungan/datalingkungandesa/${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,
+            jumlah: data.jumlah,
+            icon: data.icon,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data");
+        }
+      } catch (error) {
+        console.error("Error loading data lingkungan desa :", 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/lingkungan/datalingkungandesa/${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 dataLingkunganDesaState.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data data lingkungan desa");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DataLingkunganDesaGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/lingkungan/datalingkungandesa/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          dataLingkunganDesaState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          dataLingkunganDesaState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading data lingkungan desa:", error);
+        dataLingkunganDesaState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        dataLingkunganDesaState.delete.loading = true;
+
+        const response = await fetch(`/api/lingkungan/datalingkungandesa/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Data lingkungan desa berhasil dihapus");
+          await dataLingkunganDesaState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus data lingkungan desa");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus data lingkungan desa");
+      } finally {
+        dataLingkunganDesaState.delete.loading = false;
+      }
+    },
+  },
+});
+
+export default dataLingkunganDesaState;

src/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan.ts

@@ -0,0 +1,240 @@
+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 templateTujuanEdukasiForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type TujuanEdukasiForm = Prisma.TujuanEdukasiLingkunganGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const stateTujuanEdukasi = proxy({
+  findById: {
+    data: null as TujuanEdukasiForm | null,
+    loading: false,
+    initialize() {
+      stateTujuanEdukasi.findById.data = {
+        id: '',
+        judul: '',
+        deskripsi: '',
+      } as TujuanEdukasiForm;
+    },
+    async load(id: string) {
+      try {
+        stateTujuanEdukasi.findById.loading = true;
+        const res = await ApiFetch.api.lingkungan.edukasilingkungan.tujuanedukasilingkungan["find-by-id"].get({
+          query: { id },
+        });
+        if (res.status === 200) {
+          stateTujuanEdukasi.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data tujuan edukasi");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data tujuan edukasi");
+      } finally {
+        stateTujuanEdukasi.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: TujuanEdukasiForm) {
+      const cek = templateTujuanEdukasiForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        stateTujuanEdukasi.update.loading = true;
+        const res = await ApiFetch.api.lingkungan.edukasilingkungan.tujuanedukasilingkungan["update"].post(data);
+        if (res.status === 200) {
+          toast.success("Data tujuan edukasi berhasil diubah");
+          await stateTujuanEdukasi.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data tujuan edukasi");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengubah data tujuan edukasi");
+      } finally {
+        stateTujuanEdukasi.update.loading = false;
+      }
+    },
+  },
+});
+
+const templateMateriEdukasiLingkunganForm = z.object({
+    judul: z.string().min(3, "Judul minimal 3 karakter"),
+    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  });
+  
+  type MateriEdukasiLingkunganForm = Prisma.MateriEdukasiLingkunganGetPayload<{
+    select: {
+      id: true;
+      judul: true;
+      deskripsi: true;
+    };
+  }>;
+  
+  const stateMateriEdukasiLingkungan = proxy({
+    findById: {
+      data: null as MateriEdukasiLingkunganForm | null,
+      loading: false,
+      initialize() {
+        stateMateriEdukasiLingkungan.findById.data = {
+          id: '',
+          judul: '',
+          deskripsi: '',
+        } as MateriEdukasiLingkunganForm;
+      },
+      async load(id: string) {
+        try {
+          stateMateriEdukasiLingkungan.findById.loading = true;
+          const res = await ApiFetch.api.lingkungan.edukasilingkungan.materiedukasilingkungan["find-by-id"].get({
+            query: { id },
+          });
+          if (res.status === 200) {
+            stateMateriEdukasiLingkungan.findById.data = res.data?.data ?? null;
+          } else {
+            toast.error("Gagal mengambil data materi edukasi");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengambil data materi edukasi");
+        } finally {
+          stateMateriEdukasiLingkungan.findById.loading = false;
+        }
+      },
+    },
+  
+    update: {
+      loading: false,
+      async save(data: MateriEdukasiLingkunganForm) {
+        const cek = templateMateriEdukasiLingkunganForm.safeParse(data);
+        if (!cek.success) {
+          const errors = cek.error.issues
+            .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+            .join(", ");
+          toast.error(`Form tidak valid: ${errors}`);
+          return;
+        }
+  
+        try {
+          stateMateriEdukasiLingkungan.update.loading = true;
+          const res = await ApiFetch.api.lingkungan.edukasilingkungan.materiedukasilingkungan["update"].post(data);
+          if (res.status === 200) {
+            toast.success("Data materi edukasi berhasil diubah");
+            await stateMateriEdukasiLingkungan.findById.load(data.id);
+          } else {
+            toast.error("Gagal mengubah data materi edukasi");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengubah data materi edukasi");
+        } finally {
+          stateMateriEdukasiLingkungan.update.loading = false;
+        }
+      },
+    },
+  });
+
+  const templateContohEdukasiLingkunganForm = z.object({
+    judul: z.string().min(3, "Judul minimal 3 karakter"),
+    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  });
+  
+  type ContohEdukasiLingkunganForm = Prisma.ContohEdukasiLingkunganGetPayload<{
+    select: {
+      id: true;
+      judul: true;
+      deskripsi: true;
+    };
+  }>;
+  
+  const stateContohEdukasiLingkungan = proxy({
+    findById: {
+      data: null as ContohEdukasiLingkunganForm | null,
+      loading: false,
+      initialize() {
+        stateContohEdukasiLingkungan.findById.data = {
+          id: '',
+          judul: '',
+          deskripsi: '',
+        } as ContohEdukasiLingkunganForm;
+      },
+      async load(id: string) {
+        try {
+          stateContohEdukasiLingkungan.findById.loading = true;
+          const res = await ApiFetch.api.lingkungan.edukasilingkungan.contohkegiatandesa["find-by-id"].get({
+            query: { id },
+          });
+          if (res.status === 200) {
+            stateContohEdukasiLingkungan.findById.data = res.data?.data ?? null;
+          } else {
+            toast.error("Gagal mengambil data contoh edukasi");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengambil data contoh edukasi");
+        } finally {
+          stateContohEdukasiLingkungan.findById.loading = false;
+        }
+      },
+    },
+  
+    update: {
+      loading: false,
+      async save(data: ContohEdukasiLingkunganForm) {
+        const cek = templateContohEdukasiLingkunganForm.safeParse(data);
+        if (!cek.success) {
+          const errors = cek.error.issues
+            .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+            .join(", ");
+          toast.error(`Form tidak valid: ${errors}`);
+          return;
+        }
+  
+        try {
+          stateContohEdukasiLingkungan.update.loading = true;
+          const res = await ApiFetch.api.lingkungan.edukasilingkungan.contohkegiatandesa["update"].post(data);
+          if (res.status === 200) {
+            toast.success("Data contoh edukasi berhasil diubah");
+            await stateContohEdukasiLingkungan.findById.load(data.id);
+          } else {
+            toast.error("Gagal mengubah data contoh edukasi");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengubah data contoh edukasi");
+        } finally {
+          stateContohEdukasiLingkungan.update.loading = false;
+        }
+      },
+    },
+  });
+
+
+const stateEdukasiLingkungan = proxy({
+    stateTujuanEdukasi,
+    stateMateriEdukasiLingkungan,
+    stateContohEdukasiLingkungan
+})
+  
+
+export default stateEdukasiLingkungan;

src/app/admin/(dashboard)/_state/lingkungan/gotong-royong.ts

@@ -0,0 +1,492 @@
+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 templateKegiatanDesaForm = z.object({
+  judul: z.string().min(1, "Judul minimal 1 karakter"),
+  deskripsiSingkat: z.string().min(1, "Deskripsi singkat minimal 1 karakter"),
+  deskripsiLengkap: z.string().min(1, "Deskripsi lengkap minimal 1 karakter"),
+  tanggal: z.date(),
+  lokasi: z.string().min(1, "Lokasi minimal 1 karakter"),
+  partisipan: z.number().min(1, "Partisipan minimal 1"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+  kategoriKegiatanId: z.string().min(1, "Kategori kegiatan minimal 1"),
+});
+
+const defaultKegiatanDesaForm = {
+  judul: "",
+  deskripsiSingkat: "",
+  deskripsiLengkap: "",
+  tanggal: new Date(),
+  lokasi: "",
+  partisipan: 0,
+  imageId: "",
+  kategoriKegiatanId: "",
+};
+
+const kegiatanDesa = proxy({
+  create: {
+    form: { ...defaultKegiatanDesaForm },
+    loading: false,
+    async create() {
+      const cek = templateKegiatanDesaForm.safeParse(kegiatanDesa.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        kegiatanDesa.create.loading = true;
+        const res = await ApiFetch.api.lingkungan.kegiatandesa["create"].post({
+          ...kegiatanDesa.create.form,
+          tanggal: kegiatanDesa.create.form.tanggal.toISOString(), // ✅ convert Date -> string
+        });
+
+        if (res.status === 200) {
+          kegiatanDesa.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        kegiatanDesa.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.KegiatanDesaGetPayload<{
+        include: {
+          image: true;
+          kategoriKegiatan: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.lingkungan.kegiatandesa["find-many"].get();
+      if (res.status === 200) {
+        kegiatanDesa.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KegiatanDesaGetPayload<{
+      include: {
+        image: true;
+        kategoriKegiatan: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/lingkungan/kegiatandesa/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kegiatanDesa.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kegiatanDesa.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kegiatanDesa.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kegiatanDesa.delete.loading = true;
+
+        const response = await fetch(`/api/lingkungan/kegiatandesa/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "kegiatan desa berhasil dihapus");
+          await kegiatanDesa.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus pasar desa");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus pasar desa");
+      } finally {
+        kegiatanDesa.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultKegiatanDesaForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        kegiatanDesa.edit.loading = true;
+
+        const response = await fetch(`/api/lingkungan/kegiatandesa/${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 = {
+            judul: data.judul,
+            deskripsiSingkat: data.deskripsiSingkat,
+            deskripsiLengkap: data.deskripsiLengkap,
+            tanggal: data.tanggal,
+            lokasi: data.lokasi,
+            partisipan: data.partisipan,
+            imageId: data.imageId,
+            kategoriKegiatanId: data.kategoriKegiatanId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kegiatan desa:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        kegiatanDesa.edit.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateKegiatanDesaForm.safeParse(kegiatanDesa.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kegiatanDesa.edit.loading = true;
+        const response = await fetch(
+          `/api/lingkungan/kegiatandesa/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              judul: this.form.judul,
+              deskripsiSingkat: this.form.deskripsiSingkat,
+              deskripsiLengkap: this.form.deskripsiLengkap,
+              tanggal:
+                typeof this.form.tanggal === "string"
+                  ? this.form.tanggal
+                  : this.form.tanggal.toISOString(),
+              lokasi: this.form.lokasi,
+              partisipan: this.form.partisipan,
+              imageId: this.form.imageId,
+              kategoriKegiatanId: this.form.kategoriKegiatanId,
+            }),
+          }
+        );
+        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 kegiatan desa");
+          await kegiatanDesa.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate kegiatan desa");
+        }
+      } catch (error) {
+        console.error("Error updating kegiatan desa:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate kegiatan desa"
+        );
+        return false;
+      } finally {
+        kegiatanDesa.edit.loading = false;
+      }
+    },
+    reset() {
+      kegiatanDesa.edit.id = "";
+      kegiatanDesa.edit.form = { ...defaultKegiatanDesaForm };
+    },
+  },
+});
+
+// ========================================= KATEGORI kegiatan ========================================= //
+const kategoriKegiatanForm = z.object({
+  nama: z.string().min(1, "Nama minimal 1 karakter"),
+});
+
+const kategoriKegiatanDefaultForm = {
+  nama: "",
+};
+
+const kategoriKegiatan = proxy({
+  create: {
+    form: { ...kategoriKegiatanDefaultForm },
+    loading: false,
+    async create() {
+      const cek = kategoriKegiatanForm.safeParse(kategoriKegiatan.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        kategoriKegiatan.create.loading = true;
+        const res = await ApiFetch.api.lingkungan.kategorikegiatan[
+          "create"
+        ].post(kategoriKegiatan.create.form);
+        if (res.status === 200) {
+          kategoriKegiatan.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        kategoriKegiatan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<{
+      id: string;
+      nama: string;
+    }> | null,
+    async load() {
+      const res = await ApiFetch.api.lingkungan.kategorikegiatan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        kategoriKegiatan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KategoriKegiatanGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/lingkungan/kategorikegiatan/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          kategoriKegiatan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kategoriKegiatan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kategoriKegiatan.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kategoriKegiatan.delete.loading = true;
+
+        const response = await fetch(
+          `/api/lingkungan/kategorikegiatan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kategori kegiatan berhasil dihapus");
+          await kategoriKegiatan.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kategori kegiatan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kategori kegiatan");
+      } finally {
+        kategoriKegiatan.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...kategoriKegiatanDefaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/lingkungan/kategorikegiatan/${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 = {
+            nama: data.nama,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kategori kegiatan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = kategoriKegiatanForm.safeParse(kategoriKegiatan.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        kategoriKegiatan.edit.loading = true;
+        const response = await fetch(
+          `/api/lingkungan/kategorikegiatan/${kategoriKegiatan.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: kategoriKegiatan.edit.form.nama,
+            }),
+          }
+        );
+
+        // Clone the response to avoid 'body already read' error
+        const responseClone = response.clone();
+
+        try {
+          const result = await response.json();
+
+          if (!response.ok) {
+            console.error(
+              "Update failed with status:",
+              response.status,
+              "Response:",
+              result
+            );
+            throw new Error(
+              result?.message ||
+                `Gagal mengupdate kategori kegiatan (${response.status})`
+            );
+          }
+
+          if (result.success) {
+            toast.success(
+              result.message || "Berhasil memperbarui kategori kegiatan"
+            );
+            await kategoriKegiatan.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(
+              result.message || "Gagal mengupdate kategori kegiatan"
+            );
+          }
+        } catch (error) {
+          // If JSON parsing fails, try to get the response text for better error messages
+          try {
+            const text = await responseClone.text();
+            console.error("Error response text:", text);
+            throw new Error(`Gagal memproses respons dari server: ${text}`);
+          } catch (textError) {
+            console.error("Error parsing response as text:", textError);
+            console.error("Original error:", error);
+            throw new Error("Gagal memproses respons dari server");
+          }
+        }
+      } catch (error) {
+        console.error("Error updating kategori kegiatan:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate kategori kegiatan"
+        );
+        return false;
+      } finally {
+        kategoriKegiatan.edit.loading = false;
+      }
+    },
+    reset() {
+      kategoriKegiatan.edit.id = "";
+      kategoriKegiatan.edit.form = { ...kategoriKegiatanDefaultForm };
+    },
+  },
+});
+
+const gotongRoyongState = proxy({
+  kegiatanDesa,
+  kategoriKegiatan,
+});
+export default gotongRoyongState;

src/app/admin/(dashboard)/_state/lingkungan/konservasi-adat-bali.ts

@@ -0,0 +1,274 @@
+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 templateFilosofiTriHitaForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type FilosofiTriHitaForm = Prisma.FilosofiTriHitaGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const stateFilosofiTriHita = proxy({
+  findById: {
+    data: null as FilosofiTriHitaForm | null,
+    loading: false,
+    initialize() {
+      stateFilosofiTriHita.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as FilosofiTriHitaForm;
+    },
+    async load(id: string) {
+      try {
+        stateFilosofiTriHita.findById.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.konservasiadatbali.filosofitrihitakarana[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          stateFilosofiTriHita.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data filosofi tri hita karana");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengambil data filosofi tri hita karana"
+        );
+      } finally {
+        stateFilosofiTriHita.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: FilosofiTriHitaForm) {
+      const cek = templateFilosofiTriHitaForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        stateFilosofiTriHita.update.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.konservasiadatbali.filosofitrihitakarana[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success("Data filosofi tri hita karana berhasil diubah");
+          await stateFilosofiTriHita.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data filosofi tri hita karana");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengubah data filosofi tri hita karana"
+        );
+      } finally {
+        stateFilosofiTriHita.update.loading = false;
+      }
+    },
+  },
+});
+
+const templateNilaiKonservasiAdatForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type NilaiKonservasiAdatForm = Prisma.NilaiKonservasiAdatGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const stateNilaiKonservasiAdat = proxy({
+  findById: {
+    data: null as NilaiKonservasiAdatForm | null,
+    loading: false,
+    initialize() {
+      stateNilaiKonservasiAdat.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as NilaiKonservasiAdatForm;
+    },
+    async load(id: string) {
+      try {
+        stateNilaiKonservasiAdat.findById.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.konservasiadatbali.nilaikonservasiadatbali[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          stateNilaiKonservasiAdat.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data nilai konservasi adat");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengambil data nilai konservasi adat"
+        );
+      } finally {
+        stateNilaiKonservasiAdat.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: NilaiKonservasiAdatForm) {
+      const cek = templateNilaiKonservasiAdatForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        stateNilaiKonservasiAdat.update.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.konservasiadatbali.nilaikonservasiadatbali[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success("Data nilai konservasi adat berhasil diubah");
+          await stateNilaiKonservasiAdat.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data nilai konservasi adat");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengubah data nilai konservasi adat"
+        );
+      } finally {
+        stateNilaiKonservasiAdat.update.loading = false;
+      }
+    },
+  },
+});
+
+const templateBentukKonservasiBerdasarkanAdatForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type BentukKonservasiBerdasarkanAdatForm =
+  Prisma.BentukKonservasiBerdasarkanAdatGetPayload<{
+    select: {
+      id: true;
+      judul: true;
+      deskripsi: true;
+    };
+  }>;
+
+const stateBentukKonservasiBerdasarkanAdat = proxy({
+  findById: {
+    data: null as BentukKonservasiBerdasarkanAdatForm | null,
+    loading: false,
+    initialize() {
+      stateBentukKonservasiBerdasarkanAdat.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as BentukKonservasiBerdasarkanAdatForm;
+    },
+    async load(id: string) {
+      try {
+        stateBentukKonservasiBerdasarkanAdat.findById.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.konservasiadatbali.bentukkonservasiberdasarkanadat[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          stateBentukKonservasiBerdasarkanAdat.findById.data =
+            res.data?.data ?? null;
+        } else {
+          toast.error(
+            "Gagal mengambil data bentuk konservasi berdasarkan adat"
+          );
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengambil data bentuk konservasi berdasarkan adat"
+        );
+      } finally {
+        stateBentukKonservasiBerdasarkanAdat.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: BentukKonservasiBerdasarkanAdatForm) {
+      const cek = templateBentukKonservasiBerdasarkanAdatForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        stateBentukKonservasiBerdasarkanAdat.update.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.konservasiadatbali.bentukkonservasiberdasarkanadat[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success(
+            "Data bentuk konservasi berdasarkan adat berhasil diubah"
+          );
+          await stateBentukKonservasiBerdasarkanAdat.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data bentuk konservasi berdasarkan adat");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengubah data bentuk konservasi berdasarkan adat"
+        );
+      } finally {
+        stateBentukKonservasiBerdasarkanAdat.update.loading = false;
+      }
+    },
+  },
+});
+
+const stateKonservasiAdatBali = proxy({
+  stateFilosofiTriHita,
+  stateNilaiKonservasiAdat,
+  stateBentukKonservasiBerdasarkanAdat,
+});
+
+export default stateKonservasiAdatBali;

src/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah.ts

@@ -15,12 +15,12 @@ const defaultForm = {
   icon: "",
 };
 
-const pengelolaanSampahState = proxy({
+const pengelolaanSampah = proxy({
   create: {
     form: { ...defaultForm },
     loading: false,
     async create() {
-      const cek = templateForm.safeParse(pengelolaanSampahState.create.form);
+      const cek = templateForm.safeParse(pengelolaanSampah.create.form);
       if (!cek.success) {
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
@@ -29,12 +29,12 @@ const pengelolaanSampahState = proxy({
       }
 
       try {
-        pengelolaanSampahState.create.loading = true;
-        const res = await ApiFetch.api.lingkungan.pengelolaansampah["create"].post(
-          pengelolaanSampahState.create.form
-        );
+        pengelolaanSampah.create.loading = true;
+        const res = await ApiFetch.api.lingkungan.pengelolaansampah[
+          "create"
+        ].post(pengelolaanSampah.create.form);
         if (res.status === 200) {
-          pengelolaanSampahState.findMany.load();
+          pengelolaanSampah.findMany.load();
           return toast.success("success create");
         }
         console.log(res);
@@ -42,7 +42,7 @@ const pengelolaanSampahState = proxy({
       } catch (error) {
         console.log((error as Error).message);
       } finally {
-        pengelolaanSampahState.create.loading = false;
+        pengelolaanSampah.create.loading = false;
       }
     },
   },
@@ -54,33 +54,35 @@ const pengelolaanSampahState = proxy({
     loading: false,
     load: async (page = 1, limit = 10) => {
       // Change to arrow function
-      pengelolaanSampahState.findMany.loading = true; // Use the full path to access the property
-      pengelolaanSampahState.findMany.page = page;
+      pengelolaanSampah.findMany.loading = true; // Use the full path to access the property
+      pengelolaanSampah.findMany.page = page;
       try {
-        const res = await ApiFetch.api.lingkungan.pengelolaansampah["find-many"].get({
+        const res = await ApiFetch.api.lingkungan.pengelolaansampah[
+          "find-many"
+        ].get({
           query: { page, limit },
         });
 
         if (res.status === 200 && res.data?.success) {
-          pengelolaanSampahState.findMany.data = res.data.data || [];
-          pengelolaanSampahState.findMany.total = res.data.total || 0;
-          pengelolaanSampahState.findMany.totalPages = res.data.totalPages || 1;
+          pengelolaanSampah.findMany.data = res.data.data || [];
+          pengelolaanSampah.findMany.total = res.data.total || 0;
+          pengelolaanSampah.findMany.totalPages = res.data.totalPages || 1;
         } else {
           console.error(
             "Failed to load pengelolaan sampah:",
             res.data?.message
           );
-          pengelolaanSampahState.findMany.data = [];
-          pengelolaanSampahState.findMany.total = 0;
-          pengelolaanSampahState.findMany.totalPages = 1;
+          pengelolaanSampah.findMany.data = [];
+          pengelolaanSampah.findMany.total = 0;
+          pengelolaanSampah.findMany.totalPages = 1;
         }
       } catch (error) {
         console.error("Error loading pengelolaan sampah:", error);
-        pengelolaanSampahState.findMany.data = [];
-        pengelolaanSampahState.findMany.total = 0;
-        pengelolaanSampahState.findMany.totalPages = 1;
+        pengelolaanSampah.findMany.data = [];
+        pengelolaanSampah.findMany.total = 0;
+        pengelolaanSampah.findMany.totalPages = 1;
       } finally {
-        pengelolaanSampahState.findMany.loading = false;
+        pengelolaanSampah.findMany.loading = false;
       }
     },
   },
@@ -95,12 +97,15 @@ const pengelolaanSampahState = proxy({
       }
 
       try {
-        const response = await fetch(`/api/lingkungan/pengelolaansampah/${id}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const response = await fetch(
+          `/api/lingkungan/pengelolaansampah/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
 
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
@@ -143,19 +148,22 @@ const pengelolaanSampahState = proxy({
       }
       this.loading = true;
       try {
-        const response = await fetch(`/api/lingkungan/pengelolaansampah/${id}`, {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(this.form),
-        });
+        const response = await fetch(
+          `/api/lingkungan/pengelolaansampah/${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 pengelolaanSampahState.findMany.load();
+        await pengelolaanSampah.findMany.load();
         return result.data;
       } catch (error) {
         console.error("Error update data:", error);
@@ -174,14 +182,14 @@ const pengelolaanSampahState = proxy({
         const res = await fetch(`/api/lingkungan/pengelolaansampah/${id}`);
         if (res.ok) {
           const data = await res.json();
-          pengelolaanSampahState.findUnique.data = data.data ?? null;
+          pengelolaanSampah.findUnique.data = data.data ?? null;
         } else {
           console.error("Failed to fetch data", res.status, res.statusText);
-          pengelolaanSampahState.findUnique.data = null;
+          pengelolaanSampah.findUnique.data = null;
         }
       } catch (error) {
         console.error("Error loading pengelolaan sampah:", error);
-        pengelolaanSampahState.findUnique.data = null;
+        pengelolaanSampah.findUnique.data = null;
       }
     },
   },
@@ -191,20 +199,25 @@ const pengelolaanSampahState = proxy({
       if (!id) return toast.warn("ID tidak valid");
 
       try {
-        pengelolaanSampahState.delete.loading = true;
+        pengelolaanSampah.delete.loading = true;
 
-        const response = await fetch(`/api/lingkungan/pengelolaansampah/del/${id}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const response = await fetch(
+          `/api/lingkungan/pengelolaansampah/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
 
         const result = await response.json();
 
         if (response.ok && result?.success) {
-          toast.success(result.message || "pengelolaan sampah berhasil dihapus");
-          await pengelolaanSampahState.findMany.load(); // refresh list
+          toast.success(
+            result.message || "pengelolaan sampah berhasil dihapus"
+          );
+          await pengelolaanSampah.findMany.load(); // refresh list
         } else {
           toast.error(result?.message || "Gagal menghapus pengelolaan sampah");
         }
@@ -212,10 +225,236 @@ const pengelolaanSampahState = proxy({
         console.error("Gagal delete:", error);
         toast.error("Terjadi kesalahan saat menghapus pengelolaan sampah");
       } finally {
-        pengelolaanSampahState.delete.loading = false;
+        pengelolaanSampah.delete.loading = false;
       }
     },
   },
 });
 
+const templateKeteranganSampahForm = z.object({
+  name: z.string().min(1, "Nama minimal 1 karakter"),
+  alamat: z.string().min(1, "Alamat minimal 1 karakter"),
+  namaTempatMaps: z.string().min(1, "Nama Tempat Maps minimal 1 karakter"),
+  lat: z.number(),
+  lng: z.number(),
+});
+
+const defaultKeteranganSampahForm = {
+  name: "",
+  alamat: "",
+  namaTempatMaps: "",
+  lat: 0,
+  lng: 0,
+};
+
+
+const keteranganSampah = proxy({
+  create: {
+    form: { ...defaultKeteranganSampahForm },
+    loading: false,
+    async create() {
+      const cek = templateKeteranganSampahForm.safeParse(
+        keteranganSampah.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        keteranganSampah.create.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.pengelolaansampah.keteranganbankterdekat[
+            "create"
+          ].post(keteranganSampah.create.form);
+        if (res.status === 200) {
+          keteranganSampah.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        keteranganSampah.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.KeteranganBankSampahTerdekatGetPayload<{
+          omit: { isActive: true };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.lingkungan.pengelolaansampah.keteranganbankterdekat[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        keteranganSampah.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+      data: null as Prisma.KeteranganBankSampahTerdekatGetPayload<{
+        omit: { isActive: true };
+      }> | null,
+      async load(id: string) {
+        try {
+          const res = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${id}`);
+          if (res.ok) {
+            const data = await res.json();
+            keteranganSampah.findUnique.data = data.data ?? null;
+          } else {
+            console.error("Failed to fetch data", res.status, res.statusText);
+            keteranganSampah.findUnique.data = null;
+          }
+        } catch (error) {
+          console.error("Error fetching data:", error);
+          keteranganSampah.findUnique.data = null;
+        }
+      },
+    },
+    delete: {
+        loading: false,
+        async byId(id: string) {
+          if (!id) return toast.warn("ID tidak valid");
+    
+          try {
+            keteranganSampah.delete.loading = true;
+    
+            const response = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/del/${id}`, {
+              method: "DELETE",
+              headers: {
+                "Content-Type": "application/json",
+              },
+            });
+    
+            const result = await response.json();
+    
+            if (response.ok && result?.success) {
+              toast.success(result.message || "Keterangan sampah berhasil dihapus");
+              await keteranganSampah.findMany.load(); // refresh list
+            } else {
+              toast.error(result?.message || "Gagal menghapus keterangan sampah");
+            }
+          } catch (error) {
+            console.error("Gagal delete:", error);
+            toast.error("Terjadi kesalahan saat menghapus keterangan sampah");
+          } finally {
+            keteranganSampah.delete.loading = false;
+          }
+        },
+      },
+      edit: {
+          id: "",
+          form: { ...defaultKeteranganSampahForm },
+          loading: false,
+      
+          async load(id: string) {
+            if (!id) {
+              toast.warn("ID tidak valid");
+              return null;
+            }
+      
+            try {
+              const response = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${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,
+                  alamat: data.alamat,
+                  namaTempatMaps: data.namaTempatMaps,
+                  lat: data.lat,
+                  lng: data.lng,
+                };
+                return data;
+              } else {
+                throw new Error(result?.message || "Gagal memuat data");
+              }
+            } catch (error) {
+              console.error("Error loading keterangan sampah:", error);
+              toast.error(
+                error instanceof Error ? error.message : "Gagal memuat data"
+              );
+              return null;
+            }
+          },
+      
+          async update() {
+            const cek = templateKeteranganSampahForm.safeParse(keteranganSampah.edit.form);
+            if (!cek.success) {
+              const err = `[${cek.error.issues
+                .map((v) => `${v.path.join(".")}`)
+                .join("\n")}] required`;
+              return toast.error(err);
+            }
+      
+            try {
+              keteranganSampah.edit.loading = true;
+              const response = await fetch(
+                `/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${this.id}`,
+                {
+                  method: "PUT",
+                  headers: {
+                    "Content-Type": "application/json",
+                  },
+                  body: JSON.stringify({
+                    name: this.form.name,
+                    alamat: this.form.alamat,
+                    namaTempatMaps: this.form.namaTempatMaps,
+                    lat: this.form.lat,
+                    lng: this.form.lng,
+                  }),
+                }
+              );
+              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 keterangan sampah");
+                await keteranganSampah.findMany.load(); // refresh list
+                return true;
+              } else {
+                throw new Error(result.message || "Gagal mengupdate keterangan sampah");
+              }
+            } catch (error) {
+              console.error("Error updating keterangan sampah:", error);
+              toast.error(
+                error instanceof Error
+                  ? error.message
+                  : "Gagal mengupdate keterangan sampah"
+              );
+              return false;
+            } finally {
+              keteranganSampah.edit.loading = false;
+            }
+          },
+          reset() {
+            keteranganSampah.edit.id = "";
+            keteranganSampah.edit.form = { ...defaultKeteranganSampahForm };
+          },
+        },
+});
+
+const pengelolaanSampahState = proxy({
+  pengelolaanSampah,
+  keteranganSampah,
+});
+
 export default pengelolaanSampahState;

src/app/admin/(dashboard)/_state/lingkungan/program-penghijauan.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"),
+  judul: z.string().min(1, "Judul minimal 1 karakter"),
+  icon: z.string().min(1, "Icon minimal 1 karakter"),
+});
+
+const defaultForm = {
+  name: "",
+  deskripsi: "",
+  judul: "",
+  icon: "",
+};
+
+const programPenghijauanState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(programPenghijauanState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        programPenghijauanState.create.loading = true;
+        const res = await ApiFetch.api.lingkungan.programpenghijauan["create"].post(
+          programPenghijauanState.create.form
+        );
+        if (res.status === 200) {
+          programPenghijauanState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        programPenghijauanState.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
+      programPenghijauanState.findMany.loading = true; // Use the full path to access the property
+      programPenghijauanState.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.lingkungan.programpenghijauan["find-many"].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          programPenghijauanState.findMany.data = res.data.data || [];
+          programPenghijauanState.findMany.total = res.data.total || 0;
+          programPenghijauanState.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load grafik berdasarkan program penghijauan:",
+            res.data?.message
+          );
+          programPenghijauanState.findMany.data = [];
+          programPenghijauanState.findMany.total = 0;
+          programPenghijauanState.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan program penghijauan:", error);
+        programPenghijauanState.findMany.data = [];
+        programPenghijauanState.findMany.total = 0;
+        programPenghijauanState.findMany.totalPages = 1;
+      } finally {
+        programPenghijauanState.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/lingkungan/programpenghijauan/${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,
+            judul: data.judul,
+            icon: data.icon,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data");
+        }
+      } catch (error) {
+        console.error("Error loading program penghijauan:", 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/lingkungan/programpenghijauan/${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 programPenghijauanState.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data program penghijauan");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.ProgramPenghijauanGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/lingkungan/programpenghijauan/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          programPenghijauanState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          programPenghijauanState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading program penghijauan:", error);
+        programPenghijauanState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        programPenghijauanState.delete.loading = true;
+
+        const response = await fetch(`/api/lingkungan/programpenghijauan/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Program penghijauan berhasil dihapus");
+          await programPenghijauanState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus program penghijauan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus program penghijauan");
+      } finally {
+        programPenghijauanState.delete.loading = false;
+      }
+    },
+  },
+});
+
+export default programPenghijauanState;

src/app/admin/(dashboard)/inovasi/layanan-online-desa/_lib/layoutTabs.tsx

@@ -28,13 +28,7 @@ function LayoutTabsLayananOnlineDesa({ children }: { children: React.ReactNode }
             label: "Jenis Pengaduan",
             value: "jenispengaduan",
             href: "/admin/inovasi/layanan-online-desa/jenis-pengaduan"
-        },
-        {
-            label: "Informasi Desa",
-            value: "informasidesa",
-            href: "/admin/inovasi/layanan-online-desa/informasi-desa"
         }
-        
     ];
     const curentTab = tabs.find(tab => tab.href === pathname)
     const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/[id]/edit/page.tsx

@@ -9,7 +9,7 @@ import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
-import SelectIconProgramEdit from '../../_lib/selectIconEdit';
+import SelectIconProgramEdit from '../../../../_com/selectIconEdit';
 
 interface FormProgramKreatif {
   name: string;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/[id]/page.tsx

@@ -3,7 +3,7 @@
 import colors from '@/con/colors';
 import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconChartLine, IconEdit, IconLeaf, IconRecycle, IconTent, IconTrophy, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconChartLine, IconChristmasTreeFilled, IconClipboard, IconEdit, IconHomeEco, IconLeaf, IconRecycle, IconScale, IconShieldFilled, IconTent, IconTrash, IconTrendingUp, IconTrophy, IconTruck, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -25,6 +25,14 @@ function DetailProgramKreatifDesa() {
     wisata: IconTent,
     ekonomi: IconChartLine,
     sampah: IconRecycle,
+    truck: IconTruck,
+    scale: IconScale,
+    clipboard: IconClipboard,
+    trash: IconTrash,
+    lingkunganSehat: IconHomeEco,
+    sumberOksigen: IconChristmasTreeFilled,
+    ekonomiBerkelanjutan: IconTrendingUp,
+    mencegahBencana: IconShieldFilled,
   };
 
   useShallowEffect(() => {

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx

@@ -6,7 +6,7 @@ import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import programKreatifState from '../../../_state/inovasi/program-kreatif';
-import SelectIconProgram from '../_lib/selectIcon';
+import SelectIconProgram from '../../../_com/selectIcon';
 
 
 function CreateProgramKreatifDesa() {

src/app/admin/(dashboard)/landing-page/apbdes/[id]/edit/page.tsx

@@ -0,0 +1,258 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+
+import apbdes from "@/app/admin/(dashboard)/_state/landing-page/apbdes";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
+import { IconArrowBack, IconFile, IconImageInPicture, IconUpload, IconX } 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 EditAPBDes() {
+  const apbdesState = useProxy(apbdes);
+  const router = useRouter();
+  const params = useParams();
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [previewDoc, setPreviewDoc] = useState<string | null>(null);
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [docFile, setDocFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: apbdesState.edit.form.name || '',
+    jumlah: apbdesState.edit.form.jumlah || '',
+    imageId: apbdesState.edit.form.imageId || '',
+    fileId: apbdesState.edit.form.fileId || ''
+  });
+
+  // Load sdgs desa by id saat pertama kali
+  useEffect(() => {
+    const loadKolaborasi = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await apbdesState.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            jumlah: data.jumlah || '',
+            imageId: data.imageId || '',
+            fileId: data.fileId || ''
+          });
+          if (data.image) {
+            if (data?.image?.link) {
+              setPreviewImage(data.image.link);
+            }
+          }
+          if (data.file) {
+            if (data?.file?.link) {
+              setPreviewDoc(data.file.link);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Error loading apbdes:", error);
+        toast.error("Gagal memuat data apbdes");
+      }
+    };
+
+    loadKolaborasi();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+
+    try {
+      // edit global state with form data
+      apbdesState.edit.form = {
+        ...apbdesState.edit.form,
+        name: formData.name,
+        jumlah: formData.jumlah,
+        imageId: formData.imageId // Keep existing imageId if not changed
+      };
+
+      // Jika ada file image baru, upload
+      if (imageFile) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file: imageFile, name: imageFile.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        // edit imageId in global state
+        apbdesState.edit.form.imageId = uploaded.id;
+      }
+
+      // Jika ada file doc baru, upload
+      if (docFile) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file: docFile, name: docFile.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload doc");
+        }
+
+        // edit fileId in global state
+        apbdesState.edit.form.fileId = uploaded.id;
+      }
+
+      await apbdesState.edit.update();
+      toast.success("apbdes berhasil diperbarui!");
+      router.push("/admin/landing-page/APBDes");
+    } catch (error) {
+      console.error("Error updating apbdes:", error);
+      toast.error("Terjadi kesalahan saat memperbarui apbdes");
+    }
+  };
+
+  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 APBDes</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
+            placeholder="masukkan nama"
+          />
+
+          <TextInput
+            value={formData.jumlah}
+            onChange={(e) => setFormData({ ...formData, jumlah: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Jumlah</Text>}
+            placeholder="masukkan jumlah"
+          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Image</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setImageFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih image
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format image
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Image</Text>
+                {previewImage ? (
+                  <iframe
+                    src={previewImage}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada image tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Doc</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setDocFile(selectedFile);
+                    setPreviewDoc(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.pdf', '.doc', '.docx'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format doc
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewDoc ? (
+                  <iframe
+                    src={previewDoc}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada doc tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditAPBDes;

src/app/admin/(dashboard)/landing-page/apbdes/[id]/page.tsx

@@ -0,0 +1,126 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+import { ActionIcon, Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconFile, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import colors from '@/con/colors';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import apbdes from '../../../_state/landing-page/apbdes';
+
+function DetailAPBDes() {
+  const apbdesState = useProxy(apbdes)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    apbdesState.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      apbdesState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/landing-page/APBDes")
+    }
+  }
+
+  if (!apbdesState.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 APBDes</Text>
+          {apbdesState.findUnique.data ? (
+            <Paper key={apbdesState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama APBDes</Text>
+                  <Text fz={"lg"}>{apbdesState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jumlah</Text>
+                  <Text fz={"lg"}>{apbdesState.findUnique.data?.jumlah}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={apbdesState.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                  {apbdesState.findUnique.data?.file?.link ? (
+                    <ActionIcon
+                      component="a"
+                      href={apbdesState.findUnique.data.file.link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      variant="transparent"
+                    >
+                      <IconFile size={25} color={colors['blue-button']}/>
+                    </ActionIcon>
+                  ) : (
+                    <Text>Tidak ada dokumen tersedia</Text>
+                  )}
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (apbdesState.findUnique.data) {
+                        setSelectedId(apbdesState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={apbdesState.delete.loading || !apbdesState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (apbdesState.findUnique.data) {
+                        router.push(`/admin/landing-page/APBDes/${apbdesState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!apbdesState.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 APBDes ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailAPBDes;

src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx

@@ -0,0 +1,215 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconFile, IconImageInPicture, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import apbdes from '../../../_state/landing-page/apbdes';
+
+
+function CreateAPBDes() {
+  const router = useRouter();
+  const stateAPBDes = useProxy(apbdes)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [previewDoc, setPreviewDoc] = useState<string | null>(null);
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [docFile, setDocFile] = useState<File | null>(null);
+  
+
+
+  useEffect(() => {
+    stateAPBDes.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateAPBDes.create.form = {
+      name: "",
+      jumlah: "",
+      imageId: "",
+      fileId: "",
+    };
+    setImageFile(null);
+    setDocFile(null);
+    setPreviewImage(null);
+  };
+  const handleSubmit = async () => {
+    if (!imageFile || !docFile) {
+      return toast.warn("Pilih gambar dan dokumen terlebih dahulu");
+    }
+  
+    try {
+      const [uploadImageRes, uploadDocRes] = await Promise.all([
+        ApiFetch.api.fileStorage.create.post({ file: imageFile, name: imageFile.name }),
+        ApiFetch.api.fileStorage.create.post({ file: docFile, name: docFile.name }),
+      ]);
+  
+      const imageId = uploadImageRes?.data?.data?.id;
+      const fileId = uploadDocRes?.data?.data?.id;
+  
+      if (!imageId || !fileId) {
+        return toast.error("Gagal mengupload file");
+      }
+  
+      stateAPBDes.create.form.imageId = imageId;
+      stateAPBDes.create.form.fileId = fileId;
+  
+      await stateAPBDes.create.create();
+  
+      toast.success("Berhasil menambahkan APBDes");
+      resetForm();
+      router.push("/admin/landing-page/APBDes");
+    } catch (error) {
+      console.error("Gagal submit:", error);
+      toast.error("Gagal menyimpan 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'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create APBDes</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Image</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setImageFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format image
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewImage ? (
+                  <iframe
+                    src={previewImage}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada image tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Dokumen</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setDocFile(selectedFile);
+                    setPreviewDoc(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.pdf', '.doc', '.docx'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format dokumen
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewDoc ? (
+                  <iframe
+                    src={previewDoc}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada dokumen tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <TextInput
+            value={stateAPBDes.create.form.name}
+            onChange={(val) => {
+              stateAPBDes.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            placeholder='Masukkan judul'
+          />
+           <TextInput
+           type='number'
+            value={stateAPBDes.create.form.jumlah}
+            onChange={(val) => {
+              stateAPBDes.create.form.jumlah = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Jumlah</Text>}
+            placeholder='Masukkan jumlah'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateAPBDes;

src/app/admin/(dashboard)/landing-page/apbdes/page.tsx

@@ -1,11 +1,113 @@
-import React from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { ActionIcon, Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconFile, IconSearch } 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 apbdes from '../../_state/landing-page/apbdes';
 
-function Page() {
+
+function APBDes() {
+  const [search, setSearch] = useState('');
   return (
-    <div>
-      APBDes
-    </div>
+    <Box>
+      <HeaderSearch
+        title='APBDes'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListAPBDes search={search} />
+    </Box>
   );
 }
 
-export default Page;
+function ListAPBDes({ search }: { search: string }) {
+  const listState = useProxy(apbdes)
+  const router = useRouter();
+  useEffect(() => {
+    listState.findMany.load()
+  }, [])
+
+  const filteredData = (listState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.jumlah.toLowerCase().includes(keyword)
+    )
+  });
+
+  if (!listState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List APBDes'
+            href='/admin/landing-page/APBDes/create'
+          />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama APBDes</TableTh>
+                  <TableTh>Jumlah APBDes</TableTh>
+                  <TableTh>Document</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate="end" fz={"sm"}>{item.jumlah}</Text>
+                    </TableTd>
+                    <TableTd>
+                      {item.file?.link ? (
+                        <ActionIcon
+                          component="a"
+                          href={item.file.link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          variant='transparent'
+                        >
+                          <IconFile size={25} color={colors['blue-button']}/>
+                        </ActionIcon>
+                      ) : (
+                        <Text>Tidak ada dokumen tersedia</Text>
+                      )}
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/landing-page/APBDes/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default APBDes;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/_lib/layouTabs.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: "List Desa Anti Korupsi",
+            value: "listDesaAntiKorupsi",
+            href: "/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi"
+        },
+        {
+            label: "Kategori Desa Anti Korupsi",
+            value: "kategoriDesaAntiKorupsi",
+            href: "/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi"
+        },
+    ];
+    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}>Desa Anti Korupsi</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)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/[id]/page.tsx

@@ -0,0 +1,98 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
+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 EditKategoriDesaAntiKorupsi() {
+  const router = useRouter();
+  const params = useParams();
+  const id = params?.id as string;
+  const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi);
+
+  const [formData, setFormData] = useState({
+    name: "",
+  });
+
+  useEffect(() => {
+    const loadKategorikegiatan = async () => {
+      if (!id) return;
+
+      try {
+        const data = await stateKategori.edit.load(id);
+
+        if (data) {
+          // pastikan id-nya masuk ke state edit
+          stateKategori.edit.id = id;
+          setFormData({
+            name: data.name || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading kategori desa anti korupsi:", error);
+        toast.error("Gagal memuat data kategori desa anti korupsi");
+      }
+    };
+
+    loadKategorikegiatan();
+  }, [id]);
+
+  const handleSubmit = async () => {
+    try {
+      if (!formData.name.trim()) {
+        toast.error('Nama kategori desa anti korupsi tidak boleh kosong');
+        return;
+      }
+
+      stateKategori.edit.form = {
+        name: formData.name.trim(),
+      };
+
+      // Safety check tambahan: pastikan ID tidak kosong
+      if (!stateKategori.edit.id) {
+        stateKategori.edit.id = id; // fallback
+      }
+
+      const success = await stateKategori.edit.update();
+
+      if (success) {
+        router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi");
+      }
+    } catch (error) {
+      console.error("Error updating kategori desa anti korupsi:", error);
+      // toast akan ditampilkan dari fungsi update
+    }
+  };
+
+  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 Kategori Desa Anti Korupsi</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Desa Anti Korupsi</Text>}
+            placeholder='Masukkan nama kategori desa anti korupsi'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKategoriDesaAntiKorupsi;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create/page.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'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 { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+import korupsiState from '../../../../_state/landing-page/desa-anti-korupsi';
+
+function CreateKategoriDesaAntiKorupsi() {
+  const router = useRouter();
+  const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi)
+
+  useEffect(() => {
+    stateKategori.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateKategori.create.form = {
+      name: "",
+    };
+  }
+
+  const handleSubmit = async () => {
+    await stateKategori.create.create();
+    resetForm();
+    router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi")
+  }
+
+  return (
+    <Box>
+      <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 Kategori Desa Anti Korupsi</Title>
+            <TextInput
+              value={stateKategori.create.form.name}
+              onChange={(val) => {
+                stateKategori.create.form.name = val.target.value;
+              }}
+              label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Desa Anti Korupsi</Text>}
+              placeholder='Masukkan nama kategori desa anti korupsi'
+            />
+            <Group>
+              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default CreateKategoriDesaAntiKorupsi;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx

@@ -0,0 +1,112 @@
+'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 { IconEdit, IconSearch, IconX } 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 { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import korupsiState from '../../../_state/landing-page/desa-anti-korupsi';
+
+
+function KategoriDesaAntiKorupsi() {
+  const [search, setSearch] = useState("")
+  return (
+    <Box>
+      <HeaderSearch
+        title='Kategori Desa Anti Korupsi'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListKategoriKegiatan search={search} />
+    </Box>
+  );
+}
+
+function ListKategoriKegiatan({ search }: { search: string }) {
+  const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter()
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateKategori.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+
+  useShallowEffect(() => {
+    stateKategori.findMany.load()
+  }, [])
+
+  const filteredData = (stateKategori.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stateKategori.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Kategori Kegiatan'
+          href='/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Kategori</TableTh>
+              <TableTh>Edit</TableTh>
+              <TableTh>Delete</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>
+                  <Button color="green" onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/${item.id}`)}>
+                    <IconEdit size={20} />
+                  </Button>
+                </TableTd>
+                <TableTd>
+                  <Button color="red" onClick={() => {
+                    setSelectedId(item.id)
+                    setModalHapus(true)
+                  }}>
+                    <IconX size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus kategori kegiatan ini?'
+      />
+    </Box>
+  );
+}
+
+export default KategoriDesaAntiKorupsi

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/layout.tsx

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

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/[id]/edit/page.tsx

@@ -0,0 +1,229 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import { useProxy } from 'valtio/utils';
+
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput } from '@mantine/core';
+import { IconArrowBack, IconFile, IconUpload, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import colors from '@/con/colors';
+
+import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
+import ApiFetch from '@/lib/api-fetch';
+import { Dropzone } from '@mantine/dropzone';
+import { toast } from 'react-toastify';
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+
+interface FormDesaAntiKorupsi {
+  name: string;
+  deskripsi: string;
+  kategoriId: string;
+  fileId: string;
+}
+
+function EditDesaAntiKorupsi() {
+  const desaAntiKorupsiState = useProxy(korupsiState.desaAntikorupsi)
+  const [previewFile, setPreviewFile] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const params = useParams()
+  const router = useRouter()
+  const [formData, setFormData] = useState<FormDesaAntiKorupsi>({
+    name: '',
+    deskripsi: '',
+    kategoriId: '',
+    fileId: '',
+  })
+
+  useEffect(() => {
+    const loadDesaAntiKorupsi = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await desaAntiKorupsiState.edit.load(id);
+        if (data) {
+          // ⬇️ FIX PENTING: tambahkan ini
+          desaAntiKorupsiState.edit.id = id;
+
+          desaAntiKorupsiState.edit.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            kategoriId: data.kategoriId,
+            fileId: data.fileId,
+          };
+
+          setFormData({
+            name: data.name,
+            deskripsi: data.deskripsi,
+            kategoriId: data.kategoriId,
+            fileId: data.fileId,
+          });
+
+          if (data?.file?.link) {
+            setPreviewFile(data.file.link)
+          }
+        }
+      } catch (error) {
+        console.error("Error loading program penghijauan:", error);
+        toast.error("Gagal memuat data program penghijauan");
+      }
+    }
+
+    loadDesaAntiKorupsi();
+  }, [params?.id]);
+
+
+  const handleSubmit = async () => {
+
+    try {
+      // Update global state with form data
+      desaAntiKorupsiState.edit.form = {
+        ...desaAntiKorupsiState.edit.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        kategoriId: formData.kategoriId || '',
+        fileId: formData.fileId // Keep existing imageId if not changed
+      };
+
+      // Jika ada file baru, upload
+      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");
+        }
+
+        // Update imageId in global state
+        desaAntiKorupsiState.edit.form.fileId = uploaded.id;
+      }
+
+      await desaAntiKorupsiState.edit.update();
+      toast.success("desa anti korupsi berhasil diperbarui!");
+      router.push("/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi");
+    } catch (error) {
+      console.error("Error updating desa anti korupsi:", error);
+      toast.error("Terjadi kesalahan saat memperbarui desa anti korupsi");
+    }
+  };
+
+  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"}>Edit List Desa Anti Korupsi</Text>
+          {desaAntiKorupsiState.findUnique.data ? (
+            <Paper key={desaAntiKorupsiState.findUnique.data.id}>
+              <Stack gap={"xs"}>
+                <TextInput
+                  value={formData.name}
+                  onChange={(val) => {
+                    setFormData({
+                      ...formData,
+                      name: val.target.value
+                    })
+                  }}
+                  label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+                  placeholder='Masukkan judul'
+                />
+                <Box>
+                  <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+                  <EditEditor
+                    value={formData.deskripsi}
+                    onChange={(val) => {
+                      setFormData({
+                        ...formData,
+                        deskripsi: val
+                      })
+                    }}
+                  />
+                </Box>
+                <Select
+                  value={formData.kategoriId}
+                  onChange={(val) => {
+                    setFormData({
+                      ...formData,
+                      kategoriId: val ?? ""
+                    })
+                  }}
+                  label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+                  placeholder="Pilih kategori"
+                  data={
+                    korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((v) => ({
+                      value: v.id,
+                      label: v.name,
+                    })) || []
+                  }
+                />
+                <Box>
+                  <Text fz={"md"} fw={"bold"}>File Document</Text>
+                  <Box>
+                    <Dropzone
+                      onDrop={(files) => {
+                        const selectedFile = files[0]; // Ambil file pertama
+                        if (selectedFile) {
+                          setFile(selectedFile);
+                          setPreviewFile(URL.createObjectURL(selectedFile)); // Buat preview
+                        }
+                      }}
+                      onReject={() => toast.error('File tidak valid.')}
+                      maxSize={5 * 1024 ** 2} // Maks 5MB
+                      accept={{
+                        'application/*': ['.pdf', '.doc', '.docx'],
+                      }}
+                    >
+                      <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                        <Dropzone.Accept>
+                          <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                        </Dropzone.Accept>
+                        <Dropzone.Reject>
+                          <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                        </Dropzone.Reject>
+                        <Dropzone.Idle>
+                          <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                        </Dropzone.Idle>
+
+                        <div>
+                          <Text size="xl" inline>
+                            Drag file ke sini atau klik untuk pilih file
+                          </Text>
+                          <Text size="sm" c="dimmed" inline mt={7}>
+                            Maksimal 5MB dan harus format document
+                          </Text>
+                        </div>
+                      </Group>
+                    </Dropzone>
+                    <Box>
+                      <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                      {previewFile ? (
+                        <iframe
+                          src={previewFile}
+                          width="100%"
+                          height="500px"
+                          style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                        />
+                      ) : (
+                        <Text>Tidak ada dokumen tersedia</Text>
+                      )}
+                    </Box>
+                  </Box>
+                </Box>
+                <Group>
+                  <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+                </Group>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditDesaAntiKorupsi;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/[id]/page.tsx

@@ -0,0 +1,122 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
+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 DetailKegiatanDesa() {
+  const detailState = useProxy(korupsiState.desaAntikorupsi)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    detailState.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      detailState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi")
+    }
+  }
+
+  if (!detailState.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 List Desa Anti Korupsi</Text>
+          {detailState.findUnique.data ? (
+            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{detailState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: detailState.findUnique.data?.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
+                  <Text fz={"lg"}>{detailState.findUnique.data?.kategori?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                  {detailState.findUnique.data?.file?.link ? (
+                    <iframe
+                      src={detailState.findUnique.data.file.link}
+                      width="100%"
+                      height="500px"
+                      style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                    />
+                  ) : (
+                    <Text>Tidak ada dokumen tersedia</Text>
+                  )}
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (detailState.findUnique.data) {
+                        setSelectedId(detailState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={detailState.delete.loading || !detailState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (detailState.findUnique.data) {
+                        router.push(`/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/${detailState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!detailState.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 anti korupsi ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailKegiatanDesa;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create/page.tsx

@@ -0,0 +1,166 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconFile, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+function CreateDesaAntiKorupsi() {
+  const router = useRouter();
+  const stateKorupsi = useProxy(korupsiState.desaAntikorupsi)
+  const [previewFile, setPreviewFile] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+
+  useEffect(() => {
+    stateKorupsi.findMany.load();
+    korupsiState.kategoriDesaAntiKorupsi.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateKorupsi.create.form = {
+      name: "",
+      deskripsi: "",
+      kategoriId: "",
+      fileId: "",
+    };
+    setFile(null);
+    setPreviewFile(null);
+  };
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file pdf terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    })
+
+    const uploaded = res.data?.data;
+
+    if (!uploaded?.id) {
+      return toast.error("Gagal mengupload file");
+    }
+
+    stateKorupsi.create.form.fileId = uploaded.id;
+
+    await stateKorupsi.create.create();
+
+    resetForm();
+    router.push("/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi")
+  }
+  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 Kegiatan Desa</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Document</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewFile(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.pdf', '.doc', '.docx'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format document
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewFile ? (
+                  <iframe
+                    src={previewFile}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada dokumen tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <TextInput
+            value={stateKorupsi.create.form.name}
+            onChange={(val) => {
+              stateKorupsi.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            placeholder='Masukkan judul'
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <CreateEditor
+              value={stateKorupsi.create.form.deskripsi}
+              onChange={(val) => {
+                stateKorupsi.create.form.deskripsi = val;
+              }}
+            />
+          </Box>
+          <Select
+            value={stateKorupsi.create.form.kategoriId}
+            onChange={(val) => {
+              stateKorupsi.create.form.kategoriId = val ?? "";
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            placeholder="Pilih kategori"
+            data={
+              korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.name,
+              })) || []
+            }
+          />
+
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateDesaAntiKorupsi;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx

@@ -0,0 +1,99 @@
+/* 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 { IconDeviceImacCog, IconSearch } 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 korupsiState from '../../../_state/landing-page/desa-anti-korupsi';
+
+function DesaAntiKorupsi() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='List Desa Anti Korupsi'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListDesaAntiKorupsi search={search} />
+    </Box>
+  );
+}
+
+function ListDesaAntiKorupsi({ search }: { search: string }) {
+  const listState = useProxy(korupsiState.desaAntikorupsi)
+  const router = useRouter();
+  useEffect(() => {
+    listState.findMany.load()
+  }, [])
+
+  const filteredData = (listState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword) || 
+      item.kategori?.name?.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!listState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Desa Anti Korupsi'
+            href='/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create'
+          />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama Desa Anti Korupsi</TableTh>
+                  <TableTh>Deskripsi Desa Anti Korupsi</TableTh>
+                  <TableTh>Kategori Desa Anti Korupsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                    </TableTd>
+                    <TableTd>{item.kategori?.name}</TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default DesaAntiKorupsi;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/page.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-function Page() {
-  return (
-    <div>
-      Desa Anti Korupsi
-    </div>
-  );
-}
-
-export default Page;

src/app/admin/(dashboard)/landing-page/layanan/page.tsx

@@ -1,23 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Stack, Text, Textarea, Title } from '@mantine/core';
-
-function Page() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <Title order={2}>Layanan</Title>
-        <Textarea
-          label={<Text>Deskripsi</Text>}
-          placeholder='tambah deskripsi'
-        />
-        <Group>
-          <Button
-            bg={colors['blue-button']} fz={'md'}>Submit</Button>
-        </Group>
-      </Stack>
-    </Box>
-  );
-}
-
-export default Page;

src/app/admin/(dashboard)/landing-page/penghargaan/page.tsx

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

src/app/admin/(dashboard)/landing-page/potensi/page.tsx

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

src/app/admin/(dashboard)/landing-page/prestasi-desa/_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: "List Prestasi Desa",
+            value: "listPrestasiDesa",
+            href: "/admin/landing-page/prestasi-desa/list-prestasi-desa"
+        },
+        {
+            label: "Kategori Prestasi Desa",
+            value: "kategoriPrestasiDesa",
+            href: "/admin/landing-page/prestasi-desa/kategori-prestasi-desa"
+        },
+    ];
+    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}>Prestasi 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)/landing-page/prestasi-desa/kategori-prestasi-desa/[id]/page.tsx

@@ -0,0 +1,98 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
+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 EditKategoriPrestasi() {
+  const router = useRouter();
+  const params = useParams();
+  const id = params?.id as string;
+  const stateKategori = useProxy(prestasiState.kategoriPrestasi);
+
+  const [formData, setFormData] = useState({
+    name: "",
+  });
+
+  useEffect(() => {
+    const loadKategoriprestasi = async () => {
+      if (!id) return;
+
+      try {
+        const data = await stateKategori.edit.load(id);
+
+        if (data) {
+          // pastikan id-nya masuk ke state edit
+          stateKategori.edit.id = id;
+          setFormData({
+            name: data.name || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading kategori prestasi desa:", error);
+        toast.error("Gagal memuat data kategori prestasi desa");
+      }
+    };
+
+    loadKategoriprestasi();
+  }, [id]);
+
+  const handleSubmit = async () => {
+    try {
+      if (!formData.name.trim()) {
+        toast.error('Nama kategori prestasi desa tidak boleh kosong');
+        return;
+      }
+
+      stateKategori.edit.form = {
+        name: formData.name.trim(),
+      };
+
+      // Safety check tambahan: pastikan ID tidak kosong
+      if (!stateKategori.edit.id) {
+        stateKategori.edit.id = id; // fallback
+      }
+
+      const success = await stateKategori.edit.update();
+
+      if (success) {
+        router.push("/admin/landing-page/prestasi-desa/kategori-prestasi-desa");
+      }
+    } catch (error) {
+      console.error("Error updating kategori prestasi desa:", error);
+      // toast akan ditampilkan dari fungsi update
+    }
+  };
+
+  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 Kategori Prestasi Desa</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Prestasi Desa</Text>}
+            placeholder='Masukkan nama kategori prestasi desa'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKategoriPrestasi;

src/app/admin/(dashboard)/landing-page/prestasi-desa/kategori-prestasi-desa/create/page.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
+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 { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+
+
+function CreateKategoriPrestasi() {
+  const router = useRouter();
+  const stateKategori = useProxy(prestasiState.kategoriPrestasi)
+
+  useEffect(() => {
+    stateKategori.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateKategori.create.form = {
+      name: "",
+    };
+  }
+
+  const handleSubmit = async () => {
+    await stateKategori.create.create();
+    resetForm();
+    router.push("/admin/landing-page/prestasi-desa/kategori-prestasi-desa")
+  }
+
+  return (
+    <Box>
+      <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 Kategori Prestasi Desa</Title>
+            <TextInput
+              value={stateKategori.create.form.name}
+              onChange={(val) => {
+                stateKategori.create.form.name = val.target.value;
+              }}
+              label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Prestasi Desa</Text>}
+              placeholder='Masukkan nama kategori prestasi desa'
+            />
+            <Group>
+              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default CreateKategoriPrestasi;

src/app/admin/(dashboard)/landing-page/prestasi-desa/kategori-prestasi-desa/page.tsx

@@ -0,0 +1,112 @@
+'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 { IconEdit, IconSearch, IconX } 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 { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import prestasiState from '../../../_state/landing-page/prestasi-desa';
+
+
+function KategoriPrestasiDesa() {
+  const [search, setSearch] = useState("")
+  return (
+    <Box>
+      <HeaderSearch
+        title='Kategori Prestasi Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListKategoriPrestasi search={search} />
+    </Box>
+  );
+}
+
+function ListKategoriPrestasi({ search }: { search: string }) {
+  const stateKategori = useProxy(prestasiState.kategoriPrestasi)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter()
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateKategori.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+
+  useShallowEffect(() => {
+    stateKategori.findMany.load()
+  }, [])
+
+  const filteredData = (stateKategori.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stateKategori.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Kategori Prestasi Desa'
+          href='/admin/landing-page/prestasi-desa/kategori-prestasi-desa/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Kategori</TableTh>
+              <TableTh>Edit</TableTh>
+              <TableTh>Delete</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>
+                  <Button color="green" onClick={() => router.push(`/admin/landing-page/prestasi-desa/kategori-prestasi-desa/${item.id}`)}>
+                    <IconEdit size={20} />
+                  </Button>
+                </TableTd>
+                <TableTd>
+                  <Button color="red" onClick={() => {
+                    setSelectedId(item.id)
+                    setModalHapus(true)
+                  }}>
+                    <IconX size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus kategori prestasi desa ini?'
+      />
+    </Box>
+  );
+}
+
+export default KategoriPrestasiDesa

src/app/admin/(dashboard)/landing-page/prestasi-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)/landing-page/prestasi-desa/list-prestasi-desa/[id]/edit/page.tsx

@@ -0,0 +1,230 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import { useProxy } from 'valtio/utils';
+
+import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput } from '@mantine/core';
+import { IconArrowBack, IconFile, IconUpload, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import colors from '@/con/colors';
+
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
+import ApiFetch from '@/lib/api-fetch';
+import { Dropzone } from '@mantine/dropzone';
+import { toast } from 'react-toastify';
+
+interface FormPrestasiDesa {
+  name: string;
+  deskripsi: string;
+  kategoriId: string;
+  imageId: string;
+}
+
+function EditPrestasiDesa() {
+  const editState = useProxy(prestasiState.prestasiDesa)
+  const [previewFile, setPreviewFile] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const params = useParams()
+  const router = useRouter()
+  const [formData, setFormData] = useState<FormPrestasiDesa>({
+    name: '',
+    deskripsi: '',
+    kategoriId: '',
+    imageId: '',
+  })
+
+  useEffect(() => {
+    const loadDesaAntiKorupsi = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await editState.edit.load(id);
+        if (data) {
+          // ⬇️ FIX PENTING: tambahkan ini
+          editState.edit.id = id;
+
+          editState.edit.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            kategoriId: data.kategoriId,
+            imageId: data.imageId,
+          };
+
+          setFormData({
+            name: data.name,
+            deskripsi: data.deskripsi,
+            kategoriId: data.kategoriId,
+            imageId: data.imageId,
+          });
+
+          if (data?.image?.link) {
+            setPreviewFile(data.image.link)
+          }
+        }
+      } catch (error) {
+        console.error("Error loading prestasi desa:", error);
+        toast.error("Gagal memuat data prestasi desa");
+      }
+    }
+
+    loadDesaAntiKorupsi();
+  }, [params?.id]);
+
+
+  const handleSubmit = async () => {
+
+    try {
+      // Update global state with form data
+      editState.edit.form = {
+        ...editState.edit.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        kategoriId: formData.kategoriId || '',
+        imageId: formData.imageId // Keep existing imageId if not changed
+      };
+
+      // Jika ada file baru, upload
+      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");
+        }
+
+        // Update imageId in global state
+        editState.edit.form.imageId = uploaded.id;
+      }
+
+      await editState.edit.update();
+      toast.success("prestasi desa berhasil diperbarui!");
+      router.push("/admin/landing-page/prestasi-desa/list-prestasi-desa");
+    } catch (error) {
+      console.error("Error updating prestasi desa:", error);
+      toast.error("Terjadi kesalahan saat memperbarui prestasi desa");
+    }
+  };
+
+  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"}>Edit List Prestasi Desa</Text>
+          {editState.findUnique.data ? (
+            <Paper key={editState.findUnique.data.id}>
+              <Stack gap={"xs"}>
+                <TextInput
+                  value={formData.name}
+                  onChange={(val) => {
+                    setFormData({
+                      ...formData,
+                      name: val.target.value
+                    })
+                  }}
+                  label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+                  placeholder='Masukkan judul'
+                />
+                <Box>
+                  <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+                  <EditEditor
+                    value={formData.deskripsi}
+                    onChange={(val) => {
+                      setFormData({
+                        ...formData,
+                        deskripsi: val
+                      })
+                    }}
+                  />
+                </Box>
+                <Select
+                  value={formData.kategoriId}
+                  onChange={(val) => {
+                    setFormData({
+                      ...formData,
+                      kategoriId: val ?? ""
+                    })
+                  }}
+                  label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+                  placeholder="Pilih kategori"
+                  data={
+                    prestasiState.kategoriPrestasi.findMany.data?.map((v) => ({
+                      value: v.id,
+                      label: v.name,
+                    })) || []
+                  }
+                />
+                <Box>
+                  <Text fz={"md"} fw={"bold"}>File Image</Text>
+                  <Stack gap={"xs"}>
+                    <Dropzone
+                      onDrop={(files) => {
+                        const selectedFile = files[0]; // Ambil file pertama
+                        if (selectedFile) {
+                          setFile(selectedFile);
+                          setPreviewFile(URL.createObjectURL(selectedFile)); // Buat preview
+                        }
+                      }}
+                      onReject={() => toast.error('File tidak valid.')}
+                      maxSize={5 * 1024 ** 2} // Maks 5MB
+                      accept={{
+                        'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp'],
+                      }}
+                    >
+                      <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                        <Dropzone.Accept>
+                          <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                        </Dropzone.Accept>
+                        <Dropzone.Reject>
+                          <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                        </Dropzone.Reject>
+                        <Dropzone.Idle>
+                          <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                        </Dropzone.Idle>
+
+                        <div>
+                          <Text size="xl" inline>
+                            Drag file ke sini atau klik untuk pilih file
+                          </Text>
+                          <Text size="sm" c="dimmed" inline mt={7}>
+                            Maksimal 5MB dan harus format image
+                          </Text>
+                        </div>
+                      </Group>
+                    </Dropzone>
+                    <Box>
+                      <Text fw={"bold"} fz={"lg"}>Image</Text>
+                      {previewFile ? (
+                        <Image
+                          alt=''
+                          src={previewFile}
+                          width="100%"
+                          height="500px"
+                          style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                        />
+                      ) : (
+                        <Text>Tidak ada image tersedia</Text>
+                      )}
+                    </Box>
+                  </Stack>
+                </Box>
+                <Group>
+                  <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+                </Group>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditPrestasiDesa;

src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/[id]/page.tsx

@@ -0,0 +1,122 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
+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 DetailPrestasiDesa() {
+  const detailState = useProxy(prestasiState.prestasiDesa)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    detailState.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      detailState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/landing-page/prestasi-desa/list-prestasi-desa")
+    }
+  }
+
+  if (!detailState.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 List Prestasi Desa</Text>
+          {detailState.findUnique.data ? (
+            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{detailState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: detailState.findUnique.data?.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
+                  <Text fz={"lg"}>{detailState.findUnique.data?.kategori?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Image</Text>
+                  {detailState.findUnique.data?.image?.link ? (
+                    <iframe
+                      src={detailState.findUnique.data.image.link}
+                      width="100%"
+                      height="500px"
+                      style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                    />
+                  ) : (
+                    <Text>Tidak ada image tersedia</Text>
+                  )}
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (detailState.findUnique.data) {
+                        setSelectedId(detailState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={detailState.delete.loading || !detailState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (detailState.findUnique.data) {
+                        router.push(`/admin/landing-page/prestasi-desa/list-prestasi-desa/${detailState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!detailState.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 prestasi desa ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailPrestasiDesa;

src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/create/page.tsx

@@ -0,0 +1,167 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
+
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconImageInPicture, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+function CreatePrestasiDesa() {
+  const router = useRouter();
+  const stateCreate = useProxy(prestasiState.prestasiDesa)
+  const [previewFile, setPreviewFile] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+
+  useEffect(() => {
+    stateCreate.findMany.load();
+    prestasiState.kategoriPrestasi.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateCreate.create.form = {
+      name: "",
+      deskripsi: "",
+      kategoriId: "",
+      imageId: "",
+    };
+    setFile(null);
+    setPreviewFile(null);
+  };
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file image terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    })
+
+    const uploaded = res.data?.data;
+
+    if (!uploaded?.id) {
+      return toast.error("Gagal mengupload image");
+    }
+
+    stateCreate.create.form.imageId = uploaded.id;
+
+    await stateCreate.create.create();
+
+    resetForm();
+    router.push("/admin/landing-page/prestasi-desa/list-prestasi-desa")
+  }
+  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 Prestasi Desa</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Image</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewFile(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.jpg', '.jpeg', '.png'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format image
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Image</Text>
+                {previewFile ? (
+                  <iframe
+                    src={previewFile}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada image tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <TextInput
+            value={stateCreate.create.form.name}
+            onChange={(val) => {
+              stateCreate.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            placeholder='Masukkan judul'
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <CreateEditor
+              value={stateCreate.create.form.deskripsi}
+              onChange={(val) => {
+                stateCreate.create.form.deskripsi = val;
+              }}
+            />
+          </Box>
+          <Select
+            value={stateCreate.create.form.kategoriId}
+            onChange={(val) => {
+              stateCreate.create.form.kategoriId = val ?? "";
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            placeholder="Pilih kategori"
+            data={
+              prestasiState.kategoriPrestasi.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.name,
+              })) || []
+            }
+          />
+
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreatePrestasiDesa;

src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/page.tsx

@@ -0,0 +1,100 @@
+/* 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 { IconDeviceImacCog, IconSearch } 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 prestasiState from '../../../_state/landing-page/prestasi-desa';
+
+
+function ListPrestasiDesa() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='List Prestasi Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPrestasi search={search} />
+    </Box>
+  );
+}
+
+function ListPrestasi({ search }: { search: string }) {
+  const listState = useProxy(prestasiState.prestasiDesa)
+  const router = useRouter();
+  useEffect(() => {
+    listState.findMany.load()
+  }, [])
+
+  const filteredData = (listState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword) || 
+      item.kategori?.name?.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!listState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Prestasi Desa'
+            href='/admin/landing-page/prestasi-desa/list-prestasi-desa/create'
+          />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama Prestasi Desa</TableTh>
+                  <TableTh>Deskripsi Prestasi Desa</TableTh>
+                  <TableTh>Kategori Prestasi Desa</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                    </TableTd>
+                    <TableTd>{item.kategori?.name}</TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/landing-page/prestasi-desa/list-prestasi-desa/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default ListPrestasiDesa;

src/app/admin/(dashboard)/landing-page/prestasi-desa/page.tsx

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

src/app/admin/(dashboard)/landing-page/profile/_lib/layoutTabs.tsx

@@ -0,0 +1,67 @@
+/* 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: "Program Inovasi",
+      value: "program-inovasi",
+      href: "/admin/landing-page/profile/program-inovasi"
+    },
+    {
+      label: "Pejabat Desa",
+      value: "pejabat-desa",
+      href: "/admin/landing-page/profile/pejabat-desa"
+    },
+    {
+      label: "Media Sosial",
+      value: "media-sosial",
+      href: "/admin/landing-page/profile/media-sosial"
+    },
+  ];
+  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}>Profile</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)/landing-page/profile/layout.tsx

@@ -0,0 +1,11 @@
+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)/landing-page/profile/media-sosial/[id]/edit/page.tsx

@@ -0,0 +1,174 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } 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 EditMediaSosial() {
+  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial)
+  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: stateMediaSosial.update.form.name || "",
+    iconUrl: stateMediaSosial.update.form.iconUrl || "",
+    imageId: stateMediaSosial.update.form.imageId || ""
+  })
+
+  useEffect(() => {
+    const id = params?.id as string;
+    if (!id) return;
+
+    const loadMediaSosial = async () => {
+      try {
+        const data = await stateMediaSosial.update.load(id);
+
+        if (data) {
+          setFormData({
+            name: data.name || "",
+            iconUrl: data.iconUrl || "",
+            imageId: data.imageId || "",
+          });
+          // Tampilkan preview gambar
+          if (data.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading program inovasi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengambil data program inovasi"
+        );
+      }
+    }
+
+    loadMediaSosial();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      stateMediaSosial.update.form = {
+        ...stateMediaSosial.update.form,
+        name: formData.name,
+        iconUrl: formData.iconUrl,
+        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");
+        }
+
+        // Update imageId in global state
+        stateMediaSosial.update.form.imageId = uploaded.id;
+      }
+
+      await stateMediaSosial.update.update();
+      toast.success("Media Sosial berhasil diperbarui!");
+      router.push("/admin/landing-page/profile/media-sosial");
+    } catch (error) {
+      console.error("Error updating media sosial:", error);
+      toast.error("Terjadi kesalahan saat memperbarui media sosial");
+    }
+  };
+
+  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 Media Sosial</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Media Sosial / Nama Kontak</Text>}
+            placeholder='Masukkan nama media sosial'
+          />
+          <TextInput
+            value={formData.iconUrl}
+            onChange={(e) => setFormData({ ...formData, iconUrl: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Icon URL / No Telephone</Text>}
+            placeholder='Masukkan icon url'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditMediaSosial;

src/app/admin/(dashboard)/landing-page/profile/media-sosial/[id]/page.tsx

@@ -0,0 +1,107 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
+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';
+
+function DetailMediaSosial() {
+  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    stateMediaSosial.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateMediaSosial.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/landing-page/profile/media-sosial")
+    }
+  }
+
+  if (!stateMediaSosial.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 Media Sosial</Text>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Media Sosial / Nama Kontak</Text>
+                <Text fz={"lg"}>{stateMediaSosial.findUnique.data?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Icon URL / No Telephone</Text>
+                <Text fz={"lg"}>{stateMediaSosial.findUnique.data?.iconUrl}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Box w={100} h={100}>
+                  <Image src={stateMediaSosial.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button
+                    onClick={() => {
+                      if (stateMediaSosial.findUnique.data) {
+                        setSelectedId(stateMediaSosial.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={!stateMediaSosial.findUnique.data}
+                    color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateMediaSosial.findUnique.data) {
+                        router.push(`/admin/landing-page/profile/media-sosial/${stateMediaSosial.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateMediaSosial.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 media sosial ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailMediaSosial;

src/app/admin/(dashboard)/landing-page/profile/media-sosial/create/page.tsx

@@ -0,0 +1,148 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import profileLandingPageState from '../../../../_state/landing-page/profile';
+
+function CreateMediaSosial() {
+  const router = useRouter();
+  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  useEffect(() => {
+    stateMediaSosial.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateMediaSosial.create.form = {
+      name: "",
+      imageId: "",
+      iconUrl: "",
+    };
+    setPreviewImage(null);
+    setFile(null);
+  };
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    })
+
+    const uploaded = res.data?.data;
+
+    if (!uploaded?.id) {
+      return toast.error("Gagal mengupload file");
+    }
+
+    stateMediaSosial.create.form.imageId = uploaded.id;
+
+    await stateMediaSosial.create.create();
+
+    resetForm();
+    router.push("/admin/landing-page/profile/media-sosial")
+  }
+  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 Media Sosial</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
+          <TextInput
+            value={stateMediaSosial.create.form.name || ''}
+            onChange={(val) => {
+              stateMediaSosial.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Media Sosial / Nama Kontak</Text>}
+            placeholder='Masukkan nama media sosial / nama kontak'
+          />
+          <TextInput
+            value={stateMediaSosial.create.form.iconUrl || ''}
+            onChange={(val) => {
+              stateMediaSosial.create.form.iconUrl = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Link Media Sosial / No Telephone</Text>}
+            placeholder='Masukkan link media sosial / no telephone'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateMediaSosial;

src/app/admin/(dashboard)/landing-page/profile/media-sosial/page.tsx

@@ -0,0 +1,93 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImac, 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 profileLandingPageState from '../../../_state/landing-page/profile';
+
+function MediaSosial() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Media Sosial'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListMediaSosial search={search} />
+    </Box>
+  );
+}
+
+function ListMediaSosial({ search }: { search: string }) {
+  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial)
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    stateMediaSosial.findMany.load()
+  }, [])
+
+  const filteredData = (stateMediaSosial.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.iconUrl?.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stateMediaSosial.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Media Sosial'
+          href='/admin/landing-page/profile/media-sosial/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Media Sosial / Nama Kontak</TableTh>
+              <TableTh>Image</TableTh>
+              <TableTh>Icon URL / No Telephone</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>
+                  <Box w={50} h={50}>
+                    <Image src={item.image?.link} alt={item.name} />
+                  </Box>
+                </TableTd>
+                <TableTd>{item.iconUrl}</TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/landing-page/profile/media-sosial/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default MediaSosial;

src/app/admin/(dashboard)/landing-page/profile/page.tsx

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

src/app/admin/(dashboard)/landing-page/profile/pejabat-desa/[id]/page.tsx

@@ -0,0 +1,270 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import colors from '@/con/colors';
+import { Alert, Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
+import ApiFetch from '@/lib/api-fetch';
+import { Dropzone } from '@mantine/dropzone';
+import { IconAlertCircle, IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { toast } from 'react-toastify';
+
+function EditPejabatDesa() {
+  const allState = useProxy(profileLandingPageState.pejabatDesa);
+  const params = useParams();
+  const router = useRouter();
+
+  // UI States
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Load data on mount
+  useEffect(() => {
+    const loadData = async () => {
+      const id = params?.id as string;
+      if (!id) {
+        toast.error("ID tidak valid");
+        router.push("/admin/landing-page/profile/pejabat-desa");
+        return;
+      }
+
+      try {
+        const profileData = await profileLandingPageState.pejabatDesa.findUnique.load(id);
+        profileLandingPageState.pejabatDesa.edit.initialize(profileData);
+
+
+        if (profileData && profileData.image?.link) {
+          setPreviewImage(profileData.image.link);
+        }
+      } catch (error) {
+        console.error("Error loading profile:", error);
+        toast.error("Gagal memuat data profile");
+      }
+    };
+
+    loadData();
+
+    return () => {
+      profileLandingPageState.pejabatDesa.edit.reset(); // cleanup form
+    };
+  }, [params?.id, router]);
+
+  const handleFieldChange = (field: string, value: string) => {
+    profileLandingPageState.pejabatDesa.edit.updateField(field as any, value);
+  };
+
+  const handleFileChange = (newFile: File | null) => {
+    if (!newFile) {
+      setFile(null);
+      return;
+    }
+
+    setFile(newFile);
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      setPreviewImage(event.target?.result as string);
+    };
+    reader.readAsDataURL(newFile);
+  };
+
+  const handleSubmit = async () => {
+    if (isSubmitting || !profileLandingPageState.pejabatDesa.edit.form.name.trim()) {
+      toast.error("Nama wajib diisi");
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      // Upload file jika ada
+      if (file) {
+        const uploadResponse = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = uploadResponse.data?.data;
+
+        if (!uploaded?.id) {
+          toast.error("Gagal upload gambar");
+          return;
+        }
+
+        profileLandingPageState.pejabatDesa.edit.form.imageId = uploaded.id;
+      }
+
+      // Submit form
+      const success = await profileLandingPageState.pejabatDesa.edit.submit();
+
+      if (success) {
+        toast.success("Berhasil menyimpan perubahan");
+        router.push("/admin/landing-page/profile/pejabat-desa");
+      }
+    } catch (error) {
+      console.error("Error submitting form:", error);
+      toast.error("Gagal menyimpan profile");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => {
+    router.back();
+  };
+
+  // Loading state
+  if (allState.edit.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data profile...</Text>
+        </Center>
+      </Box>
+    );
+  }
+
+  // Error state
+  if (allState.edit.error) {
+    return (
+      <Box>
+        <Stack gap="md">
+          <Button variant="subtle" onClick={handleBack}>
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+          <Alert icon={<IconAlertCircle size={16} />} color="red">
+            <Text fw="bold">Error</Text>
+            <Text>{allState.edit.error}</Text>
+          </Alert>
+        </Stack>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Stack gap="xs">
+        <Box>
+          <Button variant="subtle" onClick={handleBack}>
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+
+        <Box>
+          <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p="md" radius={10}>
+            <Stack gap="xs">
+              <Title order={3}>Edit Profile Pejabat Desa</Title>
+
+              {/* Nama Field */}
+              <TextInput
+                label={<Text fw="bold">Nama Perbekel</Text>}
+                placeholder="Masukkan nama perbekel"
+                value={allState.edit.form.name}
+                onChange={(e) => handleFieldChange('name', e.currentTarget.value)}
+                error={!allState.edit.form.name && "Nama wajib diisi"}
+              />
+
+              {/* Posisi Field */}
+              <TextInput
+                label={<Text fw="bold">Posisi</Text>}
+                placeholder="Masukkan posisi"
+                value={allState.edit.form.position}
+                onChange={(e) => handleFieldChange('position', e.currentTarget.value)}
+                error={!allState.edit.form.position && "Posisi wajib diisi"}
+              />
+
+              {/* File Upload */}
+              <Box>
+                <Text fz={"md"} fw={"bold"}>Gambar</Text>
+                <Box>
+                  <Dropzone
+                    onDrop={(files) => handleFileChange(files[0])}
+                    onReject={() => toast.error('File tidak valid.')}
+                    maxSize={5 * 1024 ** 2} // Maks 5MB
+                    accept={{ 'image/*': [] }}
+                  >
+                    <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                      <Dropzone.Accept>
+                        <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                      </Dropzone.Accept>
+                      <Dropzone.Reject>
+                        <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                      </Dropzone.Reject>
+                      <Dropzone.Idle>
+                        <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                      </Dropzone.Idle>
+
+                      <div>
+                        <Text size="xl" inline>
+                          Drag gambar ke sini atau klik untuk pilih file
+                        </Text>
+                        <Text size="sm" c="dimmed" inline mt={7}>
+                          Maksimal 5MB dan harus format gambar
+                        </Text>
+                      </div>
+                    </Group>
+                  </Dropzone>
+
+                  {/* Tampilkan preview kalau ada */}
+                  {previewImage && (
+                    <Box mt="sm">
+                      <Image
+                        src={previewImage}
+                        alt="Preview"
+                        style={{
+                          maxWidth: '100%',
+                          maxHeight: '200px',
+                          objectFit: 'contain',
+                          borderRadius: '8px',
+                          border: '1px solid #ddd',
+                        }}
+                      />
+                    </Box>
+                  )}
+
+                </Box>
+              </Box>
+
+              {/* Preview Gambar */}
+              <Box>
+                <Text fz="sm" fw="bold" mb="xs">Preview Gambar</Text>
+                {previewImage ? (
+                  <Image alt="Profile preview" src={previewImage} w={200} h={200} fit="cover" radius="md" />
+                ) : (
+                  <Center w={200} h={200} bg="gray.2">
+                    <Stack align="center" gap="xs">
+                      <IconImageInPicture size={48} color="gray" />
+                      <Text size="sm" c="gray">Tidak ada gambar</Text>
+                    </Stack>
+                  </Center>
+                )}
+              </Box>
+
+              {/* Submit Button */}
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={handleSubmit}
+                  loading={isSubmitting || allState.edit.loading}
+                  disabled={!allState.edit.form.name}
+                >
+                  {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+                </Button>
+
+                <Button
+                  variant="outline"
+                  onClick={handleBack}
+                  disabled={isSubmitting || allState.edit.loading}
+                >
+                  Batal
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditPejabatDesa;

src/app/admin/(dashboard)/landing-page/profile/pejabat-desa/page.tsx

@@ -0,0 +1,104 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
+
+
+function Page() {
+  const router = useRouter()
+  const allList = useProxy(profileLandingPageState.pejabatDesa)
+  useShallowEffect(() => {
+    allList.findUnique.load("edit") // Assuming "1" is your default ID, adjust as needed
+  }, [])
+
+  if (!allList.findUnique.data) {
+    return <Stack>
+      <Skeleton radius={10} h={800} />
+    </Stack>
+  }
+
+  const dataArray = Array.isArray(allList.findUnique.data)
+    ? allList.findUnique.data
+    : [allList.findUnique.data];
+
+  return (
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Stack gap={"xs"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={3}>Preview Pejabat Desa</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push(`/admin/landing-page/profile/pejabat-desa/${allList.findUnique.data?.id}`)}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        {dataArray.map((item) => (
+          <Box key={item.id} >
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: "md", md: 100 }}>
+                <Grid>
+                  <GridCol span={{ base: 12, md: 12 }}>
+                    <Center>
+                      <Image src={"/darmasaba-icon.png"} w={{ base: 100, md: 150 }} alt='' />
+                    </Center>
+                  </GridCol>
+                  <GridCol span={{ base: 12, md: 12 }}>
+                    <Text ta={"center"} fz={{ base: "1.2rem", md: "1.8rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
+                  </GridCol>
+                </Grid>
+              </Box>
+              <Divider my={"md"} color={colors['blue-button']} />
+              {/* biodata perbekel */}
+              <Box px={{ base: 0, md: 50 }} pb={30}>
+                <Box pb={20} px={{ base: 0, md: 50 }}>
+                  <Paper bg={colors['BG-trans']} w={{ base: "100%", md: "100%" }}>
+                    <Stack gap={0}>
+                      <Center>
+                        <Image
+                          pt={{ base: 0, md: 90 }}
+                          src={item.image?.link || "/perbekel.png"}
+                          w={{ base: 250, md: 350 }}
+                          alt='Foto Profil PPID'
+                          onError={(e) => {
+                            e.currentTarget.src = "/perbekel.png";
+                          }}
+                        />
+                      </Center>
+                      <Paper
+                        bg={colors['blue-button']}
+                        py={20}
+                        className="glass3"
+                        px={{ base: 10, md: 10 }}
+
+                      >
+                        <Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.2rem", md: "1.6rem" }}>
+                          {item.name}
+                        </Text>
+                      </Paper>
+                    </Stack>
+                  </Paper>
+                </Box>
+                <Box pt={10}>
+                  <Box>
+                    <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Position</Text>
+                    <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"}>{item.position}</Text>
+                  </Box>
+                </Box>
+              </Box>
+            </Paper>
+          </Box>
+        ))}
+      </Stack>
+    </Paper>
+  )
+}
+
+
+
+export default Page;

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/[id]/edit/page.tsx

@@ -0,0 +1,182 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } 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 EditProgramInovasi() {
+  const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi)
+  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: stateProgramInovasi.update.form.name || "",
+    description: stateProgramInovasi.update.form.description || "",
+    imageId: stateProgramInovasi.update.form.imageId || "",
+    link: stateProgramInovasi.update.form.link || "",
+  })
+
+  useEffect(() => {
+    const id = params?.id as string;
+    if (!id) return;
+
+    const loadProgramInovasi = async () => {
+      try {
+        const data = await stateProgramInovasi.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || "",
+            description: data.description || "",
+            imageId: data.imageId || "",
+            link: data.link || ""
+          });
+          // Tampilkan preview gambar
+          if (data.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading program inovasi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengambil data program inovasi"
+        );
+      }
+    }
+
+    loadProgramInovasi();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      stateProgramInovasi.update.form = {
+        ...stateProgramInovasi.update.form,
+        name: formData.name,
+        description: formData.description,
+        imageId: formData.imageId,
+        link: formData.link,
+      }
+      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");
+        }
+
+        // Update imageId in global state
+        stateProgramInovasi.update.form.imageId = uploaded.id;
+      }
+
+      await stateProgramInovasi.update.update();
+      toast.success("Program Inovasi berhasil diperbarui!");
+      router.push("/admin/landing-page/profile/program-inovasi");
+    } catch (error) {
+      console.error("Error updating program inovasi:", error);
+      toast.error("Terjadi kesalahan saat memperbarui program inovasi");
+    }
+  };
+
+  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 Program Inovasi</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Produk</Text>}
+            placeholder='Masukkan nama produk'
+          />
+          <TextInput
+            value={formData.description}
+            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Deskripsi</Text>}
+            placeholder='Masukkan deskripsi'
+          />
+          <TextInput
+            value={formData.link}
+            onChange={(e) => setFormData({ ...formData, link: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Link</Text>}
+            placeholder='Masukkan link'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditProgramInovasi;

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/[id]/page.tsx

@@ -0,0 +1,109 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
+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';
+
+function DetailProgramInovasi() {
+  const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    stateProgramInovasi.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateProgramInovasi.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/landing-page/profile/program-inovasi")
+    }
+  }
+
+  if (!stateProgramInovasi.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 Program Inovasi</Text>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Program Inovasi</Text>
+                <Text fz={"lg"}>{stateProgramInovasi.findUnique.data?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"}>{stateProgramInovasi.findUnique.data?.description}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Link</Text>
+                <Text fz={"lg"}>{stateProgramInovasi.findUnique.data?.link}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={stateProgramInovasi.findUnique.data?.image?.link} alt="gambar" />
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button
+                    onClick={() => {
+                      if (stateProgramInovasi.findUnique.data) {
+                        setSelectedId(stateProgramInovasi.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={!stateProgramInovasi.findUnique.data}
+                    color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateProgramInovasi.findUnique.data) {
+                        router.push(`/admin/landing-page/profile/program-inovasi/${stateProgramInovasi.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateProgramInovasi.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 program inovasi ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailProgramInovasi;

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/create/page.tsx

@@ -0,0 +1,158 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import profileLandingPageState from '../../../../_state/landing-page/profile';
+
+function CreateProgramInovasi() {
+  const router = useRouter();
+  const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  useEffect(() => {
+    stateProgramInovasi.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateProgramInovasi.create.form = {
+      name: "",
+      description: "",
+      imageId: "",
+      link: "",
+    };
+    setPreviewImage(null);
+    setFile(null);
+  };
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    })
+
+    const uploaded = res.data?.data;
+
+    if (!uploaded?.id) {
+      return toast.error("Gagal mengupload file");
+    }
+
+    stateProgramInovasi.create.form.imageId = uploaded.id;
+
+    await stateProgramInovasi.create.create();
+
+    resetForm();
+    router.push("/admin/landing-page/profile/program-inovasi")
+  }
+  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 Program Inovasi</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
+          <TextInput
+            value={stateProgramInovasi.create.form.name || ''}
+            onChange={(val) => {
+              stateProgramInovasi.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Program Inovasi</Text>}
+            placeholder='Masukkan nama program inovasi'
+          />
+          <TextInput
+            value={stateProgramInovasi.create.form.description || ''}
+            onChange={(val) => {
+              stateProgramInovasi.create.form.description = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Deskripsi</Text>}
+            placeholder='Masukkan deskripsi'
+          />
+
+          <TextInput
+            value={stateProgramInovasi.create.form.link || ''}
+            onChange={(val) => {
+              stateProgramInovasi.create.form.link = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Link</Text>}
+            placeholder='Masukkan link'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateProgramInovasi;

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/page.tsx

@@ -0,0 +1,90 @@
+'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 { IconDeviceImac, 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 profileLandingPageState from '../../../_state/landing-page/profile';
+
+function ProgramInovasi() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Program Inovasi'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListProgramInovasi search={search} />
+    </Box>
+  );
+}
+
+function ListProgramInovasi({ search }: { search: string }) {
+  const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi)
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    stateProgramInovasi.findMany.load()
+  }, [])
+
+  const filteredData = (stateProgramInovasi.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.description?.toLowerCase().includes(keyword) ||
+      item.link?.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stateProgramInovasi.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Program Inovasi'
+          href='/admin/landing-page/profile/program-inovasi/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Program</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Link</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>{item.description}</TableTd>
+                <TableTd>{item.link}</TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/landing-page/profile/program-inovasi/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ProgramInovasi;

src/app/admin/(dashboard)/landing-page/sdgs-desa/[id]/edit/page.tsx

@@ -0,0 +1,182 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+import sdgsDesa from "@/app/admin/(dashboard)/_state/landing-page/sdgs-desa";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
+import { IconArrowBack, IconImageInPicture, IconUpload, IconX } 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 EditKolaborasiInovasi() {
+  const sdgsState = useProxy(sdgsDesa);
+  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: sdgsState.edit.form.name || '',
+    jumlah: sdgsState.edit.form.jumlah || '',
+    imageId: sdgsState.edit.form.imageId || ''
+  });
+
+  // Load sdgs desa by id saat pertama kali
+  useEffect(() => {
+    const loadKolaborasi = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await sdgsState.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            jumlah: data.jumlah || '',
+            imageId: data.imageId || '',
+          });
+          if (data.image) {
+            if (data?.image?.link) {
+              setPreviewImage(data.image.link);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Error loading sdgs desa:", error);
+        toast.error("Gagal memuat data sdgs desa");
+      }
+    };
+
+    loadKolaborasi();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+
+    try {
+      // edit global state with form data
+      sdgsState.edit.form = {
+        ...sdgsState.edit.form,
+        name: formData.name,
+        jumlah: formData.jumlah,
+        imageId: formData.imageId // Keep existing imageId if not changed
+      };
+
+      // Jika ada file baru, upload
+      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");
+        }
+
+        // edit imageId in global state
+        sdgsState.edit.form.imageId = uploaded.id;
+      }
+
+      await sdgsState.edit.update();
+      toast.success("sdgs desa berhasil diperbarui!");
+      router.push("/admin/landing-page/SDGs-Desa");
+    } catch (error) {
+      console.error("Error updating sdgs desa:", error);
+      toast.error("Terjadi kesalahan saat memperbarui sdgs desa");
+    }
+  };
+
+  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 SDGs Desa</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
+            placeholder="masukkan nama"
+          />
+
+          <TextInput
+            value={formData.jumlah}
+            onChange={(e) => setFormData({ ...formData, jumlah: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Jumlah</Text>}
+            placeholder="masukkan jumlah"
+          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Image</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format image
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewImage ? (
+                  <iframe
+                    src={previewImage}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada image tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKolaborasiInovasi;

src/app/admin/(dashboard)/landing-page/sdgs-desa/[id]/page.tsx

@@ -0,0 +1,110 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+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 colors from '@/con/colors';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import sdgsDesa from '../../../_state/landing-page/sdgs-desa';
+
+function DetailSDGSDesa() {
+  const sdgsState = useProxy(sdgsDesa)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    sdgsState.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      sdgsState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/landing-page/SDGs-Desa")
+    }
+  }
+
+  if (!sdgsState.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 SDGS Desa</Text>
+          {sdgsState.findUnique.data ? (
+            <Paper key={sdgsState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama SDGS Desa</Text>
+                  <Text fz={"lg"}>{sdgsState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jumlah</Text>
+                  <Text fz={"lg"}>{sdgsState.findUnique.data?.jumlah}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={sdgsState.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (sdgsState.findUnique.data) {
+                        setSelectedId(sdgsState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={sdgsState.delete.loading || !sdgsState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (sdgsState.findUnique.data) {
+                        router.push(`/admin/landing-page/SDGs-Desa/${sdgsState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!sdgsState.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 SDGS Desa ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailSDGSDesa;

src/app/admin/(dashboard)/landing-page/sdgs-desa/create/page.tsx

@@ -0,0 +1,148 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconImageInPicture, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import sdgsDesa from '../../../_state/landing-page/sdgs-desa';
+
+
+function CreateSDGsDesa() {
+  const router = useRouter();
+  const stateSDGSDesa = useProxy(sdgsDesa)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+
+  useEffect(() => {
+    stateSDGSDesa.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateSDGSDesa.create.form = {
+      name: "",
+      jumlah: "",
+      imageId: "",
+    };
+    setFile(null);
+    setPreviewImage(null);
+  };
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file image terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    })
+
+    const uploaded = res.data?.data;
+
+    if (!uploaded?.id) {
+      return toast.error("Gagal mengupload file");
+    }
+
+    stateSDGSDesa.create.form.imageId = uploaded.id;
+
+    await stateSDGSDesa.create.create();
+
+    resetForm();
+    router.push("/admin/landing-page/SDGs-Desa")
+  }
+  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 SDGs Desa</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Image</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format image
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewImage ? (
+                  <iframe
+                    src={previewImage}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada image tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <TextInput
+            value={stateSDGSDesa.create.form.name}
+            onChange={(val) => {
+              stateSDGSDesa.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            placeholder='Masukkan judul'
+          />
+           <TextInput
+           type='number'
+            value={stateSDGSDesa.create.form.jumlah}
+            onChange={(val) => {
+              stateSDGSDesa.create.form.jumlah = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Jumlah</Text>}
+            placeholder='Masukkan jumlah'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateSDGsDesa;

src/app/admin/(dashboard)/landing-page/sdgs-desa/page.tsx

@@ -1,11 +1,97 @@
-import React from 'react';
+/* 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 { IconDeviceImacCog, IconSearch } 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 sdgsDesa from '../../_state/landing-page/sdgs-desa';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+
+function SdgsDesa() {
+  const [search, setSearch] = useState('');
   return (
-    <div>
-      SDGS Desa
-    </div>
+    <Box>
+      <HeaderSearch
+        title='SDGs Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListSdgsDesa search={search} />
+    </Box>
   );
 }
 
-export default Page;
+function ListSdgsDesa({ search }: { search: string }) {
+  const listState = useProxy(sdgsDesa)
+  const router = useRouter();
+  useEffect(() => {
+    listState.findMany.load()
+  }, [])
+
+  const filteredData = (listState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.jumlah.toLowerCase().includes(keyword)
+    )
+  });
+
+  if (!listState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='SDGs Desa'
+            href='/admin/landing-page/SDGs-Desa/create'
+          />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama SDGs Desa</TableTh>
+                  <TableTh>Jumlah SDGs Desa</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate="end" fz={"sm"}>{item.jumlah}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/landing-page/SDGs-Desa/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default SdgsDesa;

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/edit/page.tsx

@@ -0,0 +1,162 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import dataLingkunganDesaState from '@/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa';
+import colors from '@/con/colors';
+import { Box, Button, 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';
+import SelectIconProgramEdit from '../../../../_com/selectIconEdit';
+
+interface FormDataLingkunganDesa {
+  name: string;
+  deskripsi: string;
+  jumlah: string;
+  icon: string;
+}
+
+type IconKey =
+  'ekowisata' |
+  'kompetisi' |
+  'wisata' |
+  'ekonomi' |
+  'sampah' |
+  'truck' |
+  'scale' |
+  'clipboard' |
+  'trash' |
+  'lingkunganSehat' |
+  'sumberOksigen' |
+  'ekonomiBerkelanjutan' |
+  'mencegahBencana' |
+  'rumah' |
+  'pohon' |
+  'air';
+
+
+function EditDataLingkunganDesa() {
+  const stateDataLingkunganDesa = useProxy(dataLingkunganDesaState)
+  const params = useParams()
+  const router = useRouter();
+  const [formData, setFormData] = useState<FormDataLingkunganDesa>({
+    name: '',
+    deskripsi: '',
+    jumlah: '',
+    icon: '',
+  })
+
+  useEffect(() => {
+    const loadProgramKreatif = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await stateDataLingkunganDesa.update.load(id);
+        if (data) {
+          // ⬇️ FIX PENTING: tambahkan ini
+          stateDataLingkunganDesa.update.id = id;
+
+          stateDataLingkunganDesa.update.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            jumlah: data.jumlah,
+            icon: data.icon,
+          };
+
+          setFormData({
+            name: data.name,
+            deskripsi: data.deskripsi,
+            jumlah: data.jumlah,
+            icon: data.icon,
+          });
+        }
+      } catch (error) {
+        console.error("Error loading data lingkungan desa:", error);
+        toast.error("Gagal memuat data data lingkungan desa");
+      }
+    }
+
+    loadProgramKreatif();
+  }, [params?.id]);
+
+
+
+  const handleSubmit = async () => {
+    try {
+      stateDataLingkunganDesa.update.form = {
+        ...stateDataLingkunganDesa.update.form,
+        name: formData.name.trim(),
+        deskripsi: formData.deskripsi.trim(),
+        jumlah: formData.jumlah.trim(),
+        icon: formData.icon.trim(),
+      }
+      await stateDataLingkunganDesa.update.submit();
+      router.push("/admin/lingkungan/data-lingkungan-desa");
+    } catch (error) {
+      console.error("Error updating data lingkungan desa:", error);
+      toast.error("Gagal memuat data data lingkungan desa");
+    }
+  }
+  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={3}>Edit Data Lingkungan Desa</Title>
+          <TextInput
+            value={formData.name}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Data Lingkungan Desa</Text>}
+            placeholder="masukkan nama data lingkungan desa"
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                name: val.target.value
+              })
+            }}
+          />
+          <TextInput
+            value={formData.jumlah}
+            label={<Text fz={"sm"} fw={"bold"}>Jumlah Data Lingkungan Desa</Text>}
+            placeholder="masukkan jumlah data lingkungan desa"
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                jumlah: val.target.value
+              })
+            }}
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+                stateDataLingkunganDesa.update.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Ikon Data Lingkungan Desa</Text>
+            <SelectIconProgramEdit
+              value={formData.icon as IconKey}
+              onChange={(value) => {
+                setFormData((prev) => ({ ...prev, icon: value }));
+                stateDataLingkunganDesa.update.form.icon = value;
+              }} />
+          </Box>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditDataLingkunganDesa;

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/page.tsx

@@ -0,0 +1,138 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconChartLine, IconChristmasTreeFilled, IconClipboard, IconDroplet, IconEdit, IconHome, IconHomeEco, IconLeaf, IconRecycle, IconScale, IconShieldFilled, IconTent, IconTrash, IconTree, IconTrendingUp, IconTrophy, IconTruck, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import dataLingkunganDesaState from '../../../_state/lingkungan/data-lingkungan-desa';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailDataLingkunganDesa() {
+  const [modalHapus, setModalHapus] = useState(false)
+  const stateDataLingkungan = useProxy(dataLingkunganDesaState)
+  const router = useRouter()
+  const params = useParams()
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const iconMap: Record<string, React.FC<any>> = {
+    ekowisata: IconLeaf,
+    kompetisi: IconTrophy,
+    wisata: IconTent,
+    ekonomi: IconChartLine,
+    sampah: IconRecycle,
+    truck: IconTruck,
+    scale: IconScale,
+    clipboard: IconClipboard,
+    trash: IconTrash,
+    lingkunganSehat: IconHomeEco,
+    sumberOksigen: IconChristmasTreeFilled,
+    ekonomiBerkelanjutan: IconTrendingUp,
+    mencegahBencana: IconShieldFilled,
+    rumah: IconHome,
+    pohon: IconTree,
+    air: IconDroplet
+  };
+
+  useShallowEffect(() => {
+    stateDataLingkungan.findUnique.load(params?.id as string)
+  }, [params?.id])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateDataLingkungan.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/lingkungan/data-lingkungan-desa")
+    }
+  }
+
+  if (!stateDataLingkungan.findUnique.data) {
+    return (
+      <Stack>
+        <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 Data Lingkungan Desa</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Data Lingkungan Desa</Text>
+                <Text fz={"lg"}>{stateDataLingkungan.findUnique.data?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Jumlah Data Lingkungan Desa</Text>
+                <Text fz={"lg"}>{stateDataLingkungan.findUnique.data?.jumlah}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Ikon Data Lingkungan Desa</Text>
+                {iconMap[stateDataLingkungan.findUnique.data?.icon] && (
+                  <Box title={stateDataLingkungan.findUnique.data?.icon}>
+                    {React.createElement(iconMap[stateDataLingkungan.findUnique.data?.icon], { size: 24 })}
+                  </Box>
+                )}
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateDataLingkungan.findUnique.data?.deskripsi }}></Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (stateDataLingkungan.findUnique.data) {
+                        setSelectedId(stateDataLingkungan.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={stateDataLingkungan.delete.loading || !stateDataLingkungan.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateDataLingkungan.findUnique.data) {
+                        router.push(`/admin/lingkungan/data-lingkungan-desa/${stateDataLingkungan.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateDataLingkungan.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 data lingkungan desa ini?"
+      /> 
+    </Box>
+  );
+}
+
+export default DetailDataLingkunganDesa;

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx

@@ -1,69 +1,68 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import React from 'react';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import SelectIconProgram from '../../../_com/selectIcon';
+import dataLingkunganDesaState from '../../../_state/lingkungan/data-lingkungan-desa';
+
 
 function CreateDataLingkunganDesa() {
-  const router = useRouter()
+  const stateCreate = useProxy(dataLingkunganDesaState)
+  const router = useRouter();
+
+  const resetForm = () => {
+    stateCreate.create.form = {
+      name: "",
+      deskripsi: "",
+      jumlah: "",
+      icon: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    await stateCreate.create.create();
+    resetForm();
+    router.push("/admin/lingkungan/data-lingkungan-desa")
+  }
   return (
     <Box>
       <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
           <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
           <Title order={3}>Create Data Lingkungan Desa</Title>
           <TextInput
-            label={<Text fz="sm" fw="bold">Nama Data Lingkungan Desa</Text>}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Data Lingkungan Desa</Text>}
             placeholder="masukkan nama data lingkungan desa"
-          />
-          <TextInput
-            label={<Text fz="sm" fw="bold">Jumlah</Text>}
-            placeholder="masukkan jumlah"
-          />
-          <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            onChange={(val) => stateCreate.create.form.name = val.target.value}
           />
           <Box>
-            <Text fz="sm" fw="bold">Gambar</Text>
-            <IconImageInPicture size={25} />
+            <Text fz={"sm"} fw={"bold"}>Ikon Data Lingkungan Desa</Text>
+            <SelectIconProgram onChange={(value) => stateCreate.create.form.icon = value} />
           </Box>
-          {/* <FileInput
-                        label={<Text fz="sm" fw="bold">Upload Gambar</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>
-                    )} */}
+          <TextInput
+            type='number'
+            onChange={(e) => stateCreate.create.form.jumlah = e.currentTarget.value}
+            label={<Text fw={"bold"} fz={"sm"}>Jmlah data lingkungan desa</Text>}
+            placeholder='Masukkan jumlah data lingkungan desa'
+          />
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Data Lingkungan Desa</Text>
-            <KeamananEditor
-              showSubmit={false}
+            <Text fw={"bold"} fz={"sm"}>Deskripsi data lingkungan desa</Text>
+            <CreateEditor
+              value={stateCreate.create.form.deskripsi}
+              onChange={(htmlContent) => stateCreate.create.form.deskripsi = htmlContent}
             />
           </Box>
-          <Button bg={colors['blue-button']} >
-            Simpan Data
-          </Button>
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/detail/page.tsx

@@ -1,66 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailDataLingkunganDesa() {
-  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 Data Lingkungan Desa</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Data Lingkungan Desa</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Jumlah</Text>
-                <Text fz={"lg"}>Test Jumlah</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"} >Test Deskripsi</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/lingkungan/data-lingkungan-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 DetailDataLingkunganDesa;

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/edit/page.tsx

@@ -1,73 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
-
-function EditDataLingkunganDesa() {
-  const router = useRouter()
-  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}>Edit Data Lingkungan Desa</Title>
-          <TextInput
-            label={<Text fz="sm" fw="bold">Nama Data Lingkungan Desa</Text>}
-            placeholder="masukkan nama data lingkungan desa"
-          />
-          <TextInput
-            label={<Text fz="sm" fw="bold">Jumlah</Text>}
-            placeholder="masukkan jumlah"
-          />
-          <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
-          />
-          <Box>
-            <Text fz="sm" fw="bold">Gambar</Text>
-            <IconImageInPicture size={25} />
-          </Box>
-          {/* <FileInput
-                        label={<Text fz="sm" fw="bold">Upload Gambar</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 fw={"bold"} fz={"sm"}>Deskripsi Data Lingkungan Desa</Text>
-            <KeamananEditor
-              showSubmit={false}
-            />
-          </Box>
-          <Button bg={colors['blue-button']} >
-            Simpan Data
-          </Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default EditDataLingkunganDesa;

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx

@@ -1,69 +1,168 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import React from 'react';
-import HeaderSearch from '../../_com/header';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import colors from '@/con/colors';
-import JudulList from '../../_com/judulList';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import {
+  IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconDeviceImac, IconDroplet, IconHome, IconHomeEco, IconLeaf,
+  IconRecycle, IconScale, IconSearch, IconShieldFilled, IconTent,
+  IconTrashFilled,
+  IconTree,
+  IconTrendingUp,
+  IconTrophy,
+  IconTruckFilled
+} from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import dataLingkunganDesaState from '../../_state/lingkungan/data-lingkungan-desa';
+
 
 function DataLingkunganDesa() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
-      title='Data Lingkungan Desa'
-      placeholder='pencarian'
-      searchIcon={<IconSearch size={20} />}
+        title='Data Lingkungan Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListDataLingkunganDesa/>
+      <ListDataLingkunganDesa search={search} />
     </Box>
   );
 }
 
-function ListDataLingkunganDesa() {
+function ListDataLingkunganDesa({ search }: { search: string }) {
+  const listState = useProxy(dataLingkunganDesaState)
+  const { data, loading, page, totalPages, load } = listState.findMany
   const router = useRouter();
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p="md">
-        <Stack>
-          <JudulList
-          title='List Data Lingkungan Desa'
-          href='/admin/lingkungan/data-lingkungan-desa/create'
-          />
-          <Box style={{overflowX: 'auto'}}>
-            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+
+  useEffect(() => {
+    load(page, 10)
+  }, [page])
+
+  const filteredData = (data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword) ||
+      item.jumlah.toLowerCase().includes(keyword) ||
+      item.icon.toLowerCase().includes(keyword)
+    );
+  });
+
+  const iconMap: Record<string, React.FC<any>> = {
+    ekowisata: IconLeaf,
+    kompetisi: IconTrophy,
+    wisata: IconTent,
+    ekonomi: IconChartLine,
+    sampah: IconRecycle,
+    truck: IconTruckFilled,
+    scale: IconScale,
+    clipboard: IconClipboardTextFilled,
+    trash: IconTrashFilled,
+    lingkunganSehat: IconHomeEco,
+    sumberOksigen: IconChristmasTreeFilled,
+    ekonomiBerkelanjutan: IconTrendingUp,
+    mencegahBencana: IconShieldFilled,
+    rumah: IconHome,
+    pohon: IconTree,
+    air: IconDroplet
+
+  };
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={650} />
+      </Stack>
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md" >
+          <Stack>
+            <JudulList
+              title='List Data Lingkungan Desa'
+              href='/admin/lingkungan/data-lingkungan-desa/create'
+            />
+            <Table striped withTableBorder withRowBorders>
               <TableThead>
                 <TableTr>
-                  <TableTh>Nama Data Lingkungan</TableTh>
-                  <TableTh>Gambar</TableTh>
-                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama Data Lingkungan Desa</TableTh>
+                  <TableTh>Jumlah Data Lingkungan Desa</TableTh>
+                  <TableTh>Ikon</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
-              <TableTbody>
-                <TableTr>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>Lingkungan Desa</Text>
-                    </Box>
+            </Table>
+            <Text ta="center">Tidak ada data lingkungan desa yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
+  }
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'} h={{ base: 'auto', md: 650 }}>
+        <JudulList
+          title='List Data Lingkungan Desa'
+          href='/admin/lingkungan/data-lingkungan-desa/create'
+        />
+        <Box style={{ overflowY: 'auto' }}>
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
+                <TableTh style={{ width: '20%' }}>Nama Data Lingkungan Desa</TableTh>
+                <TableTh style={{ width: '35%' }}>Jumlah Data Lingkungan Desa</TableTh>
+                <TableTh style={{ width: '10%' }}>Ikon</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item, index) => (
+                <TableTr key={item.id}>
+                  <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
+                  <TableTd style={{ width: '20%', wordWrap: 'break-word' }}>{item.name}</TableTd>
+                  <TableTd style={{ width: '35%', wordWrap: 'break-word' }}>± {item.jumlah}</TableTd>
+                  <TableTd style={{ width: '10%' }}>
+                    {iconMap[item.icon] && (
+                      <Box title={item.icon}>
+                        {React.createElement(iconMap[item.icon], { size: 24 })}
+                      </Box>
+                    )}
                   </TableTd>
-                  <TableTd>
-                    <Image w={100} src={"/"}  alt="image" />
-                  </TableTd>
-                  <TableTd>Deskripsi</TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/detail')}>
-                      <IconDeviceImacCog size={25} />
+                  <TableTd style={{ width: '15%', textAlign: 'center' }}>
+                    <Button onClick={() => router.push(`/admin/lingkungan/data-lingkungan-desa/${item.id}`)}>
+                      <IconDeviceImac size={25} />
                     </Button>
                   </TableTd>
                 </TableTr>
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+              ))}
+            </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>
-  )
+  );
 }
-
 export default DataLingkunganDesa;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/_lib/edukasiLingkunganTextEditor.tsx

@@ -0,0 +1,100 @@
+'use client'
+import { Button, Stack } from '@mantine/core';
+import { Link, RichTextEditor } from '@mantine/tiptap';
+import Highlight from '@tiptap/extension-highlight';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { useEffect } from 'react';
+
+
+export function EdukasiLingkunganTextEditor({ onSubmit, onChange, showSubmit = true, initialContent = '', }: { 
+  onSubmit?: (val: string) => void, 
+  onChange: (val: string) => void, 
+  showSubmit?: boolean,
+  initialContent?: string }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content: initialContent,
+    onUpdate : ({editor}) => {
+      onChange(editor.getHTML())
+    }
+  });
+
+  useEffect(() => {
+    if (editor && initialContent !== editor.getHTML()) {
+      editor.commands.setContent(initialContent || '<p></p>');
+    }
+  }, [initialContent, editor]);
+
+  return (
+    <Stack >
+      <RichTextEditor editor={editor}>
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            <RichTextEditor.Underline />
+            <RichTextEditor.Strikethrough />
+            <RichTextEditor.ClearFormatting />
+            <RichTextEditor.Highlight />
+            <RichTextEditor.Code />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+            <RichTextEditor.H4 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Blockquote />
+            <RichTextEditor.Hr />
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+            <RichTextEditor.Subscript />
+            <RichTextEditor.Superscript />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+            <RichTextEditor.AlignRight />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Undo />
+            <RichTextEditor.Redo />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+      {showSubmit && (
+        <Button onClick={() => {
+          if (!editor) return
+          onSubmit?.(editor?.getHTML())
+        }}>Submit</Button>
+      )}
+    </Stack>
+  );
+}

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/_lib/layouTabs.tsx

@@ -0,0 +1,67 @@
+/* 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: "Tujuan Edukasi Lingkungan",
+            value: "tujuanedukasilingkungan",
+            href: "/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan"
+        },
+        {
+            label: "Materi Edukasi Yang Diberikan",
+            value: "materiedukasiyangdiberikan",
+            href: "/admin/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan"
+        },
+        {
+            label: "Contoh Kegiatan Di Desa Darmasaba",
+            value: "contohkegiatan",
+            href: "/admin/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba"
+        },
+    ];
+    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)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit/page.tsx

@@ -0,0 +1,87 @@
+'use client'
+import stateEdukasiLingkungan from '@/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const EdukasiLingkunganTextEditor = dynamic(() => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor), {
+  ssr: false,
+});
+
+function EditContohKegiatanDesaDarmasaba() {
+  const router = useRouter()
+  const contohEdukasiState = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!contohEdukasiState.findById.data) {
+      contohEdukasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (contohEdukasiState.findById.data) {
+      setJudul(contohEdukasiState.findById.data.judul ?? '')
+      setContent(contohEdukasiState.findById.data.deskripsi ?? '')
+    }
+  }, [contohEdukasiState.findById.data])
+
+  const submit = () => {
+    if (contohEdukasiState.findById.data) {
+      contohEdukasiState.findById.data.judul = judul;
+      contohEdukasiState.findById.data.deskripsi = content;
+      contohEdukasiState.update.save(contohEdukasiState.findById.data)
+    }
+    router.push('/admin/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Contoh Kegiatan Di Desa Darmasaba</Title>
+              <Text fw={"bold"}>Judul</Text>
+              <EdukasiLingkunganTextEditor
+                showSubmit={false}
+                onChange={setJudul}
+                initialContent={judul}
+              />
+              <Text fw={"bold"}>Deskripsi</Text>
+              <EdukasiLingkunganTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={contohEdukasiState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditContohKegiatanDesaDarmasaba;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateEdukasiLingkungan from '../../../_state/lingkungan/edukasi-lingkungan';
+
+function Page() {
+  const router = useRouter()
+  const listContohEdukasi = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan)
+  useShallowEffect(() => {
+    listContohEdukasi.findById.load('edit')
+  }, [])
+
+  if (!listContohEdukasi.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Contoh Kegiatan Di Desa Darmasaba</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listContohEdukasi.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listContohEdukasi.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/create/page.tsx

@@ -1,61 +0,0 @@
-'use client'
-import React from 'react';
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-function CreateEdukasiLingkungan() {
-  const router = useRouter()
-  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 Edukasi Lingkungan</Title>
-          <TextInput
-            label={<Text fz="sm" fw="bold">Judul Edukasi Lingkungan</Text>}
-            placeholder="masukkan judul edukasi lingkungan"
-          />
-          <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi Edukasi Lingkungan</Text>}
-            placeholder="masukkan deskripsi edukasi lingkungan"
-          />
-          {/* <FileInput
-          label={<Text fz="sm" fw="bold">Upload Gambar</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">Gambar</Text>
-            <IconImageInPicture size={25} />
-          </Box>
-          <Button bg={colors['blue-button']} >
-            Simpan
-          </Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default CreateEdukasiLingkungan;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/detail/page.tsx

@@ -1,62 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailEdukasiLingkungan() {
-  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 Edukasi Lingkungan</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Judul Edukasi Lingkungan</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi Edukasi Lingkungan</Text>
-                <Text fz={"lg"} >Test Deskripsi</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/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 DetailEdukasiLingkungan;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/edit/page.tsx

@@ -1,61 +0,0 @@
-'use client'
-import React from 'react';
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-function EditEdukasiLingkungan() {
-  const router = useRouter()
-  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}>Edit Edukasi Lingkungan</Title>
-          <TextInput
-            label={<Text fz="sm" fw="bold">Judul Edukasi Lingkungan</Text>}
-            placeholder="masukkan judul edukasi lingkungan"
-          />
-          <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi Edukasi Lingkungan</Text>}
-            placeholder="masukkan deskripsi edukasi lingkungan"
-          />
-          {/* <FileInput
-          label={<Text fz="sm" fw="bold">Upload Gambar</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">Gambar</Text>
-            <IconImageInPicture size={25} />
-          </Box>
-          <Button bg={colors['blue-button']} >
-            Simpan
-          </Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default EditEdukasiLingkungan;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/layout.tsx

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

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit/page.tsx

@@ -0,0 +1,87 @@
+'use client'
+import stateEdukasiLingkungan from '@/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const EdukasiLingkunganTextEditor = dynamic(() => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor), {
+  ssr: false,
+});
+
+function EditMateriEdukasiYangDiberikan() {
+  const router = useRouter()
+  const materiEdukasiState = useProxy(stateEdukasiLingkungan.stateMateriEdukasiLingkungan)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!materiEdukasiState.findById.data) {
+      materiEdukasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (materiEdukasiState.findById.data) {
+      setJudul(materiEdukasiState.findById.data.judul ?? '')
+      setContent(materiEdukasiState.findById.data.deskripsi ?? '')
+    }
+  }, [materiEdukasiState.findById.data])
+
+  const submit = () => {
+    if (materiEdukasiState.findById.data) {
+      materiEdukasiState.findById.data.judul = judul;
+      materiEdukasiState.findById.data.deskripsi = content;
+      materiEdukasiState.update.save(materiEdukasiState.findById.data)
+    }
+    router.push('/admin/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Materi Edukasi Yang Diberikan</Title>
+              <Text fw={"bold"}>Judul</Text>
+              <EdukasiLingkunganTextEditor
+                showSubmit={false}
+                onChange={setJudul}
+                initialContent={judul}
+              />
+              <Text fw={"bold"}>Content</Text>
+              <EdukasiLingkunganTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={materiEdukasiState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditMateriEdukasiYangDiberikan;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateEdukasiLingkungan from '../../../_state/lingkungan/edukasi-lingkungan';
+
+function Page() {
+  const router = useRouter()
+  const listMateriEdukasi = useProxy(stateEdukasiLingkungan.stateMateriEdukasiLingkungan)
+  useShallowEffect(() => {
+    listMateriEdukasi.findById.load('edit')
+  }, [])
+
+  if (!listMateriEdukasi.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Materi Edukasi Yang Diberikan</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listMateriEdukasi.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listMateriEdukasi.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx

@@ -1,69 +0,0 @@
-'use client'
-import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import React from 'react';
-import HeaderSearch from '../../_com/header';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import colors from '@/con/colors';
-import JudulList from '../../_com/judulList';
-import { useRouter } from 'next/navigation';
-
-function Page() { 
-  return (
-    <Box py={10}>
-      <HeaderSearch
-      title='Edukasi Lingkungan'
-      placeholder='pencarian'
-      searchIcon={<IconSearch size={20} />}
-      />
-      <ListEdukasiLingkungan/>
-    </Box>
-  );
-}
-
-function ListEdukasiLingkungan() {
-  const router = useRouter();
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-          title='List Edukasi Lingkungan'
-          href='/admin/lingkungan/edukasi-lingkungan/create'
-          />
-          <Box style={{overflowX: 'auto'}}>
-            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Judul Edukasi Lingkungan</TableTh>
-                  <TableTh>Gambar</TableTh>
-                  <TableTh>Deskripsi Edukasi Lingkungan</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                <TableTr>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>Judul</Text>
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Image w={100} src="/" alt="image" />
-                  </TableTd>
-                  <TableTd>Deskripsi Edukasi Lingkungan</TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/detail')}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default Page;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit/page.tsx

@@ -0,0 +1,87 @@
+'use client'
+import stateEdukasiLingkungan from '@/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const EdukasiLingkunganTextEditor = dynamic(() => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor), {
+  ssr: false,
+});
+
+function EditTujuanEdukasiLingkungan() {
+  const router = useRouter()
+  const tujuanEdukasiState = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!tujuanEdukasiState.findById.data) {
+      tujuanEdukasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (tujuanEdukasiState.findById.data) {
+      setJudul(tujuanEdukasiState.findById.data.judul ?? '')
+      setContent(tujuanEdukasiState.findById.data.deskripsi ?? '')
+    }
+  }, [tujuanEdukasiState.findById.data])
+
+  const submit = () => {
+    if (tujuanEdukasiState.findById.data) {
+      tujuanEdukasiState.findById.data.judul = judul;
+      tujuanEdukasiState.findById.data.deskripsi = content;
+      tujuanEdukasiState.update.save(tujuanEdukasiState.findById.data)
+    }
+    router.push('/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Tujuan Edukasi Lingkungan</Title>
+              <Text fw={"bold"}>Judul</Text>
+              <EdukasiLingkunganTextEditor
+                showSubmit={false}
+                onChange={setJudul}
+                initialContent={judul}
+              />
+              <Text fw={"bold"}>Content</Text>
+              <EdukasiLingkunganTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={tujuanEdukasiState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditTujuanEdukasiLingkungan;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateEdukasiLingkungan from '../../../_state/lingkungan/edukasi-lingkungan';
+
+function Page() {
+  const router = useRouter()
+  const listTujuanEdukasi = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi)
+  useShallowEffect(() => {
+    listTujuanEdukasi.findById.load('edit')
+  }, [])
+
+  if (!listTujuanEdukasi.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Tujuan Edukasi Lingkungan</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listTujuanEdukasi.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listTujuanEdukasi.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/gotong-royong/_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: "Kegiatan Desa",
+            value: "kegiatanDesa",
+            href: "/admin/lingkungan/gotong-royong/kegiatan-desa"
+        },
+        {
+            label: "Kategori Kegiatan",
+            value: "kategoriKegiatan",
+            href: "/admin/lingkungan/gotong-royong/kategori-kegiatan"
+        },
+    ];
+    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}>Gotong Royong</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)/lingkungan/gotong-royong/create/page.tsx

@@ -1,68 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
-
-function CreateGotongRoyong() {
-  const router = useRouter()
-  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 Gotong Royong</Title>
-          <TextInput
-            label={<Text fz="sm" fw="bold">Judul Gotong Royong</Text>}
-            placeholder="masukkan judul gotong royong"
-          />
-          <TextInput
-            label={<Text fz="sm" fw="bold">Kategori Gotong Royong</Text>}
-            placeholder="masukkan kategori gotong royong"
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Gotong Royong</Text>
-            <KeamananEditor
-              showSubmit={false}
-            />
-          </Box>
-          {/* <FileInput
-          label={<Text fz="sm" fw="bold">Upload Gambar</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">Gambar</Text>
-            <IconImageInPicture size={25} />
-          </Box>
-          <Button bg={colors['blue-button']} >
-            Simpan
-          </Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default CreateGotongRoyong;

src/app/admin/(dashboard)/lingkungan/gotong-royong/detail/page.tsx

@@ -1,66 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailGotongRoyong() {
-  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 Gotong Royong</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Judul Gotong Royong</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Kategori Gotong Royong</Text>
-                <Text fz={"lg"}>Test Kategori</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi Gotong Royong</Text>
-                <Text fz={"lg"} >Test Deskripsi</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/lingkungan/gotong-royong/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 DetailGotongRoyong;