UI Admin Menu Desa Sub Menu Profile

package.json

@@ -16,6 +16,7 @@
     "@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",
@@ -47,14 +48,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",

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/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

@@ -1,7 +1,11 @@
 [
-    {"name": "<p>I.B Surya Prabhawa Manuaba, S.H., M.H.</p>"},
-    {"biodata" : "<h2>Biodata</h2> <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" : "<h2>Riwayat Karir</h2> <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" : "<h2>Pengalaman Organisasi</h2> <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" : "<h2>Program Kerja Unggulan</h2> <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><h3>Peningkatan Infrastruktur Desa</h3><ul><li>Pembangunan dan perbaikan jalan desa</li><li>Penyediaan fasilitas umum dan ruang terbuka hijau</li><li>Optimalisasi layanan publik berbasis digital</li></ul>"}
-]
+  {
+    "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>",
+    "imageUrl": "/assets/images/ppid/profile-ppid/perbekel.png"
+  }
+]

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/schema.prisma

@@ -49,18 +49,21 @@ model AppMenuChild {
 
 //========================================= MENU PPID ========================================= //
 // ========================================= VISI MISI PPID ========================================= //
-model VisiPPID {
+model VisiMisiPPID {
   id        String   @id @default(cuid())
-  content   String
+  visi      String   @db.Text
+  misi      String   @db.Text
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
 }
 
-model MisiPPID {
+// ========================================= DASAR HUKUM PPID ========================================= //
+model DasarHukumPPID {
   id        String   @id @default(cuid())
-  content   String
+  judul     String   @db.Text
+  content   String   @db.Text
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
   deletedAt DateTime @default(now())
@@ -70,11 +73,12 @@ model MisiPPID {
 // ========================================= PROFILE PPID ========================================= //
 model ProfilePPID {
   id         String   @id @default(cuid())
-  name       String   @unique
-  biodata    String
-  riwayat    String
-  pengalaman String
-  unggulan   String
+  name       String   @db.Text
+  biodata    String   @db.Text
+  riwayat    String   @db.Text
+  pengalaman String   @db.Text
+  unggulan   String   @db.Text
+  imageUrl   String?
   createdAt  DateTime @default(now())
   updatedAt  DateTime @updatedAt
   deletedAt  DateTime @default(now())
@@ -204,6 +208,34 @@ 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())

prisma/seed.ts

@@ -6,6 +6,11 @@ import caraMemperolehSalinanInformasi from './data/list-caraMemperolehSalinanInf
 import jenisInformasiDiminta from './data/list-jenisInfromasi.json'
 import layanan from './data/list-layanan.json'
 import potensi from './data/list-potensi.json'
+import profilePPID from './data/ppid/profile-ppid/profilePPid.json'
+import visiMisiPPID from './data/ppid/visi-misi-ppid/visimisiPPID.json'
+import dasarHukumPPID from './data/ppid/dasar-hukum-ppid/dasarhukumPPID.json'
+import profileDesa from './data/desa/profile/profile_desa.json'
+import profilePerbekel from './data/desa/profile/profil_perbekel.json'
 (async () => {
     for (const l of layanan) {
         await prisma.layanan.upsert({
@@ -116,7 +121,115 @@ import potensi from './data/list-potensi.json'
     }
     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,
+                imageUrl: c.imageUrl
+            },
+            create: {
+                id: c.id,
+                name: c.name,
+                biodata: c.biodata,
+                riwayat: c.riwayat,
+                pengalaman: c.pengalaman,
+                unggulan: c.unggulan,
+                imageUrl: c.imageUrl
+            }
+        })
+    }
+    console.log("profile PPID success ...")
     
+    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 ...")
+
+    for (const v of profileDesa) {
+        await prisma.profileDesa.upsert({
+            where: {
+                id: v.id,
+            },
+            update: {
+                sejarah: v.sejarah,
+                visi: v.visi,
+                misi: v.misi,
+                lambang: v.lambang,
+                maskot: v.maskot,
+                profilPerbekelId: v.profilPerbekelId
+            },
+            create: {
+                id: v.id,
+                sejarah: v.sejarah,
+                visi: v.visi,
+                misi: v.misi,
+                lambang: v.lambang,
+                maskot: v.maskot,
+                profilPerbekelId: v.profilPerbekelId
+            }
+        })
+    }
+    console.log("profile desa success ...")
+
+    for (const v of profilePerbekel) {
+        await prisma.profilPerbekel.upsert({
+            where: {
+                id: v.id,
+            },
+            update: {
+                biodata: v.biodata,
+                pengalaman: v.pengalaman,
+                pengalamanOrganisasi: v.pengalamanOrganisasi,
+                programUnggulan: v.programUnggulan
+            },
+            create: {
+                id: v.id,
+                biodata: v.biodata,
+                pengalaman: v.pengalaman,
+                pengalamanOrganisasi: v.pengalamanOrganisasi,
+                programUnggulan: v.programUnggulan
+            }
+        })
+    }
+    console.log("profile perbekel success ...")
 
 })().then(() => prisma.$disconnect()).catch((e) => {
     console.error(e)

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/permohonan_informasi_publik/permohonanInformasiPublik.ts

@@ -56,6 +56,7 @@ const caraMemperolehSalinanInformasi = proxy({
         }
     }
 })
+console.log(caraMemperolehSalinanInformasi)
 
 type PermohonanInformasiPublikForm = Prisma.PermohonanInformasiPublikGetPayload<{
     select: {
@@ -70,12 +71,12 @@ type PermohonanInformasiPublikForm = Prisma.PermohonanInformasiPublikGetPayload<
     };
 }>;
 
-const permohonanInformasiPublikForm = proxy({
+const statepermohonanInformasiPublik = proxy({
     create: {
         form: {} as PermohonanInformasiPublikForm,
         loading: false,
         async create(){
-            const cek = templateForm.safeParse(permohonanInformasiPublikForm.create.form);
+            const cek = templateForm.safeParse(statepermohonanInformasiPublik.create.form);
             if(!cek.success) {
                 const err = `[${cek.error.issues
                     .map((v) => `${v.path.join(".")}`)
@@ -83,38 +84,42 @@ const permohonanInformasiPublikForm = proxy({
                 return toast.error(err);
             }
             try {
-                permohonanInformasiPublikForm.create.loading = true;
-                const res = await ApiFetch.api.ppid.permohonaninformasipublik["create"].post(permohonanInformasiPublikForm.create.form);
+                statepermohonanInformasiPublik.create.loading = true;
+                const res = await ApiFetch.api.ppid.permohonaninformasipublik["create"].post(statepermohonanInformasiPublik.create.form);
                 if (res.status === 200) {
-                    permohonanInformasiPublikForm.findMany.load();
+                    statepermohonanInformasiPublik.findMany.load();
                     return toast.success("success create");
                 }
                 return toast.error("failed create");
             } catch (error) {
                 console.log((error as Error).message);
             } finally {
-                permohonanInformasiPublikForm.create.loading = false;
+                statepermohonanInformasiPublik.create.loading = false;
             }
         }
     },
     findMany: {
         data: null as
-        | Prisma.PermohonanInformasiPublikGetPayload<{ omit: { isActive: true } }>[]
+        | 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) {
-                permohonanInformasiPublikForm.findMany.data = res.data?.data ?? [];
+                statepermohonanInformasiPublik.findMany.data = res.data?.data ?? [];
             }
         }
     }
 })
 
-const statePermohonanInformasi = proxy({
-    permohonanInformasiPublikForm,
+const statepermohonanInformasiPublikForm = proxy({
+    statepermohonanInformasiPublik,
     jenisInformasiDiminta,
     caraMemperolehInformasi,
-    caraMemperolehSalinanInformasi
+    caraMemperolehSalinanInformasi,
 })
 
-export default statePermohonanInformasi;
+export default statepermohonanInformasiPublikForm;

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

@@ -20,12 +20,12 @@ type PermohonanKeberatanInformasiForm = Prisma.FormulirPermohonanKeberatanGetPay
     };
 }>;
 
-const permohonanKeberatanInformasiForm = proxy({
+const permohonanKeberatanInformasi = proxy({
     create: {
         form: {} as PermohonanKeberatanInformasiForm,
         loading: false,
         async create(){
-            const cek = templateForm.safeParse(permohonanKeberatanInformasiForm.create.form);
+            const cek = templateForm.safeParse(permohonanKeberatanInformasi.create.form);
             if(!cek.success) {
                 const err = `[${cek.error.issues
                     .map((v) => `${v.path.join(".")}`)
@@ -33,17 +33,17 @@ const permohonanKeberatanInformasiForm = proxy({
                 return toast.error(err);
             }
             try {
-                permohonanKeberatanInformasiForm.create.loading = true;
-                const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["create"].post(permohonanKeberatanInformasiForm.create.form);
+                permohonanKeberatanInformasi.create.loading = true;
+                const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["create"].post(permohonanKeberatanInformasi.create.form);
                 if (res.status === 200) {
-                    permohonanKeberatanInformasiForm.findMany.load();
+                    permohonanKeberatanInformasi.findMany.load();
                     return toast.success("success create");
                 }
                 return toast.error("failed create");
             } catch (error) {
                 console.log((error as Error).message);
             } finally {
-                permohonanKeberatanInformasiForm.create.loading = false;
+                permohonanKeberatanInformasi.create.loading = false;
             }
         },
     },
@@ -54,15 +54,11 @@ const permohonanKeberatanInformasiForm = proxy({
         async load() {
             const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["find-many"].get();
             if (res.status === 200) {
-                permohonanKeberatanInformasiForm.findMany.data = res.data?.data ?? [];
+                permohonanKeberatanInformasi.findMany.data = res.data?.data ?? [];
             }
         }
     }
 });
 
-const statePermohonanKeberatan = proxy({
-    permohonanKeberatanInformasiForm,
-})
-
-export default statePermohonanKeberatan;
+export default permohonanKeberatanInformasi;
 

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

@@ -4,66 +4,122 @@ import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";
 
+// Schema validasi form
 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"),
-})
+  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"),
+});
 
+// Type ambil dari Prisma
 type ProfilePPIDForm = Prisma.ProfilePPIDGetPayload<{
-    select: {
-        name: true;
-        biodata: true;
-        riwayat: true;
-        pengalaman: true;
-        unggulan: true;
-    }
-}>
-
-const profilePPID = proxy({
-    create: {
-        form: {} as ProfilePPIDForm,
-        loading: false,
-        async create() {
-            const cek = templateForm.safeParse(profilePPID.create.form);
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                .map((v) => `${v.path.join(".")}`)
-                .join("\n")}] required`;
-                return toast.error(err);
-            }
-            try {
-                profilePPID.create.loading = true;
-                const res = await ApiFetch.api.ppid.profileppid["create"].post(profilePPID.create.form);
-                if (res.status === 200) {
-                    profilePPID.findMany.load();
-                    return toast.success("success create");
-                }
-                return toast.error("failed create");
-            } catch (error) {
-                console.log((error as Error).message);
-            } finally {
-                profilePPID.create.loading = false;
-            }
-        }
-    },
-    findMany: {
-        data: null as
-        | Prisma.ProfilePPIDGetPayload<{omit: {isActive: true}}>[]
-        | null,
-        async load() {
-            const res = await ApiFetch.api.ppid.profileppid["find-many"].get();
-            if (res.status === 200) {
-                profilePPID.findMany.data = res.data?.data ?? [];
-            }
-        }
-    }
-})   
+  select: {
+    id: true;
+    name: true;
+    biodata: true;
+    riwayat: true;
+    pengalaman: true;
+    unggulan: true;
+    imageUrl: true;
+  };
+}>;
 
+// Proxy utama
 const stateProfilePPID = proxy({
-    profilePPID
-})
+  findById: {
+    data: null as ProfilePPIDForm | null,
+    loading: false,
+    initialize() {
+      stateProfilePPID.findById.data = {
+        id: '',
+        name: '',
+        biodata: '',
+        riwayat: '',
+        pengalaman: '',
+        unggulan: '',
+        imageUrl:''
+      } as ProfilePPIDForm;
+    },
+    async load(id: string) {
+      try {
+        stateProfilePPID.findById.loading = true;
+        const res = await ApiFetch.api.ppid.profileppid["find-by-id"].get({
+          query: { id },
+        });
+        if (res.status === 200) {
+          stateProfilePPID.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data profile");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data profile");
+      } finally {
+        stateProfilePPID.findById.loading = false;
+      }
+    },
+  },
 
-export default stateProfilePPID;
+  update: {
+    loading: false,
+    async save(data: ProfilePPIDForm) {
+      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 {
+        stateProfilePPID.update.loading = true;
+        const res = await ApiFetch.api.ppid.profileppid["update"].post(data);
+        if (res.status === 200) {
+          toast.success("Berhasil update profile");
+          await stateProfilePPID.findById.load(data.id);
+        } else {
+          toast.error("Gagal update profile");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat update profile");
+      } finally {
+        stateProfilePPID.update.loading = false;
+      }
+    },
+  },
+  uploadImage: {
+    loading: false,
+    async save(file: File, id: string) {
+      if (!file || !id) {
+        toast.error("File atau ID harus disertakan");
+        return;
+      }
+      try {
+        stateProfilePPID.uploadImage.loading = true;
+
+        const form = new FormData();
+        form.append("file", file);
+        form.append("id", id);
+
+        const res = await ApiFetch.api.ppid.profileppid["edit-img"].post(form);
+        if (res.status === 200) {
+          toast.success("Berhasil mengunggah gambar");
+          await stateProfilePPID.findById.load(id);
+        } else {
+          toast.error("Gagal mengunggah gambar");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengunggah gambar");
+      } finally {
+        stateProfilePPID.uploadImage.loading = false;
+      }
+    }
+  }
+});
+
+export default stateProfilePPID;

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/profile/page.tsx

@@ -1,10 +1,52 @@
+import colors from '@/con/colors';
+import { Stack, Title, Tabs, TabsList, TabsTab, TabsPanel } from '@mantine/core';
 import React from 'react';
+import SejarahDesa from './ui/sejarah_desa/page';
+import VisiMisiDesa from './ui/visi_misi_desa/page';
+import LambangDesa from './ui/lambang_desa/page';
+import MaskotDesa from './ui/maskot_desa/page';
+import ProfilePerbekel from './ui/profile_perbekel/page';
 
 function Page() {
   return (
-    <div>
-      Profile
-    </div>
+    <Stack >
+    <Title order={3}>Profile Desa</Title>
+    <Tabs  color={colors['blue-button']} variant='pills' defaultValue={"Sejarah Desa"}>
+      <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+        <TabsTab value="Sejarah Desa">
+          Sejarah Desa
+        </TabsTab>
+        <TabsTab value="Visi Misi Desa">
+          Visi Misi Desa
+        </TabsTab>
+        <TabsTab value="Lambang Desa">
+          Lambang Desa
+        </TabsTab>
+        <TabsTab value="Maskot Desa">
+          Maskot Desa
+        </TabsTab>
+        <TabsTab value="Profile Perbekel">
+          Profile Perbekel
+        </TabsTab>
+      </TabsList>
+
+      <TabsPanel value="Sejarah Desa">
+        <SejarahDesa/>
+      </TabsPanel>
+      <TabsPanel value="Visi Misi Desa">
+        <VisiMisiDesa/>
+      </TabsPanel>
+      <TabsPanel value="Lambang Desa">
+       <LambangDesa/>
+      </TabsPanel>
+      <TabsPanel value="Maskot Desa">
+       <MaskotDesa/>
+      </TabsPanel>
+      <TabsPanel value="Profile Perbekel">
+        <ProfilePerbekel/>
+      </TabsPanel>
+    </Tabs>
+  </Stack>
   );
 }
 

src/app/admin/(dashboard)/desa/profile/ui/lambang_desa/page.tsx

@@ -0,0 +1,39 @@
+import colors from '@/con/colors';
+import { Box, SimpleGrid, Paper, Stack, Title, Group, Button, Text } from '@mantine/core';
+import React from 'react';
+import { DesaEditor } from '../../../_com/desaEditor';
+
+function LambangDesa() {
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Lambang Desa</Title>
+              <Text fw={"bold"}>Deskripsi Lambang Desa</Text>
+              <DesaEditor showSubmit={false} />
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>List Lambang Desa</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default LambangDesa;

src/app/admin/(dashboard)/desa/profile/ui/maskot_desa/page.tsx

@@ -0,0 +1,39 @@
+import colors from '@/con/colors';
+import { Box, SimpleGrid, Paper, Stack, Title, Group, Button, Text } from '@mantine/core';
+import React from 'react';
+import { DesaEditor } from '../../../_com/desaEditor';
+
+function MaskotDesa() {
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Maskot Desa</Title>
+              <Text fw={"bold"}>Deskripsi Maskot Desa</Text>
+              <DesaEditor showSubmit={false} />
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>List Maskot Desa</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default MaskotDesa;

src/app/admin/(dashboard)/desa/profile/ui/profile_perbekel/page.tsx

@@ -0,0 +1,49 @@
+import colors from '@/con/colors';
+import { Box, SimpleGrid, Paper, Stack, Title, Group, Button, TextInput, Text } from '@mantine/core';
+import React from 'react';
+import { DesaEditor } from '../../../_com/desaEditor';
+
+function ProfilePerbekel() {
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Profil Perbekel</Title>
+              <TextInput
+              label="Nama Perbekel"
+              placeholder="masukkan nama perbekel"
+              />
+              <Text fz={"sm"} fw={"bold"}>Biodata</Text>
+              <DesaEditor showSubmit={false} />
+              <Text fz={"sm"} fw={"bold"}>Pengalaman</Text>
+              <DesaEditor showSubmit={false} />
+              <Text fz={"sm"} fw={"bold"}>Pengalaman Organisasi</Text>
+              <DesaEditor showSubmit={false} />
+              <Text fz={"sm"} fw={"bold"}>Program Unggulan</Text>
+              <DesaEditor showSubmit={false} />
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>List Profil Perbekel</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+      </Box>
+  );
+}
+
+export default ProfilePerbekel;

src/app/admin/(dashboard)/desa/profile/ui/sejarah_desa/page.tsx

@@ -0,0 +1,38 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
+import { DesaEditor } from '../../../_com/desaEditor';
+
+function SejarahDesa() {
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Sejarah Desa</Title>
+              <Text fw={"bold"}>Deskripsi Sejarah Desa</Text>
+              <DesaEditor showSubmit={false}/>
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>List Sejarah Desa</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default SejarahDesa;

src/app/admin/(dashboard)/desa/profile/ui/visi_misi_desa/page.tsx

@@ -0,0 +1,64 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
+import { DesaEditor } from '../../../_com/desaEditor';
+
+function VisiMisiDesa() {
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Visi Desa</Title>
+              <Text fw={"bold"}>Deskripsi Visi Desa</Text>
+              <DesaEditor showSubmit={false} />
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>List Visi Desa</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+      <SimpleGrid py={30} cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Misi Desa</Title>
+              <Text fw={"bold"}>Deskripsi Misi Desa</Text>
+              <DesaEditor showSubmit={false}/>
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>List Misi Desa</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default VisiMisiDesa;

src/app/admin/(dashboard)/ppid/_com/PPIDTextEditor.tsx

@@ -9,13 +9,12 @@ 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 PPIDTextEditor({ onSubmit, onChange, showSubmit = true }: { 
+export function PPIDTextEditor({ onSubmit, onChange, showSubmit = true, initialContent = '', }: { 
   onSubmit?: (val: string) => void, 
   onChange: (val: string) => void, 
-  showSubmit?: boolean }) {
+  showSubmit?: boolean,
+  initialContent?: string }) {
   const editor = useEditor({
     extensions: [
       StarterKit,
@@ -27,7 +26,7 @@ export function PPIDTextEditor({ onSubmit, onChange, showSubmit = true }: {
       TextAlign.configure({ types: ['heading', 'paragraph'] }),
     ],
     immediatelyRender: false,
-    content,
+    content: initialContent,
     onUpdate : ({editor}) => {
       onChange(editor.getHTML())
     }

src/app/admin/(dashboard)/ppid/_com/ppid_Editor.tsx

@@ -10,7 +10,7 @@ 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>';
+  '<p>Dokumen yang berisi kebijakan dan regulasi desa</p>';
 
 export function PPIDEditor({ onSubmit, onChange, showSubmit = true }: { 
   onSubmit?: (val: string) => void, 

src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx

@@ -1,11 +1,10 @@
 'use client'
+import colors from '@/con/colors';
 import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, TextInput, Title } from '@mantine/core';
-import React from 'react';
+import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import stateDaftarInformasiPublik from '../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
-import { PPIDEditor } from '../_com/ppid_Editor';
-import colors from '@/con/colors';
-import { useShallowEffect } from '@mantine/hooks';
+import { PPIDTextEditor } from '../_com/PPIDTextEditor';
 
 function Page() {
   const daftarInformasi = useProxy(stateDaftarInformasiPublik.daftarInformasi)
@@ -30,7 +29,7 @@ function Page() {
                   daftarInformasi.create.form.jenisInformasi = val.target.value
                 }}
               />
-              <PPIDEditor
+              <PPIDTextEditor
                 showSubmit={false}
                 onChange={(val) => {
                   daftarInformasi.create.form.deskripsi = val
@@ -68,46 +67,50 @@ function ListDaftarInformasi() {
   if (!listData.findMany.data) return <Stack>
     {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
   </Stack>
-  return <Paper bg={colors['white-1']} p={'md'}>
-    <Stack gap={"xs"}>
-      <Title fw={"bold"} order={3}>List Daftar Informasi Publik Desa Darmasaba</Title>
-      <Table
-        suppressHydrationWarning
-        striped
-        highlightOnHover
-        withTableBorder
-        withColumnBorders
-        bg={colors['white-1']}
-      >
-        <TableThead>
-          <TableTr>
-            <TableTh>
-              No
-            </TableTh>
-            <TableTh>
-              Jenis Informasi
-            </TableTh>
-            <TableTh>
-              Deskripsi
-            </TableTh>
-            <TableTh>
-              Tanggal Publikasi
-            </TableTh>
-          </TableTr>
-        </TableThead>
-        <TableTbody>
-          {listData.findMany.data?.map((item) => (
-            <TableTr key={item.id}>
-              <TableTd>{item.nomor}</TableTd>
-              <TableTd>{item.jenisInformasi}</TableTd>
-              <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
-              <TableTd>{item.tanggal}</TableTd>
-            </TableTr>
-          ))}
-        </TableTbody>
-      </Table>
-    </Stack>
-  </Paper>
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title fw={"bold"} order={3}>List Daftar Informasi Publik Desa Darmasaba</Title>
+          <Table
+            suppressHydrationWarning
+            striped
+            highlightOnHover
+            withTableBorder
+            withColumnBorders
+            bg={colors['white-1']}
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh>
+                  No
+                </TableTh>
+                <TableTh>
+                  Jenis Informasi
+                </TableTh>
+                <TableTh>
+                  Deskripsi
+                </TableTh>
+                <TableTh>
+                  Tanggal Publikasi
+                </TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {listData.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.nomor}</TableTd>
+                  <TableTd>{item.jenisInformasi}</TableTd>
+                  <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
+                  <TableTd>{item.tanggal}</TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Stack>
+      </Paper>
+    </Box>
+  )
 }
 
 export default Page;

src/app/admin/(dashboard)/ppid/dasar-hukum/create/page.tsx

@@ -0,0 +1,64 @@
+'use client'
+import { Box, Button, Group, Stack, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
+import dynamic from 'next/dynamic';
+import colors from '@/con/colors';
+import { useShallowEffect } from '@mantine/hooks';
+
+const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
+  ssr: false,
+});
+function CreateDasarHukum() {
+  const dasarHukumState = useProxy(stateDasarHukumPPID)
+  useShallowEffect(() => {
+    if (!dasarHukumState.findById.data) {
+      dasarHukumState.findById.load(""); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  const submit = () => {
+    if (dasarHukumState.findById.data?.judul && dasarHukumState.findById.data?.content) {
+      dasarHukumState.update.save(dasarHukumState.findById.data)
+    }
+  }
+  return (
+    <Box>
+     <Stack gap={"xs"}>
+     <Text fw={"bold"}>Judul</Text>
+      <PPIDTextEditor
+        showSubmit={false}
+        key={`judul-${dasarHukumState.findById.data?.id ?? 'new'}`}
+        onChange={(val) => {
+          if (dasarHukumState.findById.data) {
+            dasarHukumState.findById.data.judul = val
+          }
+        }}
+        initialContent={dasarHukumState.findById.data?.judul ?? ''}
+      />
+      <Text fw={"bold"}>Content</Text>
+      <PPIDTextEditor
+        showSubmit={false}
+        key={`content-${dasarHukumState.findById.data?.id ?? 'baru'}`}
+        onChange={(val) => {
+          if (dasarHukumState.findById.data) {
+            dasarHukumState.findById.data.content = val
+          }
+        }}
+        initialContent={dasarHukumState.findById.data?.content ?? ''}
+      />
+      <Group>
+        <Button
+          bg={colors['blue-button']}
+          onClick={submit}
+          loading={dasarHukumState.update.loading}
+        >
+          Submit
+        </Button>
+      </Group>
+     </Stack>
+    </Box>
+  );
+}
+
+export default CreateDasarHukum;

src/app/admin/(dashboard)/ppid/dasar-hukum/listData/page.tsx

@@ -0,0 +1,40 @@
+'use client'
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
+import { useShallowEffect } from '@mantine/hooks';
+import { Box, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import colors from '@/con/colors';
+
+function ListDataDasarHukum() {
+  const dataList = useProxy(stateDasarHukumPPID)
+  useShallowEffect(() => {
+    dataList.findById.load("")
+  }, [])
+
+  if(!dataList.findById.data) return <Stack>
+    {Array.from({length: 10}).map((v, k) => <Skeleton key={k} h={40} />)}
+  </Stack>
+
+const dataArray = Array.isArray(dataList.findById.data)
+  ? dataList.findById.data
+  : [dataList.findById.data];
+
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+    <Stack gap={"xs"}>
+    <Title order={3}>List Dasar Hukum PPID</Title>
+    {dataArray.map((item) => (
+      <Box key={item.id}>
+        <Text fw={"bold"}>Judul</Text>
+        <Text dangerouslySetInnerHTML={{ __html: item.judul }}></Text>
+        <Text fw={"bold"}>Content</Text>
+        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+      </Box>
+    ))}
+    </Stack>
+    </Paper>
+  );
+}
+
+export default ListDataDasarHukum;

src/app/admin/(dashboard)/ppid/dasar-hukum/page.tsx

@@ -1,11 +1,24 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
+import CreateDasarHukum from './create/page';
+import ListDataDasarHukum from './listData/page';
 
 function Page() {
+
   return (
-    <div>
-      dasar-hukum
-    </div>
-  );
+    <Stack gap={"xs"}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10}>
+          <Title order={3}>Dasar Hukum PPID</Title>
+          <CreateDasarHukum/>
+          </Paper>
+        </Box>
+        <ListDataDasarHukum/>
+      </SimpleGrid>
+    </Stack>
+  )
 }
 
 export default Page;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/page.tsx

@@ -1,4 +1,4 @@
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import React from 'react';
 import colors from '@/con/colors';
 import GrafikHasilKepuasan from './_ui/grafik_hasil_kepuasan_masyarakat/page';
@@ -8,9 +8,10 @@ import GrafikBerdasarakanUmur from './_ui/grafik_berdasarkan_umur/page';
 
 function Page() {
   return (
-    <Stack>
-      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik"}>
-        <TabsList>
+    <Stack >
+      <Title order={3}>Indeks Kepuasan Masyarakat (IKM) Desa Darmasaba</Title>
+      <Tabs  color={colors['blue-button']} variant='pills' defaultValue={"Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik"}>
+        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
           <TabsTab value="Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik">
             Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik
           </TabsTab>

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/jenisInformasi.tsx

@@ -1,41 +0,0 @@
-import { Prisma } from '@prisma/client';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import statePermohonanInformasi from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
-import { useShallowEffect } from '@mantine/hooks';
-import { Group, Select, Skeleton } from '@mantine/core';
-
-function JenisInformasi({ onChange }: {
-  onChange: (value: Prisma.JenisInformasiDimintaGetPayload<{
-    select: {
-      id: true,
-      name: true
-    }
-  }>) => void
-}) {
-  const jenisInformasiState = useProxy(statePermohonanInformasi.jenisInformasiDiminta)
-  useShallowEffect(() => {
-    jenisInformasiState.findMany.load()
-  }, [])
-
-  if (!jenisInformasiState.findMany.data) return <Skeleton h={40} />
-  return (
-    <Group>
-      <Select
-        placeholder='pilih jenis informasi'
-        label={'select jenis informasi'}
-        data={jenisInformasiState.findMany.data.map((item) => ({
-          value: item.id,
-          label: item.name
-        }))}
-        onChange={(v) => {
-          const data = jenisInformasiState.findMany.data?.find((item) => item.id === v)
-          if (!data) return
-          onChange(data)
-        }}
-      />
-    </Group>
-  );
-}
-
-export default JenisInformasi;

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/memperolehInformasi.tsx

@@ -1,38 +0,0 @@
-import { Group, Select } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import statePermohonanInformasi from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
-
-function MemperolehInformasi({ onChange }: {
-  onChange: (value: Prisma.CaraMemperolehInformasiGetPayload<{
-    select: {
-      id: true,
-      name: true
-    }
-  }>) => void
-}) {
-  const memperolehInformasiState = useProxy(statePermohonanInformasi.caraMemperolehInformasi)
-  
-  useShallowEffect(() => {
-    memperolehInformasiState.findMany.load()
-  }, [])
-  return (
-    <Group>
-      <Select
-        placeholder='pilih katagori'
-        label={"select katagori"}
-        data={memperolehInformasiState.findMany.data?.map((item) => ({
-          value: item.id,
-          label: item.name
-        }))} onChange={(v) => {
-          const data = memperolehInformasiState.findMany.data?.find((item) => item.id === v)
-          if (!data) return
-          onChange(data)
-        }} />
-    </Group>
-  );
-}
-
-export default MemperolehInformasi;

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/memperolehSalinan.tsx

@@ -1,45 +0,0 @@
-import { Group, Select, Skeleton } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import statePermohonanInformasi from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
-
-function MemperolehSalinan({ onChange }: {
-  onChange: (value: Prisma.CaraMemperolehSalinanInformasiGetPayload<{
-    select: {
-      id: true,
-      name: true
-    }
-  }>) => void
-}) {
-  const memperolehSalinanInformasiState = useProxy(statePermohonanInformasi.caraMemperolehSalinanInformasi)
-  useShallowEffect(() => {
-    memperolehSalinanInformasiState.findMany.load()
-  }, [])
-
-  if (!memperolehSalinanInformasiState.findMany.data) return <Skeleton h={40} />
-  return (
-    <Group>
-      <Select
-        placeholder='pilih salinan informasi'
-        label={'select salinan informasi'}
-        data={memperolehSalinanInformasiState.findMany.data.map((item) => ({
-          value: item.id,
-          label: item.name
-        }))}
-        onChange={(v) => {
-          if (!v) return
-          const selectedItem = memperolehSalinanInformasiState.findMany.data?.find(item => item.id === v)
-          if (selectedItem) {
-            onChange({
-              id: selectedItem.id,
-              name: selectedItem.name
-            })
-          }
-        }}
-      />
-    </Group>
-  );
-}
-export default MemperolehSalinan;

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx

@@ -1,115 +1,57 @@
 'use client'
-import { Box, Button, Group, Paper, SimpleGrid, Stack, TextInput, Title } from '@mantine/core';
-import { useProxy } from 'valtio/utils';
-import statePermohonanInformasi from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
-import JenisInformasi from './jenisInformasi';
-import MemperolehInformasi from './memperolehInformasi';
-import MemperolehSalinan from './memperolehSalinan';
 import colors from '@/con/colors';
+import { Box, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
+import statepermohonanInformasiPublikForm from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
 
 function Page() {
+  const permohonanInformasiPublikState = useProxy(statepermohonanInformasiPublikForm)
+  useShallowEffect(() => {
+    permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.load()
+  }, [])
+  if (!permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.data) return <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
+  </Stack>
+
   return (
-    <Box>
-      <Stack>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <PermohonanInformasiPublikCreate />
-        </SimpleGrid>
-      </Stack>
+    <Box py={5}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Permohonan Informasi Publik</Title>
+          <Box p={"xl"}>
+            <Table striped withRowBorders withColumnBorders withTableBorder>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>NIK</TableTh>
+                  <TableTh>Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Jenis Informasi</TableTh>
+                  <TableTh>Cara Memperoleh Informasi</TableTh>
+                  <TableTh>Cara Memperoleh Salinan Informasi</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.data?.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{index + 1}</TableTd>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd>{item.nik}</TableTd>
+                    <TableTd>{item.notelp}</TableTd>
+                    <TableTd>{item.email}</TableTd>
+                    <TableTd>{item.jenisInformasiDiminta?.name}</TableTd>
+                    <TableTd>{item.caraMemperolehInformasi?.name}</TableTd>
+                    <TableTd>{item.caraMemperolehSalinanInformasi?.name}</TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table> </Box>
+        </Stack>
+      </Paper>
     </Box>
   );
 }
 
-function PermohonanInformasiPublikCreate() {
-  const permohonanInformasiPublikState = useProxy(statePermohonanInformasi)
-  const submitForms = () => {
-    // Tambahkan log untuk debugging
-    console.log("Form data sebelum submit:", {
-      name: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.name,
-      nik: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.nik,
-      notelp: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.notelp,
-      alamat: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.alamat,
-      email: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.email,
-      jenisInformasiDimintaId: permohonanInformasiPublikState.jenisInformasiDiminta,
-      caraMemperolehInformasiId: permohonanInformasiPublikState.caraMemperolehInformasi,
-      caraMemperolehSalinanInformasiId: permohonanInformasiPublikState.caraMemperolehSalinanInformasi
-    });
-
-    if (permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.name &&
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.nik &&
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.notelp &&
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.alamat &&
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.email &&
-      permohonanInformasiPublikState.jenisInformasiDiminta &&
-      permohonanInformasiPublikState.caraMemperolehInformasi &&
-      permohonanInformasiPublikState.caraMemperolehSalinanInformasi) {
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.create()
-    } else {
-      console.log("Validasi gagal, form tidak lengkap");
-      // Tampilkan pesan error ke pengguna di sini
-    }
-  }
-  return (
-    <Box py={5}>
-      <Paper bg={colors['white-1']} p={'md'}>
-      <Stack gap={"10"}>
-        <Title order={3}>Permohonan Informasi Publik</Title>
-        <TextInput
-          label="Nama Lengkap"
-          placeholder="masukkan nama lengkap"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.name = val.target.value
-          }}
-        />
-        <TextInput
-          label="NIK"
-          placeholder="masukkan NIK"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.nik = val.target.value
-          }}
-        />
-        <TextInput
-          label="No.Telp"
-          placeholder="masukkan no telp"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.notelp = val.target.value
-          }}
-        />
-        <TextInput
-          label="Alamat"
-          placeholder="masukkan alamat"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.alamat = val.target.value
-          }}
-        />
-        <TextInput
-          label="Email"
-          placeholder="masukkan email"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.email = val.target.value
-          }}
-        />
-        <JenisInformasi
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.jenisInformasiDimintaId = val.id
-          }}
-        />
-        <MemperolehInformasi
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.caraMemperolehInformasiId = val.id
-          }}
-        />
-        <MemperolehSalinan
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.caraMemperolehSalinanInformasiId = val.id
-          }}
-        />
-        <Group>
-          <Button onClick={submitForms}>Submit</Button>
-        </Group>
-      </Stack>
-    </Paper>
-    </Box >
-  )
-}
-
 export default Page;

src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx

@@ -1,73 +1,12 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
+import { Box, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import statePermohonanKeberatan from '../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi';
-import { useShallowEffect } from '@mantine/hooks';
 
 function Page() {
-  return (
-    <Box>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <PermohonanKeberatanInformasiCreate />
-        <PermohonanKeberatanInformasiList />
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-function PermohonanKeberatanInformasiCreate() {
-  const state = useProxy(statePermohonanKeberatan.permohonanKeberatanInformasiForm)
-  const submit = () => {
-    if (state.create.form.name && state.create.form.email && state.create.form.notelp && state.create.form.alasan) {
-      state.create.create()
-    }
-  }
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Permohonan Keberatan Informasi Publik</Title>
-          <TextInput
-            label="Nama"
-            placeholder="masukkan nama lengkap"
-            onChange={(val) => {
-              state.create.form.name = val.target.value
-            }}
-          />
-          <TextInput
-            label="Email"
-            placeholder="masukkan email"
-            onChange={(val) => {
-              state.create.form.email = val.target.value
-            }}
-          />
-          <TextInput
-            label="Nomor Telepon"
-            placeholder="masukkan nomor telepon"
-            onChange={(val) => {
-              state.create.form.notelp = val.target.value
-            }}
-          />
-          <TextInput
-            label="Alasan Keberatan"
-            placeholder="masukkan alasan keberatan"
-            onChange={(val) => {
-              state.create.form.alasan = val.target.value
-            }}
-          />
-          <Group>
-            <Button onClick={submit} bg={colors['blue-button']}>Kirim Permohonan</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-function PermohonanKeberatanInformasiList() {
-  const listState = useProxy(statePermohonanKeberatan.permohonanKeberatanInformasiForm)
+  const listState = useProxy(statePermohonanKeberatan)
   useShallowEffect(() => {
     listState.findMany.load()
   }, [])
@@ -75,24 +14,36 @@ function PermohonanKeberatanInformasiList() {
   if (!listState.findMany.data) return <Stack>
     {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
   </Stack>
-
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={3}>Permohonan Keberatan Informasi Publik</Title>
-          {listState.findMany.data?.map((item) => (
-            <Box key={item.id}>
-              <Text>Nama: {item.name}</Text>
-              <Text>Email: {item.email}</Text>
-              <Text>Telepon: {item.notelp}</Text>
-              <Text>Alasan: {item.alasan}</Text>
-            </Box>
-          ))}
+          <Table striped withRowBorders withColumnBorders withTableBorder>
+            <TableThead>
+              <TableTr>
+                <TableTh>No</TableTh>
+                <TableTh>Nama</TableTh>
+                <TableTh>Email</TableTh>
+                <TableTh>Telepon</TableTh>
+                <TableTh>Alasan</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {listState.findMany.data?.map((item, index) => (
+                <TableTr key={item.id}>
+                  <TableTd>{index + 1}</TableTd>
+                  <TableTd>{item.name}</TableTd>
+                  <TableTd>{item.email}</TableTd>
+                  <TableTd>{item.notelp}</TableTd>
+                  <TableTd dangerouslySetInnerHTML={{ __html: item.alasan }} />
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
         </Stack>
       </Paper>
     </Box>
-  )
+  );
 }
-
 export default Page;

src/app/admin/(dashboard)/ppid/profile-ppid/_com/biodata.ts

@@ -0,0 +1,10 @@
+const biodata = {
+    id: "1",
+    name: "<p>I.B Surya Prabhawa Manuaba, S.H., M.H.</p>",
+    biodata: "<h2>Biodata</h2> <p>....</p>",
+    riwayat: "<h2>Riwayat Karir</h2> <ul>...</ul>",
+    pengalaman: "<h2>Pengalaman Organisasi</h2> <ul>...</ul>",
+    unggulan: "<h2>Program Kerja Unggulan</h2> <h3>...</h3>",
+}
+
+export default biodata

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

@@ -1,24 +1,76 @@
 'use client'
-import { Box, Text } from '@mantine/core';
-import React from 'react';
+import { Box, Group, Text } from '@mantine/core';
+import { useState } from 'react';
 
+import ApiFetch from '@/lib/api-fetch';
+import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
+import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
 import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
-import { PPIDEditor } from '../../_com/ppid_Editor';
+import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
 
 function Biodata() {
-  const biodataState = useProxy(stateProfilePPID.profilePPID)
+  const biodataState = useProxy(stateProfilePPID)
+  const [loading, setLoading] = useState(false);
+  
   return (<Box>
     <Text fw={"bold"}>Biodata</Text>
-    <PPIDEditor
-    showSubmit={false}
-    onChange={(val) => {
-      biodataState.create.form.biodata = val
-    }}
-    />
-  </Box>
+    <Dropzone
+    mb={20}
+      onDrop={async (droppedFiles) => {
+        setLoading(true);
+        for (const file of droppedFiles) {
+          await ApiFetch.api.ppid.profileppid["edit-img"].post({
+            file: file,
+            id: biodataState.findById.data?.id,
+          });
+        }
+
+        setLoading(false);
+        if (biodataState.findById.data?.id) {
+          biodataState.findById.load(biodataState.findById.data.id);
+        }
+      }}
+      accept={[MIME_TYPES.jpeg, MIME_TYPES.png, MIME_TYPES.webp]}
+      loading={loading}
+    >
+      <Group justify="center" gap="md" mih={150} style={{ pointerEvents: 'none' }}>
+        <Dropzone.Accept>
+          <IconUpload size={50} stroke={1.5} />
+        </Dropzone.Accept>
+        <Dropzone.Reject>
+          <IconX size={50} stroke={1.5} />
+        </Dropzone.Reject>
+        <Dropzone.Idle>
+          <IconPhoto size={50} stroke={1.5} />
+        </Dropzone.Idle>
+
+        <div>
+          <Text size="xl" inline>
+            Drag & drop gambar di sini atau klik untuk pilih file
+          </Text>
+          <Text size="sm" c="dimmed" inline mt={7}>
+            Maksimal ukuran file 5MB. Format: JPG, PNG, WebP
+          </Text>
+        </div>
+      </Group>
+    </Dropzone>
     
+    
+    
+    <PPIDTextEditor
+      key={biodataState.findById.data?.id ?? 'new'}
+      showSubmit={false}
+      onChange={(val) => {
+        if (biodataState.findById.data) {
+          biodataState.findById.data.biodata = val;
+        }
+      }}
+      initialContent={biodataState.findById.data?.biodata ?? ''}
+    />
+   
+  </Box>
   );
 }
 
-export default Biodata;
+export default Biodata;

src/app/admin/(dashboard)/ppid/profile-ppid/listPage.tsx

@@ -0,0 +1,65 @@
+import colors from '@/con/colors';
+import { Stack, Skeleton, Paper, Title, Box, Text, Image } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import stateProfilePPID from '../../_state/ppid/profile_ppid/profile_PPID';
+
+function ProfileList() {
+  const allList = useProxy(stateProfilePPID)
+  useShallowEffect(() => {
+    allList.findById.load("1") // Assuming "1" is your default ID, adjust as needed
+  }, [])
+
+  if (!allList.findById.data) return <Stack>
+    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
+  </Stack>
+
+  const dataArray = Array.isArray(allList.findById.data)
+    ? allList.findById.data
+    : [allList.findById.data];
+
+  return (
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Stack gap={"xs"}>
+        <Title order={3}>List Profile PPID</Title>
+        {dataArray.map((item) => (
+          <Box key={item.id}>
+            {item.imageUrl && (
+              <Box mb={20}>
+                <Text fw={"bold"} mb={5}>Preview Gambar:</Text>
+                <Image
+                  src={item.imageUrl}
+                  alt="Profile"
+                  w={200}
+                />
+              </Box>
+            )}
+            <Box>
+              <Text fw={"bold"}>Nama</Text>
+              <Text dangerouslySetInnerHTML={{ __html: item.name }}></Text>
+            </Box>
+            <Box>
+              <Text fw={"bold"}>Biodata</Text>
+              <Text dangerouslySetInnerHTML={{ __html: item.biodata }}></Text>
+            </Box>
+            <Box>
+              <Text fw={"bold"}>Riwayat</Text>
+              <Text dangerouslySetInnerHTML={{ __html: item.riwayat }}></Text>
+            </Box>
+            <Box>
+              <Text fw={"bold"}>Pengalaman</Text>
+              <Text dangerouslySetInnerHTML={{ __html: item.pengalaman }}></Text>
+            </Box>
+            <Box>
+              <Text fw={"bold"}>Program Kerja Unggulan</Text>
+              <Text dangerouslySetInnerHTML={{ __html: item.unggulan }}></Text>
+            </Box>
+          </Box>
+        ))}
+      </Stack>
+    </Paper>
+  )
+}
+
+export default ProfileList;

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

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
 import Biodata from './biodata/page';
 import PengalamanOrganisasi from './pengalaman_organisasi/page';
 import RiwayatKarir from './riwayat_karir/page';
@@ -8,6 +8,7 @@ import ProgramKerjaUnggulan from './program_kerja_unggulan/page';
 import { useProxy } from 'valtio/utils';
 import stateProfilePPID from '../../_state/ppid/profile_ppid/profile_PPID';
 import { useShallowEffect } from '@mantine/hooks';
+import ProfileList from './listPage';
 
 
 function Page() {
@@ -23,15 +24,24 @@ function Page() {
 
 function ProfileCreate() {
   const allState = useProxy(stateProfilePPID)
+  
+  // Initialize data if it doesn't exist
+  useShallowEffect(() => {
+    if (!allState.findById.data) {
+      allState.findById.initialize()
+    }
+  }, [])
+
   const submit = () => {
     if (
-      allState.profilePPID.create.form.name &&
-      allState.profilePPID.create.form.biodata &&
-      allState.profilePPID.create.form.riwayat &&
-      allState.profilePPID.create.form.pengalaman &&
-      allState.profilePPID.create.form.unggulan) {
-        allState.profilePPID.create.create()
-      }
+      allState.findById.data?.name &&
+      allState.findById.data?.biodata &&
+      allState.findById.data?.riwayat &&
+      allState.findById.data?.pengalaman &&
+      allState.findById.data?.unggulan
+    ) {
+      allState.update.save(allState.findById.data)
+    }
   }
 
   return (
@@ -41,8 +51,11 @@ function ProfileCreate() {
         <TextInput
           label={<Text fw={"bold"}>Nama Perbekel</Text>}
           placeholder="masukkan nama perbekel"
+          value={allState.findById.data?.name || ''}
           onChange={(val) => {
-            allState.profilePPID.create.form.name = val.currentTarget.value
+            if (allState.findById.data) {
+              allState.findById.data.name = val.currentTarget.value
+            }
           }}
         />
         <Biodata />
@@ -50,53 +63,17 @@ function ProfileCreate() {
         <PengalamanOrganisasi />
         <ProgramKerjaUnggulan />
         <Group>
-          <Button bg={colors['blue-button']} onClick={submit}>Submit</Button>
+          <Button 
+            bg={colors['blue-button']} 
+            onClick={submit}
+            loading={allState.update.loading}
+          >
+            Submit
+          </Button>
         </Group>
       </Stack>
     </Paper>
   )
 }
 
-function ProfileList() {
-  const allList = useProxy(stateProfilePPID)
-  useShallowEffect(() => {
-    allList.profilePPID.findMany.load()
-  }, [])
-
-  if (!allList.profilePPID.findMany.data) return <Stack>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
-  return (
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Profile PPID</Title>
-        {allList.profilePPID.findMany.data?.map((item) => (
-          <Box key={item.id}>
-            <Box>
-              <Text fw={"bold"}>Nama</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.name }}></Text>
-            </Box>
-            <Box>
-              <Text fw={"bold"}>Biodata</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.biodata }}></Text>
-            </Box>
-            <Box>
-              <Text fw={"bold"}>Riwayat</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.riwayat }}></Text>
-            </Box>
-            <Box>
-              <Text fw={"bold"}>Pengalaman</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.pengalaman }}></Text>
-            </Box>
-            <Box>
-              <Text fw={"bold"}>Program Kerja Unggulan</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.unggulan }}></Text>
-            </Box>
-          </Box>
-        ))}
-      </Stack>
-    </Paper>
-  )
-}
-
-export default Page;
+export default Page;

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

@@ -3,17 +3,21 @@ import { Box, Text } from '@mantine/core';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
 import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
-import { PPIDEditor } from '../../_com/ppid_Editor';
+import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
 
 function PengalamanOrganisasi() {
-  const pengalamanOrganisasiState = useProxy(stateProfilePPID.profilePPID)
+  const pengalamanOrganisasiState = useProxy(stateProfilePPID)
   return (<Box>
     <Text fw={"bold"}>Pengalaman Organisasi</Text>
-    <PPIDEditor
+    <PPIDTextEditor
+    key={pengalamanOrganisasiState.findById.data?.id ?? 'new'}
     showSubmit={false}
     onChange={(val) => {
-      pengalamanOrganisasiState.create.form.pengalaman = val
+      if (pengalamanOrganisasiState.findById.data) {
+        pengalamanOrganisasiState.findById.data.pengalaman = val;
+      }
     }}
+    initialContent={pengalamanOrganisasiState.findById.data?.pengalaman ?? ''}
     />
   </Box>
   );

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

@@ -3,17 +3,21 @@ import { Box, Text } from '@mantine/core';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
 import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
-import { PPIDEditor } from '../../_com/ppid_Editor';
+import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
 
 function ProgramKerjaUnggulan() {
-  const programKerjaUnggulanState = useProxy(stateProfilePPID.profilePPID)
+  const programKerjaUnggulanState = useProxy(stateProfilePPID)
   return (<Box>
     <Text fw={"bold"}>Program Kerja Unggulan</Text>
-    <PPIDEditor
+    <PPIDTextEditor
+    key={programKerjaUnggulanState.findById.data?.id ?? 'new'}
     showSubmit={false}
     onChange={(val) => {
-      programKerjaUnggulanState.create.form.unggulan = val
+      if (programKerjaUnggulanState.findById.data) {
+        programKerjaUnggulanState.findById.data.unggulan = val;
+      }
     }}
+    initialContent={programKerjaUnggulanState.findById.data?.unggulan ?? ''}
     />
   </Box>
   );

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

@@ -7,21 +7,24 @@ import dynamic from 'next/dynamic';
 import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
 
 // ini penting
-const PPIDEditor = dynamic(() => import('../../_com/ppid_Editor').then(mod => mod.PPIDEditor), {
+const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
   ssr: false, // disable server side rendering
 });
-
 function RiwayatKarir() {
-  const biodataState = useProxy(stateProfilePPID.profilePPID);
+  const riwayatKarirState = useProxy(stateProfilePPID);
 
   return (
     <Box>
       <Text fw={"bold"}>Riwayat Karir</Text>
-      <PPIDEditor
+      <PPIDTextEditor
+      key={riwayatKarirState.findById.data?.id ?? 'new'}
         showSubmit={false}
         onChange={(val) => {
-          biodataState.create.form.riwayat = val;
+          if (riwayatKarirState.findById.data) {
+            riwayatKarirState.findById.data.riwayat = val;
+          }
         }}
+        initialContent={riwayatKarirState.findById.data?.riwayat ?? ''}
       />
     </Box>
   );

src/app/admin/(dashboard)/ppid/visi-misi-ppid/misiPPID/page.tsx

@@ -0,0 +1,26 @@
+'use client'
+import { Box, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
+import stateVisiMisiPPID from '../../../_state/ppid/visi_misi_ppid/visimisiPPID';
+
+function MisiPPID() {
+  const misiState = useProxy(stateVisiMisiPPID)
+  return (
+    <Box>
+      <Text fw={"bold"}>Misi PPID</Text>
+      <PPIDTextEditor
+      key={misiState.findById.data?.id ?? 'new'}
+      showSubmit={false}
+      onChange={(val) => {
+        if(misiState.findById.data){
+          misiState.findById.data.misi = val
+        }
+      }}
+      initialContent={misiState.findById.data?.misi ?? ''}
+      />
+    </Box>
+  );
+}
+
+export default MisiPPID;

src/app/admin/(dashboard)/ppid/visi-misi-ppid/page.tsx

@@ -1,11 +1,83 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import stateVisiMisiPPID from '../../_state/ppid/visi_misi_ppid/visimisiPPID';
+import MisiPPID from './misiPPID/page';
+import VisiPPID from './visiPPID/page';
 
 function Page() {
   return (
-    <div>
-      visi-misi-ppid
-    </div>
+    <Box>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <VisiMisiPPIDCreate />
+        <VisiMisiPPIDList />
+      </SimpleGrid>
+    </Box>
   );
 }
 
+function VisiMisiPPIDCreate() {
+  const visiMisi = useProxy(stateVisiMisiPPID)
+
+  useShallowEffect(() => {
+    if(!visiMisi.findById.data){
+      visiMisi.findById.initialize()
+    }
+  }, [])
+
+  const submit = () => {
+    if(visiMisi.findById.data?.misi && visiMisi.findById.data?.visi){
+      visiMisi.update.save(visiMisi.findById.data)
+    }
+  }
+
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"xs"}>
+        <Title order={3}>Visi Misi PPID</Title>
+        <VisiPPID />
+        <MisiPPID />
+        <Group>
+          <Button
+            bg={colors['blue-button']}
+            onClick={submit}
+            loading={visiMisi.update.loading}
+          >
+            Submit
+          </Button>
+        </Group>
+      </Stack>
+    </Paper>
+  )
+}
+
+function VisiMisiPPIDList() {
+  const listVisiMisi = useProxy(stateVisiMisiPPID)
+  useShallowEffect(() => {
+    listVisiMisi.findById.load("1")
+  }, [])
+
+  if(!listVisiMisi.findById.data) return <Stack>
+    {Array.from({length: 10}).map((v, k) => <Skeleton key={k} h={40} />)}
+  </Stack>
+
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"xs"}>
+        <Title order={3}>List Visi Misi PPID</Title>
+        <Box>
+          <Text fw={"bold"}>Visi PPID</Text>
+          <Text dangerouslySetInnerHTML={{__html: listVisiMisi.findById.data?.visi}}></Text>
+        </Box>
+        <Box>
+          <Text fw={"bold"}>Misi PPID</Text>
+          <Text dangerouslySetInnerHTML={{__html: listVisiMisi.findById.data?.misi}}></Text>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
 export default Page;

src/app/admin/(dashboard)/ppid/visi-misi-ppid/visiPPID/page.tsx

@@ -0,0 +1,26 @@
+'use client'
+import { Box, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
+import stateVisiMisiPPID from '../../../_state/ppid/visi_misi_ppid/visimisiPPID';
+
+function VisiPPID() {
+  const visiState = useProxy(stateVisiMisiPPID)
+  return (
+    <Box>
+      <Text fw={"bold"}>Visi PPID</Text>
+      <PPIDTextEditor
+      key={visiState.findById.data?.id ?? 'new'}
+      showSubmit={false}
+      onChange={(val) => {
+        if(visiState.findById.data){
+          visiState.findById.data.visi = val
+        }
+      }}
+      initialContent={visiState.findById.data?.visi ?? ''}
+      />
+    </Box>
+  );
+}
+
+export default VisiPPID;

src/app/api/[[...slugs]]/_lib/desa/index.ts

@@ -1,9 +1,11 @@
 import Elysia from "elysia";
 import Berita from "./berita";
 import Pengumuman from "./pengumuman";
+import ProfileDesa from "./profile/profile_desa";
 
 const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
   .use(Berita)
   .use(Pengumuman)
+  .use(ProfileDesa)
 
 export default Desa;

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/find-many.ts

@@ -0,0 +1,12 @@
+import prisma from "@/lib/prisma";
+
+export default async function profileDesaFindMany() {
+  const res = await prisma.profileDesa.findMany({
+    include: {
+      ProfilPerbekel: true,
+    },
+  });
+  return {
+    data: res,
+  };
+}

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/index.ts

@@ -0,0 +1,51 @@
+import Elysia, { t } from "elysia";
+import profileDesaFindMany from "./find-many";
+import lambangDesaUpdate from "./lambangDesa";
+import maskotDesaUpdate from "./maskotDesa";
+import profilePerbekelUpdate from "./profilePerbekel";
+import sejarahDesaUpdate from "./sejarahDesa";
+import visimisiDesaUpdate from "./visimisiDesa";
+
+const ProfileDesa = new Elysia({
+    prefix: "/profile",
+    tags: ["Desa/Profile"]
+})
+.get("/find-many", profileDesaFindMany)
+.post("/profilePerbekel/update", profilePerbekelUpdate, {
+    body: t.Object({
+        id: t.String(),
+        biodata: t.String(),
+        pengalaman: t.String(),
+        pengalamanOrganisasi: t.String(),
+        programUnggulan: t.String(),
+    })
+})
+.post("/visimisiDesa/update", visimisiDesaUpdate, {
+    body: t.Object({
+        id: t.String(),
+        visi: t.String(),
+        misi: t.String(),
+    })
+})
+.post("/sejarahDesa/update", sejarahDesaUpdate, {
+    body: t.Object({
+        id: t.String(),
+        sejarah: t.String(),
+    })
+})
+.post("/lambangDesa/update", lambangDesaUpdate, {
+    body: t.Object({
+        id: t.String(),
+        lambang: t.String(),
+    })
+})
+.post("/maskotDesa/update", maskotDesaUpdate, {
+    body: t.Object({
+        id: t.String(),
+        maskot: t.String(),
+    })
+})
+
+
+
+export default ProfileDesa

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/lambangDesa.ts

@@ -0,0 +1,28 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        lambang: true;
+    }
+}>
+
+export default async function lambangDesaUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.profileDesa.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            lambang: body.lambang,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Profile Desa Berhasil Diupdate",
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/maskotDesa.ts

@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        maskot: true;
+    }
+}>
+
+export default async function maskotDesaUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.profileDesa.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            maskot: body.maskot,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Profile Desa Berhasil Diupdate",
+    }
+}
+        

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/profilePerbekel.ts

@@ -0,0 +1,33 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.ProfilPerbekelGetPayload<{
+    select: {
+        id: true;
+        biodata: true;
+        pengalaman: true;
+        pengalamanOrganisasi: true;
+        programUnggulan: true;
+    }
+}>
+export default async function profilePerbekelUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.profilPerbekel.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            biodata: body.biodata,
+            pengalaman: body.pengalaman,
+            pengalamanOrganisasi: body.pengalamanOrganisasi,
+            programUnggulan: body.programUnggulan,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Profile Perbekel Berhasil Diupdate",
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarahDesa.ts

@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        sejarah: true;
+    }
+}>
+
+export default async function sejarahDesaUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.profileDesa.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            sejarah: body.sejarah,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Profile Desa Berhasil Diupdate",
+    }
+}
+    

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/visimisiDesa.ts

@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        visi: true;
+        misi: true;
+    }
+}>
+export default async function visimisiDesaUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.profileDesa.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            visi: body.visi,
+            misi: body.misi,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Profile Desa Berhasil Diupdate",
+    }
+}

src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/create.ts

@@ -11,9 +11,12 @@ type FormCreate = Prisma.DaftarInformasiPublikGetPayload<{
 }>
 export default async function daftarInformasiPublikCreate(context: Context) {
     const body = context.body as FormCreate;
-
+    const jumlahData = await prisma.daftarInformasiPublik.count({
+        where: { isActive: true }, // hitung data aktif aja
+      })
     await prisma.daftarInformasiPublik.create({
         data: {
+            nomor: jumlahData + 1,
             jenisInformasi: body.jenisInformasi,
             deskripsi: body.deskripsi,
             tanggal: body.tanggal,

src/app/api/[[...slugs]]/_lib/ppid/dasar_hukum/find-by-id.ts

@@ -0,0 +1,33 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function dasarHukumPPIDFindById(context: Context) {
+    try {
+        const id = context?.params?.slugs?.[0];
+
+        // If no ID provided, get the first profile
+        if (!id) {
+            const data = await prisma.dasarHukumPPID.findFirst();
+            return {
+                success: true,
+                data,
+            };
+        }
+
+        const data = await prisma.dasarHukumPPID.findUniqueOrThrow({
+            where: { id },
+        });
+
+        return {
+            success: true,
+            data,
+        };
+    } catch (error) {
+        console.error("Error fetching profilePPID:", error);
+
+        return {
+            success: false,
+            message: error instanceof Error ? error.message : "Unknown error",
+        };
+    }
+}

src/app/api/[[...slugs]]/_lib/ppid/dasar_hukum/index.ts

@@ -0,0 +1,18 @@
+import Elysia, { t } from "elysia";
+import dasarHukumPPIDFindById from "./find-by-id";
+import dasarHukumPPIDUpdate from "./update";
+
+const DasarHukumPPID = new Elysia({
+    prefix: "/dasarhukumppid",
+    tags: ["PPID/Dasar Hukum PPID"]
+})
+    .get("/find-by-id", dasarHukumPPIDFindById)
+    .post("/update", dasarHukumPPIDUpdate, {
+        body: t.Object({
+            id: t.String(),
+            judul: t.String(),
+            content: t.String(),
+        })
+    })
+
+export default DasarHukumPPID

src/app/api/[[...slugs]]/_lib/ppid/dasar_hukum/update.ts

@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.DasarHukumPPIDGetPayload<{
+    select: {
+        id: true;
+        judul: true;
+        content: true;
+    }
+}>
+export default async function dasarHukumPPIDUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.dasarHukumPPID.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            judul: body.judul,
+            content: body.content,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Dasar Hukum PPID Berhasil Dibuat",
+    }
+}

src/app/api/[[...slugs]]/_lib/ppid/index.ts

@@ -7,7 +7,9 @@ import GrafikBerdasarkanUmur from "./ikm/grafik_berdasarkan_umur";
 import PermohonanInformasiPublik from "./permohonan_informasi_publik";
 import PermohonanKeberatanInformasiPublik from "./permohonan_keberatan_informasi_publik";
 import ProfilePPID from "./profile_ppid";
-import VisiMisiPPID from "./visi_misi_ppid";
+import VisiMisiPPID from "./visi_misi_ppid/visi_misi_ppid";
+import DasarHukumPPID from "./dasar_hukum";
+
 
 
 
@@ -21,6 +23,7 @@ const PPID = new Elysia({ prefix: "/api/ppid", tags: ["PPID"] })
 .use(PermohonanInformasiPublik)
 .use(PermohonanKeberatanInformasiPublik)
 .use(VisiMisiPPID)
+.use(DasarHukumPPID)
 
 
 

src/app/api/[[...slugs]]/_lib/ppid/permohonan_informasi_publik/create.ts

@@ -26,6 +26,7 @@ export default async function permohonanInformasiPublikCreate(context: Context)
             alamat: body.alamat,
             jenisInformasiDimintaId: body.jenisInformasiDimintaId,
             caraMemperolehInformasiId: body.caraMemperolehInformasiId,
+            caraMemperolehSalinanInformasiId: body.caraMemperolehSalinanInformasiId,
         }
     })
 

src/app/api/[[...slugs]]/_lib/ppid/permohonan_informasi_publik/find-many.ts

@@ -1,7 +1,13 @@
 import prisma from "@/lib/prisma";
 
 export default async function permohonanInformasiPublikFindMany() {
-  const res = await prisma.permohonanInformasiPublik.findMany();
+  const res = await prisma.permohonanInformasiPublik.findMany({
+    include: {
+      jenisInformasiDiminta: true,
+      caraMemperolehInformasi: true,
+      caraMemperolehSalinanInformasi: true,
+    }
+  });
   return {
     data: res,
   };

src/app/api/[[...slugs]]/_lib/ppid/profile_ppid/edit-img.ts

@@ -0,0 +1,82 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import { writeFile, unlink } from "fs/promises";
+import path from "path";
+import fs from "fs";
+import { mkdir } from "fs/promises";
+
+interface ProfilePPIDBody {
+  id: string;
+  file: Blob & { name: string; type: string };
+}
+
+export default async function editImageProfilePPID(context: Context<{ body: ProfilePPIDBody }>) {
+  const { id, file } = context.body;
+
+  if (!file || !id) {
+    return {
+      success: false,
+      message: "File atau ID harus disertakan",
+    };
+  }
+
+  // Validasi ekstensi file
+  const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
+  if (!allowedTypes.includes(file.type)) {
+    return {
+      success: false,
+      message: "Tipe file tidak diizinkan. Hanya JPG, PNG, atau WEBP",
+    };
+  }
+
+  const bytes = await file.arrayBuffer();
+  const buffer = Buffer.from(bytes);
+  const filename = `${id}_${Date.now()}_${file.name}`;
+  const folderPath = path.resolve("public", "assets", "images", "ppid", "profile-ppid");
+  
+  try {
+    await mkdir(folderPath, { recursive: true });
+    
+    console.log('Folder path:', folderPath);
+    const filePath = path.join(folderPath, filename);
+    console.log('File path:', filePath);
+    
+    await writeFile(filePath, buffer);
+    
+    if (!fs.existsSync(filePath)) {
+      return {
+        success: false,
+        message: "Failed to write file to disk",
+      };
+    }
+    
+    const imageUrl = `/assets/images/ppid/profile-ppid/${filename}`;
+
+    // Hapus file lama (opsional, kalau mau bersih)
+    const oldData = await prisma.profilePPID.findUnique({ where: { id } });
+    if (oldData?.imageUrl) {
+      const oldPath = path.resolve("public", oldData.imageUrl.replace(/^\//, ""));
+      if (fs.existsSync(oldPath)) {
+        await unlink(oldPath).catch(() => {});
+      }
+    }
+
+    // Update DB
+    await prisma.profilePPID.update({
+      where: { id },
+      data: { imageUrl },
+    });
+
+    return {
+      success: true,
+      message: "Gambar berhasil diunggah",
+      url: imageUrl,
+    };
+  } catch (error) {
+    console.error('Error uploading file:', error);
+    return {
+      success: false,
+      message: "Gagal mengunggah gambar",
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/ppid/profile_ppid/find-by-id.ts

@@ -0,0 +1,33 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function profilePPIDFindById(context: Context) {
+  try {
+    const id = context?.params?.slugs?.[0];
+
+    // If no ID provided, get the first profile
+    if (!id) {
+      const data = await prisma.profilePPID.findFirst();
+      return {
+        success: true,
+        data,
+      };
+    }
+
+    const data = await prisma.profilePPID.findUniqueOrThrow({
+      where: { id },
+    });
+
+    return {
+      success: true,
+      data,
+    };
+  } catch (error) {
+    console.error("Error fetching profilePPID:", error);
+
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : "Unknown error",
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/ppid/profile_ppid/find-many.ts

@@ -1,9 +0,0 @@
-import prisma from "@/lib/prisma";
-
-export default async function profilePPIDFindMany() {
-    const res = await prisma.profilePPID.findMany();
-    return{
-        data: res
-    }
-}
-    

src/app/api/[[...slugs]]/_lib/ppid/profile_ppid/index.ts

@@ -1,14 +1,16 @@
 import Elysia, { t } from "elysia";
-import profilePPIDCreate from "./create";
-import profilePPIDFindMany from "./find-many";
+import profilePPIDFindById from "./find-by-id";
+import profilePPIDUpdate from "./update";
+import editImageProfilePPID from "./edit-img";
 
 const ProfilePPID = new Elysia({
     prefix: "/profileppid",
     tags: ["PPID/Profile PPID"]
 })
-    .get("/find-many", profilePPIDFindMany)
-    .post("/create", profilePPIDCreate, {
+    .get("/find-by-id", profilePPIDFindById)
+    .post("/update", profilePPIDUpdate, {
         body: t.Object({
+            id: t.String(),
             name: t.String(),
             biodata: t.String(),
             riwayat: t.String(),
@@ -16,6 +18,7 @@ const ProfilePPID = new Elysia({
             unggulan: t.String(),
         })
     })
+    .post("/edit-img", editImageProfilePPID)
 
 
 export default ProfilePPID;

src/app/api/[[...slugs]]/_lib/ppid/profile_ppid/update.ts

@@ -4,6 +4,7 @@ import { Context } from "elysia";
 
 type FormCreate = Prisma.ProfilePPIDGetPayload<{
     select: {
+        id: true;
         name: true;
         biodata: true;
         riwayat: true;
@@ -11,10 +12,13 @@ type FormCreate = Prisma.ProfilePPIDGetPayload<{
         unggulan: true;
     }
 }>
-export default async function profilePPIDCreate(context: Context) {
+export default async function profilePPIDUpdate(context: Context) {
     const body = context.body as FormCreate;
 
-    await prisma.profilePPID.create({
+    await prisma.profilePPID.update({
+        where: {
+            id: body.id
+        },
         data: {
             name: body.name,
             biodata: body.biodata,

src/app/api/[[...slugs]]/_lib/ppid/visi_misi_ppid/index.ts

@@ -1,7 +0,0 @@
-import Elysia from "elysia";
-import MisiPPID from "./misi_ppid";
-
-const VisiMisiPPID = new Elysia({ prefix: "/visimisippid", tags: ["PPID/Visi Misi PPID"] })
-.use(MisiPPID)
-
-export default VisiMisiPPID

src/app/api/[[...slugs]]/_lib/ppid/visi_misi_ppid/misi_ppid/create.ts

@@ -1,27 +0,0 @@
-import prisma from "@/lib/prisma";
-import { Prisma } from "@prisma/client";
-import { Context } from "elysia";
-
-type FormCreate = Prisma.MisiPPIDGetPayload<{
-    select: {
-        content: true;
-    }
-}>
-
-export default async function misiPPIDCreate(context: Context) {
-    const body = context.body as FormCreate;
-
-    await prisma.misiPPID.create({
-        data: {
-            content: body.content,
-        }
-    })
-
-    return {
-        success: true,
-        message: "Misi PPID Berhasil Dibuat",
-        data: {
-            ...body,
-        }
-    }
-}

src/app/api/[[...slugs]]/_lib/ppid/visi_misi_ppid/misi_ppid/delete.ts

@@ -1,17 +0,0 @@
-import prisma from "@/lib/prisma";
-import { Context } from "elysia";
-
-export async function misiPPIDDelete(context: Context) {
-    const id = context.params.id
-
-    await prisma.misiPPID.delete({
-        where: {
-            id: id
-        }
-    })
-
-    return {
-        success: true,
-        message: "Misi PPID Berhasil Dihapus",
-    }
-}

src/app/api/[[...slugs]]/_lib/ppid/visi_misi_ppid/misi_ppid/find-many.ts

@@ -1,8 +0,0 @@
-import prisma from "@/lib/prisma";
-
-export async function misiPPIDFindMany() {
-    const res = await prisma.misiPPID.findMany();
-    return {
-        data: res,
-    };
-}

src/app/api/[[...slugs]]/_lib/ppid/visi_misi_ppid/misi_ppid/index.ts

@@ -1,24 +0,0 @@
-import Elysia, { t } from "elysia";
-import { misiPPIDFindMany } from "./find-many";
-import misiPPIDCreate from "./create";
-import { misiPPIDDelete } from "./delete";
-import misiPPIDUpdate from "./update";
-
-const MisiPPID = new Elysia({
-    prefix: "/misippid",
-    tags: ["PPID/Visi Misi PPID/ Misi PPID"],
-})
-.get("/find-many", misiPPIDFindMany)
-.post("/create", misiPPIDCreate, {
-    body: t.Object({
-        content: t.String(),
-    })
-})
-.put("/update/:id", misiPPIDUpdate, {
-    body: t.Object({
-        content: t.String(),
-    })
-})
-.delete("/delete/:id", misiPPIDDelete)
-
-export default MisiPPID;

src/app/api/[[...slugs]]/_lib/ppid/visi_misi_ppid/misi_ppid/update.ts

@@ -1,29 +0,0 @@
-import prisma from "@/lib/prisma";
-import { Prisma } from "@prisma/client";
-import { Context } from "elysia";
-
-type FormUpdate = Prisma.MisiPPIDGetPayload<{
-    select: {
-        content: true;
-    }
-}>
-
-export default async function misiPPIDUpdate(context: Context) {
-    const id = context.params.id
-    const body = context.body as FormUpdate;
-
-    await prisma.misiPPID.update({
-        where: { id: id },
-        data: {
-            content: body.content,
-        }
-    })
-
-    return {
-        success: true,
-        message: "Misi PPID Berhasil Diupdate",
-        data: {
-            ...body,
-        }
-    }
-}

src/app/api/[[...slugs]]/_lib/ppid/visi_misi_ppid/visi_misi_ppid/find-by-id.ts

@@ -0,0 +1,33 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function visimisiPPIDFindById(context: Context) {
+    try {
+        const id = context?.params?.slugs?.[0];
+    
+        // If no ID provided, get the first profile
+        if (!id) {
+          const data = await prisma.visiMisiPPID.findFirst();
+          return {
+            success: true,
+            data,
+          };
+        }
+    
+        const data = await prisma.visiMisiPPID.findUniqueOrThrow({
+          where: { id },
+        });
+    
+        return {
+          success: true,
+          data,
+        };
+      } catch (error) {
+        console.error("Error fetching visiPPID:", error);
+    
+        return {
+          success: false,
+          message: error instanceof Error ? error.message : "Unknown error",
+        };
+      }
+}

src/app/api/[[...slugs]]/_lib/ppid/visi_misi_ppid/visi_misi_ppid/index.ts

@@ -0,0 +1,20 @@
+import Elysia from "elysia";
+import visimisiPPIDFindById from "./find-by-id";
+import visimisiPPIDUpdate from "./update";
+import { t } from "elysia";
+
+const VisiMisiPPID = new Elysia({
+    prefix: "/visimisippid",
+    tags: ["PPID/Visi Misi PPID"]
+})
+    .get("/find-by-id", visimisiPPIDFindById)
+    .post("/update", visimisiPPIDUpdate, {
+        body: t.Object({
+            id: t.String(),
+            misi: t.String(),
+            visi: t.String(),
+        })
+    })
+
+export default VisiMisiPPID
+    

src/app/api/[[...slugs]]/_lib/ppid/visi_misi_ppid/visi_misi_ppid/update.ts

@@ -0,0 +1,32 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.VisiMisiPPIDGetPayload<{
+    select: {
+        id: true;
+        misi: true;
+        visi: true;
+    }
+}>
+export default async function visimisiPPIDUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.visiMisiPPID.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            misi: body.misi,
+            visi: body.visi,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Visi PPID Berhasil Diupdate",
+        data: {
+            ...body,
+        }
+    }
+}

src/app/api/[[...slugs]]/route.ts

@@ -1,4 +1,5 @@
 import prisma from "@/lib/prisma";
+import { staticPlugin } from '@elysiajs/static'
 import cors, { HTTPMethod } from "@elysiajs/cors";
 import swagger from "@elysiajs/swagger";
 import { Elysia, t } from "elysia";
@@ -22,7 +23,7 @@ if (!process.env.WIBU_UPLOAD_DIR)
   throw new Error("WIBU_UPLOAD_DIR is not defined");
 
 const UPLOAD_DIR = path.join(ROOT, process.env.WIBU_UPLOAD_DIR);
-const UPLOAD_DIR_IMAGE = path.join(UPLOAD_DIR, "image");
+const UPLOAD_DIR_IMAGE = path.join(UPLOAD_DIR, "public", "assets", "images", "ppid", "profile-ppid");
 
 // create uploads dir
 fs.mkdir(UPLOAD_DIR, {
@@ -62,6 +63,10 @@ const Utils = new Elysia({
 
 const ApiServer = new Elysia()
   .use(swagger({ path: "/api/docs" }))
+  .use(staticPlugin({
+    prefix: '/', // biar bisa akses dari root URL
+    assets: './public'
+  }))
   .use(cors(corsConfig))
   .use(PPID)
   .use(Kesehatan)

src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx

@@ -1,50 +1,27 @@
+'use client'
+import stateDaftarInformasiPublik from '@/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
 import colors from '@/con/colors';
-import { Stack, Box, Text, Center, Image, TextInput, TableTd, TableTr, TableTbody, TableTh, TableThead, Table, ActionIcon } from '@mantine/core';
-import React from 'react';
+import { Box, Center, Image, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { IconDownload, IconSearch } from '@tabler/icons-react';
 
-const dataTable = [
-  {
-    id: 1,
-    nomer: '1',
-    jenis: "Peraturan Desa",
-    deskripsi: "Dokumen yang berisi kebijakan dan regulasi desa",
-    tanggal: "15 Januari 2024",
-    unduh: <IconDownload size={20} />
-  },
-  {
-    id: 2,
-    nomer: '2',
-    jenis: "Laporan Keuangan",
-    deskripsi: "Laporan Kegunaan anggaran desa secara transparan",
-    tanggal: "20 Januari 2024",
-    unduh: <IconDownload size={20} />
-  },
-  {
-    id: 3,
-    nomer: '3',
-    jenis: "Program & Kegiatan",
-    deskripsi: "Informasi mengenai program pembangunan & kegiatan desa",
-    tanggal: "30 Januari 2024",
-    unduh: <IconDownload size={20} />
-  },
-
-]
 function Page() {
-  const rows = dataTable.map((element) => (
-    <TableTr key={element.jenis}>
-      <TableTd ta={'center'}>{element.nomer}</TableTd>
-      <TableTd >{element.jenis}</TableTd>
-      <TableTd>{element.deskripsi}</TableTd>
-      <TableTd>{element.tanggal}</TableTd>
-      <TableTd ta={'center'}>
-        <ActionIcon c={colors['blue-button']} variant='transparent'>
-          {element.unduh}
-        </ActionIcon>
-      </TableTd>
-    </TableTr>
-  ))
+  const listData = useProxy(stateDaftarInformasiPublik.daftarInformasi)
+  useShallowEffect(() => {
+    listData.findMany.load()
+  }, [])
+  if (!listData.findMany.data) return <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Box px={{ base: 'md', md: 100 }}>
+      <Skeleton h={40} />
+    </Box>
+    <Skeleton h={40}/>
+    <Skeleton h={40}/>
+    <Box px={{ base: 'md', md: 100 }}>
+      <Skeleton h={40} />
+    </Box>
+  </Stack>
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -71,10 +48,18 @@ function Page() {
                 <TableTh ta={'center'}>Jenis Informasi</TableTh>
                 <TableTh ta={'center'}>Deskripsi</TableTh>
                 <TableTh ta={'center'}>Tanggal Publikasi</TableTh>
-                <TableTh ta={'center'}>Unduh</TableTh>
               </TableTr>
             </TableThead>
-            <TableTbody bg={colors['white-1']}>{rows}</TableTbody>
+            <TableTbody bg={colors['white-1']}>
+              {listData.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd ta={'center'}>{item.nomor}</TableTd>
+                  <TableTd>{item.jenisInformasi}</TableTd>
+                  <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
+                  <TableTd>{item.tanggal}</TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
           </Table>
         </Stack>
         <Text pt={20} fz={'h4'} fw={"bold"}>Kontak PPID</Text>

src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin/page.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import React, { useEffect, useState } from 'react';
+import { Box, Center, Flex, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Cell, Pie, PieChart } from 'recharts';
+import colors from '@/con/colors';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import stateGrafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
+
+function GrafikBerdasarkanJenisKelamin() {
+  const grafikBerdasarkanJenisKelamin = useProxy(stateGrafikBerdasarkanJenisKelamin.grafikBerdasarkanJenisKelamin)
+  const [mounted, setMounted] = useState(false);
+  const [donutData, setDonutData] = useState<any[]>([]);
+
+  useEffect(() => {
+    setMounted(true);
+  }, [])
+
+  const updateChartData = (data: any) => {
+    if (data && data.length > 0) {
+      const totalLaki = data.reduce((acc: number, cur: any) => acc + Number(cur.laki || 0), 0);
+      const totalPerempuan = data.reduce((acc: number, cur: any) => acc + Number(cur.perempuan || 0), 0);
+
+      setDonutData([
+        { name: 'Laki-laki', value: totalLaki, color: colors['blue-button'], key: 'laki-laki' },
+        { name: 'Perempuan', value: totalPerempuan, color: '#FF6384', key: 'perempuan' }
+      ]);
+    }
+  };
+
+  useShallowEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    await grafikBerdasarkanJenisKelamin.findMany.load();
+    if (grafikBerdasarkanJenisKelamin.findMany.data) {
+      updateChartData(grafikBerdasarkanJenisKelamin.findMany.data);
+    }
+  };
+
+  if(!grafikBerdasarkanJenisKelamin.findMany.data) return <Stack>
+    <Title pb={10} order={3}>Grafik Berdasarkan Jenis Kelamin Responden</Title>
+   <Skeleton h={500} />
+  </Stack>
+
+  return (
+    <Stack gap={"xl"}>
+            <Title pb={10} order={3}>Grafik Berdasarkan Jenis Kelamin Responden</Title>
+            {mounted && donutData.length > 0 && (
+              <Box style={{ width: '100%', height: 'auto', minHeight: 300 }}>
+                <Center>
+                  <PieChart
+                    width={1000} height={530}
+                    data={donutData}
+                  >
+
+                    <Pie
+                      dataKey="value"
+                      nameKey="name"
+                      data={donutData}
+                      innerRadius={120}
+                      outerRadius={230}
+                      label={true}
+                    >
+                      {donutData.map((entry, index) => (
+                        <Cell key={`cell-${index}`} fill={entry.color} />
+                      ))}
+                    </Pie>
+                  </PieChart>
+                </Center>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#FF6384'} w={20} h={20} />
+                  <Text>Perempuan: {donutData.find((entry) => entry.name === 'Perempuan')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={colors['blue-button']} w={20} h={20} />
+                  <Text>Laki-laki: {donutData.find((entry) => entry.name === 'Laki-laki')?.value}</Text>
+                </Flex>
+              </Box>
+            )}
+          </Stack>
+  );
+}
+
+export default GrafikBerdasarkanJenisKelamin;

src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_pilihan_responden/page.tsx

@@ -0,0 +1,96 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import stateGrafikResponden from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden';
+import colors from '@/con/colors';
+import { Stack, Title, Box, Center, Flex, Text, Skeleton } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import React, { useEffect, useState } from 'react';
+import { PieChart, Pie, Cell } from 'recharts';
+import { useProxy } from 'valtio/utils';
+
+function GrafikBerdasarkanResponden() {
+  const grafikBerdasarkanResponden = useProxy(stateGrafikResponden.grafikBerdasarkanResponden)
+  const [donutData, setDonutData] = useState<any[]>([]);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, [])
+
+  const updateChartData = (data: any) => {
+    if (data && data.length > 0) {
+      const totalSangatBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.sangatbaik || 0), 0);
+      const totalBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.baik || 0), 0);
+      const totalKurangBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.kurangbaik || 0), 0);
+      const totalTidakBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.tidakbaik || 0), 0);
+      setDonutData([
+        { name: 'sangatbaik', value: totalSangatBaik, color: colors['blue-button'], key: 'sangatbaik' },
+        { name: 'baik', value: totalBaik, color: '#10A85AFF', key: 'baik' },
+        { name: 'kurangbaik', value: totalKurangBaik, color: '#B3AA12FF', key: 'kurangbaik' },
+        { name: 'tidakbaik', value: totalTidakBaik, color: '#B21313FF', key: 'tidakbaik' }
+      ]);
+    }
+  };
+
+  useShallowEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    await grafikBerdasarkanResponden.findMany.load();
+    if (grafikBerdasarkanResponden.findMany.data) {
+      updateChartData(grafikBerdasarkanResponden.findMany.data);
+    }
+  };
+
+  if (!grafikBerdasarkanResponden.findMany.data) return <Stack>
+    <Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
+    <Skeleton h={500} />
+  </Stack>
+  return (
+    <Stack>
+      <Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
+      {mounted && donutData.length > 0 && (
+        <Box style={{ width: '100%', height: 'auto', minHeight: 300 }}>
+          <Center>
+            <PieChart
+              width={1000} height={530}
+              data={donutData}
+            >
+              <Pie
+                dataKey="value"
+                nameKey="name"
+                data={donutData}
+                innerRadius={120}
+                outerRadius={230}
+                label={true}
+              >
+                {donutData.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={entry.color} />
+                ))}
+              </Pie>
+            </PieChart>
+          </Center>
+          <Flex gap={"md"} align={"center"}>
+            <Box bg={colors['blue-button']} w={20} h={20} />
+            <Text>Sangat Baik: {donutData.find((entry) => entry.name === 'sangatbaik')?.value}</Text>
+          </Flex>
+          <Flex gap={"md"} align={"center"}>
+            <Box bg={'#10A85AFF'} w={20} h={20} />
+            <Text>Baik: {donutData.find((entry) => entry.name === 'baik')?.value}</Text>
+          </Flex>
+          <Flex gap={"md"} align={"center"}>
+            <Box bg={'#B3AA12FF'} w={20} h={20} />
+            <Text>Kurang Baik: {donutData.find((entry) => entry.name === 'kurangbaik')?.value}</Text>
+          </Flex>
+          <Flex gap={"md"} align={"center"}>
+            <Box bg={'#B21313FF'} w={20} h={20} />
+            <Text>Tidak Baik: {donutData.find((entry) => entry.name === 'tidakbaik')?.value}</Text>
+          </Flex>
+        </Box>
+      )}
+    </Stack>
+  );
+}
+
+export default GrafikBerdasarkanResponden;

src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur_responden/page.tsx

@@ -0,0 +1,97 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import stateGrafikBerdasarkanUmur from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanUmur';
+import colors from '@/con/colors';
+import { Stack, Title, Box, Center, Flex, Text, Skeleton } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import React, { useEffect, useState } from 'react';
+import { PieChart, Pie, Cell } from 'recharts';
+import { useProxy } from 'valtio/utils';
+
+function GrafikBerdasarakanUmur() {
+    const grafikBerdasarkanUmur = useProxy(stateGrafikBerdasarkanUmur.grafikBerdasarkanUmur)
+    const [donutData, setDonutData] = useState<any[]>([]);
+    const [mounted, setMounted] = useState(false);
+  
+    useEffect(() => {
+      setMounted(true);
+    }, []);
+  
+    const updateChartData = (data: any) => {
+      if (data && data.length > 0) {
+        const totalRemaja = data.reduce((acc: number, cur: any) => acc + Number(cur.remaja || 0), 0);
+        const totalDewasa = data.reduce((acc: number, cur: any) => acc + Number(cur.dewasa || 0), 0);
+        const totalOrangtua = data.reduce((acc: number, cur: any) => acc + Number(cur.orangtua || 0), 0);
+        const totalLansia = data.reduce((acc: number, cur: any) => acc + Number(cur.lansia || 0), 0);
+  
+        setDonutData([
+          { name: 'Remaja', value: totalRemaja, color: colors['blue-button'], key: 'remaja' },
+          { name: 'Dewasa', value: totalDewasa, color: '#D32711FF', key: 'dewasa' },
+          { name: 'Orangtua', value: totalOrangtua, color: '#B46B04FF', key: 'orangtua' },
+          { name: 'Lansia', value: totalLansia, color: '#038617FF', key: 'lansia' }
+        ]);
+      }
+    };
+  
+    useShallowEffect(() => {
+      fetchData();
+    }, []);
+  
+    const fetchData = async () => {
+      await grafikBerdasarkanUmur.findMany.load();
+      if (grafikBerdasarkanUmur.findMany.data) {
+        updateChartData(grafikBerdasarkanUmur.findMany.data);
+      }
+    }
+
+    if(!grafikBerdasarkanUmur.findMany.data) return <Stack>
+      <Title pb={10} order={3}>Grafik Berdasarkan Umur Responden</Title>
+      <Skeleton h={500} />
+    </Stack>
+  return (
+    <Stack>
+    <Title pb={10} order={3}>Grafik Berdasarkan Umur Responden</Title>
+    {mounted && donutData.length > 0 && (
+      <Box style={{ width: '100%', height: 'auto', minHeight: 300 }}>
+        <Center>
+          <PieChart
+            width={1000} height={530}
+            data={donutData}
+          >
+            <Pie
+              dataKey="value"
+              nameKey="name"
+              data={donutData}
+              innerRadius={120}
+              outerRadius={230}
+              label={true}
+            >
+              {donutData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color} />
+              ))}
+            </Pie>
+          </PieChart>
+        </Center>
+        <Flex gap={"md"} align={"center"}>
+          <Box bg={colors['blue-button']} w={20} h={20} />
+          <Text>17 - 25 tahun: {donutData.find((entry) => entry.name === 'remaja')?.value}</Text>
+        </Flex>
+        <Flex gap={"md"} align={"center"}>
+          <Box bg={'#D32711FF'} w={20} h={20} />
+          <Text>26 - 45 tahun: {donutData.find((entry) => entry.name === 'dewasa')?.value}</Text>
+        </Flex>
+        <Flex gap={"md"} align={"center"}>
+          <Box bg={'#B46B04FF'} w={20} h={20} />
+          <Text>46 - 60 tahun: {donutData.find((entry) => entry.name === 'orangtua')?.value}</Text>
+        </Flex>
+        <Flex gap={"md"} align={"center"}>
+          <Box bg={'#038617FF'} w={20} h={20} />
+          <Text>di atas 60 tahun: {donutData.find((entry) => entry.name === 'lansia')?.value}</Text>
+        </Flex>
+      </Box>
+    )}
+  </Stack>
+  );
+}
+
+export default GrafikBerdasarakanUmur;

src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/page.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import stateGrafikHasilKepuasanMasyarakat from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikHasilKepuasan';
+import colors from '@/con/colors';
+import { Box, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import React, { useEffect, useState } from 'react';
+import { BarChart, Tooltip, XAxis, YAxis, Legend, Bar } from 'recharts';
+import { useProxy } from 'valtio/utils';
+
+function GrafikHasilKepuasan() {
+  const grafikHasilKepuasan = useProxy(stateGrafikHasilKepuasanMasyarakat.grafikHasilKepuasanMasyarakat)
+  const [chartData, setChartData] = useState<any[]>([]);
+  const [mounted, setMounted] = useState(false);
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  useEffect(() => {
+    setMounted(true);
+  }, [])
+
+  useShallowEffect(() => {
+    const fetchData = async () => {
+      await grafikHasilKepuasan.findMany.load();
+      if (grafikHasilKepuasan.findMany.data && grafikHasilKepuasan.findMany.data.length > 0) {
+        setChartData(grafikHasilKepuasan.findMany.data);
+      }
+    };
+    fetchData();
+  }, []);
+
+  if(!grafikHasilKepuasan.findMany.data) return <Stack>
+    <Title pb={10} order={3}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
+    <Skeleton h={500} />
+  </Stack>
+
+  return (
+    <Stack gap={"xl"}>
+      <Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
+        Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik
+      </Text>
+      <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+      {mounted && chartData.length > 0 && (
+        <BarChart width={isMobile ? 300 : isTablet ? 400 : 450} height={380} data={chartData} >
+          <XAxis dataKey="label" />
+          <YAxis />
+          <Tooltip />
+          <Legend style={{justifyContent: 'center'}} />
+          <Bar dataKey="kepuasan" fill={colors['blue-button']} name="Kepuasan" />
+        </BarChart>
+      )}
+      </Box>
+    </Stack>
+  );
+}
+
+export default GrafikHasilKepuasan;

src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/page.tsx

@@ -1,38 +1,11 @@
 import colors from '@/con/colors';
-import { Stack, Box, Paper, Text, Center, Flex, ColorSwatch, } from '@mantine/core';
-import React from 'react';
+import { Box, Paper, Stack, Text } from '@mantine/core';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { BarChart, DonutChart } from '@mantine/charts';
+import GrafikBerdasarkanJenisKelamin from './grafik_berdasarkan_jenis_kelamin/page';
+import GrafikBerdasarkanResponden from './grafik_berdasarkan_pilihan_responden/page';
+import GrafikBerdasarakanUmur from './grafik_berdasarkan_umur_responden/page';
+import GrafikHasilKepuasan from './grafik_hasil_kepuasan_masyarakat/page';
 
-const dataBar = [
-  { pelayanan: 'Persyaratan', kepuasan: 90 },
-  { pelayanan: 'Prosedur', kepuasan: 98 },
-  { pelayanan: 'Kecepatan', kepuasan: 92 },
-  { pelayanan: 'Biaya / Tarif', kepuasan: 85 },
-  { pelayanan: 'Produk Layanan', kepuasan: 89 },
-  { pelayanan: 'Kompetensi Pelaksana', kepuasan: 91 },
-  { pelayanan: 'Perilaku Pelaksana', kepuasan: 90 },
-  { pelayanan: 'Penanganan Pengaduan', kepuasan: 93 },
-  { pelayanan: 'Sarana dan Prasarana', kepuasan: 91 },
-]
-const dataJenisKelamin = [
-  { name: 'Perempuan', value: 90, color: '#3291CB' },
-  { name: 'Laki - Laki', value: 10, color: colors['blue-button'] },
-]
-const dataResponden = [
-  { name: 'Sangat Baik', value: 60, color: 'green' },
-  { name: 'Baik', value: 20, color: 'blue' },
-  { name: 'Kurang Baik', value: 10, color: 'orange' },
-  { name: 'Tidak Baik', value: 10, color: 'red' },
-
-]
-const dataUmur = [
-  { name: '17 - 25 tahun', value: 60, color: 'green' },
-  { name: '26 - 45 tahun', value: 20, color: 'blue' },
-  { name: '46 - 60 tahun', value: 10, color: 'orange' },
-  { name: 'di atas 60 tahun', value: 10, color: 'red' },
-
-]
 function Page() {
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
@@ -48,116 +21,23 @@ function Page() {
         </Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
-        <Paper p={"xl"} bg={colors['white-trans-1']}>
-          <Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
-            Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik
-          </Text>
-          <BarChart
-            py={30}
-            h={500}
-            data={dataBar}
-            dataKey='pelayanan'
-            orientation='vertical'
-            yAxisProps={{ width: 80 }}
-            barProps={{ radius: 10 }}
-            series={[{ name: 'kepuasan', color: colors['blue-button'] }]}
-          />
+        <Paper bg={colors['white-1']} p={'xl'}>
+          <GrafikHasilKepuasan />
         </Paper>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Paper p={"xl"} bg={colors['white-trans-1']}>
-          <Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
-            Grafik Berdasarkan Jenis Kelamin Responden
-          </Text>
-          <Center>
-            <DonutChart size={250} thickness={30} withLabelsLine labelsType="percent" withLabels data={dataJenisKelamin} />
-          </Center>
-          <Flex gap={"md"} justify={"center"} align={"center"}>
-            <Box>
-              <Flex gap={10} align={"center"}>
-                <Text>Perempuan</Text>
-                <ColorSwatch color='#3291CB' />
-              </Flex>
-            </Box>
-            <Box>
-              <Flex gap={10} align={"center"}>
-                <Text>Laki - Laki</Text>
-                <ColorSwatch color={colors['blue-button']} />
-              </Flex>
-            </Box>
-          </Flex>
+         <GrafikBerdasarkanJenisKelamin/>
         </Paper>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Paper p={"xl"} bg={colors['white-trans-1']}>
-          <Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
-            Grafik Berdasarkan Pilihan Responden
-          </Text>
-          <Center>
-            <DonutChart size={250} thickness={30} withLabelsLine labelsType="percent" withLabels data={dataResponden} />
-          </Center>
-          <Flex gap={"md"} justify={"center"} align={"center"}>
-            <Box>
-              <Flex gap={{ base: 5, md: 10 }} align={"center"}>
-                <Text fz={{ base: 'xs', md: 'lg' }}>Sangat Baik</Text>
-                <ColorSwatch color='#40BE57' />
-              </Flex>
-            </Box>
-            <Box>
-              <Flex gap={{ base: 5, md: 10 }} align={"center"}>
-                <Text fz={{ base: 'xs', md: 'lg' }}>Baik</Text>
-                <ColorSwatch color={'#228AE7'} />
-              </Flex>
-            </Box>
-            <Box>
-              <Flex gap={{ base: 5, md: 10 }} align={"center"}>
-                <Text fz={{ base: 'xs', md: 'lg' }}>Kurang Baik</Text>
-                <ColorSwatch color={'#FD7F12'} />
-              </Flex>
-            </Box>
-            <Box>
-              <Flex gap={{ base: 5, md: 10 }} align={"center"}>
-                <Text fz={{ base: 'xs', md: 'lg' }}>Tidak Baik</Text>
-                <ColorSwatch color={'#F85253'} />
-              </Flex>
-            </Box>
-          </Flex>
+        <GrafikBerdasarkanResponden/>
         </Paper>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Paper p={"xl"} bg={colors['white-trans-1']}>
-          <Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
-            Grafik Berdasarkan Umur Responden
-          </Text>
-          <Center>
-            <DonutChart size={250} thickness={30} withLabelsLine labelsType="percent" withLabels data={dataUmur} />
-          </Center>
-          <Flex gap={"md"} justify={"center"} align={"center"}>
-            <Box>
-              <Flex gap={{ base: 0, md: 10 }} align={"center"}>
-                <Text fz={{ base: 'xs', md: 'lg' }}>17 – 25 tahun</Text>
-                <ColorSwatch color='#40BE57' />
-              </Flex>
-            </Box>
-            <Box>
-              <Flex gap={{ base: 0, md: 10 }} align={"center"}>
-                <Text fz={{ base: 'xs', md: 'lg' }}>26 – 45 tahun</Text>
-                <ColorSwatch color={'#228AE7'} />
-              </Flex>
-            </Box>
-            <Box>
-              <Flex gap={{ base: 0, md: 10 }} align={"center"}>
-                <Text fz={{ base: 'xs', md: 'lg' }}>46 – 60 tahun</Text>
-                <ColorSwatch color={'#FD7F12'} />
-              </Flex>
-            </Box>
-            <Box>
-              <Flex gap={{ base: 0, md: 10 }} align={"center"}>
-                <Text fz={{ base: 'xs', md: 'lg' }}>di atas 60 tahun</Text>
-                <ColorSwatch color={'#F85253'} />
-              </Flex>
-            </Box>
-          </Flex>
+       <GrafikBerdasarakanUmur/>
         </Paper>
       </Box>
     </Stack>

src/app/darmasaba/(pages)/ppid/permohonan-informasi-publik/jenis_infromasi/jenisInformasiSelector.tsx

@@ -0,0 +1,48 @@
+// components/jenisInformasiSelector.tsx
+'use client';
+import { Skeleton, Group, Select } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Prisma } from '@prisma/client';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import statePermohonanInformasi from '@/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
+
+export default function JenisInformasiSelector({ onChange }: {
+  onChange: (value: Prisma.JenisInformasiDimintaGetPayload<{ 
+    select: { 
+      id: true;
+      name: true 
+    } 
+  }>) => void;
+}) {
+  const jenisInformasiState = useProxy(statePermohonanInformasi);
+
+  useShallowEffect(() => {
+    jenisInformasiState.jenisInformasiDiminta.findMany.load();
+  }, []);
+
+  if (!jenisInformasiState.jenisInformasiDiminta.findMany.data) {
+    return <Skeleton h={40} />;
+  }
+  
+  // Add a check for data before mapping
+  const data = jenisInformasiState.jenisInformasiDiminta.findMany.data;
+  if (!data) return <Skeleton h={40} />;
+  
+  return (
+    <Group>
+      <Select
+        placeholder='pilih jenis informasi'
+        label='Jenis Informasi'
+        data={data.map((item) => ({
+          value: item.id,
+          label: item.name,
+        }))}
+        onChange={(v) => {
+          const selectedData = data.find((item) => item.id === v);
+          if (selectedData) onChange(selectedData);
+        }}
+      />
+    </Group>
+  );
+}

src/app/darmasaba/(pages)/ppid/permohonan-informasi-publik/memperoleh_informasi/memperolehInfromasi.tsx

@@ -0,0 +1,46 @@
+import statePermohonanInformasi from '@/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
+import { Group, Select, Skeleton } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Prisma } from '@prisma/client';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+
+function MemperolehInformasi({ onChange }: {
+  onChange: (value: Prisma.CaraMemperolehInformasiGetPayload<{
+    select: {
+      id: true,
+      name: true
+    }
+  }>) => void
+}) {
+  const memperolehInformasiState = useProxy(statePermohonanInformasi)
+  
+  useShallowEffect(() => {
+    memperolehInformasiState.caraMemperolehInformasi.findMany.load()
+  }, [])
+
+  if (!memperolehInformasiState.caraMemperolehInformasi.findMany.data) 
+    return <Skeleton h={40} />
+
+  const data = memperolehInformasiState.caraMemperolehInformasi.findMany.data;
+  if (!data) return <Skeleton h={40} />
+
+  return (
+    <Group>
+      <Select
+        placeholder='pilih cara memperoleh informasi'
+        label={"Cara Memperoleh Informasi"}
+        data={data.map((item) => ({
+          value: item.id,
+          label: item.name,
+        }))}
+        onChange={(v) => {
+          const selectedData = data.find((item) => item.id === v);
+          if (selectedData) onChange(selectedData);
+        }}
+      />
+    </Group>
+  );
+}
+
+export default MemperolehInformasi;

src/app/darmasaba/(pages)/ppid/permohonan-informasi-publik/page.tsx

@@ -1,123 +1,39 @@
 'use client'
+import statePermohonanInformasi from '@/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
 import colors from '@/con/colors';
-import { ActionIcon, Box, Button, Center, Checkbox, Combobox, ComboboxOption, Group, Input, InputBase, Paper, SimpleGrid, Stack, Text, Textarea, TextInput, useCombobox } from '@mantine/core';
+import { ActionIcon, Box, Button, Center, Checkbox, Group, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import { IconDownload } from '@tabler/icons-react';
-import BackButton from '../../desa/layanan/_com/BackButto';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import JenisInformasiSelector from './jenis_infromasi/jenisInformasiSelector';
+import MemperolehInformasi from './memperoleh_informasi/memperolehInfromasi';
+import MemperolehSalinan from './salinan_informasi/salinanInformasi';
 
 const data = [
-  {
-    id: 1,
-    number: '1',
-    title: "Langkah 1",
-    desc: "Pemohon informasi publik mengajukan permohonan informasi kepada badan publik baik langsung maupun melalui surat elektronik",
-  },
-  {
-    id: 2,
-    number: '2',
-    title: "Langkah 2",
-    desc: "Isi formulir permohonan informasi dengan data diri (nama, alamat, telepon), jenis, format, dan cara penyampaian informasi, serta lampiran fotokopi kartu identitas.",
-  },
-  {
-    id: 3,
-    number: '3',
-    title: "Langkah 3",
-    desc: "PPID akan memproses permohonan sesuai dengan ketentuan",
-  },
-  {
-    id: 4,
-    number: '4',
-    title: "Langkah 4",
-    desc: "Petugas PPID menyampaikan informasi sesuai permohonan kepada pemohon informasi.",
-  },
-]
+  { id: 1, number: '1', title: "Langkah 1", desc: "Pemohon informasi publik mengajukan permohonan informasi kepada badan publik baik langsung maupun melalui surat elektronik" },
+  { id: 2, number: '2', title: "Langkah 2", desc: "Isi formulir permohonan informasi dengan data diri (nama, alamat, telepon), jenis, format, dan cara penyampaian informasi, serta lampiran fotokopi kartu identitas." },
+  { id: 3, number: '3', title: "Langkah 3", desc: "PPID akan memproses permohonan sesuai dengan ketentuan" },
+  { id: 4, number: '4', title: "Langkah 4", desc: "Petugas PPID menyampaikan informasi sesuai permohonan kepada pemohon informasi." },
+];
 
-const jenisInformasi = [
-  {
-    id: 1,
-    jenis: 'Keuangan Desa'
-  },
-  {
-    id: 2,
-    jenis: 'Pembangunan Desa'
-  },
-  {
-    id: 3,
-    jenis: 'Data Demografi'
-  },
-  {
-    id: 4,
-    jenis: 'Lainnya'
-  },
-]
-
-const memperolehInformasi = [
-  {
-    id: 1,
-    jenis: 'Melihat/Membaca/Mendengarkan/Mencatat'
-  },
-  {
-    id: 2,
-    jenis: 'Mendapatkan Salinan Informasi (Hardcopy)'
-  },
-  {
-    id: 3,
-    jenis: 'Mendapatkan Salinan Informasi (Softcopy)'
-  }
-]
-
-const mendapatkanInformasi = [
-  {
-    id: 1,
-    jenis: 'Mengambil Langsung'
-  },
-  {
-    id: 2,
-    jenis: 'Dikirim via Post'
-  },
-  {
-    id: 3,
-    jenis: 'Dikirim via Email'
-  }
-]
 function Page() {
-  const combobox = useCombobox({
-    onDropdownClose: () => combobox.resetSelectedOption(),
-  });
+  const permohonanInformasiPublikState = useProxy(statePermohonanInformasi);
+  const router = useRouter();
 
-  const combobox2 = useCombobox({
-    onDropdownClose: () => combobox2.resetSelectedOption(),
-  });
+  const submitForms = () => {
+    const { create } = permohonanInformasiPublikState.statepermohonanInformasiPublik;
 
-  const combobox3 = useCombobox({
-    onDropdownClose: () => combobox3.resetSelectedOption(),
-  });
+    if (create.form.name && create.form.nik && create.form.notelp && create.form.alamat && create.form.email &&
+      create.form.jenisInformasiDimintaId && create.form.caraMemperolehInformasiId && create.form.caraMemperolehSalinanInformasiId) {
+      create.create();
+      router.push('/darmasaba/permohonan/berhasil');
+    } else {
+      console.log("Validasi gagal, form tidak lengkap");
+      // Display error message to user
+    }
+  };
 
-  const [value, setValue] = useState<string | null>(null);
-  const [value2, setValue2] = useState<string | null>(null);
-  const [value3, setValue3] = useState<string | null>(null);
-
-
-
-  const options = jenisInformasi.map((item) => (
-    <ComboboxOption value={item.jenis} key={item.id}>
-      {item.jenis}
-    </ComboboxOption>
-  ))
-
-  const options2 = memperolehInformasi.map((item) => (
-    <ComboboxOption value={item.jenis} key={item.id}>
-      {item.jenis}
-    </ComboboxOption>
-  ))
-
-  const options3 = mendapatkanInformasi.map((item) => (
-    <ComboboxOption value={item.jenis} key={item.id}>
-      {item.jenis}
-    </ComboboxOption>
-  ))
-  const router = useRouter()
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -130,33 +46,20 @@ function Page() {
         <Stack gap={'lg'}>
           <Paper p={"xl"} bg={colors['white-trans-1']}>
             <Text pb={30} ta={'center'} fw={"bold"} fz={{ base: 'h3', md: 'h2' }}>Tata Cara Permohonan</Text>
-            <SimpleGrid
-              pb={30}
-              cols={{
-                base: 1,
-                md: 2,
-                lg: 3,
-                xl: 4
-              }}>
-              {data.map((v, k) => {
-                return (
-                  <Paper key={k} p={"xl"} bg={colors['blue-button']}>
-                    <Stack justify='space-between'>
-                      <Center>
-                        <ActionIcon bg={colors['white-1']} radius={150} size={50}>
-                          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h3", md: "h2" }}>{v.number}</Text>
-                        </ActionIcon>
-                      </Center>
-                      <Text ta={"center"} c={colors['white-1']} fw={"bold"} fz={"h3"}>
-                        {v.title}
-                      </Text>
-                      <Text ta={"center"} c={colors['white-1']} fz={'h4'}>
-                        {v.desc}
-                      </Text>
-                    </Stack>
-                  </Paper>
-                )
-              })}
+            <SimpleGrid pb={30} cols={{ base: 1, md: 2, lg: 3, xl: 4 }}>
+              {data.map((v, k) => (
+                <Paper key={k} p={"xl"} bg={colors['blue-button']}>
+                  <Stack justify='space-between'>
+                    <Center>
+                      <ActionIcon bg={colors['white-1']} radius={150} size={50}>
+                        <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h3", md: "h2" }}>{v.number}</Text>
+                      </ActionIcon>
+                    </Center>
+                    <Text ta={"center"} c={colors['white-1']} fw={"bold"} fz={"h3"}>{v.title}</Text>
+                    <Text ta={"center"} c={colors['white-1']} fz={'h4'}>{v.desc}</Text>
+                  </Stack>
+                </Paper>
+              ))}
             </SimpleGrid>
             <Center pb={30}>
               <Button fz={"h5"} bg={colors['blue-button']} leftSection={<IconDownload size={20} color={colors['white-1']} />}>
@@ -165,132 +68,45 @@ function Page() {
             </Center>
             <Group justify='center'>
               <Paper p={'xl'} bg={colors['white-1']}>
-                <Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>Formulir Permohonan Informasi</Text>
-                <TextInput
-                  styles={{ input: { padding: 20 } }}
-                  py={10}
-                  placeholder='Nama Lengkap'
-                />
-                <TextInput
-                  styles={{ input: { padding: 20 } }}
-                  placeholder='NIK'
-                />
-                <TextInput
-                  styles={{ input: { padding: 20 } }}
-                  py={10}
-                  placeholder='No.Telepon'
-                />
-                <TextInput
-                  styles={{ input: { padding: 20 } }}
-                  placeholder="Alamat"
-                />
-                <TextInput
-                  py={10}
-                  styles={{ input: { padding: 20 } }}
-                  placeholder="Email"
-                />
-                <TextInput
-                  styles={{ input: { padding: 20 } }}
-                  placeholder="Alamat"
-                />
-                {/* ComboBox */}
-                <Box py={10}>
-                  <Text fz={'sm'}>Jenis Informasi yang diminta</Text>
-                  <Combobox
-                    store={combobox}
-                    withinPortal={false}
-                    onOptionSubmit={(val) => {
-                      setValue(val);
-                      combobox.closeDropdown();
+                <Stack gap={"xs"}>
+                  <Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>Formulir Permohonan Informasi</Text>
+                  <TextInput label="Nama Lengkap" placeholder="masukkan nama lengkap" onChange={(val) => {
+                    permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.name = val.target.value;
+                  }} />
+                  <TextInput label="NIK" placeholder="masukkan NIK" onChange={(val) => {
+                    permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.nik = val.target.value;
+                  }} />
+                  <TextInput label="No.Telp" placeholder="masukkan no telp" onChange={(val) => {
+                    permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.notelp = val.target.value;
+                  }} />
+                  <TextInput label="Alamat" placeholder="masukkan alamat" onChange={(val) => {
+                    permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.alamat = val.target.value;
+                  }} />
+                  <TextInput label="Email" placeholder="masukkan email" onChange={(val) => {
+                    permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.email = val.target.value;
+                  }} />
+                  <JenisInformasiSelector
+                    onChange={(val) => {
+                      permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.jenisInformasiDimintaId = val.id;
                     }}
-                  >
-                    <Combobox.Target>
-                      <InputBase
-                        component="button"
-                        type="button"
-                        pointer
-                        rightSection={<Combobox.Chevron />}
-                        onClick={() => combobox.toggleDropdown()}
-                        rightSectionPointerEvents="none"
-                      >
-                        {value || <Input.Placeholder>--Pilih Jenis Informasi--</Input.Placeholder>}
-                      </InputBase>
-                    </Combobox.Target>
-
-                    <Combobox.Dropdown>
-                      <Combobox.Options>{options}</Combobox.Options>
-                    </Combobox.Dropdown>
-                  </Combobox>
-                </Box>
-                <Textarea
-                  placeholder='Tujuan Penggunaan Informasi'
-                />
-                {/* ComboBox2 */}
-                <Box py={10}>
-                  <Text fz={'sm'}>Cara Memperoleh Informasi</Text>
-                  <Combobox
-                    store={combobox2}
-                    withinPortal={false}
-                    onOptionSubmit={(val) => {
-                      setValue2(val);
-                      combobox2.closeDropdown();
-                    }}
-                  >
-                    <Combobox.Target>
-                      <InputBase
-                        component="button"
-                        type="button"
-                        pointer
-                        rightSection={<Combobox.Chevron />}
-                        onClick={() => combobox2.toggleDropdown()}
-                        rightSectionPointerEvents="none"
-                      >
-                        {value2 || <Input.Placeholder>--Pilih Cara Memperoleh--</Input.Placeholder>}
-                      </InputBase>
-                    </Combobox.Target>
-
-                    <Combobox.Dropdown>
-                      <Combobox.Options>{options2}</Combobox.Options>
-                    </Combobox.Dropdown>
-                  </Combobox>
-                </Box>
-                {/* ComboBox3 */}
-                <Box pb={10}>
-                  <Text fz={'sm'}>Cara Mendapatkan Salinan Informasi</Text>
-                  <Combobox
-                    store={combobox3}
-                    withinPortal={false}
-                    onOptionSubmit={(val) => {
-                      setValue3(val);
-                      combobox3.closeDropdown();
-                    }}
-                  >
-                    <Combobox.Target>
-                      <InputBase
-                        component="button"
-                        type="button"
-                        pointer
-                        rightSection={<Combobox.Chevron />}
-                        onClick={() => combobox3.toggleDropdown()}
-                        rightSectionPointerEvents="none"
-                      >
-                        {value3 || <Input.Placeholder>--Pilih Cara Mendapatkan--</Input.Placeholder>}
-                      </InputBase>
-                    </Combobox.Target>
-
-                    <Combobox.Dropdown>
-                      <Combobox.Options>{options3}</Combobox.Options>
-                    </Combobox.Dropdown>
-                  </Combobox>
-                </Box>
-                <Box pb={10}>
-                  <Checkbox
-                    label="Saya menyatakan bahwa informasi yang saya berikan adalah benar dan akan menggunakan informasi yang diminta"
                   />
-                </Box>
-                <Button onClick={() => router.push('/darmasaba/permohonan/berhasil')} bg={"green"} fullWidth>
-                  Kirim Permohonan
-                </Button>
+                  <MemperolehInformasi 
+                    onChange={(val) => {
+                      permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.caraMemperolehInformasiId = val.id;
+                    }} 
+                  />
+                  <MemperolehSalinan 
+                    onChange={(val) => {
+                      permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.caraMemperolehSalinanInformasiId = val.id;
+                    }} 
+                  />
+                  <Box py={10}>
+                    <Checkbox label="Saya menyatakan bahwa informasi yang saya berikan adalah benar dan akan menggunakan informasi yang diminta" />
+                  </Box>
+                  <Group>
+                    <Button bg={colors['blue-button']} onClick={submitForms}>Kirim Permohonan</Button>
+                  </Group>
+                </Stack>
               </Paper>
             </Group>
           </Paper>
@@ -300,4 +116,4 @@ function Page() {
   );
 }
 
-export default Page;
+export default Page;

src/app/darmasaba/(pages)/ppid/permohonan-informasi-publik/salinan_informasi/salinanInformasi.tsx

@@ -0,0 +1,43 @@
+import statePermohonanInformasi from '@/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
+import { Skeleton, Group, Select } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Prisma } from '@prisma/client';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+
+function MemperolehSalinan({ onChange }: {
+  onChange: (value: Prisma.CaraMemperolehSalinanInformasiGetPayload<{
+    select: {
+      id: true,
+      name: true
+    }
+  }>) => void
+}) {
+  const memperolehSalinanInformasiState = useProxy(statePermohonanInformasi)
+  useShallowEffect(() => {
+    memperolehSalinanInformasiState.caraMemperolehSalinanInformasi.findMany.load()
+  }, [])
+
+  if (!memperolehSalinanInformasiState.caraMemperolehSalinanInformasi.findMany.data) return <Skeleton h={40} />
+
+  const data = memperolehSalinanInformasiState.caraMemperolehSalinanInformasi.findMany.data
+  if (!data) return <Skeleton h={40} />
+
+  return (
+    <Group>
+      <Select
+        placeholder='pilih cara memperoleh salinan informasi'
+        label={'Cara Memperoleh Salinan Informasi'}
+        data={data.map((item) => ({
+          value: item.id,
+          label: item.name,
+        }))}
+        onChange={(v) => {
+          const selectedData = data.find((item) => item.id === v);
+          if (selectedData) onChange(selectedData);
+        }}
+      />
+    </Group>
+  );
+}
+export default MemperolehSalinan;

src/app/darmasaba/(pages)/ppid/permohonan-keberatan-informasi-publik/page.tsx

@@ -1,9 +1,12 @@
 'use client'
+import permohonanKeberatanInformasi from '@/app/admin/(dashboard)/_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi';
+import { PPIDTextEditor } from '@/app/admin/(dashboard)/ppid/_com/PPIDTextEditor';
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import { IconFileCheck, IconForms, IconHourglassOff, IconPhoneRinging } from '@tabler/icons-react';
-import BackButton from '../../desa/layanan/_com/BackButto';
 import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../desa/layanan/_com/BackButto';
 
 const data = [
     {
@@ -32,6 +35,15 @@ const data = [
     },
 ]
 function Page() {
+    const stateKeberatan = useProxy(permohonanKeberatanInformasi)
+    const submit = () => {
+        if (stateKeberatan.create.form.name && stateKeberatan.create.form.email && stateKeberatan.create.form.notelp && stateKeberatan.create.form.alasan) {
+            stateKeberatan.create.create()
+            router.push('/darmasaba/permohonan/berhasil')
+        } else {
+            console.log("Validasi gagal, form tidak lengkap")
+        }
+    }
     const router = useRouter();
     return (
         <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
@@ -76,33 +88,41 @@ function Page() {
                         </SimpleGrid>
                         <Group justify='center'>
                             <Paper p={'xl'} bg={colors['white-1']}>
-                                <Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>Formulir Permohonan Keberatan</Text>
-                                <TextInput
-                                    label='Nama'
-                                    styles={{ input: { padding: 20 } }}
-                                    py={10}
-                                    placeholder='Masukkan nama lengkap'
-                                />
-                                <TextInput
-                                    label='Email'
-                                    styles={{ input: { padding: 20 } }}
-                                    placeholder='Masukkan email'
-                                />
-                                <TextInput
-                                    label='Nomor Telepon'
-                                    styles={{ input: { padding: 20 } }}
-                                    py={10}
-                                    placeholder='Masukkan nomor telepon'
-                                />
-                                <Textarea
-                                    pb={20}
-                                    label='Alasan Keberatan'
-                                    styles={{ input: { padding: 20 } }}
-                                    placeholder="Alasan keberatan"
-                                />
-                                <Button onClick={() => router.push('/darmasaba/permohonan/berhasil')} bg={"green"} fullWidth>
-                                    Kirim Permohonan
-                                </Button>
+                                <Stack gap={"xs"}>
+                                    <Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>Formulir Permohonan Keberatan</Text>
+                                    <TextInput
+                                        label="Nama"
+                                        placeholder="masukkan nama lengkap"
+                                        onChange={(val) => {
+                                            stateKeberatan.create.form.name = val.target.value
+                                        }}
+                                    />
+                                    <TextInput
+                                        label="Email"
+                                        placeholder="masukkan email"
+                                        onChange={(val) => {
+                                            stateKeberatan.create.form.email = val.target.value
+                                        }}
+                                    />
+                                    <TextInput
+                                        label="Nomor Telepon"
+                                        placeholder="masukkan nomor telepon"
+                                        onChange={(val) => {
+                                            stateKeberatan.create.form.notelp = val.target.value
+                                        }}
+                                    />
+                                    <Text fz={"sm"}>Alasan Permohonan Keberatan</Text>
+                                    <PPIDTextEditor
+                                        showSubmit={false}
+                                        onChange={(val) => {
+                                            stateKeberatan.create.form.alasan = val
+                                          }}
+                                          
+                                    />
+                                    <Group>
+                                        <Button onClick={submit} bg={'green'}>Kirim Permohonan</Button>
+                                    </Group>
+                                </Stack>
                             </Paper>
                         </Group>
                         <Text pt={20} ta={"center"} fz={'h3'} fw={"bold"}>Kontak PPID</Text>

src/app/darmasaba/(pages)/ppid/profile-ppid/page.tsx

@@ -1,9 +1,37 @@
+'use client'
+import stateProfilePPID from '@/app/admin/(dashboard)/_state/ppid/profile_ppid/profile_PPID';
 import colors from '@/con/colors';
-import { Stack, Box, Text, Paper, Flex, Image, Divider, Center, SimpleGrid, List, ListItem } from '@mantine/core';
-import React from 'react';
+import { Box, Center, Divider, Flex, Image, List, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
+  const allList = useProxy(stateProfilePPID)
+  useShallowEffect(() => {
+    allList.findById.load("1") // Assuming "1" is your default ID, adjust as needed
+  }, [])
+
+  if (!allList.findById.data) return <Stack bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Box px={{ base: 'md', md: 100 }}>
+      <Skeleton style={{backgroundColor: colors.Bg}} h={40} />
+    </Box>
+    <Box px={{ base: 'md', md: 100 }}>
+      <Skeleton h={80} />
+    </Box>
+    <Box px={{ base: "md", md: 100 }}>
+      <Paper p={"xl"} bg={colors['white-trans-1']}>
+        {Array.from({ length: 10 }).map((v, k) =>
+          <Skeleton key={k} h={40} />
+        )}
+      </Paper>
+    </Box>
+  </Stack>
+
+  const dataArray = Array.isArray(allList.findById.data)
+    ? allList.findById.data
+    : [allList.findById.data];
+
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -14,101 +42,78 @@ function Page() {
           Profil Singkat PPID Desa Darmasaba
         </Text>
       </Box>
-      <Box px={{ base: "md", md: 100 }}>
-        <Paper p={"xl"} bg={colors['white-trans-1']}>
-          <Box px={{ base: "md", md: 100 }}>
-            <Flex align={"center"} gap={50}>
-              <Image src={"/api/img/darmasaba-icon.png"} h={{ base: 80, md: 150 }} alt='' />
-              <Text fz={{ base: "1.4rem", md: "2rem", lg: "2.5rem", xl: "3rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
-            </Flex>
-          </Box>
-          <Divider my={"md"} />
-          {/* biodata perbekel */}
-          <Box px={{base: 0, md: 50}} pb={30}>
-            <SimpleGrid
-              cols={{
-                base: 1,
-                md: 1,
-                lg: 1,
-                xl: 2,
-              }}
-            >
-              <Box px={{ base: 0, md: 50 }}>
-                <Paper bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-                  <Stack gap={0}>
-                    <Center>
-                      <Image pt={{ base: 0, md: 90 }} src={"/api/img/perbekel.png"} w={{ base: 250, md: 355 }} alt='' />
-                    </Center>
-                    <Paper
-                      bg={colors['blue-button']}
-                      py={30}
-                      className="glass3"
-                      px={{ base: 20, md: 20 }}
+      {dataArray.map((item) => (
+        <Box key={item.id} px={{ base: "md", md: 100 }}>
+          <Paper p={"xl"} bg={colors['white-trans-1']}>
+            <Box px={{ base: "md", md: 100 }}>
+              <Flex align={"center"} gap={50}>
+                <Image src={"/api/img/darmasaba-icon.png"} h={{ base: 80, md: 150 }} alt='' />
+                <Text fz={{ base: "1.4rem", md: "2rem", lg: "2.5rem", xl: "3rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
+              </Flex>
+            </Box>
+            <Divider my={"md"} />
+            {/* biodata perbekel */}
+            <Box px={{ base: 0, md: 50 }} pb={30}>
+              <SimpleGrid
+                cols={{
+                  base: 1,
+                  md: 1,
+                  lg: 1,
+                  xl: 2,
+                }}
+              >
+                <Box px={{ base: 0, md: 50 }}>
+                  <Paper bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                    <Stack gap={0}>
+                      <Center>
+                        <Image pt={{ base: 0, md: 90 }} src={item.imageUrl ? `${item.imageUrl}?t=${Date.now()}` : "/api/img/perbekel.png"} w={{ base: 250, md: 355 }} alt='' />
+                      </Center>
+                      <Paper
+                        bg={colors['blue-button']}
+                        py={30}
+                        className="glass3"
+                        px={{ base: 20, md: 20 }}
 
-                    >
-                      <Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.5rem", md: "2.125rem", lg: "2.25rem", xl: "1.5rem" }}>
-                        I.B. Surya Prabhawa Manuaba,
-                      </Text>
-                      <Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.5rem", md: "2.125rem", lg: "2.25rem", xl: "1.5rem" }}>
-                        S.H.,M.H.,NL.P.
-                      </Text>
-                    </Paper>
-                  </Stack>
-                </Paper>
-              </Box>
-              <Box>
-                <Box>
-                  <Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Biodata</Text>
-                  <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>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.</Text>
-                  <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar, serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.</Text>
+                      >
+                        <Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.5rem", md: "2.125rem", lg: "2.25rem", xl: "1.5rem" }}>
+                          {item.name}
+                        </Text>
+                      </Paper>
+                    </Stack>
+                  </Paper>
                 </Box>
                 <Box>
-                  <Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Riwayat Karir</Text>
-                  <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2021 - 2027: Perbekel Desa Darmasaba</Text>
-                  <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2015 - Sekarang: Founder & Managing Director Mantra Legal Consultants & Advocates</Text>
-                  <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2020 - Sekarang: Founder Ugawa Record Music Studio</Text>
-                  <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2010 - 2016: Dosen Fakultas Hukum Universitas Mahasaraswati Denpasar</Text>
+                  <Box>
+                    <Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Biodata</Text>
+                    <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.biodata }} />
+                  </Box>
+                  <Box>
+                    <Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Riwayat Karir</Text>
+                    <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} dangerouslySetInnerHTML={{ __html: item.riwayat }} />
+                  </Box>
                 </Box>
-              </Box>
-            </SimpleGrid>
-          </Box>
-          <Box pb={30}>
-            <Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
-            <List>
-              <Box px={20}>
-                <ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>1996 - 1997: Ketua OSIS SMP Negeri 1 Abiansemal</ListItem>
-                <ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>1999 - 2000: Ketua OSIS SMA Negeri 1 Mengwi</ListItem>
-                <ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>2008 - 2009: Ketua BEM Universitas Mahasaraswati Denpasar</ListItem>
-                <ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2008 - 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</ListItem>
-                <ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2020 - Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</ListItem>
-                <ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2021 - Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</ListItem>
-                <ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2023 - 2028: Komite Tetap Advokasi - Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</ListItem>
-              </Box>
-            </List>
-          </Box>
-          <Box pb={20}>
-            <Text pb={20} fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Program Kerja Unggulan</Text>
-            <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} fw={'bold'}>Pemberdayaan Ekonomi dan UMKM</Text>
-            <List>
-              <Box px={20}>
-                <ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Pelatihan dan pendampingan UMKM lokal</ListItem>
-                <ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Program bantuan modal usaha bagi pelaku usaha kecil</ListItem>
-                <ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</ListItem>
-              </Box>
-            </List>
-          </Box>
-          <Box>
-            <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} fw={'bold'}>Peningkatan Infrastruktur Desa</Text>
-            <List>
-              <Box px={20}>
-                <ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Pembangunan dan perbaikan jalan desa</ListItem>
-                <ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Penyediaan fasilitas umum dan ruang terbuka hijau</ListItem>
-                <ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Optimalisasi layanan publik berbasis digital</ListItem>
-              </Box>
-            </List>
-          </Box>
-        </Paper>
-      </Box>
+              </SimpleGrid>
+            </Box>
+            <Box pb={30}>
+              <Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
+              <List>
+                <Box px={20}>
+                  <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.pengalaman }} />
+                </Box>
+              </List>
+            </Box>
+            <Box pb={20}>
+              <Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Program Kerja Unggulan</Text>
+              <List>
+                <Box px={20}>
+                  <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.unggulan }} />
+                </Box>
+              </List>
+            </Box>
+          </Paper>
+        </Box>
+
+      ))}
     </Stack>
   );
 }

src/app/darmasaba/(pages)/ppid/visi-misi-ppid/page.tsx

@@ -1,54 +1,60 @@
+'use client'
+import stateVisiMisiPPID from '@/app/admin/(dashboard)/_state/ppid/visi_misi_ppid/visimisiPPID';
 import colors from '@/con/colors';
-import { Stack, Box, Paper, Text, Image, Center, ListItem, List } from '@mantine/core';
-import React from 'react';
+import { Box, Center, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
+  const allList = useProxy(stateVisiMisiPPID)
+  useShallowEffect(() => {
+    allList.findById.load("1") // Assuming "1" is your default ID, adjust as needed
+  }, [])
+
+  if (!allList.findById.data) return <Stack>
+    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
+  </Stack>
+
+  const dataArray = Array.isArray(allList.findById.data)
+    ? allList.findById.data
+    : [allList.findById.data];
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={'lg'}>
-          <Paper p={"xl"} bg={colors['white-trans-1']}>
-            <Box pb={30}>
-              <Center>
-                <Image src={"/api/img/darmasaba-icon.png"} w={{ base: 100, md: 150 }} alt='' />
-              </Center>
-              <Text ta={"center"} fz={{ base: "h2", md: "2.5rem" }} fw={"bold"}>
-                MOTO PPID DESA DARMASABA
-              </Text>
-              <Text ta={"center"} fz={{ base: "h4", md: "h3" }} >
-                MEMBERIKAN INFORMASI YANG CEPAT, MUDAH, TEPAT DAN TRANSPARAN
-              </Text>
-            </Box>
-            <Box px={{ base: 20, md: 50 }} pb={30}>
-              <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
-                VISI PPID
-              </Text>
-              <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
-                Memberikan pelayanan informasi yanng transparan dan akuntabel untuk memenuhi hak pemohon informasi
-                sesuai dengan ketentuan peraturan perundang-undangan yang berlaku.
-              </Text>
-            </Box>
-            <Box px={{ base: 20, md: 50 }}>
-              <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
-                MISI PPID
-              </Text>
-              <Box >
-                <List type='ordered'>
-                  <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Meningkatkan pengelolaan dan pelayanan informasi yang berkualitas, benar dan bertanggung jawab</ListItem>
-                  <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Membangun dan mengembangkan sistem penyediaan dan layanan informasi.</ListItem>
-                  <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Meningkatkan dan mengembangkan kompetensi dan kualitas SDM dalam bidang pelayanan informasi.</ListItem>
-                  <ListItem fz={{ base: "md", md: "h3" }} >Mewujudkan keterbukaan informasi Pemerintah Desa Punggul dengan proses yang cepat, tepat, mudah
-                    dan sederhana.</ListItem>
-                </List>
+      {dataArray.map((item) => (
+        <Box key={item.id} px={{ base: "md", md: 100 }}>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['white-trans-1']}>
+              <Box pb={30}>
+                <Center>
+                  <Image src={"/api/img/darmasaba-icon.png"} w={{ base: 100, md: 150 }} alt='' />
+                </Center>
+                <Text ta={"center"} fz={{ base: "h2", md: "2.5rem" }} fw={"bold"}>
+                  MOTO PPID DESA DARMASABA
+                </Text>
+                <Text ta={"center"} fz={{ base: "h4", md: "h3" }} >
+                  MEMBERIKAN INFORMASI YANG CEPAT, MUDAH, TEPAT DAN TRANSPARAN
+                </Text>
               </Box>
-            </Box>
-          </Paper>
-        </Stack>
-      </Box>
+              <Box px={{ base: 20, md: 50 }} pb={30}>
+                <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
+                  VISI PPID
+                </Text>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.visi }} />
+              </Box>
+              <Box px={{ base: 20, md: 50 }}>
+                <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
+                  MISI PPID
+                </Text>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.misi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      ))}
     </Stack>
   );
 }