UI Admin Dashboard Layanan Desa 1 tabs

API Admin Dashboard Layanan Desa 1 Tabs

package.json

@@ -16,13 +16,15 @@
     "@cubejs-client/core": "^0.31.0",
     "@elysiajs/cors": "^1.2.0",
     "@elysiajs/eden": "^1.2.0",
+    "@elysiajs/static": "^1.3.0",
     "@elysiajs/stream": "^1.1.0",
     "@elysiajs/swagger": "^1.2.0",
     "@mantine/carousel": "^7.16.2",
     "@mantine/charts": "^7.17.1",
     "@mantine/core": "^7.17.4",
-    "@mantine/dates": "^7.17.4",
+    "@mantine/dates": "^8.1.0",
     "@mantine/dropzone": "^7.17.0",
+    "@mantine/form": "^8.1.0",
     "@mantine/hooks": "^7.17.4",
     "@mantine/tiptap": "^7.17.4",
     "@paljs/types": "^8.1.0",
@@ -47,14 +49,16 @@
     "elysia": "^1.2.12",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^7.1.0",
+    "form-data": "^4.0.2",
     "framer-motion": "^12.4.1",
     "get-port": "^7.1.0",
     "jotai": "^2.12.3",
     "lodash": "^4.17.21",
     "motion": "^12.4.1",
-    "nanoid": "^5.1.0",
+    "nanoid": "^5.1.5",
     "next": "15.1.6",
     "next-view-transitions": "^0.3.4",
+    "node-fetch": "^3.3.2",
     "p-limit": "^6.2.0",
     "prisma": "^6.3.1",
     "react": "^19.0.0",
@@ -64,6 +68,7 @@
     "readdirp": "^4.1.1",
     "recharts": "^2.15.3",
     "swr": "^2.3.2",
+    "uuid": "^11.1.0",
     "valtio": "^2.1.3",
     "zod": "^3.24.3"
   },

prisma/data/desa/profile/profil_perbekel.json

@@ -0,0 +1,9 @@
+[
+    {
+        "id": "1",
+        "biodata": "<p>I.B Surya Prabhawa Manuaba, S.H., M.H., adalah Perbekel Darmasaba periode 2021-2027, seorang advokat, pendiri Mantra Legal Consultants & Advocates, serta aktif di bidang musik dan akademis. Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.</p>",
+        "pengalaman": "<ul><li>2021 - 2027: Perbekel Desa Darmasaba</li><li>2015 - Sekarang: Founder & Managing Director Mantra Legal Consultants & Advocates</li><li>2020 - Sekarang: Founder Ugawa Record Music Studio</li><li>2010 - 2016: Dosen Fakultas Hukum Universitas Mahasaraswati Denpasar</li></ul>",
+        "pengalamanOrganisasi": "<ul> <li>1996 – 1997: Ketua OSIS SMP Negeri 1 Abiansemal</li><li>1999 – 2000: Ketua OSIS SMA Negeri 1 Mengwi</li> <li>2008 – 2009: Ketua BEM Universitas Mahasaraswati Denpasar</li> <li>2008 – 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</li> <li>2020 – Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</li> <li>2021 – Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</li> <li>2023 – 2028: Komite Tetap Advokasi – Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</li> </ul>",
+        "programUnggulan": "<h3>Pemberdayaan Ekonomi dan UMKM</h3> <ul> <li>Pelatihan dan pendampingan UMKM lokal</li> <li>Program bantuan modal usaha bagi pelaku usaha kecil</li><li>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</li></ul>"
+    }
+]

prisma/data/desa/profile/profile_desa.json

@@ -0,0 +1,11 @@
+[
+    {
+        "id": "1",
+        "sejarah" : "<p>Asal – usul nama Darmasaba tertuang dalam lontar Usada Bali. Seperti di tulis dalam monografi Desa Darmasaba tahun 1980 silam, nama Darmasaba berkaitan dengan keturunan Danghyang Nirarta diceritakan, Sang kawi-wiku asal Daha (Jawa Timur) itu memiliki cucu bernama Ida Pedanda Sakti Manuaba yang tigggal di Desa Kendran Tegalalang Gianyar. Merasa tidak disenangi sang ayah, Ida Pedanda Sakti Manuaba pergi mengembara bersama dua orang pengiringnya. Pengembaraan sang pendeta sampai di pura Sarin Buana di Jimbaran. Saat mengadakan semedi di tempat ini sang pendeta melihat sinar api. Yang sangat jauh di utara. Timbul keinginan Ida Pedanda Manuaba untuk mengunjungi tempat itu. Sampailah sang Pedanda di pura Batan Bila Peguyangan. Disini Ida Pedanda Manuaba singgah menghadap Ida Pedanda Budha yang tinggal disana. Selanjutnya, kedua pendeta bersama-sama menuju arah utara dan singgah di Taman Cang Ana, sebuah taman milik Arya Lanang Blusung. Di tempat ini kedua pendeta bersama-sama melaksanakan semedi dan menetap untuk sementara waktu.</p>",
+        "visi" : "<p>Mewujudkan Desa Darmasaba yang sejahtera, unggul, religius, berbudaya, dan aman dengan berlandaskan Tri Hita Karana</p>",
+        "misi" : "<ul><li>Memperkokoh kerukunan hidup masyarakat dalam jalinan adat, budaya, olahraga, dan agama.</li><li>Meningkatkan kualitas pelayanan publik dengan menerapkan teknologi informasi dan komunikasi terintegrasi.</li><li>Meningkatkan tata kelola pemerintah desa dengan menerapkan prinsip good governance dan good clean government.</li><li>Meningkatkan kualitas pendidikan, kesehatan, Keluarga Berencana serta pengelolaan kependudukan.</li><li>Memperkuat usaha mikro kecil dan menengah (UMKM) dan BUMDesa sebagai pilar ekonomi masyarakat.</li><li>Mewujudkan tatanan kehidupan bermasyarakat yang menjunjung tinggi penegakan hukum dan HAM.</li><li>Meningkatkan perlindungan dan pengelolaan terhadap sumber daya alam dan lingkungan hidup.</li><li>Memperkuat daya saing desa melalui peningkatan mutu sumber daya manusia dan infrastruktur desa berbasis potensi desa.</li><li>Meningkatkan sinergisitas potensi budaya, pertanian dalam arti luas dan pariwisata.</li></ul>",
+        "lambang" : "<ul><li>Memperkokoh kerukunan hidup masyarakat dalam jalinan adat, budaya, olahraga, dan agama.</li><li>Meningkatkan kualitas pelayanan publik dengan menerapkan teknologi informasi dan komunikasi terintegrasi.</li><li>Meningkatkan tata kelola pemerintah desa dengan menerapkan prinsip good governance dan good clean government.</li><li>Meningkatkan kualitas pendidikan, kesehatan, Keluarga Berencana serta pengelolaan kependudukan.</li><li>Memperkuat usaha mikro kecil dan menengah (UMKM) dan BUMDesa sebagai pilar ekonomi masyarakat.</li><li>Mewujudkan tatanan kehidupan bermasyarakat yang menjunjung tinggi penegakan hukum dan HAM.</li><li>Meningkatkan perlindungan dan pengelolaan terhadap sumber daya alam dan lingkungan hidup.</li><li>Memperkuat daya saing desa melalui peningkatan mutu sumber daya manusia dan infrastruktur desa berbasis potensi desa.</li><li>Meningkatkan sinergisitas potensi budaya, pertanian dalam arti luas dan pariwisata.</li><li>Memperkuat daya saing desa melalui peningkatan mutu sumber daya manusia dan infrastruktur desa berbasis potensi desa.</li><li>Meningkatkan sinergisitas potensi budaya, pertanian dalam arti luas dan pariwisata.</li></ul>",
+        "maskot" : "<p>Pudak adalah bunga dari tanaman sejenis pandan (Pandanaceae). Bentuk bunga ini tersusun dalam beberapa lapisan, terbungkus oleh kelopak warna putih (semacam daun lonjong) yang ujungnya meruncing.</p><p>Bunga Pudak berwarna kuning dan akan terlihat jika kelopak atau pelepahnya telah mekar. Kekhasan dari bunga pudak, yaitu mempunyai aroma wangi yang semerbak nan lembut (tidak menyengat), dan dapat menebar keharuman sepanjang pagi atau pun sore hari. Tanaman ini dapat tumbuh di sepanjang pantai, aliran sungai, di atas batu-batu karang, dan juga di tanah ladang.</p><p>Dalam Kamus Jawa Kuna- Indonesia kata “Pudak” berarti bunga pandan atau Pandanus Moschatus (Mardiwarsito: 1981: 442). Selain itu bunga pudak juga dapat disebut ketaka atau ketaki (Mardiwarsito, 1981: 276). Sedangkan kata “Sategal” berasal dari kata dasar “Tegal” yang berarti ladang (Mardiwarsito, 1981: 593). Jadi Pudak Sategal dapat diartikan sebagai satu ladang luas yang dipenuhi bunga pudak dan menabar keharuman.</p><p>Pada sebuah kesempatan, Ida Pedanda Putu Pemaron menjelaskan mengenai makna dari istilah Pudak Sategal dengan sebuah analogi bahwa, sekuntum bunga pudak memiliki aroma wangi atau keharuman yang sangat kuat, apalagi jika satu ladang penuh bunga pudak, maka dapat dipastikan aroma keharumannya akan membumbung menyebar ke segala penjuru (Wawancara, 18 Mei 2019 di Geria Putra Mandara Kenderan, Tegallalang). “Pudak” ialah sebuah bunga yang memiliki aroma wangi atau keharuman yang semerbak, lembut, dan khas.</p><p>Garapan Tari Maskot Desa Darmasaba Sekar Pudak diwujudkan ke dalam bentuk tari kreasi yang ditarikan secara berkelompok dengan jumlah lima orang penari perempuan (putri).</p><p>Pemilihan penari perempuan dimaksudkan untuk mempresentasikan keindahan, keluwesan, dan keharuman dari bunga pudak. Sedangkan penetapan jumlah penari lima orang didasarkan atas pertimbangan kebutuhan koreografi agar dapat membentuk desain-desain komposisi lantai yang menarik dan dinamis, baik ketika ditarikan di area panggung yang luas atau pun area panggung yang kecil. Penyajian tari maskot ini dirancang dengan durasi waktu 9 menit.</p>",
+        "profilPerbekelId" : "1"
+    }
+]

prisma/data/list-caraMemperolehInformasi.json

@@ -0,0 +1,5 @@
+[
+    {"name": "Melihat/Membaca/Mendengarkan/Mencatat"},
+    {"name": "Mendapatkan Salinan Informasi (Hardcopy)"},
+    {"name": "Mendapatkan Salinan Informasi (Softcopy)"}
+]

prisma/data/list-caraMemperolehSalinanInformasi.json

@@ -0,0 +1,5 @@
+[
+  { "name": "Mengambil Langsung" },
+  { "name": "Dikirim Via Post" },
+  { "name": "Dikirim Via Email" }
+]

prisma/data/list-jenisInfromasi.json

@@ -0,0 +1,6 @@
+[
+  { "name": "Keuangan Desa" },
+  { "name": "Pembangunan Desa" },
+  { "name": "Data Demografi" },
+  { "name": "Lainnya" }
+]

prisma/data/ppid/daftar-informasi-publik-desa-darmasaba/daftarInformasi.json

@@ -0,0 +1,8 @@
+[
+    {
+        "id": "1",
+        "jenisInformasi": "Peraturan Desa",
+        "deskripsi": "Dokumen yang berisi kebijakan dan regulasi desa",
+        "tanggal": "15 Januari 2024"
+    }
+]

prisma/data/ppid/dasar-hukum-ppid/dasarhukumPPID.json

@@ -0,0 +1,7 @@
+[
+    {
+        "id": "1",
+        "judul": "DASAR HUKUM PEMBENTUKAN PPID DESA DARMASABA",
+        "content" : "<ul><li>UU Nomor 14 Tahun 2008 tentang Keterbukaan Informasi Publik</li><li>PP Nomor 61 Tahun 2010 tentang Pelaksanaan UU 14 Tahun 2008 tentang Keterbukaan Informasi Publik</li><li>Permendagri Nomor 3 Tahun 2017 tentang Pedoman Pengelolaan Pelayanan Informasi dan Dokumentasi di Lingkungan Kemendagri dan Pemerintah Daerah</li><li>Peraturan Komisi Informasi Nomor 1 Tahun 2010 tentang Standar Layanan Informasi Publik</li><li>Peraturan Komisi Informasi Nomor 1 Tahun 2010 tentang Standar Layanan Informasi Publik</li><li>Peraturan Bupati Badung No. 42 Tahun 2017 tentang Pedoman Pengelolaan Pelayanan Informasi Publik dan Dokumentasi di Lingkungan Pemerintah Kabupaten Badung</li><li>Keputusan Bupati Badung Nomor 99/049/HK/2019 tentang Pengelola Layanan Informasi dan Dokumentasi Kabupaten Badung</li><li>Keputusan Perbekel Darmasaba Nomor 101 Tahun 2019 tentang Penetapan Pelaksana Teknis/Administrasi Pengelola Layanan Informasi Dan Dokumentasi di Desa Punggul</li><li>Peraturan Perbekel Darmasaba Nomor 12 Tahun 2019 tentang Pedoman Pengelolaan Pelayanan Informasi Publik dan Dokumentasi di Lingkungan Pemerintah Desa Darmasaba</li></ul>"
+    }
+]

prisma/data/ppid/profile-ppid/profilePPid.json

@@ -0,0 +1,10 @@
+[
+  {
+    "id": "1",
+    "name": "I.B Surya Prabhawa Manuaba, S.H., M.H.",
+    "biodata": "<p>I.B Surya Prabhawa Manuaba, S.H., M.H., adalah Perbekel Darmasaba periode 2021-2027, seorang advokat, pendiri Mantra Legal Consultants & Advocates, serta aktif di bidang musik dan akademis. Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar, serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.</p>",
+    "riwayat": "<ul> <li>2021 - 2027: Perbekel Desa Darmasaba</li> <li>2015 - Sekarang: Founder & Managing Director Mantra Legal Consultants & Advocates</li> <li>2020 - Sekarang: Founder Ugawa Record Music Studio</li> <li>2010 - 2016: Dosen Fakultas Hukum Universitas Mahasaraswati Denpasar</li> </ul>",
+    "pengalaman": "<ul> <li>1996 – 1997: Ketua OSIS SMP Negeri 1 Abiansemal</li><li>1999 – 2000: Ketua OSIS SMA Negeri 1 Mengwi</li> <li>2008 – 2009: Ketua BEM Universitas Mahasaraswati Denpasar</li> <li>2008 – 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</li> <li>2020 – Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</li> <li>2021 – Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</li> <li>2023 – 2028: Komite Tetap Advokasi – Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</li> </ul>",
+    "unggulan": "<h3>Pemberdayaan Ekonomi dan UMKM</h3> <ul> <li>Pelatihan dan pendampingan UMKM lokal</li> <li>Program bantuan modal usaha bagi pelaku usaha kecil</li><li>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</li></ul>"
+  }
+]

prisma/data/ppid/struktur-ppid/strukturPPID.json

@@ -0,0 +1,6 @@
+[
+    {
+        "id" : "1",
+        "name" : "Struktur PPID"
+    }
+]

prisma/data/ppid/visi-misi-ppid/visimisiPPID.json

@@ -0,0 +1,8 @@
+[
+    {
+        "id": "1",
+        "misi": "<ol><li>Meningkatkan pengelolaan dan pelayanan informasi yang berkualitas, benar dan bertanggung jawab.</li><li>Membangun dan mengembangkan sistem penyediaan dan layanan informasi.</li><li>Meningkatkan dan mengembangkan kompetensi dan kualitas SDM dalam bidang pelayanan informasi.</li><li>Mewujudkan keterbukaan informasi Pemerintah Desa Punggul dengan proses yang cepat, tepat, mudah dan sederhana.</li></ol>",
+        "visi": "Memberikan pelayanan informasi yanng transparan dan akuntabel untuk memenuhi hak pemohon informasi sesuai dengan ketentuan peraturan perundang-undangan yang berlaku."
+
+    }
+]

prisma/migrations/20250602082355_perubahan_dikategori_berita/migration.sql

@@ -0,0 +1,582 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `image` on the `Berita` table. All the data in the column will be lost.
+  - You are about to drop the column `katagoryBeritaId` on the `Berita` table. All the data in the column will be lost.
+  - You are about to drop the column `name` on the `FasilitasPendukung` table. All the data in the column will be lost.
+  - You are about to drop the column `fasilitasKesehatanId` on the `InformasiUmum` table. All the data in the column will be lost.
+  - You are about to drop the `KatagoryBerita` table. If the table is not empty, all the data it contains will be lost.
+  - Added the required column `imageId` to the `Berita` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `jadwal` to the `DokterdanTenagaMedis` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `specialist` to the `DokterdanTenagaMedis` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `content` to the `FasilitasPendukung` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Berita" DROP CONSTRAINT "Berita_katagoryBeritaId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "InformasiUmum" DROP CONSTRAINT "InformasiUmum_fasilitasKesehatanId_fkey";
+
+-- AlterTable
+ALTER TABLE "Berita" DROP COLUMN "image",
+DROP COLUMN "katagoryBeritaId",
+ADD COLUMN     "imageId" TEXT NOT NULL,
+ADD COLUMN     "kategoriBeritaId" TEXT;
+
+-- AlterTable
+ALTER TABLE "DataKematian_Kelahiran" ADD COLUMN     "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "isActive" BOOLEAN NOT NULL DEFAULT true;
+
+-- AlterTable
+ALTER TABLE "DokterdanTenagaMedis" ADD COLUMN     "jadwal" TEXT NOT NULL,
+ADD COLUMN     "specialist" TEXT NOT NULL;
+
+-- AlterTable
+ALTER TABLE "FasilitasPendukung" DROP COLUMN "name",
+ADD COLUMN     "content" TEXT NOT NULL;
+
+-- AlterTable
+ALTER TABLE "InformasiUmum" DROP COLUMN "fasilitasKesehatanId";
+
+-- DropTable
+DROP TABLE "KatagoryBerita";
+
+-- CreateTable
+CREATE TABLE "FileStorage" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "realName" TEXT NOT NULL,
+    "path" TEXT NOT NULL,
+    "mimeType" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3),
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "link" TEXT NOT NULL,
+
+    CONSTRAINT "FileStorage_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "VisiMisiPPID" (
+    "id" TEXT NOT NULL,
+    "visi" TEXT NOT NULL,
+    "misi" 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 "VisiMisiPPID_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DasarHukumPPID" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "content" 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 "DasarHukumPPID_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ProfilePPID" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "biodata" TEXT NOT NULL,
+    "riwayat" TEXT NOT NULL,
+    "pengalaman" TEXT NOT NULL,
+    "unggulan" TEXT NOT NULL,
+    "imageUrl" 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 "ProfilePPID_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DaftarInformasiPublik" (
+    "id" TEXT NOT NULL,
+    "nomor" SERIAL NOT NULL,
+    "jenisInformasi" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "tanggal" 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 "DaftarInformasiPublik_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PermohonanInformasiPublik" (
+    "id" TEXT NOT NULL,
+    "nomor" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "nik" TEXT NOT NULL,
+    "notelp" TEXT NOT NULL,
+    "alamat" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "jenisInformasiDimintaId" TEXT,
+    "caraMemperolehInformasiId" TEXT,
+    "caraMemperolehSalinanInformasiId" 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 "PermohonanInformasiPublik_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "JenisInformasiDiminta" (
+    "id" TEXT NOT NULL,
+    "name" 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 "JenisInformasiDiminta_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "CaraMemperolehInformasi" (
+    "id" TEXT NOT NULL,
+    "name" 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 "CaraMemperolehInformasi_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "CaraMemperolehSalinanInformasi" (
+    "id" TEXT NOT NULL,
+    "name" 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 "CaraMemperolehSalinanInformasi_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "FormulirPermohonanKeberatan" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "notelp" TEXT NOT NULL,
+    "alasan" 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 "FormulirPermohonanKeberatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "IndeksKepuasanMasyarakat" (
+    "id" SERIAL NOT NULL,
+    "label" TEXT NOT NULL,
+    "kepuasan" 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 "IndeksKepuasanMasyarakat_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "GrafikBerdasarkanJenisKelamin" (
+    "id" TEXT NOT NULL,
+    "perempuan" TEXT NOT NULL,
+    "laki" 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 "GrafikBerdasarkanJenisKelamin_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "GrafikBerdasarkanResponden" (
+    "id" TEXT NOT NULL,
+    "sangatbaik" TEXT NOT NULL,
+    "baik" TEXT NOT NULL,
+    "kurangbaik" TEXT NOT NULL,
+    "tidakbaik" 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 "GrafikBerdasarkanResponden_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "GrafikBerdasarkanUmur" (
+    "id" TEXT NOT NULL,
+    "remaja" TEXT NOT NULL,
+    "dewasa" TEXT NOT NULL,
+    "orangtua" TEXT NOT NULL,
+    "lansia" 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 "GrafikBerdasarkanUmur_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ProfileDesa" (
+    "id" TEXT NOT NULL,
+    "sejarah" TEXT NOT NULL,
+    "visi" TEXT NOT NULL,
+    "misi" TEXT NOT NULL,
+    "lambang" TEXT NOT NULL,
+    "maskot" TEXT NOT NULL,
+    "profilPerbekelId" 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 "ProfileDesa_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ProfilPerbekel" (
+    "id" TEXT NOT NULL,
+    "biodata" TEXT NOT NULL,
+    "pengalaman" TEXT NOT NULL,
+    "pengalamanOrganisasi" TEXT NOT NULL,
+    "programUnggulan" 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 "ProfilPerbekel_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KategoriBerita" (
+    "id" TEXT NOT NULL,
+    "name" 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 "KategoriBerita_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PotensiDesa" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "kategori" TEXT NOT NULL,
+    "imageId" TEXT NOT NULL,
+    "content" 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 "PotensiDesa_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TarifDanLayanan" (
+    "id" TEXT NOT NULL,
+    "layanan" TEXT NOT NULL,
+    "tarif" 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 "TarifDanLayanan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "JadwalKegiatan" (
+    "id" TEXT NOT NULL,
+    "content" 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 "JadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "InformasiJadwalKegiatan" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "tanggal" TEXT NOT NULL,
+    "waktu" TEXT NOT NULL,
+    "lokasi" 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 "InformasiJadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DeskripsiJadwalKegiatan" (
+    "id" 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 "DeskripsiJadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "LayananJadwalKegiatan" (
+    "id" TEXT NOT NULL,
+    "content" 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 "LayananJadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "SyaratKetentuanJadwalKegiatan" (
+    "id" TEXT NOT NULL,
+    "content" 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 "SyaratKetentuanJadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DokumenJadwalKegiatan" (
+    "id" TEXT NOT NULL,
+    "content" 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 "DokumenJadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PendaftaranJadwalKegiatan" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "tanggal" TEXT NOT NULL,
+    "namaOrangtua" TEXT NOT NULL,
+    "nomor" TEXT NOT NULL,
+    "alamat" TEXT NOT NULL,
+    "catatan" 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 "PendaftaranJadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "GrafikKepuasan" (
+    "id" SERIAL NOT NULL,
+    "label" TEXT NOT NULL,
+    "jumlah" 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 "GrafikKepuasan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ArtikelKesehatan" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" 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 "ArtikelKesehatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Introduction" (
+    "id" SERIAL NOT NULL,
+    "content" 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 "Introduction_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Symptom" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" 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 "Symptom_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Prevention" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" 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 "Prevention_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "FirstAid" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" 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 "FirstAid_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "MythVsFact" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "mitos" TEXT NOT NULL,
+    "fakta" 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 "MythVsFact_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DoctorSign" (
+    "id" SERIAL NOT NULL,
+    "content" 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 "DoctorSign_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_FasilitasKesehatanToInformasiUmum" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_FasilitasKesehatanToInformasiUmum_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateTable
+CREATE TABLE "_FasilitasKesehatanToTarifDanLayanan" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_FasilitasKesehatanToTarifDanLayanan_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "FileStorage_name_key" ON "FileStorage"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "JenisInformasiDiminta_name_key" ON "JenisInformasiDiminta"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "CaraMemperolehInformasi_name_key" ON "CaraMemperolehInformasi"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "CaraMemperolehSalinanInformasi_name_key" ON "CaraMemperolehSalinanInformasi"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "KategoriBerita_name_key" ON "KategoriBerita"("name");
+
+-- CreateIndex
+CREATE INDEX "_FasilitasKesehatanToInformasiUmum_B_index" ON "_FasilitasKesehatanToInformasiUmum"("B");
+
+-- CreateIndex
+CREATE INDEX "_FasilitasKesehatanToTarifDanLayanan_B_index" ON "_FasilitasKesehatanToTarifDanLayanan"("B");
+
+-- AddForeignKey
+ALTER TABLE "PermohonanInformasiPublik" ADD CONSTRAINT "PermohonanInformasiPublik_jenisInformasiDimintaId_fkey" FOREIGN KEY ("jenisInformasiDimintaId") REFERENCES "JenisInformasiDiminta"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PermohonanInformasiPublik" ADD CONSTRAINT "PermohonanInformasiPublik_caraMemperolehInformasiId_fkey" FOREIGN KEY ("caraMemperolehInformasiId") REFERENCES "CaraMemperolehInformasi"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PermohonanInformasiPublik" ADD CONSTRAINT "PermohonanInformasiPublik_caraMemperolehSalinanInformasiId_fkey" FOREIGN KEY ("caraMemperolehSalinanInformasiId") REFERENCES "CaraMemperolehSalinanInformasi"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ProfileDesa" ADD CONSTRAINT "ProfileDesa_profilPerbekelId_fkey" FOREIGN KEY ("profilPerbekelId") REFERENCES "ProfilPerbekel"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Berita" ADD CONSTRAINT "Berita_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Berita" ADD CONSTRAINT "Berita_kategoriBeritaId_fkey" FOREIGN KEY ("kategoriBeritaId") REFERENCES "KategoriBerita"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PotensiDesa" ADD CONSTRAINT "PotensiDesa_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToInformasiUmum" ADD CONSTRAINT "_FasilitasKesehatanToInformasiUmum_A_fkey" FOREIGN KEY ("A") REFERENCES "FasilitasKesehatan"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToInformasiUmum" ADD CONSTRAINT "_FasilitasKesehatanToInformasiUmum_B_fkey" FOREIGN KEY ("B") REFERENCES "InformasiUmum"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToTarifDanLayanan" ADD CONSTRAINT "_FasilitasKesehatanToTarifDanLayanan_A_fkey" FOREIGN KEY ("A") REFERENCES "FasilitasKesehatan"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToTarifDanLayanan" ADD CONSTRAINT "_FasilitasKesehatanToTarifDanLayanan_B_fkey" FOREIGN KEY ("B") REFERENCES "TarifDanLayanan"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/schema.prisma

@@ -47,11 +47,85 @@ model AppMenuChild {
   appMenuId String?
 }
 
+// ========================================= FILE STORAGE ========================================= //
+
+model FileStorage {
+  id           String         @id @default(cuid())
+  name         String         @unique
+  realName     String
+  path         String
+  mimeType     String
+  createdAt    DateTime       @default(now())
+  updatedAt    DateTime       @updatedAt
+  deletedAt    DateTime?
+  isActive     Boolean        @default(true)
+  link         String
+  Berita       Berita[]
+  PotensiDesa  PotensiDesa[]
+  Posyandu     Posyandu[]
+  ProfilePPID  ProfilePPID[]
+  StrukturPPID StrukturPPID[]
+
+  GalleryFoto GalleryFoto[]
+
+  PelayananSuratKeterangan PelayananSuratKeterangan[]
+}
+
 //========================================= MENU PPID ========================================= //
+
+//========================================= STRUKTUR PPID ========================================= //
+model StrukturPPID {
+  id        String       @id @default(cuid())
+  name      String       @db.Text
+  image     FileStorage? @relation(fields: [imageId], references: [id])
+  imageId   String?
+  createdAt DateTime     @default(now())
+  updatedAt DateTime     @updatedAt
+  deletedAt DateTime     @default(now())
+  isActive  Boolean      @default(true)
+}
+
+// ========================================= VISI MISI PPID ========================================= //
+model VisiMisiPPID {
+  id        String   @id @default(cuid())
+  visi      String   @db.Text
+  misi      String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= DASAR HUKUM PPID ========================================= //
+model DasarHukumPPID {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  content   String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= PROFILE PPID ========================================= //
+model ProfilePPID {
+  id         String       @id @default(cuid())
+  name       String       @db.Text
+  biodata    String       @db.Text
+  riwayat    String       @db.Text
+  pengalaman String       @db.Text
+  unggulan   String       @db.Text
+  image      FileStorage? @relation(fields: [imageId], references: [id])
+  imageId    String?
+  createdAt  DateTime     @default(now())
+  updatedAt  DateTime     @updatedAt
+  deletedAt  DateTime     @default(now())
+  isActive   Boolean      @default(true)
+}
+
 // ========================================= DAFTAR INFORMASI PUBLIK ========================================= //
 model DaftarInformasiPublik {
   id             String   @id @default(cuid())
-  nomor          Int      @default(autoincrement())
   jenisInformasi String
   deskripsi      String
   tanggal        String
@@ -61,10 +135,73 @@ model DaftarInformasiPublik {
   isActive       Boolean  @default(true)
 }
 
-//========================================= MENU PPID ========================================= //
+//=========================================PERMOHONAN INFORMASI PUBLIK========================= //
+model PermohonanInformasiPublik {
+  id                               String                          @id @default(cuid())
+  nomor                            Int                             @default(autoincrement())
+  name                             String
+  nik                              String
+  notelp                           String
+  alamat                           String
+  email                            String
+  jenisInformasiDiminta            JenisInformasiDiminta?          @relation(fields: [jenisInformasiDimintaId], references: [id])
+  jenisInformasiDimintaId          String?
+  caraMemperolehInformasi          CaraMemperolehInformasi?        @relation(fields: [caraMemperolehInformasiId], references: [id])
+  caraMemperolehInformasiId        String?
+  caraMemperolehSalinanInformasi   CaraMemperolehSalinanInformasi? @relation(fields: [caraMemperolehSalinanInformasiId], references: [id])
+  caraMemperolehSalinanInformasiId String?
+  createdAt                        DateTime                        @default(now())
+  updatedAt                        DateTime                        @updatedAt
+  deletedAt                        DateTime                        @default(now())
+  isActive                         Boolean                         @default(true)
+}
+
+model JenisInformasiDiminta {
+  id                        String                      @id @default(cuid())
+  name                      String                      @unique
+  createdAt                 DateTime                    @default(now())
+  updatedAt                 DateTime                    @updatedAt
+  deletedAt                 DateTime                    @default(now())
+  isActive                  Boolean                     @default(true)
+  PermohonanInformasiPublik PermohonanInformasiPublik[]
+}
+
+model CaraMemperolehInformasi {
+  id                        String                      @id @default(cuid())
+  name                      String                      @unique
+  createdAt                 DateTime                    @default(now())
+  updatedAt                 DateTime                    @updatedAt
+  deletedAt                 DateTime                    @default(now())
+  isActive                  Boolean                     @default(true)
+  PermohonanInformasiPublik PermohonanInformasiPublik[]
+}
+
+model CaraMemperolehSalinanInformasi {
+  id                        String                      @id @default(cuid())
+  name                      String                      @unique
+  createdAt                 DateTime                    @default(now())
+  updatedAt                 DateTime                    @updatedAt
+  deletedAt                 DateTime                    @default(now())
+  isActive                  Boolean                     @default(true)
+  PermohonanInformasiPublik PermohonanInformasiPublik[]
+}
+
+//=========================================PERMOHONAN INFORMASI KEBERATAN PUBLIK========================= //
+model FormulirPermohonanKeberatan {
+  id        String   @id @default(cuid())
+  name      String
+  email     String
+  notelp    String
+  alasan    String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
 // ========================================= IKM ========================================= //
 model IndeksKepuasanMasyarakat {
-  id        Int      @id @default(autoincrement())
+  id        String   @id @default(cuid())
   label     String
   kepuasan  String
   createdAt DateTime @default(now())
@@ -108,22 +245,52 @@ model GrafikBerdasarkanUmur {
 }
 
 // ========================================= MENU DESA ========================================= //
+// ========================================= PROFILE DESA ========================================= //
+model ProfileDesa {
+  id               String          @id @default(cuid())
+  sejarah          String          @db.Text
+  visi             String          @db.Text
+  misi             String          @db.Text
+  lambang          String          @db.Text
+  maskot           String          @db.Text
+  ProfilPerbekel   ProfilPerbekel? @relation(fields: [profilPerbekelId], references: [id])
+  profilPerbekelId String?
+  createdAt        DateTime        @default(now())
+  updatedAt        DateTime        @updatedAt
+  deletedAt        DateTime        @default(now())
+  isActive         Boolean         @default(true)
+}
+
+model ProfilPerbekel {
+  id                   String        @id @default(cuid())
+  biodata              String        @db.Text
+  pengalaman           String        @db.Text
+  pengalamanOrganisasi String        @db.Text
+  programUnggulan      String        @db.Text
+  ProfileDesa          ProfileDesa[]
+  createdAt            DateTime      @default(now())
+  updatedAt            DateTime      @updatedAt
+  deletedAt            DateTime      @default(now())
+  isActive             Boolean       @default(true)
+}
+
 // ========================================= BERITA ========================================= //
 model Berita {
   id               String          @id @default(cuid())
   judul            String
   deskripsi        String
-  image            String
+  image            FileStorage     @relation(fields: [imageId], references: [id])
+  imageId          String
   content          String          @db.Text
   createdAt        DateTime        @default(now())
   updatedAt        DateTime        @updatedAt
   deletedAt        DateTime        @default(now())
   isActive         Boolean         @default(true)
-  KatagoryBerita   KatagoryBerita? @relation(fields: [katagoryBeritaId], references: [id])
-  katagoryBeritaId String?
+  kategoriBerita   KategoriBerita? @relation(fields: [kategoriBeritaId], references: [id])
+  kategoriBeritaId String?
 }
 
-model KatagoryBerita {
+model KategoriBerita {
   id        String   @id @default(cuid())
   name      String   @unique
   beritas   Berita[]
@@ -133,6 +300,21 @@ model KatagoryBerita {
   isActive  Boolean  @default(true)
 }
 
+// ========================================= POTENSI DESA ========================================= //
+model PotensiDesa {
+  id        String      @id @default(cuid())
+  name      String
+  deskripsi String
+  kategori  String
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  content   String      @db.Text
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}
+
 // ========================================= PENGUMUMAN ========================================= //
 model Pengumuman {
   id                   String              @id @default(cuid())
@@ -157,53 +339,54 @@ model CategoryPengumuman {
   isActive    Boolean      @default(true)
 }
 
-// ========================================= IMAGES ========================================= //
-model Images {
-  id          String        @id @default(cuid())
-  url         String
-  label       String        @default("null")
-  active      Boolean       @default(true)
-  createdAt   DateTime      @default(now())
-  updatedAt   DateTime      @updatedAt
-  GalleryFoto GalleryFoto[]
-}
-
-// ========================================= VIDEOS ========================================= //
-model Videos {
-  id           String         @id @default(cuid())
-  url          String
-  label        String         @default("null")
-  active       Boolean        @default(true)
-  createdAt    DateTime       @default(now())
-  updatedAt    DateTime       @updatedAt
-  GalleryVideo GalleryVideo[]
-}
-
 // ========================================= GALLERY ========================================= //
 model GalleryFoto {
-  id               String   @id @default(cuid())
+  id               String       @id @default(cuid())
   name             String
-  image            String
-  createdAt        DateTime @default(now())
-  updatedAt        DateTime @updatedAt
-  deletedAt        DateTime @default(now())
-  isActive         Boolean  @default(true)
-  imagesId         String?  @unique
-  imageGalleryFoto Images?  @relation(fields: [imagesId], references: [id])
+  deskripsi        String       @db.Text
+  createdAt        DateTime     @default(now())
+  updatedAt        DateTime     @updatedAt
+  deletedAt        DateTime     @default(now())
+  isActive         Boolean      @default(true)
+  imagesId         String?      @unique
+  imageGalleryFoto FileStorage? @relation(fields: [imagesId], references: [id])
 }
 
 model GalleryVideo {
-  id                 String   @id @default(cuid())
-  name               String
-  video              String
-  createdAt          DateTime @default(now())
-  updatedAt          DateTime @updatedAt
-  deletedAt          DateTime @default(now())
-  isActive           Boolean  @default(true)
-  videosId           String?  @unique
-  videosGalleryVideo Videos?  @relation(fields: [videosId], references: [id])
+  id        String   @id @default(cuid())
+  name      String
+  deskripsi String   @db.Text
+  linkVideo String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
 }
 
+// ========================================= LAYANAN DESA ========================================= //
+model PelayananSuratKeterangan {
+  id        String   @id @default(cuid())
+  name      String
+  deskripsi String   @db.Text
+  image FileStorage @relation(fields: [imageId], references: [id])
+  imageId String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model PelayananTelunjukSaktiDesa {
+  id        String   @id @default(cuid())
+  name      String
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+
 // ========================================= MENU KESEHATAN ========================================= //
 // ========================================= DATA KESEHATAN WARGA ========================================= //
 
@@ -453,3 +636,17 @@ model DoctorSign {
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
 }
+
+// ========================================= POSYANDU ========================================= //
+model Posyandu {
+  id        String      @id @default(cuid())
+  name      String
+  nomor     String
+  deskripsi String
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}

prisma/seed.ts

@@ -1,82 +1,213 @@
-import layanan from './data/list-layanan.json'
-import potensi from './data/list-potensi.json'
-import katagoryBerita from './data/katagory-berita.json'
-import categoryPengumuman from './data/category-pengumuman.json'
-import prisma from '@/lib/prisma';
+import prisma from "@/lib/prisma";
+import categoryPengumuman from "./data/category-pengumuman.json";
+import kategoriBerita from "./data/kategori-berita.json";
+import caraMemperolehInformasi from "./data/list-caraMemperolehInformasi.json";
+import caraMemperolehSalinanInformasi from "./data/list-caraMemperolehSalinanInformasi.json";
+import jenisInformasiDiminta from "./data/list-jenisInfromasi.json";
+import layanan from "./data/list-layanan.json";
+import potensi from "./data/list-potensi.json";
+import dasarHukumPPID from "./data/ppid/dasar-hukum-ppid/dasarhukumPPID.json";
+import profilePPID from "./data/ppid/profile-ppid/profilePPid.json";
+import visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
+import strukturPPID from "./data/ppid/struktur-ppid/strukturPPID.json";
+
 (async () => {
-    for (const l of layanan) {
-        await prisma.layanan.upsert({
-            where: {
-                name: l.name
-            },
-            update: {
-                name: l.name
-            },
-            create: {
-                name: l.name
-            }
-        })
-    }
+  for (const l of layanan) {
+    await prisma.layanan.upsert({
+      where: {
+        name: l.name,
+      },
+      update: {
+        name: l.name,
+      },
+      create: {
+        name: l.name,
+      },
+    });
+  }
 
-    console.log("layanan success ...")
+  console.log("layanan success ...");
 
-    for (const p of potensi) {
-        await prisma.potensi.upsert({
-            where: {
-                name: p.name
-            },
-            update: {
-                name: p.name
-            },
-            create: {
-                name: p.name
-            }
-        })
-    }
+  for (const s of strukturPPID) {
+    await prisma.strukturPPID.upsert({
+      where: {
+        id: s.id,
+      },
+      update: {
+        name: s.name,
+      },
+      create: {
+        id: s.id,
+        name: s.name,
+      },
+    });
+  }
+  console.log("struktur ppid success ...");
 
-    console.log("potensi success ...")
+  for (const p of potensi) {
+    await prisma.potensi.upsert({
+      where: {
+        name: p.name,
+      },
+      update: {
+        name: p.name,
+      },
+      create: {
+        name: p.name,
+      },
+    });
+  }
 
-    for (const k of katagoryBerita) {
-        await prisma.katagoryBerita.upsert({
-            where: {
-                name: k.name
-            },
-            update: {
-                name: k.name
-            },
-            create: {
-                name: k.name
-            }
-        })
-    }
+  console.log("potensi success ...");
 
-    console.log("katagory berita success ...")
+  for (const k of kategoriBerita) {
+    await prisma.kategoriBerita.upsert({
+      where: {
+        name: k.name,
+      },
+      update: {
+        name: k.name,
+      },
+      create: {
+        name: k.name,
+      },
+    });
+  }
 
-    for (const c of categoryPengumuman) {
-        await prisma.categoryPengumuman.upsert({
-            where: {
-                name: c.name
-            },
-            update: {
-                name: c.name
-            },
-            create: {
-                name: c.name
-            }
-        })
-    }
+  console.log("kategori berita success ...");
 
-    console.log("category pengumuman success ...")
-})().then(() => prisma.$disconnect()).catch((e) => {
-    console.error(e)
-    prisma.$disconnect()
+  for (const c of categoryPengumuman) {
+    await prisma.categoryPengumuman.upsert({
+      where: {
+        name: c.name,
+      },
+      update: {
+        name: c.name,
+      },
+      create: {
+        name: c.name,
+      },
+    });
+  }
+
+  console.log("category pengumuman success ...");
+
+  for (const j of jenisInformasiDiminta) {
+    await prisma.jenisInformasiDiminta.upsert({
+      where: {
+        name: j.name,
+      },
+      update: {
+        name: j.name,
+      },
+      create: {
+        name: j.name,
+      },
+    });
+  }
+  console.log("jenis informasi diminta success ...");
+
+  for (const c of caraMemperolehInformasi) {
+    await prisma.caraMemperolehInformasi.upsert({
+      where: {
+        name: c.name,
+      },
+      update: {
+        name: c.name,
+      },
+      create: {
+        name: c.name,
+      },
+    });
+  }
+  console.log("cara memperoleh informasi success ...");
+
+  for (const c of caraMemperolehSalinanInformasi) {
+    await prisma.caraMemperolehSalinanInformasi.upsert({
+      where: {
+        name: c.name,
+      },
+      update: {
+        name: c.name,
+      },
+      create: {
+        name: c.name,
+      },
+    });
+  }
+  console.log("cara memperoleh salinan informasi success ...");
+
+  for (const c of profilePPID) {
+    await prisma.profilePPID.upsert({
+      where: { id: c.id },
+      update: {
+        name: c.name,
+        biodata: c.biodata,
+        riwayat: c.riwayat,
+        pengalaman: c.pengalaman,
+        unggulan: c.unggulan,
+        // imageId tidak di-update
+      },
+      create: {
+        id: c.id,
+        name: c.name,
+        biodata: c.biodata,
+        riwayat: c.riwayat,
+        pengalaman: c.pengalaman,
+        unggulan: c.unggulan,
+        // imageId tidak di-create
+      },
+    });
+  }
+  console.log("✅ profilePPID seeded without imageId (editable later via UI)");
+
+  for (const v of visiMisiPPID) {
+    await prisma.visiMisiPPID.upsert({
+      where: {
+        id: v.id,
+      },
+      update: {
+        misi: v.misi,
+        visi: v.visi,
+      },
+      create: {
+        id: v.id,
+        misi: v.misi,
+        visi: v.visi,
+      },
+    });
+  }
+  console.log("visi misi PPID success ...");
+
+  for (const v of dasarHukumPPID) {
+    await prisma.dasarHukumPPID.upsert({
+      where: {
+        id: v.id,
+      },
+      update: {
+        judul: v.judul,
+        content: v.content,
+      },
+      create: {
+        id: v.id,
+        judul: v.judul,
+        content: v.content,
+      },
+    });
+  }
+  console.log("dasar hukum PPID success ...");
+})()
+  .then(() => prisma.$disconnect())
+  .catch((e) => {
+    console.error(e);
+    prisma.$disconnect();
+  });
+
+process.on("exit", () => {
+  prisma.$disconnect();
 });
 
-process.on('exit', () => {
-    prisma.$disconnect()
-})
-
-process.on('SIGINT', () => {
-    prisma.$disconnect()
-    process.exit(0)
-})
+process.on("SIGINT", () => {
+  prisma.$disconnect();
+  process.exit(0);
+});

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

@@ -0,0 +1,85 @@
+// TestEditor.tsx
+import { RichTextEditor, Link } from '@mantine/tiptap';
+import { useEditor } from '@tiptap/react';
+import Highlight from '@tiptap/extension-highlight';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Superscript from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+
+type CreateEditorProps = {
+  value: string;
+  onChange: (content: string) => void;
+};
+
+export default function CreateEditor({ value, onChange }: CreateEditorProps) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    content: value,
+    onUpdate: () => {
+      if (editor) {
+        onChange(editor.getHTML());
+      }
+    },
+  });
+
+  return (
+    <RichTextEditor editor={editor}>
+      <RichTextEditor.Toolbar sticky stickyOffset="var(--docs-header-height)">
+        <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>
+  );
+}

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

@@ -0,0 +1,102 @@
+'use client'
+import { RichTextEditor, Link } from '@mantine/tiptap';
+import { useEditor } from '@tiptap/react';
+import Highlight from '@tiptap/extension-highlight';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Superscript from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+import { useEffect } from 'react';
+
+type EditEditorProps = {
+  value: string;
+  onChange: (content: string) => void;
+};
+
+export default function EditEditor({ value, onChange }: EditEditorProps) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    content: value,
+    // Hapus `immediatelyRender` dan `onMount`
+  });
+
+  // Sinkronisasi konten saat `value` berubah
+  useEffect(() => {
+    if (editor && value !== editor.getHTML()) {
+      editor.commands.setContent(value);
+    }
+  }, [value, editor]);
+
+  // Sinkronisasi konten ke parent saat diubah
+  useEffect(() => {
+    if (!editor) return;
+
+    const updateHandler = () => onChange(editor.getHTML());
+    editor.on('update', updateHandler);
+
+    return () => {
+      editor.off('update', updateHandler);
+    };
+  }, [editor, onChange]);
+
+  return (
+    <RichTextEditor editor={editor}>
+      <RichTextEditor.Toolbar sticky stickyOffset="var(--docs-header-height)">
+        {/* Toolbar seperti sebelumnya */}
+        <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>
+  );
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Grid, GridCol, Paper, TextInput, Title } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react'; // Sesuaikan jika kamu pakai icon lain
+import colors from '@/con/colors';
+
+
+const HeaderSearch = ({ title = "", placeholder = "pencarian", searchIcon = <IconSearch size={20} /> }: { title: string, placeholder?: string, searchIcon?: React.ReactNode }) => {
+  return (
+    <Grid>
+      <GridCol span={{ base: 12, md: 9 }}>
+        <Title order={3}>{title}</Title>
+      </GridCol>
+      <GridCol span={{ base: 12, md: 3 }}>
+        <Paper radius={"lg"} bg={colors['white-1']}>
+          <TextInput
+            radius="lg"
+            placeholder={placeholder}
+            leftSection={searchIcon}
+            w="100%"
+          />
+        </Paper>
+      </GridCol>
+    </Grid>
+  );
+};
+
+export default HeaderSearch;

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

@@ -0,0 +1,30 @@
+
+'use client'
+import colors from '@/con/colors';
+import { Grid, GridCol, Button, Text } from '@mantine/core';
+import { IconCircleDashedPlus } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const JudulList = ({ title = "", href = "#" }) => {
+  const router = useRouter();
+
+  const handleNavigate = () => {
+    router.push(href);
+  };
+
+  return (
+    <Grid align="center" mb={10}>
+      <GridCol span={{ base: 12, md: 11 }}>
+        <Text fz={"xl"} fw={"bold"}>{title}</Text>
+      </GridCol>
+      <GridCol span={{ base: 12, md: 1 }} ta="right">
+        <Button onClick={handleNavigate} bg={colors['blue-button']}>
+          <IconCircleDashedPlus size={25} />
+        </Button>
+      </GridCol>
+    </Grid>
+  );
+};
+
+export default JudulList;

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

@@ -0,0 +1,41 @@
+'use client'
+import colors from '@/con/colors';
+import { Grid, GridCol, Button, Text, Paper, TextInput } from '@mantine/core';
+import { IconCircleDashedPlus, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const JudulListTab = ({ title = "", href = "#", placeholder = "pencarian", searchIcon = <IconSearch size={20} /> }) => {
+  const router = useRouter();
+
+  const handleNavigate = () => {
+    router.push(href);
+  };
+
+
+
+  return (
+    <Grid mb={10}>
+      <GridCol span={{ base: 12, md: 8 }}>
+        <Text fz={{base: "md", md: "xl"}} fw={"bold"}>{title}</Text>
+      </GridCol>
+      <GridCol span={{ base: 9, md: 3}} ta="right">
+        <Paper radius={"lg"} bg={colors['white-1']}>
+          <TextInput
+            radius="lg"
+            placeholder={placeholder}
+            leftSection={searchIcon}
+            w="100%"
+          />
+        </Paper>
+      </GridCol>
+      <GridCol span={{ base: 3, md: 1}} ta="right">
+        <Button onClick={handleNavigate} bg={colors['blue-button']}>
+          <IconCircleDashedPlus size={25} />
+        </Button>
+      </GridCol>
+    </Grid>
+  );
+};
+
+export default JudulListTab;

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

@@ -0,0 +1,36 @@
+// components/modal/ModalKonfirmasiHapus.tsx
+import colors from "@/con/colors"
+import { Modal, Text, Button, Flex } from "@mantine/core"
+
+interface ModalKonfirmasiHapusProps {
+  opened: boolean
+  loading?: boolean
+  onClose: () => void
+  onConfirm: () => void
+  text: string
+}
+
+export function ModalKonfirmasiHapus({
+  opened,
+  loading = false,
+  onClose,
+  onConfirm,
+  text,
+}: ModalKonfirmasiHapusProps) {
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={<Text fw={"bold"} fz={"xl"}>Konfirmasi Hapus</Text>}
+      centered
+    >
+      <Text mb="md">{text}</Text>
+      <Flex justify="flex-end" gap="sm">
+        <Button style={{color: "white"}} bg={colors['blue-button']} variant="default" onClick={onClose}>Batal</Button>
+        <Button color="red" onClick={onConfirm} loading={loading}>
+          Yakin Hapus
+        </Button>
+      </Flex>
+    </Modal>
+  )
+}

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

@@ -1,23 +1,31 @@
-/* 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";
 
+// 1. Schema validasi dengan Zod
 const templateForm = z.object({
   judul: z.string().min(3, "Judul minimal 3 karakter"),
   deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
-  image: z.string().url().min(3, "Image minimal 3 karakter"),
   content: z.string().min(3, "Content minimal 3 karakter"),
-  katagoryBeritaId: z.string().nonempty(),
+  kategoriBeritaId: z.string().nonempty(),
+  imageId: z.string().nonempty(),
 });
 
+// 2. Default value form berita (hindari uncontrolled input)
+const defaultForm = {
+  judul: "",
+  deskripsi: "",
+  imageId: "",
+  content: "",
+  kategoriBeritaId: "",
+};
+
+// 3. Kategori proxy
 const category = proxy({
   findMany: {
-    data: null as
-      | null
-      | Prisma.KatagoryBeritaGetPayload<{ omit: { isActive: true } }>[],
+    data: [] as Prisma.KategoriBeritaGetPayload<{ omit: { isActive: true } }>[],
     async load() {
       const res = await ApiFetch.api.desa.berita.category["find-many"].get();
       if (res.status === 200) {
@@ -27,23 +35,12 @@ const category = proxy({
   },
 });
 
-type BeritaForm = Prisma.BeritaGetPayload<{
-  select: {
-    judul: true;
-    deskripsi: true;
-    image: true;
-    content: true;
-    katagoryBeritaId: true;
-  };
-}>;
-
+// 4. Berita proxy
 const berita = proxy({
   create: {
-    form: {} as BeritaForm,
+    form: { ...defaultForm }, // ✅ ini kunci fix-nya
     loading: false,
     async create() {
-      berita.create.form.image =
-        "https://www.shutterstock.com/image-vector/lower-news-live-streaming-breaking-600nw-2535984111.jpg";
       const cek = templateForm.safeParse(berita.create.form);
       if (!cek.success) {
         const err = `[${cek.error.issues
@@ -51,6 +48,7 @@ const berita = proxy({
           .join("\n")}] required`;
         return toast.error(err);
       }
+
       try {
         berita.create.loading = true;
         const res = await ApiFetch.api.desa.berita["create"].post(
@@ -58,30 +56,197 @@ const berita = proxy({
         );
         if (res.status === 200) {
           berita.findMany.load();
-          return toast.success("succes create");
+          return toast.success("Berita berhasil disimpan!");
         }
 
-        return toast.error("failed create");
+        return toast.error("Gagal menyimpan berita");
       } catch (error) {
         console.log((error as Error).message);
       } finally {
         berita.create.loading = false;
       }
     },
+    resetForm() {
+      berita.create.form = { ...defaultForm };
+    },
   },
+
   findMany: {
     data: null as
-      | Prisma.BeritaGetPayload<{ omit: { isActive: true } }>[]
+      | Prisma.BeritaGetPayload<{
+          include: {
+            image: true;
+            kategoriBerita: true;
+          };
+        }>[]
       | null,
     async load() {
       const res = await ApiFetch.api.desa.berita["find-many"].get();
       if (res.status === 200) {
-        berita.findMany.data = (res.data?.data as any) ?? [];
+        berita.findMany.data = (res.data?.data ) ?? [];
       }
     },
   },
+  findUnique: {
+    data: null as
+      | Prisma.BeritaGetPayload<{
+          include: {
+            image: true;
+            kategoriBerita: true;
+          };
+        }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/desa/berita/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          berita.findUnique.data = data.data ?? null;
+        } else {
+          console.error('Failed to fetch berita:', res.statusText);
+          berita.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error('Error fetching berita:', error);
+        berita.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        berita.delete.loading = true;
+
+        const response = await fetch(`/api/desa/berita/delete/${id}`, {
+          method: 'DELETE',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+        
+        const result = await response.json();
+        
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Berita berhasil dihapus");
+          await berita.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus berita");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus berita");
+      } finally {
+        berita.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      
+      try {
+        const response = await fetch(`/api/desa/berita/${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,
+            deskripsi: data.deskripsi,
+            content: data.content,
+            kategoriBeritaId: data.kategoriBeritaId || "",
+            imageId: data.imageId || "",
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading berita:", error);
+        toast.error(error instanceof Error ? error.message : "Gagal memuat data");
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateForm.safeParse(berita.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+    
+      try {
+        berita.edit.loading = true;
+        
+        const response = await fetch(`/api/desa/berita/${this.id}`, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            judul: this.form.judul,
+            deskripsi: this.form.deskripsi,
+            content: this.form.content,
+            kategoriBeritaId: this.form.kategoriBeritaId || null,
+            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 berita");
+          await berita.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update berita");
+        }
+      } catch (error) {
+        console.error("Error updating berita:", error);
+        toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat update berita");
+        return false;
+      } finally {
+        berita.edit.loading = false;
+      }
+    },
+
+    reset() {
+      berita.edit.id = "";
+      berita.edit.form = { ...defaultForm };
+    },
+  },
+  
 });
 
+// 5. State global
 const stateDashboardBerita = proxy({
   category,
   berita,

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

@@ -0,0 +1,415 @@
+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 fotoForm = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+  deskripsi: z.string().min(1, { message: "Deskripsi is required" }),
+  imagesId: z.string().nonempty(),
+});
+
+const videoForm = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+  deskripsi: z.string().min(1, { message: "Deskripsi is required" }),
+  linkVideo: z.string().min(1, { message: "Link video is required" }),
+});
+
+const defaultFormFoto = {
+  name: "",
+  deskripsi: "",
+  imagesId: "",
+};
+
+const defaultFormVideo = {
+  name: "",
+  deskripsi: "",
+  linkVideo: "",
+};
+
+const foto = proxy({
+  create: {
+    form: { ...defaultFormFoto },
+    loading: false,
+    async create() {
+      const cek = fotoForm.safeParse(foto.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        foto.create.loading = true;
+        const res = await ApiFetch.api.desa.gallery.foto["create"].post(
+          foto.create.form
+        );
+        if (res.status === 200) {
+          foto.findMany.load();
+          return toast.success("Foto berhasil disimpan!");
+        }
+        return toast.error("Gagal menyimpan foto");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        foto.create.loading = false;
+      }
+    },
+    resetForm() {
+      foto.create.form = { ...defaultFormFoto };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.GalleryFotoGetPayload<{
+          include: {
+            imageGalleryFoto: true;
+          };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.desa.gallery.foto["find-many"].get();
+      if (res.status === 200) {
+        foto.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.GalleryFotoGetPayload<{
+      include: {
+        imageGalleryFoto: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/desa/gallery/foto/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          foto.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch foto:", res.statusText);
+          foto.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching foto:", error);
+        foto.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        foto.delete.loading = true;
+        const response = await fetch(`/api/desa/gallery/foto/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        const result = await response.json();
+        if (response.ok) {
+          toast.success(result.message || "Foto berhasil dihapus");
+          await foto.findMany.load(); // refresh list
+        } else {
+          toast.error(result.message || "Gagal menghapus foto");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus foto");
+      } finally {
+        foto.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormFoto },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(`/api/desa/gallery/foto/${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,
+            imagesId: data.imagesId || "",
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading foto:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = fotoForm.safeParse(foto.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+      try {
+        foto.update.loading = true;
+        const response = await fetch(`/api/desa/gallery/foto/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            deskripsi: this.form.deskripsi,
+            imagesId: this.form.imagesId,
+          }),
+        });
+        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(result.message || "Foto berhasil diupdate");
+          await foto.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate foto");
+        }
+      } catch (error) {
+        console.error("Error updating foto:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengupdate foto"
+        );
+        return false;
+      } finally {
+        foto.update.loading = false;
+      }
+    },
+    reset() {
+      foto.update.id = "";
+      foto.update.form = { ...defaultFormFoto };
+    },
+  },
+});
+
+const video = proxy({
+  create: {
+    form: { ...defaultFormVideo },
+    loading: false,
+    async create() {
+      const cek = videoForm.safeParse(video.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        video.create.loading = true;
+        const res = await ApiFetch.api.desa.gallery.video["create"].post(
+          video.create.form
+        );
+        if (res.status === 200) {
+          video.findMany.load();
+          return toast.success("Video berhasil disimpan!");
+        }
+        return toast.error("Gagal menyimpan video");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        video.create.loading = false;
+      }
+    },
+    resetForm() {
+      video.create.form = { ...defaultFormVideo };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.GalleryVideoGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.desa.gallery.video["find-many"].get();
+      if (res.status === 200) {
+        video.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.GalleryVideoGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/desa/gallery/video/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          video.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch video:", res.statusText);
+          video.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching video:", error);
+        video.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        video.delete.loading = true;
+        const response = await fetch(`/api/desa/gallery/video/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        const result = await response.json();
+        if (response.ok) {
+          toast.success(result.message || "Video berhasil dihapus");
+          await video.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus video");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus video");
+      } finally {
+        video.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormVideo },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(`/api/desa/gallery/video/${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,
+            linkVideo: data.linkVideo,
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading video:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = videoForm.safeParse(video.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+      try {
+        video.update.loading = true;
+        const response = await fetch(`/api/desa/gallery/video/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            deskripsi: this.form.deskripsi,
+            linkVideo: this.form.linkVideo,
+          }),
+        });
+        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(result.message || "Video berhasil diupdate");
+          await video.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate video");
+        }
+      } catch (error) {
+        console.error("Error updating video:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengupdate video"
+        );
+        return false;
+      } finally {
+        video.update.loading = false;
+      }
+    },
+    reset() {
+      video.update.id = "";
+      video.update.form = { ...defaultFormVideo };
+    },
+  },
+});
+
+const stateGallery = proxy({
+  foto,
+  video,
+});
+
+export default stateGallery;

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

@@ -0,0 +1,215 @@
+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 templateSuratKeteranganForm = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  imageId: z.string().nonempty(),
+});
+
+const suratKeteranganForm = {
+  name: "",
+  deskripsi: "",
+  imageId: "",
+};
+
+const suratKeterangan = proxy({
+  create: {
+    form: { ...suratKeteranganForm },
+    loading: false,
+    async create() {
+      const cek = templateSuratKeteranganForm.safeParse(
+        suratKeterangan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        suratKeterangan.create.loading = true;
+        const res = await ApiFetch.api.desa.layanan.pelayanansuratketerangan[
+          "create"
+        ].post(suratKeterangan.create.form);
+        if (res.status === 200) {
+          suratKeterangan.findMany.load();
+          return toast.success("Surat Keterangan berhasil disimpan!");
+        }
+        return toast.error("Gagal menyimpan surat keterangan");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        suratKeterangan.create.loading = false;
+      }
+    },
+    resetForm() {
+      suratKeterangan.create.form = { ...suratKeteranganForm };
+    },
+  },
+  findMany: {
+    data: [] as Prisma.PelayananSuratKeteranganGetPayload<{
+      include: { image: true };
+    }>[],
+    async load() {
+      const res = await ApiFetch.api.desa.layanan.pelayanansuratketerangan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        suratKeterangan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PelayananSuratKeteranganGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/desa/layanan/pelayanansuratketerangan/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          suratKeterangan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch surat keterangan:", res.statusText);
+          suratKeterangan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching surat keterangan:", error);
+        suratKeterangan.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        suratKeterangan.delete.loading = true;
+        const response = await fetch(
+          `/api/desa/layanan/pelayanansuratketerangan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        const result = await response.json();
+        if (response.ok) {
+          toast.success(result.message || "Surat Keterangan berhasil dihapus");
+          await suratKeterangan.findMany.load(); // refresh list
+        } else {
+          toast.error(result.message || "Gagal menghapus surat keterangan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus surat keterangan");
+      } finally {
+        suratKeterangan.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...suratKeteranganForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(
+          `/api/desa/layanan/pelayanansuratketerangan/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            imageId: data.imageId || "",
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error fetching surat keterangan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateSuratKeteranganForm.safeParse(
+        suratKeterangan.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        suratKeterangan.edit.loading = true;
+        const response = await fetch(`/api/desa/layanan/pelayanansuratketerangan/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            deskripsi: this.form.deskripsi,
+            imageId: this.form.imageId,
+          }),
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success(result.message || "Surat Keterangan berhasil diupdate");
+          await suratKeterangan.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate surat keterangan");
+        }
+      } catch (error) {
+        console.error("Error updating surat keterangan:", error);
+        toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat update surat keterangan");
+        return false;
+      } finally {
+        suratKeterangan.edit.loading = false;
+      }
+    },
+  },
+});
+
+const stateLayananDesa = proxy({
+  suratKeterangan,
+});
+
+export default stateLayananDesa;
+

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

@@ -1,83 +1,246 @@
 /* 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"
+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 templateFormPengumuman = z.object({
-    judul: z.string().min(3, "Judul minimal 3 karakter"),
-    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
-    content: z.string().min(3, "Content minimal 3 karakter"),
-    categoryPengumumanId: z.string().nonempty(),
-})
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  content: z.string().min(3, "Content minimal 3 karakter"),
+  categoryPengumumanId: z.string().nonempty(),
+});
 
-const category = proxy ({
-    findMany: {
-        data: null as
-          | null
-          | Prisma.CategoryPengumumanGetPayload<{ omit: { isActive: true } }>[],
-          async load() {
-            const res = await ApiFetch.api.desa.pengumuman.category["find-many"].get();
-            if (res.status === 200) {
-                category.findMany.data = res.data?.data as any ?? [];
-            }
-          }
-    }
-})
+const category = proxy({
+  findMany: {
+    data: null as
+      | null
+      | Prisma.CategoryPengumumanGetPayload<{ omit: { isActive: true } }>[],
+    async load() {
+      const res = await ApiFetch.api.desa.pengumuman.category[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        category.findMany.data = (res.data?.data as any) ?? [];
+      }
+    },
+  },
+});
 
 type PengumumanForm = Prisma.PengumumanGetPayload<{
-    select: {
-        judul: true;
-        deskripsi: true;
-        content: true;
-        categoryPengumumanId: true;
-    }
-}>
+  select: {
+    judul: true;
+    deskripsi: true;
+    content: true;
+    categoryPengumumanId: true;
+  };
+}>;
 const pengumuman = proxy({
-create: {
+  create: {
     form: {} as PengumumanForm,
     loading: false,
     async create() {
-       const cek = templateFormPengumuman.safeParse(pengumuman.create.form);
-       if (!cek.success) {
+      const cek = templateFormPengumuman.safeParse(pengumuman.create.form);
+      if (!cek.success) {
         const err = `[${cek.error.issues
-        .map((v) => `${v.path.join(".")}`)
-        .join("\n")}] required`;
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
         return toast.error(err);
-       }
-       try {
+      }
+      try {
         pengumuman.create.loading = true;
-        const res = await ApiFetch.api.desa.pengumuman["create"].post(pengumuman.create.form)
+        const res = await ApiFetch.api.desa.pengumuman["create"].post(
+          pengumuman.create.form
+        );
         if (res.status === 200) {
-            pengumuman.findMany.load();
-            return toast.success("success create");
+          pengumuman.findMany.load();
+          return toast.success("success create");
         }
-        console.log(res)
+        console.log(res);
         return toast.error("failed create");
-       } catch (error) {
+      } catch (error) {
         console.log((error as Error).message);
-       } finally{
+      } finally {
         pengumuman.create.loading = false;
-       }
-    }
-},
-findMany: {
+      }
+    },
+  },
+  findMany: {
     data: null as
-    | Prisma.PengumumanGetPayload<{omit: {isActive: true}}>[]
-    | null,
-    async load () {
-        const res = await ApiFetch.api.desa.pengumuman["find-many"].get();
-        console.log(res)
-        if (res.status === 200) {
-            pengumuman.findMany.data = res.data?.data ?? [];
+      | Prisma.PengumumanGetPayload<{ 
+        include: {
+            CategoryPengumuman: true;
         }
-    }
-}
-})
+       }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.desa.pengumuman["find-many"].get();
+      console.log(res);
+      if (res.status === 200) {
+        pengumuman.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  // findUnique: {
+  //   data: null as
+  //   | Prisma.PengumumanGetPayload<{
+  //       include: {
+  //           CategoryPengumuman: true;
+  //       }
+  //   }>
+  //   | null,
+  //   async load(id: string) {
+  //     try {
+  //       const res = await fetch(`/api/desa/pengumuman/${id}`);
+  //       if (res.ok) {
+  //         const data = await res.json();
+  //         pengumuman.findUnique.data = data.data ?? null;
+  //       } else {
+  //         console.error('Failed to fetch pengumuman:', res.statusText);
+  //         pengumuman.findUnique.data = null;
+  //       }
+  //     } catch (error) {
+  //       console.error('Error fetching pengumuman:', error);
+  //       pengumuman.findUnique.data = null;
+  //     }
+  //   },
+  // },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        pengumuman.delete.loading = true;
+
+        const response = await fetch(`/api/desa/pengumuman/delete/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Pengumuman berhasil dihapus");
+          await pengumuman.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus pengumuman");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus pengumuman");
+      } finally {
+        pengumuman.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: {} as PengumumanForm,
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/desa/pengumuman/${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,
+            deskripsi: data.deskripsi,
+            content: data.content,
+            categoryPengumumanId: data.categoryPengumumanId || "",
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data pengumuman");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data pengumuman");
+      } finally {
+        pengumuman.update.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateFormPengumuman.safeParse(pengumuman.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        pengumuman.update.loading = true;
+
+        const response = await fetch(`/api/desa/pengumuman/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            judul: this.form.judul,
+            deskripsi: this.form.deskripsi,
+            content: this.form.content,
+            categoryPengumumanId: this.form.categoryPengumumanId,
+          }),
+        });
+
+        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 pengumuman");
+          await pengumuman.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update pengumuman");
+        }
+      } catch (error) {
+        console.error("Error updating pengumuman:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update pengumuman"
+        );
+        return false;
+      } finally {
+        pengumuman.update.loading = false;
+      }
+    },
+  },
+});
 
 const stateDesaPengumuman = proxy({
-    category,
-    pengumuman
-})
-export default stateDesaPengumuman
+  category,
+  pengumuman,
+});
+export default stateDesaPengumuman;

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

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

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

@@ -0,0 +1,239 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+/* Sejarah */
+const templateFormSejarahForm = z.object({
+    sejarah: z.string().min(3, "Sejarah minimal 3 karakter"),
+})
+
+type SejarahForm = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        sejarah: true;
+    }
+}>
+
+const Sejarah = proxy({
+    findById: {
+        data: null as SejarahForm | null,
+        loading: false,
+        initialize() {
+            Sejarah.findById.data = {
+                id: "",
+                sejarah: "",
+            } as SejarahForm;
+        },
+        async load(id: string) {
+            try {
+                Sejarah.findById.loading = true;
+                const res = await ApiFetch.api.desa.profile["find-by-id"].get({
+                    query: { id },
+                });
+                if (res.status === 200) {
+                    Sejarah.findById.data = {
+                        id: id,
+                        sejarah: res.data?.data?.sejarah ?? ""
+                    };
+                } else {
+                    toast.error("Gagal mengambil data sejarah");
+                }
+            } catch (error) {
+                console.error((error as Error).message);
+                toast.error("Terjadi kesalahan saat mengambil data sejarah");
+            } finally {
+                Sejarah.findById.loading = false;
+            }
+        }
+    },
+    update: {
+        loading: false,
+        async save(data: SejarahForm) {
+            const cek = templateFormSejarahForm.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 {
+                Sejarah.update.loading = true;
+                const res = await ApiFetch.api.desa.profile.sejarah["update"].post(data);
+                if (res.status === 200) {
+                    toast.success("Berhasil update sejarah");
+                    await Sejarah.findById.load(data.id);
+                } else {
+                    toast.error("Gagal update sejarah");
+                }
+            } catch (error) {
+                console.error((error as Error).message);
+                toast.error("Terjadi kesalahan saat update sejarah");
+            } finally {
+                Sejarah.update.loading = false;
+            }
+        }
+    }
+})
+
+/* Visi Misi Desa */
+const templateFormVisiForm = z.object({
+    visi: z.string().min(3, "Visi minimal 3 karakter"),
+    misi: z.string().min(3, "Misi minimal 3 karakter")
+})
+
+type VisiMisiDesaForm = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        visi: true;
+        misi: true;
+    }
+}>
+
+const VisiMisiDesa = proxy({
+    findById: {
+        data: null as VisiMisiDesaForm | null,
+        loading: false,
+        initialize() {
+            VisiMisiDesa.findById.data = {
+                id: "",
+                visi: "",
+                misi: ""
+            } as VisiMisiDesaForm;
+        },
+        async load(id: string) {
+            try {
+                VisiMisiDesa.findById.loading = true;
+                const res = await ApiFetch.api.desa.profile["find-by-id"].get({
+                    query: { id },
+                });
+                if (res.status === 200) {
+                    VisiMisiDesa.findById.data = {
+                        id: id,
+                        visi: res.data?.data?.visi ?? "",
+                        misi: res.data?.data?.misi ?? ""
+                    };
+                } else {
+                    toast.error("Gagal mengambil data visi misi");
+                }
+            } catch (error) {
+                console.error((error as Error).message);
+                toast.error("Terjadi kesalahan saat mengambil data visi misi");
+            } finally {
+                VisiMisiDesa.findById.loading = false;
+            }
+        }
+    },
+    update: {
+        loading: false,
+        async save(data: VisiMisiDesaForm) {
+            const cek = templateFormVisiForm.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 {
+                VisiMisiDesa.update.loading = true;
+                const res = await ApiFetch.api.desa.profile.visimisiDesa["update"].post(data);
+                if (res.status === 200) {
+                    toast.success("Berhasil update visi misi");
+                    await VisiMisiDesa.findById.load(data.id);
+                } else {
+                    toast.error("Gagal update visi");
+                }
+            } catch (error) {
+                console.error((error as Error).message);
+                toast.error("Terjadi kesalahan saat update visi misi");
+            } finally {
+                VisiMisiDesa.update.loading = false;
+            }
+        }
+    }
+})
+/* Lambang Desa */
+const templateFormLambangDesaForm = z.object({
+    lambang: z.string().min(3, "Lambang minimal 3 karakter"),
+})
+
+type LambangDesaForm = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        lambang: true;
+    }
+}>
+
+const LambangDesa = proxy({
+    findById: {
+        data: null as LambangDesaForm | null,
+        loading: false,
+        initialize() {
+            LambangDesa.findById.data = {
+                id: "",
+                lambang: "",
+            } as LambangDesaForm;
+        },
+        async load(id: string) {
+            try {
+                LambangDesa.findById.loading = true;
+                const res = await ApiFetch.api.desa.profile["find-by-id"].get({
+                    query: { id },
+                });
+                if (res.status === 200) {
+                    LambangDesa.findById.data = {
+                        id: id,
+                        lambang: res.data?.data?.lambang ?? ""
+                    };
+                } else {
+                    toast.error("Gagal mengambil data lambang desa");
+                }
+            } catch (error) {
+                console.error((error as Error).message);
+                toast.error("Terjadi kesalahan saat mengambil data lambang desa");
+            } finally {
+                LambangDesa.findById.loading = false;
+            }
+        }
+    },
+    update: {
+        loading: false,
+        async save(data: LambangDesaForm) {
+            const cek = templateFormLambangDesaForm.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 {
+                LambangDesa.update.loading = true;
+                const res = await ApiFetch.api.desa.profile.lambangDesa["update"].post(data);
+                if (res.status === 200) {
+                    toast.success("Berhasil update lambang desa");
+                    await LambangDesa.findById.load(data.id);
+                } else {
+                    toast.error("Gagal update lambang desa");
+                }
+            } catch (error) {
+                console.error((error as Error).message);
+                toast.error("Terjadi kesalahan saat update lambang desa");
+            } finally {
+                LambangDesa.update.loading = false;
+            }
+        }
+    }
+});
+
+const stateProfileDesa = {
+    Sejarah,
+    VisiMisiDesa,
+    LambangDesa,
+};
+
+
+export default stateProfileDesa;

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

@@ -5,61 +5,239 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateDaftarInformasi = z.object({
-    jenisInformasi: z.string().min(3, "Jenis Informasi minimal 3 karakter"),
-    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
-    tanggal: z.string().min(3, "Tanggal minimal 3 karakter"),
-})
+  jenisInformasi: z.string().min(3, "Jenis Informasi minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  tanggal: z.string().min(3, "Tanggal minimal 3 karakter"),
+});
+
+const defaultForm = {
+  jenisInformasi: "",
+  deskripsi: "",
+  tanggal: "",
+};
 
 type DaftarInformasi = Prisma.DaftarInformasiPublikGetPayload<{
-    select: {
-        jenisInformasi: true;
-        deskripsi: true;
-        tanggal: true;
-    };
+  select: {
+    jenisInformasi: true;
+    deskripsi: true;
+    tanggal: true;
+  };
 }>;
 
-const daftarInformasi = proxy({
-    create: {
-        form: {} as DaftarInformasi,
-        loading: false,
-        async create() {
-            const cek = templateDaftarInformasi.safeParse(daftarInformasi.create.form);
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-            try {
-                daftarInformasi.create.loading = true;
-                const res = await ApiFetch.api.ppid.daftarinformasipublik["create"].post(daftarInformasi.create.form);
-                if (res.status === 200) {
-                    daftarInformasi.findMany.load();
-                    return toast.success("success create");
-                }
-                return toast.error("failed create");
-            } catch (error) {
-                console.log((error as Error).message);
-            } finally {
-                daftarInformasi.create.loading = false;
-            }
-        },
-    },
-    findMany: {
-        data: null as
-        | Prisma.DaftarInformasiPublikGetPayload<{ omit: { isActive: true } }>[]
-        | null,
-        async load() {
-            const res = await ApiFetch.api.ppid.daftarinformasipublik["find-many"].get();
-            if (res.status === 200) {
-                daftarInformasi.findMany.data = res.data?.data ?? [];
-            }
+const daftarInformasiPublik = proxy({
+  create: {
+    form: {} as DaftarInformasi,
+    loading: false,
+    async create() {
+      const cek = templateDaftarInformasi.safeParse(
+        daftarInformasiPublik.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        daftarInformasiPublik.create.loading = true;
+        const res = await ApiFetch.api.ppid.daftarinformasipublik[
+          "create"
+        ].post(daftarInformasiPublik.create.form);
+        if (res.status === 200) {
+          daftarInformasiPublik.findMany.load();
+          return toast.success("success create");
         }
-    }
-    });
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        daftarInformasiPublik.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DaftarInformasiPublikGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.ppid.daftarinformasipublik[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        daftarInformasiPublik.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DaftarInformasiPublikGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/ppid/daftarinformasipublik/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          daftarInformasiPublik.findUnique.data = data.data ?? null;
+        } else {
+          console.error(
+            "Failed to fetch daftar informasi publik:",
+            res.statusText
+          );
+          daftarInformasiPublik.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching daftar informasi publik:", error);
+        daftarInformasiPublik.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
 
-    const stateDaftarInformasiPublik = proxy({
-        daftarInformasi
-    })
+      try {
+        daftarInformasiPublik.delete.loading = true;
 
-    export default stateDaftarInformasiPublik;
+        const response = await fetch(
+          `/api/ppid/daftarinformasipublik/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Daftar Informasi Publik berhasil dihapus"
+          );
+          await daftarInformasiPublik.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus daftar informasi publik"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus daftar informasi publik");
+      } finally {
+        daftarInformasiPublik.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/ppid/daftarinformasipublik/${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 = {
+            jenisInformasi: data.jenisInformasi,
+            deskripsi: data.deskripsi,
+            tanggal: data.tanggal,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data");
+        }
+      } catch (error) {
+        console.error("Error loading daftar informasi publik:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateDaftarInformasi.safeParse(
+        daftarInformasiPublik.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        daftarInformasiPublik.edit.loading = true;
+
+        const response = await fetch(
+          `/api/ppid/daftarinformasipublik/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              jenisInformasi: this.form.jenisInformasi,
+              deskripsi: this.form.deskripsi,
+              tanggal: this.form.tanggal,
+            }),
+          }
+        );
+
+        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 daftar informasi publik");
+          await daftarInformasiPublik.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal update daftar informasi publik"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating daftar informasi publik:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update daftar informasi publik"
+        );
+        return false;
+      } finally {
+        daftarInformasiPublik.edit.loading = false;
+      }
+    },
+
+    reset() {
+      daftarInformasiPublik.edit.id = "";
+      daftarInformasiPublik.edit.form = { ...defaultForm };
+    },
+  },
+});
+
+export default daftarInformasiPublik;

src/app/admin/(dashboard)/_state/ppid/dasar_hukum/dasarHukum.ts

@@ -0,0 +1,82 @@
+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({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  content: z.string().min(3, "Content minimal 3 karakter"),
+});
+
+type DasarHukumForm = Prisma.DasarHukumPPIDGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    content: true;
+  };
+}>;
+
+const stateDasarHukumPPID = proxy({
+  findById: {
+    data: null as DasarHukumForm | null,
+    loading: false,
+    initialize() {
+      stateDasarHukumPPID.findById.data = {
+        id: '',
+        judul: '',
+        content: '',
+      } as DasarHukumForm;
+    },
+    async load(id: string) {
+      try {
+        stateDasarHukumPPID.findById.loading = true;
+        const res = await ApiFetch.api.ppid.dasarhukumppid["find-by-id"].get({
+          query: { id },
+        });
+        if (res.status === 200) {
+          stateDasarHukumPPID.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data dasar hukum");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data dasar hukum");
+      } finally {
+        stateDasarHukumPPID.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: DasarHukumForm) {
+      const cek = templateForm.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 {
+        stateDasarHukumPPID.update.loading = true;
+        const res = await ApiFetch.api.ppid.dasarhukumppid["update"].post(data);
+        if (res.status === 200) {
+          toast.success("Data dasar hukum berhasil diubah");
+          await stateDasarHukumPPID.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data dasar hukum");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengubah data dasar hukum");
+      } finally {
+        stateDasarHukumPPID.update.loading = false;
+      }
+    },
+  },
+});
+
+export default stateDasarHukumPPID;

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

@@ -11,12 +11,13 @@ const templateGrafikJenisKelamin = z.object({
 
 type GrafikJenisKelamin = Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
   select: {
+    id: true;
     laki: true;
     perempuan: true;
   };
 }>;
 
-const defaultForm: GrafikJenisKelamin = {
+const defaultForm: Omit<GrafikJenisKelamin, 'id'> & { id?: string } = {
   laki: "",
   perempuan: "",
 };
@@ -41,9 +42,16 @@ const grafikBerdasarkanJenisKelamin = proxy({
           "create"
         ].post(grafikBerdasarkanJenisKelamin.create.form);
         if (res.status === 200) {
-          grafikBerdasarkanJenisKelamin.create.form = defaultForm;
-          grafikBerdasarkanJenisKelamin.findMany.load();
-          return toast.success("success create");
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            grafikBerdasarkanJenisKelamin.create.form = {
+              laki: "",
+              perempuan: "",
+            };
+            grafikBerdasarkanJenisKelamin.findMany.load();
+            return id;
+          }
         }
         return toast.error("failed create");
       } catch (error) {
@@ -69,9 +77,103 @@ const grafikBerdasarkanJenisKelamin = proxy({
       }
     },
   },
+  findUnique: {
+    data: null as Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/ppid/grafikberdasarkanjeniskelamin/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          grafikBerdasarkanJenisKelamin.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          grafikBerdasarkanJenisKelamin.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan jenis kelamin:", error);
+        grafikBerdasarkanJenisKelamin.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: {...defaultForm},
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateGrafikJenisKelamin.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/ppid/grafikberdasarkanjeniskelamin/${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 grafikBerdasarkanJenisKelamin.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data grafik berdasarkan jenis kelamin");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        grafikBerdasarkanJenisKelamin.delete.loading = true;
+
+        const response = await fetch(`/api/ppid/grafikberdasarkanjeniskelamin/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Grafik berdasarkan jenis kelamin berhasil dihapus");
+          await grafikBerdasarkanJenisKelamin.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus grafik berdasarkan jenis kelamin");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus grafik berdasarkan jenis kelamin");
+      } finally {
+        grafikBerdasarkanJenisKelamin.delete.loading = false;
+      }
+    },
+  }
 });
 
-const stateGrafikBerdasarkanJenisKelamin = proxy({
-  grafikBerdasarkanJenisKelamin,
-});
-export default stateGrafikBerdasarkanJenisKelamin;
+export default grafikBerdasarkanJenisKelamin;

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

@@ -13,6 +13,7 @@ const templateGrafikResponden = z.object({
 
 type GrafikResponden = Prisma.GrafikBerdasarkanRespondenGetPayload<{
   select: {
+    id: true;
     sangatbaik: true;
     baik: true;
     kurangbaik: true;
@@ -20,7 +21,7 @@ type GrafikResponden = Prisma.GrafikBerdasarkanRespondenGetPayload<{
   };
 }>;
 
-const defaultForm: GrafikResponden = {
+const defaultForm: Omit<GrafikResponden, 'id'> & { id?: string } = {
   sangatbaik: "",
   baik: "",
   kurangbaik: "",
@@ -47,9 +48,18 @@ const grafikBerdasarkanResponden = proxy({
           "create"
         ].post(grafikBerdasarkanResponden.create.form);
         if (res.status === 200) {
-          grafikBerdasarkanResponden.create.form = defaultForm;
-          grafikBerdasarkanResponden.findMany.load();
-          return toast.success("success create");
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            grafikBerdasarkanResponden.create.form = {
+              sangatbaik: "",
+              baik: "",
+              kurangbaik: "",
+              tidakbaik: "",
+            };
+            grafikBerdasarkanResponden.findMany.load();
+            return id;
+          }
         }
         return toast.error("failed create");
       } catch (error) {
@@ -75,10 +85,112 @@ const grafikBerdasarkanResponden = proxy({
       }
     },
   },
+  findUnique: {
+    data: null as Prisma.GrafikBerdasarkanRespondenGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/ppid/grafikberdasarkanresponden/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          grafikBerdasarkanResponden.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          grafikBerdasarkanResponden.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan responden:", error);
+        grafikBerdasarkanResponden.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: {...defaultForm},
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      const cek = templateGrafikResponden.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/ppid/grafikberdasarkanresponden/${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 grafikBerdasarkanResponden.findMany.load();
+
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data grafik berdasarkan responden");
+      } finally {
+        this.loading = false;
+      }
+    }
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        grafikBerdasarkanResponden.delete.loading = true;
+
+        const response = await fetch(`/api/ppid/grafikberdasarkanresponden/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Grafik berdasarkan responden berhasil dihapus");
+          await grafikBerdasarkanResponden.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus grafik berdasarkan responden");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus grafik berdasarkan responden");
+      } finally {
+        grafikBerdasarkanResponden.delete.loading = false;
+      }
+    }
+  }
 });
 
-const stateGrafikResponden = proxy({
-  grafikBerdasarkanResponden,
-});
-
-export default stateGrafikResponden;
+export default grafikBerdasarkanResponden;

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

@@ -5,80 +5,182 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateGrafikUmur = z.object({
-    remaja: z.string().min(2, "Data remaja harus diisi"),
-    dewasa: z.string().min(2, "Data dewasa harus diisi"),
-    orangtua: z.string().min(2, "Data orangtua harus diisi"),
-    lansia: z.string().min(2, "Data lansia harus diisi"),
+  remaja: z.string().min(2, "Data remaja harus diisi"),
+  dewasa: z.string().min(2, "Data dewasa harus diisi"),
+  orangtua: z.string().min(2, "Data orangtua harus diisi"),
+  lansia: z.string().min(2, "Data lansia harus diisi"),
 });
 
 type GrafikUmur = Prisma.GrafikBerdasarkanUmurGetPayload<{
-    select: {
-        remaja: true;
-        dewasa: true;
-        orangtua: true;
-        lansia: true;
-    };
+  select: {
+    id: true;
+    remaja: true;
+    dewasa: true;
+    orangtua: true;
+    lansia: true;
+  };
 }>;
 
-const defaultForm: GrafikUmur = {
-    remaja: "",
-    dewasa: "",
-    orangtua: "",
-    lansia: "",
+const defaultForm: Omit<GrafikUmur, "id"> & { id?: string } = {
+  remaja: "",
+  dewasa: "",
+  orangtua: "",
+  lansia: "",
 };
 
 const grafikBerdasarkanUmur = proxy({
-    create: {
-        form: defaultForm,
-        loading: false,
-        async create() {
-            const cek = templateGrafikUmur.safeParse(
-                grafikBerdasarkanUmur.create.form
-            );
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-            try {
-                grafikBerdasarkanUmur.create.loading = true;
-                const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
-                    "create"
-                ].post(grafikBerdasarkanUmur.create.form);
-                if (res.status === 200) {
-                    grafikBerdasarkanUmur.create.form = defaultForm;
-                    grafikBerdasarkanUmur.findMany.load();
-                    return toast.success("success create");
-                }
-                return toast.error("failed create");
-            } catch (error) {
-                console.log((error as Error).message);
-            } finally {
-                grafikBerdasarkanUmur.create.loading = false;
-            }
-        },
+  create: {
+    form: defaultForm,
+    loading: false,
+    async create() {
+      const cek = templateGrafikUmur.safeParse(
+        grafikBerdasarkanUmur.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        grafikBerdasarkanUmur.create.loading = true;
+        const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
+          "create"
+        ].post(grafikBerdasarkanUmur.create.form);
+        if (res.status === 200) {
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            grafikBerdasarkanUmur.create.form = {
+              remaja: "",
+              dewasa: "",
+              orangtua: "",
+              lansia: "",
+            };
+            grafikBerdasarkanUmur.findMany.load();
+            return id;
+          }
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        grafikBerdasarkanUmur.create.loading = false;
+      }
     },
-    findMany: {
-        data: null as 
-        | Prisma.GrafikBerdasarkanUmurGetPayload<{
-            omit: { isActive: true };
+  },
+  findMany: {
+    data: null as
+      | Prisma.GrafikBerdasarkanUmurGetPayload<{
+          omit: { isActive: true };
         }>[]
-        | null,
-        loading: false,
-        async load() {
-            const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
-                "find-many"
-            ].get();
-            if (res.status === 200) {
-                grafikBerdasarkanUmur.findMany.data = res.data?.data ?? [];
-            }
-        },
+      | null,
+    loading: false,
+    async load() {
+      const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        grafikBerdasarkanUmur.findMany.data = res.data?.data ?? [];
+      }
     },
-})
+  },
+  findUnique: {
+    data: null as Prisma.GrafikBerdasarkanUmurGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/ppid/grafikberdasarkanumur/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          grafikBerdasarkanUmur.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          grafikBerdasarkanUmur.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan umur:", error);
+        grafikBerdasarkanUmur.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+        const id = this.id;
+        if (!id) {
+            toast.warn("ID tidak valid");
+            return null;
+        }
+        const cek = templateGrafikUmur.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/ppid/grafikberdasarkanumur/${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 grafikBerdasarkanUmur.findMany.load();
+            return result.data;
+        } catch (error) {
+            console.error("Error update data:", error);
+            toast.error("Gagal update data grafik berdasarkan umur");
+        } finally {
+            this.loading = false;
+        }
+    }
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
 
-const stateGrafikBerdasarkanUmur = proxy({
-    grafikBerdasarkanUmur,
-})
+      try {
+        grafikBerdasarkanUmur.delete.loading = true;
 
-export default stateGrafikBerdasarkanUmur;
+        const response = await fetch(`/api/ppid/grafikberdasarkanumur/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Grafik berdasarkan umur berhasil dihapus");
+          await grafikBerdasarkanUmur.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus grafik berdasarkan umur");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus grafik berdasarkan umur");
+      } finally {
+        grafikBerdasarkanUmur.delete.loading = false;
+      }
+    }
+  }
+});
+
+export default grafikBerdasarkanUmur;

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

@@ -11,12 +11,13 @@ const templateGrafikHasilKepuasanMasyarakat = z.object({
 
 type GrafikHasilKepuasanMasyarakat = Prisma.IndeksKepuasanMasyarakatGetPayload<{
   select: {
+    id: true;
     label: true;
     kepuasan: true;
   };
 }>;
 
-const defaultForm: GrafikHasilKepuasanMasyarakat = {
+const defaultForm: Omit<GrafikHasilKepuasanMasyarakat, 'id'> & { id?: string } = {
   label: "",
   kepuasan: "",
 };
@@ -41,13 +42,18 @@ const grafikHasilKepuasanMasyarakat = proxy({
           grafikHasilKepuasanMasyarakat.create.form
         );
         if (res.status === 200) {
-          grafikHasilKepuasanMasyarakat.create.form = {
-            label: "",
-            kepuasan: ""
-          };
-          grafikHasilKepuasanMasyarakat.findMany.load();
-          return toast.success("success create");
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            grafikHasilKepuasanMasyarakat.create.form = {
+              label: "",
+              kepuasan: "",
+            };
+            grafikHasilKepuasanMasyarakat.findMany.load();
+            return id;
+          }
         }
+        
         return toast.error("failed create");
       } catch (error) {
         console.log((error as Error).message);
@@ -58,19 +64,127 @@ const grafikHasilKepuasanMasyarakat = proxy({
   },
   findMany: {
     data: null as
-    | Prisma.IndeksKepuasanMasyarakatGetPayload<{ omit: { isActive: true } }>[]
-    | null,
+      | Prisma.IndeksKepuasanMasyarakatGetPayload<{
+          omit: { isActive: true };
+        }>[]
+      | null,
     async load() {
-        const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat["find-many"].get();
-        if (res.status === 200) {
-            grafikHasilKepuasanMasyarakat.findMany.data = res.data?.data ?? [];
+      const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        grafikHasilKepuasanMasyarakat.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.IndeksKepuasanMasyarakatGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/ppid/grafikhasilkepuasamanmasyarakat/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          grafikHasilKepuasanMasyarakat.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          grafikHasilKepuasanMasyarakat.findUnique.data = null;
         }
+      } catch (error) {
+        console.error("Error loading grafik hasil kepuasan masyarakat:", error);
+        grafikHasilKepuasanMasyarakat.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+    
+      // ✅ Validasi pakai Zod
+      const cek = templateGrafikHasilKepuasanMasyarakat.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/ppid/grafikhasilkepuasamanmasyarakat/${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!");
+    
+        // ✅ Optional: refresh list kalau kamu langsung ke halaman list
+        await grafikHasilKepuasanMasyarakat.findMany.load();
+    
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data grafik hasil kepuasan masyarakat");
+      } finally {
+        this.loading = false;
+      }
     }
+    
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        grafikHasilKepuasanMasyarakat.delete.loading = true;
+
+        const response = await fetch(`/api/ppid/grafikhasilkepuasamanmasyarakat/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Grafik hasil kepuasan masyarakat berhasil dihapus");
+          await grafikHasilKepuasanMasyarakat.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus grafik hasil kepuasan masyarakat");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus grafik hasil kepuasan masyarakat");
+      } finally {
+        grafikHasilKepuasanMasyarakat.delete.loading = false;
+      }
+    },
   }
 });
 
-const stateGrafikHasilKepuasanMasyarakat = proxy({
-  grafikHasilKepuasanMasyarakat,
-});
-
-export default stateGrafikHasilKepuasanMasyarakat;
+export default grafikHasilKepuasanMasyarakat;

src/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik.ts

@@ -0,0 +1,125 @@
+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(3, "Nama minimal 3 karakter"),
+  nik: z.string().min(3, "NIK minimal 3 karakter"),
+  notelp: z.string().min(3, "Nomor Telepon minimal 3 karakter"),
+  alamat: z.string().min(3, "Alamat minimal 3 karakter"),
+  email: z.string().min(3, "Email minimal 3 karakter"),
+  jenisInformasiDimintaId: z.string().nonempty(),
+  caraMemperolehInformasiId: z.string().nonempty(),
+  caraMemperolehSalinanInformasiId: z.string().nonempty(),
+})
+
+const jenisInformasiDiminta = proxy({
+    findMany: {
+        data: null as
+        | null
+        | Prisma.JenisInformasiDimintaGetPayload<{ omit: { isActive: true } }>[],
+        async load(){
+            const res = await ApiFetch.api.ppid.permohonaninformasipublik.jenisInformasi["find-many"].get();
+            if (res.status === 200) {
+                jenisInformasiDiminta.findMany.data = res.data?.data ?? [];
+            }
+        }
+    }
+})
+
+const caraMemperolehInformasi = proxy({
+    findMany: {
+        data: null as
+        | null
+        | Prisma.CaraMemperolehInformasiGetPayload<{ omit: { isActive: true } }>[],
+        async load() {
+            const res = await ApiFetch.api.ppid.permohonaninformasipublik.memperolehInformasi["find-many"].get();
+            if (res.status === 200) {
+                caraMemperolehInformasi.findMany.data = res.data?.data ?? [];
+            }
+        }
+    }
+})
+
+const caraMemperolehSalinanInformasi = proxy({
+    findMany: {
+        data: null as
+        | null
+        | Prisma.CaraMemperolehSalinanInformasiGetPayload<{ omit: { isActive: true } }>[],
+        async load() {
+            const res = await ApiFetch.api.ppid.permohonaninformasipublik.salinanInformasi["find-many"].get();
+            if (res.status === 200) {
+                caraMemperolehSalinanInformasi.findMany.data = res.data?.data ?? [];
+            }
+        }
+    }
+})
+console.log(caraMemperolehSalinanInformasi)
+
+type PermohonanInformasiPublikForm = Prisma.PermohonanInformasiPublikGetPayload<{
+    select: {
+        name: true;
+        nik: true;
+        notelp: true;
+        alamat: true;
+        email: true;
+        jenisInformasiDimintaId: true;
+        caraMemperolehInformasiId: true;
+        caraMemperolehSalinanInformasiId: true;
+    };
+}>;
+
+const statepermohonanInformasiPublik = proxy({
+    create: {
+        form: {} as PermohonanInformasiPublikForm,
+        loading: false,
+        async create(){
+            const cek = templateForm.safeParse(statepermohonanInformasiPublik.create.form);
+            if(!cek.success) {
+                const err = `[${cek.error.issues
+                    .map((v) => `${v.path.join(".")}`)
+                    .join("\n")}] required`;
+                return toast.error(err);
+            }
+            try {
+                statepermohonanInformasiPublik.create.loading = true;
+                const res = await ApiFetch.api.ppid.permohonaninformasipublik["create"].post(statepermohonanInformasiPublik.create.form);
+                if (res.status === 200) {
+                    statepermohonanInformasiPublik.findMany.load();
+                    return toast.success("success create");
+                }
+                return toast.error("failed create");
+            } catch (error) {
+                console.log((error as Error).message);
+            } finally {
+                statepermohonanInformasiPublik.create.loading = false;
+            }
+        }
+    },
+    findMany: {
+        data: null as
+        | Prisma.PermohonanInformasiPublikGetPayload<{ include: {
+            caraMemperolehSalinanInformasi: true,
+            jenisInformasiDiminta: true,
+            caraMemperolehInformasi: true,
+        } }>[]
+        | null,
+        async load() {
+            const res = await ApiFetch.api.ppid.permohonaninformasipublik["find-many"].get();
+            if (res.status === 200) {
+                statepermohonanInformasiPublik.findMany.data = res.data?.data ?? [];
+            }
+        }
+    }
+})
+
+const statepermohonanInformasiPublikForm = proxy({
+    statepermohonanInformasiPublik,
+    jenisInformasiDiminta,
+    caraMemperolehInformasi,
+    caraMemperolehSalinanInformasi,
+})
+
+export default statepermohonanInformasiPublikForm;

src/app/admin/(dashboard)/_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi.ts

@@ -0,0 +1,64 @@
+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(3, "Nama minimal 3 karakter"),
+    email: z.string().min(3, "Email minimal 3 karakter"),
+    notelp: z.string().min(3, "Nomor Telepon minimal 3 karakter"),
+    alasan: z.string().min(3, "Alasan minimal 3 karakter"),
+})
+
+type PermohonanKeberatanInformasiForm = Prisma.FormulirPermohonanKeberatanGetPayload<{
+    select: {
+        name: true;
+        email: true;
+        notelp: true;
+        alasan: true;
+    };
+}>;
+
+const permohonanKeberatanInformasi = proxy({
+    create: {
+        form: {} as PermohonanKeberatanInformasiForm,
+        loading: false,
+        async create(){
+            const cek = templateForm.safeParse(permohonanKeberatanInformasi.create.form);
+            if(!cek.success) {
+                const err = `[${cek.error.issues
+                    .map((v) => `${v.path.join(".")}`)
+                    .join("\n")}] required`;
+                return toast.error(err);
+            }
+            try {
+                permohonanKeberatanInformasi.create.loading = true;
+                const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["create"].post(permohonanKeberatanInformasi.create.form);
+                if (res.status === 200) {
+                    permohonanKeberatanInformasi.findMany.load();
+                    return toast.success("success create");
+                }
+                return toast.error("failed create");
+            } catch (error) {
+                console.log((error as Error).message);
+            } finally {
+                permohonanKeberatanInformasi.create.loading = false;
+            }
+        },
+    },
+    findMany: {
+        data: null as
+        | Prisma.FormulirPermohonanKeberatanGetPayload<{omit: {isActive: true}}>[]
+        | null,
+        async load() {
+            const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["find-many"].get();
+            if (res.status === 200) {
+                permohonanKeberatanInformasi.findMany.data = res.data?.data ?? [];
+            }
+        }
+    }
+});
+
+export default permohonanKeberatanInformasi;
+

src/app/admin/(dashboard)/_state/ppid/profile_ppid/profile_PPID.ts

@@ -0,0 +1,201 @@
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+/**
+ * Schema validasi form ProfilePPID menggunakan Zod.
+ */
+const templateForm = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  biodata: z.string().min(3, "Biodata minimal 3 karakter"),
+  riwayat: z.string().min(3, "Riwayat minimal 3 karakter"),
+  pengalaman: z.string().min(3, "Pengalaman minimal 3 karakter"),
+  unggulan: z.string().min(3, "Unggulan minimal 3 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+});
+
+const defaultForm = {
+  name: "",
+  biodata: "",
+  riwayat: "",
+  pengalaman: "",
+  unggulan: "",
+  imageId: "",
+};
+
+type ProfilePPIDForm = Prisma.ProfilePPIDGetPayload<{
+  select: {
+    id: true;
+    name: true;
+    biodata: true;
+    riwayat: true;
+    pengalaman: true;
+    unggulan: true;
+    imageId: true;
+    image?: {
+      select: {
+        link: true;
+      };
+    };
+  };
+}>;
+
+/**
+ * Improved State Management - Consolidated and more robust
+ */
+const stateProfilePPID = proxy({
+  // Consolidated data management
+  profile: {
+    data: null as ProfilePPIDForm | null,
+    loading: false,
+    error: null as string | null,
+
+    // Single method to load profile data
+    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/ppid/profileppid/${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 profile");
+        }
+      } catch (error) {
+        const errorMessage = (error as Error).message;
+        this.error = errorMessage;
+        console.error("Load profile error:", errorMessage);
+        toast.error("Terjadi kesalahan saat mengambil data profile");
+        return null;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // Reset profile data
+    reset() {
+      this.data = null;
+      this.error = null;
+      this.loading = false;
+    }
+  },
+
+  // Edit form management
+  editForm: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    error: null as string | null,
+    isReadOnly: false, // Flag untuk data yang tidak bisa diedit
+
+    // Initialize form with profile data
+    initialize(profileData: ProfilePPIDForm) {
+      this.id = profileData.id;
+      this.isReadOnly = false; // Semua data bisa diedit
+      this.form = {
+        name: profileData.name || "",
+        biodata: profileData.biodata || "",
+        riwayat: profileData.riwayat || "",
+        pengalaman: profileData.pengalaman || "",
+        unggulan: profileData.unggulan || "",
+        imageId: profileData.imageId || "",
+      };
+    },
+
+    // Update form field
+    updateField(field: keyof typeof defaultForm, value: string) {
+      this.form[field] = value;
+    },
+
+    // Submit form
+    async submit() {
+      // Validate form
+      const validation = templateForm.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/ppid/profileppid/${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 stateProfilePPID.profile.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 form
+    reset() {
+      this.id = "";
+      this.form = { ...defaultForm };
+      this.error = null;
+      this.loading = false;
+      this.isReadOnly = false;
+    }
+  },
+
+  // Helper methods
+  async loadForEdit(id: string) {
+    const profileData = await this.profile.load(id);
+    if (profileData) {
+      this.editForm.initialize(profileData);
+    }
+    return profileData;
+  },
+
+  reset() {
+    this.profile.reset();
+    this.editForm.reset();
+  }
+});
+
+export default stateProfilePPID;

src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts

@@ -0,0 +1,169 @@
+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(3, "Nama minimal 3 karakter"),
+    imageId: z.string().min(1, "Gambar wajib dipilih"),
+})
+
+const defaultForm = {
+    name: "",
+    imageId: "",
+};
+
+type StrukturPPIDForm = Prisma.StrukturPPIDGetPayload<{
+    select: {
+        id: true;
+        name: true;
+        imageId: true;
+        image?: {
+            select: {
+                link: true;
+            };
+        };
+    };
+}>;
+
+const stateStrukturPPID = proxy({
+    struktur: {
+        data: null as StrukturPPIDForm | 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/ppid/strukturppid/${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 struktur")
+                }
+            } catch (error) {
+                const errorMessage = (error as Error).message;
+                this.error = errorMessage;
+                console.error("Load struktur error:", errorMessage);
+                toast.error("Terjadi kesalahan saat mengambil data struktur");
+                return null;
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        reset() {
+            this.data = null;
+            this.error = null;
+            this.loading = false;
+        }
+    },
+
+    editStruktur: {
+        id: "",
+        form: { ...defaultForm },
+        loading: false,
+        error: null as string | null,
+        isReadOnly: false,
+
+        initialize(strukturData: StrukturPPIDForm) {
+            this.id = strukturData.id;
+            this.isReadOnly = false;
+            this.form = {
+                name: strukturData.name || "",
+                imageId: strukturData.imageId || "",
+            };
+        },
+
+        updateField(field: keyof typeof defaultForm, value: string) {
+            this.form[field] = value;
+        },
+
+        async submit() {
+            const validation = templateForm.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/ppid/strukturppid/${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 struktur");
+                await stateStrukturPPID.struktur.load(this.id);
+                return true;
+               } else {
+                throw new Error(result.message || "Gagal update struktur");
+               }
+            } catch (error) {
+                const errorMessage = (error as Error).message;
+                this.error = errorMessage;
+                console.error("Update struktur error:", errorMessage);
+                toast.error("Terjadi kesalahan saat update struktur");
+                return false;
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        reset() {
+            this.id = "";
+            this.form = { ...defaultForm };
+            this.error = null;
+            this.loading = false;
+            this.isReadOnly = false;
+        }
+    },
+
+    async loadForEdit(id: string) {
+        const strukturData = await this.struktur.load(id);
+        if (strukturData) {
+            this.editStruktur.initialize(strukturData);
+        }
+        return strukturData;
+    },
+
+    reset() {
+        this.struktur.reset();
+        this.editStruktur.reset();
+    }
+})
+
+export default stateStrukturPPID;
+    

src/app/admin/(dashboard)/_state/ppid/visi_misi_ppid/visimisiPPID.ts

@@ -0,0 +1,81 @@
+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({
+  misi: z.string().min(3, "Misi minimal 3 karakter"),
+  visi: z.string().min(3, "Visi minimal 3 karakter"),
+});
+
+type VisiMisiPPIDForm = Prisma.VisiMisiPPIDGetPayload<{
+  select: {
+    id: true;
+    misi: true;
+    visi: true;
+  };
+}>;
+
+const stateVisiMisiPPID = proxy({
+  findById: {
+    data: null as VisiMisiPPIDForm | null,
+    loading: false,
+    initialize() {
+      stateVisiMisiPPID.findById.data = {
+        id: "",
+        misi: "",
+        visi: "",
+      } as VisiMisiPPIDForm;
+    },
+    async load(id: string) {
+      try {
+        stateVisiMisiPPID.findById.loading = true;
+        const res = await ApiFetch.api.ppid.visimisippid["find-by-id"].get({
+          query: { id },
+        });
+        if (res.status === 200) {
+          stateVisiMisiPPID.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data visi misi");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data visi misi");
+      } finally {
+        stateVisiMisiPPID.findById.loading = false;
+      }
+    },
+  },
+  update: {
+    loading: false,
+    async save(data: VisiMisiPPIDForm) {
+      const cek = templateForm.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 {
+        stateVisiMisiPPID.update.loading = true;
+        const res = await ApiFetch.api.ppid.visimisippid["update"].post(data);
+        if (res.status === 200) {
+          toast.success("Berhasil update visi misi");
+          await stateVisiMisiPPID.findById.load(data.id);
+        } else {
+          toast.error("Gagal update visi misi");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat update visi misi");
+      } finally {
+        stateVisiMisiPPID.update.loading = false;
+      }
+    },
+  },
+});
+
+export default stateVisiMisiPPID;

src/app/admin/(dashboard)/desa/_com/desaEditor.tsx

@@ -0,0 +1,93 @@
+'use client'
+import colors from '@/con/colors';
+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';
+
+const content =
+  '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
+
+export function DesaEditor({showSubmit = true} : {
+  showSubmit: boolean
+}) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content,
+  });
+
+  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
+          mt={10}
+          bg={colors['blue-button']}
+        >
+          Submit
+        </Button>
+      )}
+    </Stack>
+  );
+}

src/app/admin/(dashboard)/desa/_com/desaEditorText.tsx

@@ -0,0 +1,95 @@
+'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';
+
+
+function DesaEditorText({ 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())
+    }
+  });
+
+  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>
+  );
+}
+
+export default DesaEditorText;

src/app/admin/(dashboard)/desa/_com/layoutTabLayanan.tsx

@@ -0,0 +1,72 @@
+/* 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 LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "Pelayanan Surat Keterangan",
+            value: "pelayanansuratketerangan",
+            href: "/admin/desa/layanan/pelayanan_surat_keterangan"
+        },
+        {
+            label: "Pelayanan Perizinan Berusaha",
+            value: "pelayananperizinanusaha",
+            href: "/admin/desa/layanan/pelayanan_perizinan_berusaha"
+        },
+        {
+            label: "Pelayanan Telunjuk Sakti Desa",
+            value: "pelayanantelunjuksaktidesa",
+            href: "/admin/desa/layanan/pelayanan_telunjuk_sakti_desa"
+        },
+        {
+            label: "Pelayanan Penduduk Non-Permanent",
+            value: "pelayanantelunjuknonpermanent",
+            href: "/admin/desa/layanan/pelayanan_penduduk_non_permanent"
+        }
+    ];
+    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}>Layanan</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 LayoutTabsLayanan;

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

@@ -0,0 +1,241 @@
+"use client";
+
+import {
+  Box,
+  Button,
+  Center,
+  Image,
+  Paper,
+  Select,
+  Skeleton,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { IconArrowBack, IconImageInPicture } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { useProxy } from "valtio/utils";
+
+
+import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import { FileInput } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { Prisma } from "@prisma/client";
+import stateDashboardBerita from "../../../../_state/desa/berita";
+
+function EditBerita() {
+  const beritaState = useProxy(stateDashboardBerita);
+  const router = useRouter();
+  const params = useParams();
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    judul: beritaState.berita.edit.form.judul || '',
+    deskripsi: beritaState.berita.edit.form.deskripsi || '',
+    kategoriBeritaId: beritaState.berita.edit.form.kategoriBeritaId || '',
+    content: beritaState.berita.edit.form.content || '',
+    imageId: beritaState.berita.edit.form.imageId || ''
+  });
+
+  // Load berita by id saat pertama kali
+  useEffect(() => {
+    const loadBerita = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await stateDashboardBerita.berita.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            judul: data.judul || '',
+            deskripsi: data.deskripsi || '',
+            kategoriBeritaId: data.kategoriBeritaId || '',
+            content: data.content || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading berita:", error);
+        toast.error("Gagal memuat data berita");
+      }
+    };
+
+    loadBerita();
+  }, [params?.id]); // ✅ hapus beritaState dari dependency
+
+  const handleSubmit = async () => {
+
+    try {
+      // Update global state with form data
+      beritaState.berita.edit.form = {
+        ...beritaState.berita.edit.form,
+        judul: formData.judul,
+        deskripsi: formData.deskripsi,
+        content: formData.content,
+        kategoriBeritaId: formData.kategoriBeritaId || '',
+        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
+        beritaState.berita.edit.form.imageId = uploaded.id;
+      }
+
+      await beritaState.berita.edit.update();
+      toast.success("Berita berhasil diperbarui!");
+      router.push("/admin/desa/berita");
+    } catch (error) {
+      console.error("Error updating berita:", error);
+      toast.error("Terjadi kesalahan saat memperbarui berita");
+    }
+  };
+
+  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 Berita</Title>
+          <TextInput
+            value={formData.judul}
+            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <SelectCategory
+            value={formData.kategoriBeritaId}
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                kategoriBeritaId: val?.id || ''
+              });
+            }}
+          />
+
+          <TextInput
+            value={formData.deskripsi}
+            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
+
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
+            <EditEditor
+            value={formData.content}
+            onChange={(htmlContent) => {
+              setFormData((prev) => ({ ...prev, content: htmlContent }));
+              beritaState.berita.edit.form.content = htmlContent;
+            }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit}>Edit Berita</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+interface SelectCategoryProps {
+  onChange: (value: Prisma.KategoriBeritaGetPayload<{
+    select: {
+      name: true;
+      id: true;
+    };
+  }> | null) => void;
+  value?: string | null;
+  defaultValue?: string | null;
+}
+
+function SelectCategory({
+  onChange,
+  value,
+  defaultValue,
+}: SelectCategoryProps) {
+  const categoryState = useProxy(stateDashboardBerita.category);
+
+  useShallowEffect(() => {
+    categoryState.findMany.load().then(() => {
+      console.log("Kategori berhasil dimuat:", categoryState.findMany.data);
+    });
+  }, []);
+
+  if (!categoryState.findMany.data) {
+    return <Skeleton height={38} />;
+  }
+
+
+  const selectedValue = value || defaultValue;
+
+  return (
+    <Select
+      label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
+      placeholder="Pilih kategori"
+      data={categoryState.findMany.data.map((item) => ({
+        label: item.name,
+        value: item.id,
+      }))}
+      value={selectedValue || null}
+      onChange={(val: string | null) => {
+        if (val) {
+          const selected = categoryState.findMany.data?.find((item) => item.id === val);
+          if (selected) {
+            onChange(selected);
+          }
+        } else {
+          onChange(null);
+        }
+      }}
+      searchable
+      clearable
+      nothingFoundMessage="Tidak ditemukan"
+    />
+  );
+}
+
+export default EditBerita;

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

@@ -0,0 +1,120 @@
+'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 stateDashboardBerita from '../../../_state/desa/berita';
+
+function DetailBerita() {
+  const beritaState = useProxy(stateDashboardBerita)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    beritaState.berita.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      beritaState.berita.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/berita")
+    }
+  }
+
+  if (!beritaState.berita.findUnique.data) {
+    return (
+      <Stack py={10}>
+        {Array.from({ length: 10 }).map((_, k) => (
+          <Skeleton key={k} 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 Berita</Text>
+          {beritaState.berita.findUnique.data ? (
+            <Paper key={beritaState.berita.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
+                  <Text fz={"lg"}>{beritaState.berita.findUnique.data?.kategoriBerita?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{beritaState.berita.findUnique.data?.judul}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} >{beritaState.berita.findUnique.data?.deskripsi}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={beritaState.berita.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Konten</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: beritaState.berita.findUnique.data?.content }} />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (beritaState.berita.findUnique.data) {
+                        setSelectedId(beritaState.berita.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={beritaState.berita.delete.loading || !beritaState.berita.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (beritaState.berita.findUnique.data) {
+                        router.push(`/admin/desa/berita/${beritaState.berita.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!beritaState.berita.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 berita ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailBerita;

src/app/admin/(dashboard)/desa/berita/_com/BeritaEditor.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import { RichTextEditor, Link } from '@mantine/tiptap';
 import { useEditor } from '@tiptap/react';
@@ -8,28 +9,77 @@ import TextAlign from '@tiptap/extension-text-align';
 import Superscript from '@tiptap/extension-superscript';
 import SubScript from '@tiptap/extension-subscript';
 import { Button, Stack } from '@mantine/core';
+import { useEffect, useState } from 'react';
 
-const content =
-  '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
+// const content =
+//   '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
 
-export function BeritaEditor({ onSubmit }: { onSubmit: (val: string) => void }) {
-  const editor = useEditor({
-    extensions: [
-      StarterKit,
-      Underline,
-      Link,
-      Superscript,
-      SubScript,
-      Highlight,
-      TextAlign.configure({ types: ['heading', 'paragraph'] }),
-    ],
-    content,
-    immediatelyRender: false
-  });
-
-  if (!editor) {
-    return null;
-  }
+  export function BeritaEditor({
+    onEditorReady,
+    showSubmit = true,
+    onSubmit,
+    initialContent = '',
+    onUpdate,
+  }: {
+    onEditorReady?: (editor: any | null) => void;
+    onSubmit?: (val: string) => void;
+    showSubmit?: boolean;
+    initialContent?: string;
+    onUpdate?: (content: string) => void;
+  }) {
+    const [mounted, setMounted] = useState(false);
+    const [isReady, setIsReady] = useState(false);
+    
+    const editor = useEditor({
+      extensions: [
+        StarterKit,
+        Underline,
+        Link,
+        Superscript,
+        SubScript,
+        Highlight,
+        TextAlign.configure({ types: ['heading', 'paragraph'] }),
+      ],
+      content: initialContent || '<p></p>',
+      onUpdate: ({ editor }) => {
+        if (onUpdate) {
+          onUpdate(editor.getHTML());
+        }
+      },
+      editorProps: {
+        attributes: {
+          class: 'prose max-w-none',
+        },
+      },
+      onSelectionUpdate: () => {
+        if (!isReady && editor) {
+          setIsReady(true);
+          onEditorReady?.(editor);
+        }
+      },
+      immediatelyRender: false
+    });
+  
+    useEffect(() => {
+      if (editor) {
+        // Set initial content when component mounts
+        editor.commands.setContent(initialContent || '<p></p>');
+        
+        // Mark as mounted and notify parent
+        if (!mounted) {
+          setMounted(true);
+          onEditorReady?.(editor);
+        }
+      }
+      
+      return () => {
+        if (editor) {
+          editor.destroy();
+        }
+      };
+    }, [editor, initialContent, mounted, onEditorReady]);
+  
+    if (!editor) return <div>Loading editor...</div>;
 
 
   return (
@@ -82,10 +132,12 @@ export function BeritaEditor({ onSubmit }: { onSubmit: (val: string) => void })
 
         <RichTextEditor.Content />
       </RichTextEditor>
-      <Button onClick={() => {
-        if (!editor) return
-        onSubmit(editor?.getHTML())
-      }}>Submit</Button>
+      {showSubmit && (
+        <Button onClick={() => {
+          if (!editor) return
+          onSubmit?.(editor?.getHTML())
+        }}>Submit</Button>
+      )}
     </Stack>
   );
 }

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

@@ -0,0 +1,168 @@
+'use client'
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Select, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Prisma } from '@prisma/client';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import stateDashboardBerita from '../../../_state/desa/berita';
+
+export default function CreateBerita() {
+  const beritaState = useProxy(stateDashboardBerita);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const router = useRouter()
+
+  const resetForm = () => {
+    // Reset state di valtio
+    beritaState.berita.create.form = {
+      judul: "",
+      deskripsi: "",
+      kategoriBeritaId: "",
+      imageId: "",
+      content: "",
+    };
+
+    // Reset state lokal
+    setPreviewImage(null);
+    setFile(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    // Upload gambar dulu
+    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");
+    }
+
+    // Simpan ID gambar ke form
+    beritaState.berita.create.form.imageId = uploaded.id;
+
+    // Submit data berita
+    await beritaState.berita.create.create();
+
+    // Reset form setelah submit
+    resetForm();
+    router.push("/admin/desa/berita")
+  };
+
+  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 Berita</Title>
+          <TextInput
+            value={beritaState.berita.create.form.judul}
+            onChange={(val) => {
+              beritaState.berita.create.form.judul = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <SelectCategory
+            onChange={(val) => {
+              beritaState.berita.create.form.kategoriBeritaId = val.id;
+            }}
+          />
+          <TextInput
+            value={beritaState.berita.create.form.deskripsi}
+            onChange={(val) => {
+              beritaState.berita.create.form.deskripsi = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <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"}>Konten</Text>
+            <CreateEditor
+            value={beritaState.berita.create.form.content}
+            onChange={(htmlContent) => {
+              beritaState.berita.create.form.content = htmlContent;
+            }}
+            />
+          </Box>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan Berita</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+
+  function SelectCategory({
+    onChange,
+  }: {
+    onChange: (value: Prisma.KategoriBeritaGetPayload<{
+      select: {
+        name: true;
+        id: true;
+      };
+    }>) => void;
+  }) {
+    const categoryState = useProxy(stateDashboardBerita.category);
+  
+    useShallowEffect(() => {
+      categoryState.findMany.load();
+    }, []);
+  
+    if (!categoryState.findMany.data) {
+      return <Skeleton height={38} />;
+    }
+  
+    return (
+      <Select
+        label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
+        placeholder="Pilih kategori"
+        data={categoryState.findMany.data.map((item) => ({
+          label: item.name,
+          value: item.id,
+        }))}
+        onChange={(val) => {
+          const selected = categoryState.findMany.data?.find((item) => item.id === val);
+          if (selected) {
+            onChange(selected);
+          }
+        }}
+        searchable
+        nothingFoundMessage="Tidak ditemukan"
+      />
+    );
+  }
+}

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

@@ -1,88 +1,104 @@
 'use client'
-import { Center, Group, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
-import { IconImageInPicture } from '@tabler/icons-react';
+import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import stateDashboardBerita from '../../_state/desa/berita';
-import { BeritaEditor } from './_com/BeritaEditor';
+
 
 function Page() {
   return (
-    <Stack>
-      <SimpleGrid cols={2}>
-        <BeritaList />
-        <BeritaCreate />
-      </SimpleGrid>
-    </Stack>
+    <Box>
+      <Grid>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Title order={3}>Berita</Title>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <Paper radius={"lg"} bg={colors['white-1']}>
+            <TextInput
+              radius={"lg"}
+              placeholder='pencarian'
+              leftSection={<IconSearch size={20} />}
+            />
+          </Paper>
+        </GridCol>
+      </Grid>
+      <BeritaList />
+    </Box>
   );
 }
 
 function BeritaList() {
   const beritaState = useProxy(stateDashboardBerita)
+
   useShallowEffect(() => {
     beritaState.berita.findMany.load()
   }, [])
 
-  if (!beritaState.berita.findMany.data) return <Stack>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
-  return <Stack>
-    <Text>News List</Text>
-    {beritaState.berita.findMany.data?.map((item) => (
-      <Text key={item.id}>{item.judul}</Text>
-    ))}
-  </Stack>
-}
+  const router = useRouter()
 
-function BeritaCreate() {
-  const beritaState = useProxy(stateDashboardBerita)
-  return <Stack gap={"md"}>
-    <Text>Create Some News</Text>
-    <SelectCategory onChange={(val) => {
-      beritaState.berita.create.form.katagoryBeritaId = val.id
-    }} />
-    <TextInput onChange={(val) => {
-      beritaState.berita.create.form.judul = val.target.value
-    }} label={"Judul"} placeholder='masukkan judul' />
-    <TextInput onChange={(val) => {
-      beritaState.berita.create.form.deskripsi = val.target.value
-    }} label={"Deskripsi"} placeholder='masukkan deskripsi' />
-    <Center w={200} h={200} bg={"gray"}>
-      <IconImageInPicture />
-    </Center>
-    <BeritaEditor onSubmit={(val) => {
+  if (!beritaState.berita.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
 
-      beritaState.berita.create.form.content = val
-      beritaState.berita.create.create()
-    }} />
-  </Stack>
-}
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Grid>
+            <GridCol span={{ base: 12, md: 11 }}>
+              <Text fz={"xl"} fw={"bold"}>List Berita</Text>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 1 }}>
+              <Button onClick={() => router.push("/admin/desa/berita/create")} bg={colors['blue-button']}>
+                <IconCircleDashedPlus size={25} />
+              </Button>
+            </GridCol>
+          </Grid>
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}> 
+              <TableThead>
+                <TableTr>
+                  <TableTh w={250}>Judul</TableTh>
+                  <TableTh w={250}>Kategori</TableTh>
+                  <TableTh w={250}>Image</TableTh>
+                  <TableTh w={200}>Detail</TableTh>
 
-function SelectCategory({ onChange }: {
-  onChange: (value: Prisma.KatagoryBeritaGetPayload<{
-    select: {
-      name: true,
-      id: true
-    }
-  }>) => void
-}) {
-  const beritaState = useProxy(stateDashboardBerita)
-  useShallowEffect(() => {
-    beritaState.category.findMany.load()
-  }, [])
+                </TableTr>
+              </TableThead>
+              <TableTbody >
+                {beritaState.berita.findMany.data?.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd >
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.judul}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd >{item.kategoriBerita?.name}</TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image?.link} alt="gambar" />
+                    </TableTd>
+                    <TableTd>
+                      <Button bg={"green"} onClick={() => router.push(`/admin/desa/berita/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
 
-  if (!beritaState.category.findMany.data) return <Skeleton h={40} />
-  return <Group>
-    <Select placeholder='pilih katagori' label={"select katagori"} data={beritaState.category.findMany.data.map((item) => ({
-      value: item.id,
-      label: item.name
-    }))} onChange={(v) => {
-      const data = beritaState.category.findMany.data?.find((item) => item.id === v)
-      if (!data) return
-      onChange(data)
-    }} />
-  </Group>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table> </Box>
+        </Stack>
+      </Paper>
+
+    </Box>
+  )
 }
 
 export default Page;

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

@@ -0,0 +1,119 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+function EditFoto() {
+  const fotoState = useProxy(stateGallery.foto)
+  const router = useRouter();
+  const params = useParams();
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  useEffect(() => {
+    const loadFoto = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+      try {
+        const data = await fotoState.update.load(id);
+        if (data) {
+          if (data?.imageGalleryFoto?.link) {
+            setPreviewImage(data.imageGalleryFoto.link);
+          }
+        }
+      } catch (error) {
+        console.error('Error loading foto:', error);
+        toast.error('Gagal memuat data foto');
+      }
+    };
+    loadFoto();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      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");
+        }
+        fotoState.update.form.imagesId = uploaded.id;
+      }
+      await fotoState.update.update();
+      toast.success('Foto berhasil diperbarui!');
+      router.push('/admin/desa/gallery/foto');
+    } catch (error) {
+      console.error('Error updating foto:', error);
+      toast.error('Terjadi kesalahan saat memperbarui foto');
+    }
+  };
+
+  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 Foto</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Judul Foto</Text>}
+            placeholder='Masukkan judul foto'
+            value={fotoState.update.form.name}
+            onChange={(e) =>
+              (fotoState.update.form.name = e.target.value)
+            }
+          />
+          <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 Foto</Text>
+            <EditEditor
+              value={fotoState.update.form.deskripsi}
+              onChange={(val) => {
+                fotoState.update.form.deskripsi = val;
+              }}
+            />
+          </Box>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditFoto;

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

@@ -0,0 +1,112 @@
+'use client'
+import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useShallowEffect } from '@mantine/hooks';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import colors from '@/con/colors';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+
+function DetailFoto() {
+  const fotoState = useProxy(stateGallery.foto)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    fotoState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      fotoState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/gallery/foto")
+    }
+  }
+
+  if (!fotoState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Foto</Text>
+          {fotoState.findUnique.data ? (
+            <Paper key={fotoState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{fotoState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Tanggal Foto</Text>
+                  <Text fz={"lg"}>{new Date(fotoState.findUnique.data?.createdAt).toDateString()}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: fotoState.findUnique.data?.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 300, md: 350}} src={fotoState.findUnique.data?.imageGalleryFoto?.link} alt="gambar" />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (fotoState.findUnique.data) {
+                        setSelectedId(fotoState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={fotoState.delete.loading || !fotoState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (fotoState.findUnique.data) {
+                        router.push(`/admin/desa/gallery/foto/${fotoState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!fotoState.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 berita ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailFoto;

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

@@ -0,0 +1,109 @@
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+
+function CreateFoto() {
+  const fotoState = useProxy(stateGallery.foto)
+  const router = useRouter();
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const resetForm = () => {
+    fotoState.create.form = {
+      name: "",
+      deskripsi: "",
+      imagesId: "",
+    };
+
+    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 upload gambar");
+    }
+
+    fotoState.create.form.imagesId = uploaded.id;
+    await fotoState.create.create();
+    resetForm();
+    router.push("/admin/desa/gallery/foto")
+  };
+
+  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 Foto</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Judul Foto</Text>}
+            placeholder='Masukkan judul foto'
+            value={fotoState.create.form.name}
+            onChange={(val) => {
+              fotoState.create.form.name = val.target.value;
+            }}
+          />
+          <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 Foto</Text>
+            <CreateEditor
+              value={fotoState.create.form.deskripsi}
+              onChange={(val) => {
+                fotoState.create.form.deskripsi = val;
+              }}
+            />
+          </Box>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateFoto;

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

@@ -0,0 +1,67 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import JudulListTab from '../../../_com/jusulListTab';
+import { useProxy } from 'valtio/utils';
+import stateGallery from '../../../_state/desa/gallery';
+import { useShallowEffect } from '@mantine/hooks';
+
+function Foto() {
+  const fotoState = useProxy(stateGallery.foto)
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    fotoState.findMany.load()
+  }, [])
+
+  if (!fotoState.findMany.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+  
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulListTab
+          title='List Foto'
+          href='/admin/desa/gallery/foto/create'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={16} />}
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Judul Foto</TableTh>
+              <TableTh>Tanggal Foto</TableTh>
+              <TableTh>Deskripsi Foto</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {fotoState.findMany.data?.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>{new Date(item.createdAt).toDateString()}</TableTd>
+                <TableTd>
+                  <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                </TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/desa/gallery/foto/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Foto;