Profile PPID, Visi Misi, dan Dasar Hukum

* Menu Desa : Berita & Pengumuman
* Kesehatan : Data Kesehatan Warga => Fasilitas Kesehatan

package.json

@@ -1,6 +1,6 @@
 {
   "name": "desa-darmasaba",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -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",
@@ -62,7 +63,7 @@
     "react-simple-toasts": "^6.1.0",
     "react-toastify": "^11.0.5",
     "readdirp": "^4.1.1",
-    "recharts": "2",
+    "recharts": "^2.15.3",
     "swr": "^2.3.2",
     "valtio": "^2.1.3",
     "zod": "^3.24.3"

prisma/data/list-caraMemperolehInformasi.json

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

prisma/data/list-caraMemperolehSalinanInformasi.json

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

prisma/data/list-jenisInfromasi.json

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

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

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

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

@@ -0,0 +1,11 @@
+[
+  {
+    "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/migrations/20250423072406_init/migration.sql

@@ -0,0 +1,355 @@
+-- CreateTable
+CREATE TABLE "Layanan" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+
+    CONSTRAINT "Layanan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Potensi" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+
+    CONSTRAINT "Potensi_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "LandingPage_Layanan" (
+    "id" TEXT NOT NULL,
+    "deksripsi" TEXT NOT NULL,
+
+    CONSTRAINT "LandingPage_Layanan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "AppMenu" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "link" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "AppMenu_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "AppMenuChild" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "link" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "appMenuId" TEXT,
+
+    CONSTRAINT "AppMenuChild_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Berita" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "image" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "katagoryBeritaId" TEXT,
+
+    CONSTRAINT "Berita_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KatagoryBerita" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "KatagoryBerita_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Pengumuman" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "categoryPengumumanId" TEXT,
+
+    CONSTRAINT "Pengumuman_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "CategoryPengumuman" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "CategoryPengumuman_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Images" (
+    "id" TEXT NOT NULL,
+    "url" TEXT NOT NULL,
+    "label" TEXT NOT NULL DEFAULT 'null',
+    "active" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Images_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Videos" (
+    "id" TEXT NOT NULL,
+    "url" TEXT NOT NULL,
+    "label" TEXT NOT NULL DEFAULT 'null',
+    "active" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Videos_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "GalleryFoto" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "image" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "imagesId" TEXT,
+
+    CONSTRAINT "GalleryFoto_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "GalleryVideo" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "video" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "videosId" TEXT,
+
+    CONSTRAINT "GalleryVideo_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DataKematian_Kelahiran" (
+    "id" SERIAL NOT NULL,
+    "tahun" TEXT NOT NULL,
+    "kematianKasar" TEXT NOT NULL,
+    "kematianBayi" TEXT NOT NULL,
+    "kelahiranKasar" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "DataKematian_Kelahiran_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "FasilitasKesehatan" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "FasilitasKesehatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "InformasiUmum" (
+    "id" TEXT NOT NULL,
+    "fasilitas" TEXT NOT NULL,
+    "alamat" TEXT NOT NULL,
+    "jamOperasional" TEXT NOT NULL,
+    "fasilitasKesehatanId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "InformasiUmum_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "LayananUnggulan" (
+    "id" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "LayananUnggulan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DokterdanTenagaMedis" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "DokterdanTenagaMedis_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "FasilitasPendukung" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "FasilitasPendukung_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ProsedurPendaftaran" (
+    "id" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "ProsedurPendaftaran_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_FasilitasKesehatanToLayananUnggulan" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_FasilitasKesehatanToLayananUnggulan_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateTable
+CREATE TABLE "_FasilitasKesehatanToFasilitasPendukung" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_FasilitasKesehatanToFasilitasPendukung_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateTable
+CREATE TABLE "_FasilitasKesehatanToProsedurPendaftaran" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_FasilitasKesehatanToProsedurPendaftaran_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateTable
+CREATE TABLE "_DokterdanTenagaMedisToFasilitasKesehatan" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_DokterdanTenagaMedisToFasilitasKesehatan_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Layanan_name_key" ON "Layanan"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Potensi_name_key" ON "Potensi"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "AppMenu_name_key" ON "AppMenu"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "AppMenuChild_name_key" ON "AppMenuChild"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "KatagoryBerita_name_key" ON "KatagoryBerita"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "CategoryPengumuman_name_key" ON "CategoryPengumuman"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "GalleryFoto_imagesId_key" ON "GalleryFoto"("imagesId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "GalleryVideo_videosId_key" ON "GalleryVideo"("videosId");
+
+-- CreateIndex
+CREATE INDEX "_FasilitasKesehatanToLayananUnggulan_B_index" ON "_FasilitasKesehatanToLayananUnggulan"("B");
+
+-- CreateIndex
+CREATE INDEX "_FasilitasKesehatanToFasilitasPendukung_B_index" ON "_FasilitasKesehatanToFasilitasPendukung"("B");
+
+-- CreateIndex
+CREATE INDEX "_FasilitasKesehatanToProsedurPendaftaran_B_index" ON "_FasilitasKesehatanToProsedurPendaftaran"("B");
+
+-- CreateIndex
+CREATE INDEX "_DokterdanTenagaMedisToFasilitasKesehatan_B_index" ON "_DokterdanTenagaMedisToFasilitasKesehatan"("B");
+
+-- AddForeignKey
+ALTER TABLE "AppMenuChild" ADD CONSTRAINT "AppMenuChild_appMenuId_fkey" FOREIGN KEY ("appMenuId") REFERENCES "AppMenu"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Berita" ADD CONSTRAINT "Berita_katagoryBeritaId_fkey" FOREIGN KEY ("katagoryBeritaId") REFERENCES "KatagoryBerita"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Pengumuman" ADD CONSTRAINT "Pengumuman_categoryPengumumanId_fkey" FOREIGN KEY ("categoryPengumumanId") REFERENCES "CategoryPengumuman"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "GalleryFoto" ADD CONSTRAINT "GalleryFoto_imagesId_fkey" FOREIGN KEY ("imagesId") REFERENCES "Images"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "GalleryVideo" ADD CONSTRAINT "GalleryVideo_videosId_fkey" FOREIGN KEY ("videosId") REFERENCES "Videos"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "InformasiUmum" ADD CONSTRAINT "InformasiUmum_fasilitasKesehatanId_fkey" FOREIGN KEY ("fasilitasKesehatanId") REFERENCES "FasilitasKesehatan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToLayananUnggulan" ADD CONSTRAINT "_FasilitasKesehatanToLayananUnggulan_A_fkey" FOREIGN KEY ("A") REFERENCES "FasilitasKesehatan"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToLayananUnggulan" ADD CONSTRAINT "_FasilitasKesehatanToLayananUnggulan_B_fkey" FOREIGN KEY ("B") REFERENCES "LayananUnggulan"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToFasilitasPendukung" ADD CONSTRAINT "_FasilitasKesehatanToFasilitasPendukung_A_fkey" FOREIGN KEY ("A") REFERENCES "FasilitasKesehatan"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToFasilitasPendukung" ADD CONSTRAINT "_FasilitasKesehatanToFasilitasPendukung_B_fkey" FOREIGN KEY ("B") REFERENCES "FasilitasPendukung"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToProsedurPendaftaran" ADD CONSTRAINT "_FasilitasKesehatanToProsedurPendaftaran_A_fkey" FOREIGN KEY ("A") REFERENCES "FasilitasKesehatan"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToProsedurPendaftaran" ADD CONSTRAINT "_FasilitasKesehatanToProsedurPendaftaran_B_fkey" FOREIGN KEY ("B") REFERENCES "ProsedurPendaftaran"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_DokterdanTenagaMedisToFasilitasKesehatan" ADD CONSTRAINT "_DokterdanTenagaMedisToFasilitasKesehatan_A_fkey" FOREIGN KEY ("A") REFERENCES "DokterdanTenagaMedis"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_DokterdanTenagaMedisToFasilitasKesehatan" ADD CONSTRAINT "_DokterdanTenagaMedisToFasilitasKesehatan_B_fkey" FOREIGN KEY ("B") REFERENCES "FasilitasKesehatan"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "postgresql"

prisma/schema.prisma

@@ -47,6 +47,167 @@ model AppMenuChild {
   appMenuId String?
 }
 
+//========================================= MENU PPID ========================================= //
+// ========================================= VISI MISI PPID ========================================= //
+model VisiMisiPPID {
+  id        String   @id @default(cuid())
+  visi      String   @db.Text
+  misi      String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= DASAR HUKUM PPID ========================================= //
+model DasarHukumPPID {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  content   String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= PROFILE PPID ========================================= //
+model ProfilePPID {
+  id         String   @id @default(cuid())
+  name       String   @db.Text
+  biodata    String   @db.Text
+  riwayat    String   @db.Text
+  pengalaman String   @db.Text
+  unggulan   String   @db.Text
+  imageUrl   String?
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+  deletedAt  DateTime @default(now())
+  isActive   Boolean  @default(true)
+}
+
+// ========================================= DAFTAR INFORMASI PUBLIK ========================================= //
+model DaftarInformasiPublik {
+  id             String   @id @default(cuid())
+  nomor          Int      @default(autoincrement())
+  jenisInformasi String
+  deskripsi      String
+  tanggal        String
+  createdAt      DateTime @default(now())
+  updatedAt      DateTime @updatedAt
+  deletedAt      DateTime @default(now())
+  isActive       Boolean  @default(true)
+}
+
+//=========================================PERMOHONAN INFORMASI PUBLIK========================= //
+model PermohonanInformasiPublik {
+  id                               String                          @id @default(cuid())
+  nomor                            Int                             @default(autoincrement())
+  name                             String
+  nik                              String
+  notelp                           String
+  alamat                           String
+  email                            String
+  jenisInformasiDiminta            JenisInformasiDiminta?          @relation(fields: [jenisInformasiDimintaId], references: [id])
+  jenisInformasiDimintaId          String?
+  caraMemperolehInformasi          CaraMemperolehInformasi?        @relation(fields: [caraMemperolehInformasiId], references: [id])
+  caraMemperolehInformasiId        String?
+  caraMemperolehSalinanInformasi   CaraMemperolehSalinanInformasi? @relation(fields: [caraMemperolehSalinanInformasiId], references: [id])
+  caraMemperolehSalinanInformasiId String?
+  createdAt                        DateTime                        @default(now())
+  updatedAt                        DateTime                        @updatedAt
+  deletedAt                        DateTime                        @default(now())
+  isActive                         Boolean                         @default(true)
+}
+
+model JenisInformasiDiminta {
+  id                        String                      @id @default(cuid())
+  name                      String                      @unique
+  createdAt                 DateTime                    @default(now())
+  updatedAt                 DateTime                    @updatedAt
+  deletedAt                 DateTime                    @default(now())
+  isActive                  Boolean                     @default(true)
+  PermohonanInformasiPublik PermohonanInformasiPublik[]
+}
+
+model CaraMemperolehInformasi {
+  id                        String                      @id @default(cuid())
+  name                      String                      @unique
+  createdAt                 DateTime                    @default(now())
+  updatedAt                 DateTime                    @updatedAt
+  deletedAt                 DateTime                    @default(now())
+  isActive                  Boolean                     @default(true)
+  PermohonanInformasiPublik PermohonanInformasiPublik[]
+}
+
+model CaraMemperolehSalinanInformasi {
+  id                        String                      @id @default(cuid())
+  name                      String                      @unique
+  createdAt                 DateTime                    @default(now())
+  updatedAt                 DateTime                    @updatedAt
+  deletedAt                 DateTime                    @default(now())
+  isActive                  Boolean                     @default(true)
+  PermohonanInformasiPublik PermohonanInformasiPublik[]
+}
+
+//=========================================PERMOHONAN INFORMASI KEBERATAN PUBLIK========================= //
+model FormulirPermohonanKeberatan {
+  id        String   @id @default(cuid())
+  name      String
+  email     String
+  notelp    String
+  alasan    String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= IKM ========================================= //
+model IndeksKepuasanMasyarakat {
+  id        Int      @id @default(autoincrement())
+  label     String
+  kepuasan  String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model GrafikBerdasarkanJenisKelamin {
+  id        String   @id @default(cuid())
+  perempuan String
+  laki      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model GrafikBerdasarkanResponden {
+  id         String   @id @default(cuid())
+  sangatbaik String
+  baik       String
+  kurangbaik String
+  tidakbaik  String
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+  deletedAt  DateTime @default(now())
+  isActive   Boolean  @default(true)
+}
+
+model GrafikBerdasarkanUmur {
+  id        String   @id @default(cuid())
+  remaja    String
+  dewasa    String
+  orangtua  String
+  lansia    String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= MENU DESA ========================================= //
 // ========================================= BERITA ========================================= //
 model Berita {
   id               String          @id @default(cuid())
@@ -95,3 +256,300 @@ model CategoryPengumuman {
   deletedAt   DateTime     @default(now())
   isActive    Boolean      @default(true)
 }
+
+// ========================================= IMAGES ========================================= //
+model Images {
+  id          String        @id @default(cuid())
+  url         String
+  label       String        @default("null")
+  active      Boolean       @default(true)
+  createdAt   DateTime      @default(now())
+  updatedAt   DateTime      @updatedAt
+  GalleryFoto GalleryFoto[]
+}
+
+// ========================================= VIDEOS ========================================= //
+model Videos {
+  id           String         @id @default(cuid())
+  url          String
+  label        String         @default("null")
+  active       Boolean        @default(true)
+  createdAt    DateTime       @default(now())
+  updatedAt    DateTime       @updatedAt
+  GalleryVideo GalleryVideo[]
+}
+
+// ========================================= GALLERY ========================================= //
+model GalleryFoto {
+  id               String   @id @default(cuid())
+  name             String
+  image            String
+  createdAt        DateTime @default(now())
+  updatedAt        DateTime @updatedAt
+  deletedAt        DateTime @default(now())
+  isActive         Boolean  @default(true)
+  imagesId         String?  @unique
+  imageGalleryFoto Images?  @relation(fields: [imagesId], references: [id])
+}
+
+model GalleryVideo {
+  id                 String   @id @default(cuid())
+  name               String
+  video              String
+  createdAt          DateTime @default(now())
+  updatedAt          DateTime @updatedAt
+  deletedAt          DateTime @default(now())
+  isActive           Boolean  @default(true)
+  videosId           String?  @unique
+  videosGalleryVideo Videos?  @relation(fields: [videosId], references: [id])
+}
+
+// ========================================= MENU KESEHATAN ========================================= //
+// ========================================= DATA KESEHATAN WARGA ========================================= //
+
+// ========================================= FASILITAS KESEHATAN ========================================= //
+model FasilitasKesehatan {
+  id                   String                 @id @default(cuid())
+  name                 String
+  createdAt            DateTime               @default(now())
+  updatedAt            DateTime               @updatedAt
+  deletedAt            DateTime               @default(now())
+  isActive             Boolean                @default(true)
+  InformasiUmum        InformasiUmum[]
+  LayananUnggulan      LayananUnggulan[]
+  DokterdanTenagaMedis DokterdanTenagaMedis[]
+  FasilitasPendukung   FasilitasPendukung[]
+  ProsedurPendaftaran  ProsedurPendaftaran[]
+  TarifDanLayanan      TarifDanLayanan[]
+}
+
+model InformasiUmum {
+  id                 String               @id @default(cuid())
+  fasilitas          String
+  alamat             String
+  jamOperasional     String
+  FasilitasKesehatan FasilitasKesehatan[]
+  createdAt          DateTime             @default(now())
+  updatedAt          DateTime             @updatedAt
+  deletedAt          DateTime             @default(now())
+  isActive           Boolean              @default(true)
+}
+
+model LayananUnggulan {
+  id                 String               @id @default(cuid())
+  content            String
+  createdAt          DateTime             @default(now())
+  updatedAt          DateTime             @updatedAt
+  deletedAt          DateTime             @default(now())
+  isActive           Boolean              @default(true)
+  FasilitasKesehatan FasilitasKesehatan[]
+}
+
+model DokterdanTenagaMedis {
+  id                 String               @id @default(cuid())
+  name               String
+  specialist         String
+  jadwal             String
+  createdAt          DateTime             @default(now())
+  updatedAt          DateTime             @updatedAt
+  deletedAt          DateTime             @default(now())
+  isActive           Boolean              @default(true)
+  FasilitasKesehatan FasilitasKesehatan[]
+}
+
+model FasilitasPendukung {
+  id                 String               @id @default(cuid())
+  content            String
+  createdAt          DateTime             @default(now())
+  updatedAt          DateTime             @updatedAt
+  deletedAt          DateTime             @default(now())
+  isActive           Boolean              @default(true)
+  FasilitasKesehatan FasilitasKesehatan[]
+}
+
+model ProsedurPendaftaran {
+  id                 String               @id @default(cuid())
+  content            String
+  createdAt          DateTime             @default(now())
+  updatedAt          DateTime             @updatedAt
+  deletedAt          DateTime             @default(now())
+  isActive           Boolean              @default(true)
+  FasilitasKesehatan FasilitasKesehatan[]
+}
+
+model TarifDanLayanan {
+  id                 String               @id @default(cuid())
+  layanan            String
+  tarif              String
+  createdAt          DateTime             @default(now())
+  updatedAt          DateTime             @updatedAt
+  deletedAt          DateTime             @default(now())
+  isActive           Boolean              @default(true)
+  FasilitasKesehatan FasilitasKesehatan[]
+}
+
+// ========================================= JADWAL KEGIATAN ========================================= //
+model JadwalKegiatan {
+  id        String   @id @default(cuid())
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model InformasiJadwalKegiatan {
+  id        String   @id @default(cuid())
+  name      String
+  tanggal   String
+  waktu     String
+  lokasi    String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model DeskripsiJadwalKegiatan {
+  id        String   @id @default(cuid())
+  deskripsi String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model LayananJadwalKegiatan {
+  id        String   @id @default(cuid())
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model SyaratKetentuanJadwalKegiatan {
+  id        String   @id @default(cuid())
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model DokumenJadwalKegiatan {
+  id        String   @id @default(cuid())
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model PendaftaranJadwalKegiatan {
+  id           String   @id @default(cuid())
+  name         String
+  tanggal      String
+  namaOrangtua String
+  nomor        String
+  alamat       String
+  catatan      String
+  createdAt    DateTime @default(now())
+  updatedAt    DateTime @updatedAt
+  deletedAt    DateTime @default(now())
+  isActive     Boolean  @default(true)
+}
+
+// ========================================= PERSENTASE KELAHIRAN & KEMATIAN ========================================= //
+model DataKematian_Kelahiran {
+  id             Int      @id @default(autoincrement())
+  tahun          String
+  kematianKasar  String
+  kematianBayi   String
+  kelahiranKasar String
+  createdAt      DateTime @default(now())
+  updatedAt      DateTime @updatedAt
+  deletedAt      DateTime @default(now())
+  isActive       Boolean  @default(true)
+}
+
+// ========================================= GRAFIK KEPUASAN ========================================= //
+model GrafikKepuasan {
+  id        Int      @id @default(autoincrement())
+  label     String
+  jumlah    String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= ARTIKEL KESEHATAN ========================================= //
+model ArtikelKesehatan {
+  id        Int      @id @default(autoincrement())
+  title     String
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model Introduction {
+  id        Int      @id @default(autoincrement())
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model Symptom {
+  id        Int      @id @default(autoincrement())
+  title     String
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model Prevention {
+  id        Int      @id @default(autoincrement())
+  title     String
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model FirstAid {
+  id        Int      @id @default(autoincrement())
+  title     String
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model MythVsFact {
+  id        Int      @id @default(autoincrement())
+  title     String
+  mitos     String
+  fakta     String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model DoctorSign {
+  id        Int      @id @default(autoincrement())
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}

prisma/seed.ts

@@ -1,8 +1,14 @@
+import prisma from '@/lib/prisma'
+import categoryPengumuman from './data/category-pengumuman.json'
+import katagoryBerita from './data/katagory-berita.json'
+import caraMemperolehInformasi from './data/list-caraMemperolehInformasi.json'
+import caraMemperolehSalinanInformasi from './data/list-caraMemperolehSalinanInformasi.json'
+import jenisInformasiDiminta from './data/list-jenisInfromasi.json'
 import layanan from './data/list-layanan.json'
 import potensi from './data/list-potensi.json'
-import katagoryBerita from './data/katagory-berita.json'
+import profilePPID from './data/ppid/profile-ppid/profilePPid.json'
-import categoryPengumuman from './data/category-pengumuman.json'
+import visiMisiPPID from './data/ppid/visi-misi-ppid/visimisiPPID.json'
-import prisma from '@/lib/prisma';
+import dasarHukumPPID from './data/ppid/dasar-hukum-ppid/dasarhukumPPID.json'
 (async () => {
     for (const l of layanan) {
         await prisma.layanan.upsert({
@@ -67,6 +73,114 @@ import prisma from '@/lib/prisma';
     }
 
     console.log("category pengumuman success ...")
+
+    for (const j of jenisInformasiDiminta) {
+        await prisma.jenisInformasiDiminta.upsert({
+            where: {
+                name: j.name
+            },
+            update: {
+                name: j.name
+            },
+            create: {
+                name: j.name
+            }
+        })
+    }
+    console.log("jenis informasi diminta success ...")
+
+    for (const c of caraMemperolehInformasi) {
+        await prisma.caraMemperolehInformasi.upsert({
+            where: {
+                name: c.name
+            },
+            update: {
+                name: c.name
+            },
+            create: {
+                name: c.name
+            }
+        })
+    }
+    console.log("cara memperoleh informasi success ...")
+
+    for (const c of caraMemperolehSalinanInformasi) {
+        await prisma.caraMemperolehSalinanInformasi.upsert({
+            where: {
+                name: c.name
+            },
+            update: {
+                name: c.name
+            },
+            create: {
+                name: c.name
+            }
+        })
+    }
+    console.log("cara memperoleh salinan informasi success ...")
+
+    for (const c of profilePPID) {
+        await prisma.profilePPID.upsert({
+            where: {
+                id: c.id
+            },
+            update: {
+                name: c.name,
+                biodata: c.biodata,
+                riwayat: c.riwayat,
+                pengalaman: c.pengalaman,
+                unggulan: c.unggulan,
+                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 ...")
+
 })().then(() => prisma.$disconnect()).catch((e) => {
     console.error(e)
     prisma.$disconnect()

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

@@ -75,7 +75,6 @@ const berita = proxy({
       | null,
     async load() {
       const res = await ApiFetch.api.desa.berita["find-many"].get();
-      console.log(res)
       if (res.status === 200) {
         berita.findMany.data = (res.data?.data as any) ?? [];
       }
@@ -88,4 +87,4 @@ const stateDashboardBerita = proxy({
   berita,
 });
 
-export default stateDashboardBerita;
+export default stateDashboardBerita;

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

@@ -0,0 +1,339 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+/* Introduction */
+const templateIntroduction = z.object({
+  content: z.string().min(3, "Content minimal 3 karakter"),
+})
+
+type Introduction = Prisma.IntroductionGetPayload<{
+  select: {
+    content: true;
+  };
+}>;
+
+const introduction = proxy({
+  create: {
+    form: {} as Introduction,
+    loading: false,
+    async create() {
+      const cek = templateIntroduction.safeParse(introduction.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        introduction.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.introduction["create"].post(introduction.create.form);
+        if (res.status === 200) {
+          introduction.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        introduction.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+      data: null as
+      | Prisma.IntroductionGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+      async load() {
+        const res = await ApiFetch.api.kesehatan.introduction["find-many"].get();
+        if (res.status === 200) {
+          introduction.findMany.data = res.data?.data ?? [];
+        }
+      }
+  }
+});
+/* ======================================================================= */
+
+/* symptom */
+const templateSymptom = z.object({
+  title: z.string().min(3, "Title minimal 3 karakter"),
+  content: z.string().min(3, "Content minimal 3 karakter"),
+})
+
+type Symptom = Prisma.SymptomGetPayload<{
+  select: {
+    title: true;
+    content: true;
+  };
+}>;
+
+const symptom = proxy({
+  create: {
+    form: {} as Symptom,
+    loading: false,
+    async create() {
+      const cek = templateSymptom.safeParse(symptom.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        symptom.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.symptom["create"].post(symptom.create.form);
+        if (res.status === 200) {
+          symptom.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        symptom.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.SymptomGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.symptom["find-many"].get();
+      if (res.status === 200) {
+        symptom.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* Prevention */
+const templatePrevention = z.object({
+  title: z.string().min(3, "Title minimal 3 karakter"),
+  content: z.string().min(3, "Content minimal 3 karakter"),
+})
+
+type Prevention = Prisma.PreventionGetPayload<{
+  select: {
+    title: true;
+    content: true;
+  };
+}>;
+
+const prevention = proxy({
+  create: {
+    form: {} as Prevention,
+    loading: false,
+    async create() {
+      const cek = templatePrevention.safeParse(prevention.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        prevention.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.prevention["create"].post(prevention.create.form);
+        if (res.status === 200) {
+          prevention.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        prevention.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.PreventionGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.prevention["find-many"].get();
+      if (res.status === 200) {
+        prevention.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* First Aid */
+const templateFirstAid = z.object({
+  title: z.string().min(3, "Title minimal 3 karakter"),
+  content: z.string().min(3, "Content minimal 3 karakter"),
+})
+
+type FirstAid = Prisma.FirstAidGetPayload<{
+  select: {
+    title: true;
+    content: true;
+  };
+}>;
+
+const firstAid = proxy({
+    create: {
+        form: {} as FirstAid,
+        loading: false,
+        async create() {
+            const cek = templateFirstAid.safeParse(firstAid.create.form);
+            if (!cek.success) {
+                const err = `[${cek.error.issues
+                    .map((v) => `${v.path.join(".")}`)
+                    .join("\n")}] required`;
+                return toast.error(err);
+            }
+            try {
+                firstAid.create.loading = true;
+                const res = await ApiFetch.api.kesehatan.firstaid["create"].post(firstAid.create.form);
+                if (res.status === 200) {
+                    firstAid.findMany.load();
+                    return toast.success("success create");
+                }
+                return toast.error("failed create");
+            } catch (error) {
+                console.log((error as Error).message);
+            } finally {
+                firstAid.create.loading = false;
+            }
+        },
+    },
+    findMany: {
+        data: null as
+            | Prisma.FirstAidGetPayload<{ omit: { isActive: true } }>[]
+            | null,
+        async load() {
+            const res = await ApiFetch.api.kesehatan.firstaid["find-many"].get();
+            if (res.status === 200) {
+                firstAid.findMany.data = res.data?.data ?? [];
+            }
+        },
+    },
+})
+/* ======================================================================= */
+
+/* Myth vs Fact */
+const templateMythFact = z.object({
+  title: z.string().min(3, "Title minimal 3 karakter"),
+  mitos: z.string().min(3, "Mitos minimal 3 karakter"),
+  fakta: z.string().min(3, "Fakta minimal 3 karakter"),
+})
+
+type MythFact = Prisma.MythVsFactGetPayload<{
+  select: {
+    title: true;
+    mitos: true;
+    fakta: true;
+  };
+}>;
+
+const mythFact = proxy({
+  create: {
+    form: {} as MythFact,
+    loading: false,
+    async create() {
+      const cek = templateMythFact.safeParse(mythFact.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        mythFact.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.mythvsfact["create"].post(mythFact.create.form);
+        if (res.status === 200) {
+          mythFact.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        mythFact.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.MythVsFactGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.mythvsfact["find-many"].get();
+      if (res.status === 200) {
+        mythFact.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+})
+/* ======================================================================= */
+
+/* Doctor Sign */
+const templateDoctorSign = z.object({
+  content: z.string().min(3, "Content minimal 3 karakter"),
+})
+
+type DoctorSign = Prisma.DoctorSignGetPayload<{
+    select: {
+        content: true
+    }
+}>
+
+const doctorSign = proxy({
+    create: {
+        form: {} as DoctorSign,
+        loading: false,
+        async create() {
+            const cek = templateDoctorSign.safeParse(doctorSign.create.form);
+            if (!cek.success) {
+                const err = `[${cek.error.issues
+                    .map((v) => `${v.path.join(".")}`)
+                    .join("\n")}] required`;
+                return toast.error(err);
+            }
+            try {
+                doctorSign.create.loading = true;
+                const res = await ApiFetch.api.kesehatan.doctor_sign["create"].post(doctorSign.create.form);
+                if (res.status === 200) {
+                    doctorSign.findMany.load();
+                    return toast.success("success create");
+                }
+                return toast.error("failed create");
+            } catch (error) {
+                console.log((error as Error).message);
+            } finally {
+                doctorSign.create.loading = false;
+            }
+        },
+    },
+    findMany: {
+        data: null as
+            | Prisma.DoctorSignGetPayload<{ omit: { isActive: true } }>[]
+            | null,
+        async load() {
+            const res = await ApiFetch.api.kesehatan.doctor_sign["find-many"].get();
+            if (res.status === 200) {
+                doctorSign.findMany.data = res.data?.data ?? [];
+            }
+        },
+    },
+})
+
+/* ======================================================================= */
+
+const stateArtikelKesehatan = proxy({
+  introduction,
+  symptom,
+  prevention,
+  firstAid,
+  mythFact,
+  doctorSign
+})
+
+export default stateArtikelKesehatan

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

@@ -0,0 +1,333 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+/* Informasi Umum */
+const templateInformasiUmum = z.object({
+  fasilitas: z.string().min(3, "Fasilitas minimal 3 karakter"),
+  alamat: z.string().min(3, "Alamat minimal 3 karakter"),
+  jamOperasional: z.string().min(3, "Jam Operasional minimal 3 karakter"),
+});
+
+type InfromasiUmum = Prisma.InformasiUmumGetPayload<{
+  select: {
+    fasilitas: true;
+    alamat: true;
+    jamOperasional: true;
+  };
+}>;
+
+const informasiumum = proxy({
+  create: {
+    form: {} as InfromasiUmum,
+    loading: false,
+    async create() {
+      const cek = templateInformasiUmum.safeParse(informasiumum.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        informasiumum.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.informasiumum["create"].post(
+          informasiumum.create.form
+        );
+        if (res.status === 200) {
+            informasiumum.findMany.load();
+            return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        informasiumum.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.InformasiUmumGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.
+      informasiumum["find-many"].get();
+      if (res.status === 200) {
+        informasiumum.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* Layanan Unggulan */
+const templateLayananUnggulanForm = z.object({
+  content: z.string().min(3, "Content minimal 3 karakter"),
+});
+
+type LayananUnggulan = Prisma.LayananUnggulanGetPayload<{
+  select: {
+    content: true;
+  };
+}>;
+
+const layananunggulan = proxy({
+  create: {
+    form: {} as LayananUnggulan,
+    loading: false,
+    async create() {
+      const cek = templateLayananUnggulanForm.safeParse(layananunggulan.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        layananunggulan.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.layananunggulan["create"].post(
+          layananunggulan.create.form
+        );
+        if (res.status === 200) {
+          layananunggulan.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        layananunggulan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.LayananUnggulanGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.
+      layananunggulan["find-many"].get();
+      if (res.status === 200) {
+        layananunggulan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+})
+/* ======================================================================= */  
+
+/* Dokter dan Tenaga Medis */
+const templateDokterdanTenagaMedis = z.object({
+  name: z.string().min(3, "Name minimal 3 karakter"),
+  specialist: z.string().min(3, "Specialist minimal 3 karakter"),
+  jadwal: z.string().min(3, "Jadwal minimal 3 karakter"),
+})
+
+type DokterdanTenagaMedis = Prisma.DokterdanTenagaMedisGetPayload<{
+  select: {
+    name: true;
+    specialist: true;
+    jadwal: true;
+  };
+}>;
+
+const dokterdantenagamedis = proxy({
+  create: {
+    form: {} as DokterdanTenagaMedis,
+    loading: false,
+    async create() {
+      const cek = templateDokterdanTenagaMedis.safeParse(dokterdantenagamedis.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        dokterdantenagamedis.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.dokterdantenagamedis["create"].post(dokterdantenagamedis.create.form);
+        if (res.status === 200) {
+          dokterdantenagamedis.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        dokterdantenagamedis.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DokterdanTenagaMedisGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.dokterdantenagamedis["find-many"].get();
+      if (res.status === 200) {
+        dokterdantenagamedis.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+})
+/* ======================================================================= */  
+
+/* Fasilitas Pendukung */
+const templateFasilitasPendukung = z.object({
+  content: z.string().min(3, "Content minimal 3 karakter"),
+})
+
+type FasilitasPendukung = Prisma.FasilitasPendukungGetPayload<{
+  select: {
+    content: true;
+  };
+}>;
+
+const fasilitaspendukung = proxy({
+  create: {
+    form: {} as FasilitasPendukung,
+    loading: false,
+    async create() {
+      const cek = templateFasilitasPendukung.safeParse(fasilitaspendukung.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        fasilitaspendukung.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.fasilitaspendukung["create"].post(fasilitaspendukung.create.form);
+        if (res.status === 200) {
+          fasilitaspendukung.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        fasilitaspendukung.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.FasilitasPendukungGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.
+      fasilitaspendukung["find-many"].get();
+      if (res.status === 200) {
+        fasilitaspendukung.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+})
+/* ======================================================================= */  
+
+/* Tarif dan Layanan */
+const templateTarifDanLayanan = z.object({
+  layanan: z.string().min(3, "Layanan minimal 3 karakter"),
+  tarif: z.string().min(3, "Tarif minimal 3 karakter"),
+})
+
+const tarifdanlayanan = proxy({
+  create: {
+    form: {} as Prisma.TarifDanLayananGetPayload<{ select: { layanan: true; tarif: true } }>,
+    loading: false,
+    async create() {
+      const cek = templateTarifDanLayanan.safeParse(tarifdanlayanan.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        tarifdanlayanan.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.tarifdanlayanan["create"].post(tarifdanlayanan.create.form);
+        if (res.status === 200) {
+          tarifdanlayanan.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        tarifdanlayanan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.TarifDanLayananGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.
+      tarifdanlayanan["find-many"].get();
+      if (res.status === 200) {
+        tarifdanlayanan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+})
+/* ======================================================================= */  
+
+/* Prosedur Pendaftaran */
+const templateProsedurPendaftaran = z.object({
+  content: z.string().min(3, "Content minimal 3 karakter"),
+})
+
+const prosedurpendaftaran = proxy({
+  create: {
+    form: {} as Prisma.ProsedurPendaftaranGetPayload<{ select: { content: true } }>,
+    loading: false,
+    async create() {
+      const cek = templateProsedurPendaftaran.safeParse(prosedurpendaftaran.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        prosedurpendaftaran.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.prosedurpendaftaran["create"].post(prosedurpendaftaran.create.form);
+        if (res.status === 200) {
+          prosedurpendaftaran.findMany.load();
+          return toast.success("success create"); 
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        prosedurpendaftaran.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.ProsedurPendaftaranGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.
+      prosedurpendaftaran["find-many"].get();
+      if (res.status === 200) {
+        prosedurpendaftaran.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+})
+
+const stateFasilitasKesehatan = proxy({
+  informasiumum,
+  layananunggulan,
+  dokterdantenagamedis,
+  fasilitaspendukung,
+  tarifdanlayanan,
+  prosedurpendaftaran
+})
+
+export default stateFasilitasKesehatan

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

@@ -0,0 +1,76 @@
+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 templateGrafikKepuasan = z.object({
+  label: z.string().min(2, "Label harus diisi"),
+  jumlah: z.string().min(2, "Jumlah harus diisi"),
+});
+
+type GrafikKepuasan = Prisma.GrafikKepuasanGetPayload<{
+  select: {
+    label: true;
+    jumlah: true;
+  };
+}>;
+
+const defaultForm: GrafikKepuasan = {
+  label: "",
+  jumlah: ""
+};
+
+const grafikkepuasan = proxy({
+  create: {
+    form: defaultForm,
+    loading: false,
+    async create() {
+      const cek = templateGrafikKepuasan.safeParse(grafikkepuasan.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        grafikkepuasan.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.grafikkepuasan["create"].post(
+          grafikkepuasan.create.form
+        );
+        if (res.status === 200) {
+          grafikkepuasan.create.form = {
+            label: "",
+            jumlah: ""
+          };
+          grafikkepuasan.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        grafikkepuasan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.GrafikKepuasanGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.grafikkepuasan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        grafikkepuasan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+
+const stategrafikKepuasan = proxy({
+  grafikkepuasan,
+});
+
+export default stategrafikKepuasan;

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

@@ -0,0 +1,366 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+/* Informasi Kegiatan */
+const templateInformasiKegiatan = z.object({
+  name: z.string().min(3, "Name minimal 3 karakter"),
+  tanggal: z.string().min(3, "Tanggal minimal 3 karakter"),
+  waktu: z.string().min(3, "Waktu minimal 3 karakter"),
+  lokasi: z.string().min(3, "Lokasi minimal 3 karakter"),
+});
+
+type InformasiKegiatan = Prisma.InformasiJadwalKegiatanGetPayload<{
+  select: {
+    name: true;
+    tanggal: true;
+    waktu: true;
+    lokasi: true;
+  };
+}>;
+
+const informasiKegiatan = proxy({
+  create: {
+    form: {} as InformasiKegiatan,
+    loading: false,
+    async create() {
+      const cek = templateInformasiKegiatan.safeParse(
+        informasiKegiatan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        informasiKegiatan.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.informasiJadwalKegiatan[
+          "create"
+        ].post(informasiKegiatan.create.form);
+        if (res.status === 200) {
+          informasiKegiatan.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        informasiKegiatan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.InformasiJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.informasiJadwalKegiatan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        informasiKegiatan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* Deskripsi Kegiatan */
+const templateDeskripsiKegiatan = z.object({
+  deskripsi: z.string().min(3, "Content minimal 3 karakter"),
+});
+
+type DeskripsiKegiatan = Prisma.DeskripsiJadwalKegiatanGetPayload<{
+  select: { deskripsi: true };
+}>;
+
+const deskripsiKegiatan = proxy({
+  create: {
+    form: {} as DeskripsiKegiatan,
+    loading: false,
+    async create() {
+      const cek = templateDeskripsiKegiatan.safeParse(
+        deskripsiKegiatan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        deskripsiKegiatan.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.deskripsikegiatan[
+          "create"
+        ].post(deskripsiKegiatan.create.form);
+        if (res.status === 200) {
+          deskripsiKegiatan.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        deskripsiKegiatan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DeskripsiJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.deskripsikegiatan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        deskripsiKegiatan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* Layanan Tersedia */
+const templateLayananTersedia = z.object({
+  content: z.string().min(3, "Content minimal 3 karakter"),
+});
+
+type LayananTersedia = Prisma.LayananJadwalKegiatanGetPayload<{
+  select: { content: true };
+}>;
+
+const layanantersedia = proxy({
+  create: {
+    form: {} as LayananTersedia,
+    loading: false,
+    async create() {
+      const cek = templateLayananTersedia.safeParse(
+        layanantersedia.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        layanantersedia.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.layanantersedia["create"].post(
+          layanantersedia.create.form
+        );
+        if (res.status === 200) {
+          layanantersedia.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        layanantersedia.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.LayananJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.layanantersedia[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        layanantersedia.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* Syarat dan Ketentuan */
+const templateSyaratKetentuan = z.object({
+  content: z.string().min(3, "Content minimal 3 karakter"),
+});
+
+type SyaratKetentuan = Prisma.SyaratKetentuanJadwalKegiatanGetPayload<{
+  select: { content: true };
+}>;
+
+const syaratketentuan = proxy({
+  create: {
+    form: {} as SyaratKetentuan,
+    loading: false,
+    async create() {
+      const cek = templateSyaratKetentuan.safeParse(
+       syaratketentuan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+       syaratketentuan.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.syaratketentuan[
+          "create"
+        ].post(syaratketentuan.create.form);
+        if (res.status === 200) {
+         syaratketentuan.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+       syaratketentuan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.SyaratKetentuanJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.syaratketentuan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        syaratketentuan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* Dokumen Yang Diperlukan */
+const templateDokumenDiperlukan = z.object({
+  content: z.string().min(3, "Content minimal 3 karakter"),
+});
+
+type DokumenDiperlukan = Prisma.DokumenJadwalKegiatanGetPayload<{
+  select: { content: true };
+}>;
+
+const dokumenjadwalkegiatan = proxy({
+  create: {
+    form: {} as DokumenDiperlukan,
+    loading: false,
+    async create() {
+      const cek = templateDokumenDiperlukan.safeParse(
+        dokumenjadwalkegiatan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        dokumenjadwalkegiatan.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.dokumendiperlukan[
+          "create"
+        ].post(dokumenjadwalkegiatan.create.form);
+        if (res.status === 200) {
+          dokumenjadwalkegiatan.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        dokumenjadwalkegiatan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DokumenJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.dokumendiperlukan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        dokumenjadwalkegiatan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* Pendaftaran */
+const templatePendaftaran = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  tanggal: z.string().min(1),
+  namaOrangtua: z.string().min(3, "Nama minimal 3 karakter"),
+  nomor: z.string().min(9, "Nama minimal 9 karakter"),
+  alamat: z.string().min(7, "Alamat minimal 7 karakter"),
+  catatan: z.string().min(3, "Catatan minimal 3 karakter"),
+})
+
+type Pendaftaran = Prisma.PendaftaranJadwalKegiatanGetPayload<{
+  select: {
+    name: true;
+    tanggal: true;
+    namaOrangtua: true;
+    nomor: true;
+    alamat: true;
+    catatan: true;
+  }
+}>
+
+const pendaftaranjadwal = proxy({
+  create: {
+    form: {} as Pendaftaran,
+    loading: false,
+    async create() {
+      const cek = templatePendaftaran.safeParse(pendaftaranjadwal.create.form);
+      if(!cek.success) {
+        const err = `[${cek.error.issues
+        .map((v) => `${v.path.join(".")}`)
+        .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        pendaftaranjadwal.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.pendaftaranJadwalKegiatan["create"].post(
+          pendaftaranjadwal.create.form);
+          if (res.status === 200) {
+            pendaftaranjadwal.findMany.load();
+            return toast.success("success create")
+          }
+          return toast.error("failed create")
+      } catch (error) {
+        console.log((error as Error).message)
+      } finally {
+        pendaftaranjadwal.create.loading = false;
+      }
+    }
+  },
+  findMany: {
+    data: null as
+    | Prisma.PendaftaranJadwalKegiatanGetPayload<{omit: {isActive: true}}>[]
+    | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.
+      pendaftaranJadwalKegiatan["find-many"].get();
+      if(res.status === 200) {
+        pendaftaranjadwal.findMany.data = res.data?.data ?? [];
+      }
+    }
+  }
+})
+
+const stateJadwalKegiatan = proxy({
+  informasiKegiatan,
+  deskripsiKegiatan,
+  layanantersedia,
+  syaratketentuan,
+  dokumenjadwalkegiatan,
+  pendaftaranjadwal
+});
+export default stateJadwalKegiatan;

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

@@ -0,0 +1,84 @@
+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 templatePersentase = z.object({
+  tahun: z.string().min(4, "Tahun harus diisi"),
+  kematianKasar: z.string().min(2, "Kematian kasar harus diisi"),
+  kelahiranKasar: z.string().min(2, "Kelahiran kasar harus diisi"),
+  kematianBayi: z.string().min(2, "Kematian bayi harus diisi"),
+});
+
+type Persentase = Prisma.DataKematian_KelahiranGetPayload<{
+  select: {
+    tahun: true;
+    kematianKasar: true;
+    kelahiranKasar: true;
+    kematianBayi: true;
+  };
+}>;
+
+const defaultForm: Persentase = {
+  tahun: "",
+  kematianKasar: "",
+  kelahiranKasar: "",
+  kematianBayi: "",
+};
+
+const persentasekelahiran = proxy({
+  create: {
+    form: defaultForm,
+    loading: false,
+    async create() {
+      const cek = templatePersentase.safeParse(persentasekelahiran.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        persentasekelahiran.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.persentasekelahiran[
+          "create"
+        ].post(persentasekelahiran.create.form);
+        if (res.status === 200) {
+          persentasekelahiran.create.form = {
+            tahun: "",
+            kematianKasar: "",
+            kelahiranKasar: "",
+            kematianBayi: "",
+          };
+          persentasekelahiran.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        persentasekelahiran.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DataKematian_KelahiranGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.persentasekelahiran[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        persentasekelahiran.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+
+const statePersentase = proxy({
+  persentasekelahiran,
+});
+
+export default statePersentase;

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

@@ -0,0 +1,65 @@
+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 templateDaftarInformasi = z.object({
+    jenisInformasi: z.string().min(3, "Jenis Informasi minimal 3 karakter"),
+    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+    tanggal: z.string().min(3, "Tanggal minimal 3 karakter"),
+})
+
+type DaftarInformasi = Prisma.DaftarInformasiPublikGetPayload<{
+    select: {
+        jenisInformasi: true;
+        deskripsi: true;
+        tanggal: true;
+    };
+}>;
+
+const daftarInformasi = proxy({
+    create: {
+        form: {} as DaftarInformasi,
+        loading: false,
+        async create() {
+            const cek = templateDaftarInformasi.safeParse(daftarInformasi.create.form);
+            if (!cek.success) {
+                const err = `[${cek.error.issues
+                    .map((v) => `${v.path.join(".")}`)
+                    .join("\n")}] required`;
+                return toast.error(err);
+            }
+            try {
+                daftarInformasi.create.loading = true;
+                const res = await ApiFetch.api.ppid.daftarinformasipublik["create"].post(daftarInformasi.create.form);
+                if (res.status === 200) {
+                    daftarInformasi.findMany.load();
+                    return toast.success("success create");
+                }
+                return toast.error("failed create");
+            } catch (error) {
+                console.log((error as Error).message);
+            } finally {
+                daftarInformasi.create.loading = false;
+            }
+        },
+    },
+    findMany: {
+        data: null as
+        | Prisma.DaftarInformasiPublikGetPayload<{ omit: { isActive: true } }>[]
+        | null,
+        async load() {
+            const res = await ApiFetch.api.ppid.daftarinformasipublik["find-many"].get();
+            if (res.status === 200) {
+                daftarInformasi.findMany.data = res.data?.data ?? [];
+            }
+        }
+    }
+    });
+
+    const stateDaftarInformasiPublik = proxy({
+        daftarInformasi
+    })
+
+    export default stateDaftarInformasiPublik;

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

@@ -0,0 +1,82 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  content: z.string().min(3, "Content minimal 3 karakter"),
+});
+
+type DasarHukumForm = Prisma.DasarHukumPPIDGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    content: true;
+  };
+}>;
+
+const stateDasarHukumPPID = proxy({
+  findById: {
+    data: null as DasarHukumForm | null,
+    loading: false,
+    initialize() {
+      stateDasarHukumPPID.findById.data = {
+        id: '',
+        judul: '',
+        content: '',
+      } as DasarHukumForm;
+    },
+    async load(id: string) {
+      try {
+        stateDasarHukumPPID.findById.loading = true;
+        const res = await ApiFetch.api.ppid.dasarhukumppid["find-by-id"].get({
+          query: { id },
+        });
+        if (res.status === 200) {
+          stateDasarHukumPPID.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data dasar hukum");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data dasar hukum");
+      } finally {
+        stateDasarHukumPPID.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: DasarHukumForm) {
+      const cek = templateForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        stateDasarHukumPPID.update.loading = true;
+        const res = await ApiFetch.api.ppid.dasarhukumppid["update"].post(data);
+        if (res.status === 200) {
+          toast.success("Data dasar hukum berhasil diubah");
+          await stateDasarHukumPPID.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data dasar hukum");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengubah data dasar hukum");
+      } finally {
+        stateDasarHukumPPID.update.loading = false;
+      }
+    },
+  },
+});
+
+export default stateDasarHukumPPID;

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

@@ -0,0 +1,77 @@
+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 templateGrafikJenisKelamin = z.object({
+  laki: z.string().min(2, "Data laki-laki harus diisi"),
+  perempuan: z.string().min(2, "Data perempuan harus diisi"),
+});
+
+type GrafikJenisKelamin = Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
+  select: {
+    laki: true;
+    perempuan: true;
+  };
+}>;
+
+const defaultForm: GrafikJenisKelamin = {
+  laki: "",
+  perempuan: "",
+};
+
+const grafikBerdasarkanJenisKelamin = proxy({
+  create: {
+    form: defaultForm,
+    loading: false,
+    async create() {
+      const cek = templateGrafikJenisKelamin.safeParse(
+        grafikBerdasarkanJenisKelamin.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        grafikBerdasarkanJenisKelamin.create.loading = true;
+        const res = await ApiFetch.api.ppid.grafikberdasarkanjeniskelamin[
+          "create"
+        ].post(grafikBerdasarkanJenisKelamin.create.form);
+        if (res.status === 200) {
+          grafikBerdasarkanJenisKelamin.create.form = defaultForm;
+          grafikBerdasarkanJenisKelamin.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        grafikBerdasarkanJenisKelamin.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
+          omit: { isActive: true };
+        }>[]
+      | null,
+    loading: false,
+    async load() {
+      const res = await ApiFetch.api.ppid.grafikberdasarkanjeniskelamin[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        grafikBerdasarkanJenisKelamin.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+
+const stateGrafikBerdasarkanJenisKelamin = proxy({
+  grafikBerdasarkanJenisKelamin,
+});
+export default stateGrafikBerdasarkanJenisKelamin;

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

@@ -0,0 +1,84 @@
+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 templateGrafikResponden = z.object({
+  sangatbaik: z.string().min(1, "Data sangat baik harus diisi"),
+  baik: z.string().min(1, "Data baik harus diisi"),
+  kurangbaik: z.string().min(1, "Data kurang baik harus diisi"),
+  tidakbaik: z.string().min(1, "Data tidak baik harus diisi"),
+});
+
+type GrafikResponden = Prisma.GrafikBerdasarkanRespondenGetPayload<{
+  select: {
+    sangatbaik: true;
+    baik: true;
+    kurangbaik: true;
+    tidakbaik: true;
+  };
+}>;
+
+const defaultForm: GrafikResponden = {
+  sangatbaik: "",
+  baik: "",
+  kurangbaik: "",
+  tidakbaik: "",
+};
+
+const grafikBerdasarkanResponden = proxy({
+  create: {
+    form: defaultForm,
+    loading: false,
+    async create() {
+      const cek = templateGrafikResponden.safeParse(
+        grafikBerdasarkanResponden.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        grafikBerdasarkanResponden.create.loading = true;
+        const res = await ApiFetch.api.ppid.grafikberdasarkanresponden[
+          "create"
+        ].post(grafikBerdasarkanResponden.create.form);
+        if (res.status === 200) {
+          grafikBerdasarkanResponden.create.form = defaultForm;
+          grafikBerdasarkanResponden.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        grafikBerdasarkanResponden.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.GrafikBerdasarkanRespondenGetPayload<{
+          omit: { isActive: true };
+        }>[]
+      | null,
+    loading: false,
+    async load() {
+      const res = await ApiFetch.api.ppid.grafikberdasarkanresponden[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        grafikBerdasarkanResponden.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+
+const stateGrafikResponden = proxy({
+  grafikBerdasarkanResponden,
+});
+
+export default stateGrafikResponden;

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

@@ -0,0 +1,84 @@
+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 templateGrafikUmur = z.object({
+    remaja: z.string().min(2, "Data remaja harus diisi"),
+    dewasa: z.string().min(2, "Data dewasa harus diisi"),
+    orangtua: z.string().min(2, "Data orangtua harus diisi"),
+    lansia: z.string().min(2, "Data lansia harus diisi"),
+});
+
+type GrafikUmur = Prisma.GrafikBerdasarkanUmurGetPayload<{
+    select: {
+        remaja: true;
+        dewasa: true;
+        orangtua: true;
+        lansia: true;
+    };
+}>;
+
+const defaultForm: GrafikUmur = {
+    remaja: "",
+    dewasa: "",
+    orangtua: "",
+    lansia: "",
+};
+
+const grafikBerdasarkanUmur = proxy({
+    create: {
+        form: defaultForm,
+        loading: false,
+        async create() {
+            const cek = templateGrafikUmur.safeParse(
+                grafikBerdasarkanUmur.create.form
+            );
+            if (!cek.success) {
+                const err = `[${cek.error.issues
+                    .map((v) => `${v.path.join(".")}`)
+                    .join("\n")}] required`;
+                return toast.error(err);
+            }
+            try {
+                grafikBerdasarkanUmur.create.loading = true;
+                const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
+                    "create"
+                ].post(grafikBerdasarkanUmur.create.form);
+                if (res.status === 200) {
+                    grafikBerdasarkanUmur.create.form = defaultForm;
+                    grafikBerdasarkanUmur.findMany.load();
+                    return toast.success("success create");
+                }
+                return toast.error("failed create");
+            } catch (error) {
+                console.log((error as Error).message);
+            } finally {
+                grafikBerdasarkanUmur.create.loading = false;
+            }
+        },
+    },
+    findMany: {
+        data: null as 
+        | Prisma.GrafikBerdasarkanUmurGetPayload<{
+            omit: { isActive: true };
+        }>[]
+        | null,
+        loading: false,
+        async load() {
+            const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
+                "find-many"
+            ].get();
+            if (res.status === 200) {
+                grafikBerdasarkanUmur.findMany.data = res.data?.data ?? [];
+            }
+        },
+    },
+})
+
+const stateGrafikBerdasarkanUmur = proxy({
+    grafikBerdasarkanUmur,
+})
+
+export default stateGrafikBerdasarkanUmur;

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

@@ -0,0 +1,76 @@
+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 templateGrafikHasilKepuasanMasyarakat = z.object({
+  label: z.string().min(2, "Label harus diisi"),
+  kepuasan: z.string().min(2, "Kepuasan harus diisi"),
+});
+
+type GrafikHasilKepuasanMasyarakat = Prisma.IndeksKepuasanMasyarakatGetPayload<{
+  select: {
+    label: true;
+    kepuasan: true;
+  };
+}>;
+
+const defaultForm: GrafikHasilKepuasanMasyarakat = {
+  label: "",
+  kepuasan: "",
+};
+
+const grafikHasilKepuasanMasyarakat = proxy({
+  create: {
+    form: defaultForm,
+    loading: false,
+    async create() {
+      const cek = templateGrafikHasilKepuasanMasyarakat.safeParse(
+        grafikHasilKepuasanMasyarakat.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        grafikHasilKepuasanMasyarakat.create.loading = true;
+        const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat["create"].post(
+          grafikHasilKepuasanMasyarakat.create.form
+        );
+        if (res.status === 200) {
+          grafikHasilKepuasanMasyarakat.create.form = {
+            label: "",
+            kepuasan: ""
+          };
+          grafikHasilKepuasanMasyarakat.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        grafikHasilKepuasanMasyarakat.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+    | Prisma.IndeksKepuasanMasyarakatGetPayload<{ omit: { isActive: true } }>[]
+    | null,
+    async load() {
+        const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat["find-many"].get();
+        if (res.status === 200) {
+            grafikHasilKepuasanMasyarakat.findMany.data = res.data?.data ?? [];
+        }
+    }
+  }
+});
+
+const stateGrafikHasilKepuasanMasyarakat = proxy({
+  grafikHasilKepuasanMasyarakat,
+});
+
+export default stateGrafikHasilKepuasanMasyarakat;

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

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

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

@@ -0,0 +1,68 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+    name: z.string().min(3, "Nama minimal 3 karakter"),
+    email: z.string().min(3, "Email minimal 3 karakter"),
+    notelp: z.string().min(3, "Nomor Telepon minimal 3 karakter"),
+    alasan: z.string().min(3, "Alasan minimal 3 karakter"),
+})
+
+type PermohonanKeberatanInformasiForm = Prisma.FormulirPermohonanKeberatanGetPayload<{
+    select: {
+        name: true;
+        email: true;
+        notelp: true;
+        alasan: true;
+    };
+}>;
+
+const permohonanKeberatanInformasiForm = proxy({
+    create: {
+        form: {} as PermohonanKeberatanInformasiForm,
+        loading: false,
+        async create(){
+            const cek = templateForm.safeParse(permohonanKeberatanInformasiForm.create.form);
+            if(!cek.success) {
+                const err = `[${cek.error.issues
+                    .map((v) => `${v.path.join(".")}`)
+                    .join("\n")}] required`;
+                return toast.error(err);
+            }
+            try {
+                permohonanKeberatanInformasiForm.create.loading = true;
+                const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["create"].post(permohonanKeberatanInformasiForm.create.form);
+                if (res.status === 200) {
+                    permohonanKeberatanInformasiForm.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;
+            }
+        },
+    },
+    findMany: {
+        data: null as
+        | Prisma.FormulirPermohonanKeberatanGetPayload<{omit: {isActive: true}}>[]
+        | null,
+        async load() {
+            const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["find-many"].get();
+            if (res.status === 200) {
+                permohonanKeberatanInformasiForm.findMany.data = res.data?.data ?? [];
+            }
+        }
+    }
+});
+
+const statePermohonanKeberatan = proxy({
+    permohonanKeberatanInformasiForm,
+})
+
+export default statePermohonanKeberatan;
+

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

@@ -0,0 +1,125 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+// 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"),
+});
+
+// Type ambil dari Prisma
+type ProfilePPIDForm = Prisma.ProfilePPIDGetPayload<{
+  select: {
+    id: true;
+    name: true;
+    biodata: true;
+    riwayat: true;
+    pengalaman: true;
+    unggulan: true;
+    imageUrl: true;
+  };
+}>;
+
+// Proxy utama
+const stateProfilePPID = proxy({
+  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;
+      }
+    },
+  },
+
+  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/berita/_com/BeritaEditor.tsx

@@ -24,8 +24,14 @@ export function BeritaEditor({ onSubmit }: { onSubmit: (val: string) => void })
       TextAlign.configure({ types: ['heading', 'paragraph'] }),
     ],
     content,
+    immediatelyRender: false
   });
 
+  if (!editor) {
+    return null;
+  }
+
+
   return (
     <Stack>
       <RichTextEditor editor={editor}>

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

@@ -4,15 +4,15 @@ import { useShallowEffect } from '@mantine/hooks';
 import { Prisma } from '@prisma/client';
 import { IconImageInPicture } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
-import stateDashboardBerita from '../../_state/berita';
+import stateDashboardBerita from '../../_state/desa/berita';
 import { BeritaEditor } from './_com/BeritaEditor';
 
 function Page() {
   return (
     <Stack>
-      <SimpleGrid cols={2}>
+      <SimpleGrid cols={{base: 1, md: 2}}>
-        <BeritaList />
         <BeritaCreate />
+        <BeritaList />
       </SimpleGrid>
     </Stack>
   );

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

@@ -2,7 +2,7 @@
 import { Group, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
-import stateDesaPengumuman from '../../_state/pengumuman';
+import stateDesaPengumuman from '../../_state/desa/pengumuman';
 import { useShallowEffect } from '@mantine/hooks';
 import { Prisma } from '@prisma/client';
 import { BeritaEditor } from '../berita/_com/BeritaEditor';

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_com/TextEditor.tsx

@@ -0,0 +1,80 @@
+'use client'
+import { RichTextEditor, Link } from '@mantine/tiptap';
+import { useEditor } from '@tiptap/react';
+import Highlight from '@tiptap/extension-highlight';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Superscript from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+
+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>';
+
+function TextEditor() {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content,
+  });
+
+  return (
+    <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>
+  );
+}
+export default TextEditor

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_com/kesehatanEditor.tsx

@@ -0,0 +1,94 @@
+'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';
+
+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 KesehatanEditor({ onSubmit, onChange, showSubmit = true }: { 
+  onSubmit?: (val: string) => void, 
+  onChange: (val: string) => void, 
+  showSubmit?: boolean }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content,
+    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>
+  );
+}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/doctor_sign/page.tsx

@@ -0,0 +1,23 @@
+'use client'
+import { Box, Text } from '@mantine/core';
+import React from 'react';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import { useProxy } from 'valtio/utils';
+import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+
+function DoctorSignUI() {
+  const doctorSign = useProxy(stateArtikelKesehatan.doctorSign)
+  return (
+    <Box>
+      <Text fw={"bold"}>Kapan Harus ke Dokter</Text>
+      <KesehatanEditor 
+      showSubmit={false}
+      onChange={(val) => {
+        doctorSign.create.form.content = val
+      }}
+      />
+    </Box>
+  );
+}
+
+export default DoctorSignUI;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/first_aid/page.tsx

@@ -0,0 +1,29 @@
+'use client'
+import { Box, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function FirstAidUI() {
+  const firstAidState = useProxy(stateArtikelKesehatan.firstAid)
+  return (
+    <Box>
+    <TextInput
+    label={<Text fw={"bold"}>Title Pertolongan Pertama</Text>}
+    placeholder="Masukkan title"
+    onChange={(val) => {
+      firstAidState.create.form.title = val.target.value
+    }}
+    /> 
+    <KesehatanEditor
+    showSubmit={false}
+    onChange={(val) => {
+      firstAidState.create.form.content = val
+    }}
+    />
+    </Box>
+  );
+}
+
+export default FirstAidUI;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/introduction/page.tsx

@@ -0,0 +1,23 @@
+'use client'
+import { Box, Text } from '@mantine/core';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+
+function IntoductionUI() {
+  const introduction = useProxy(stateArtikelKesehatan.introduction)
+  return (
+    <Box py={10}>
+    <Text fw={"bold"}>Pendahuluan</Text>
+    <KesehatanEditor
+    showSubmit={false}
+    onChange={(val) => {
+      introduction.create.form.content = val;
+    }}
+    />
+    </Box>
+  );
+}
+
+export default IntoductionUI;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/mythVsfact/page.tsx

@@ -0,0 +1,35 @@
+'use client'
+import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import { Box, Text, TextInput } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+
+function MythFactUI() {
+  const mythFact = useProxy(stateArtikelKesehatan.mythFact)
+  return (
+    <Box py={10}>
+      <TextInput
+      label={<Text fw={"bold"}>Title Pertolongan Pertama Penyakit</Text>}
+      placeholder="Masukkan title"
+      onChange={(val) => {
+        mythFact.create.form.title = val.target.value
+      }}
+      />
+      <TextInput
+      label={<Text fw={"bold"}>Mitos</Text>}
+      placeholder="Masukkan mitos"
+      onChange={(val) => {
+        mythFact.create.form.mitos = val.target.value
+      }}
+      />
+      <TextInput
+      label={<Text fw={"bold"}>Fakta</Text>}
+      placeholder="Masukkan fakta"
+      onChange={(val) => {
+        mythFact.create.form.fakta = val.target.value
+      }}
+      />
+    </Box>
+  );
+}
+
+export default MythFactUI;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/page.tsx

@@ -0,0 +1,149 @@
+'use client'
+import { Box, Button, Center, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import IntoductionUI from './introduction/page';
+import SymptomUI from './symptom/page';
+import PreventionUI from './prevention/page';
+import MythFactUI from './mythVsfact/page';
+import DoctorSignUI from './doctor_sign/page';
+import { useProxy } from 'valtio/utils';
+import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import FirstAidUI from './first_aid/page';
+import { useShallowEffect } from '@mantine/hooks';
+import colors from '@/con/colors';
+
+function ArtikelKesehatan() {
+  const state = useProxy(stateArtikelKesehatan)
+  const submitAllForms = () => {
+    if (state.introduction.create.form.content) {
+      state.introduction.create.create()
+    }
+    if (state.symptom.create.form.title && state.symptom.create.form.content) {
+      state.symptom.create.create()
+    }
+    if (state.prevention.create.form.title && state.prevention.create.form.content) {
+      state.prevention.create.create()
+    }
+    if (state.firstAid.create.form.title && state.firstAid.create.form.content) {
+      state.firstAid.create.create()
+    }
+    if (state.mythFact.create.form.title && state.mythFact.create.form.mitos && state.mythFact.create.form.fakta) {
+      state.mythFact.create.create()
+    }
+    if (state.doctorSign.create.form.content) {
+      state.doctorSign.create.create()
+    }
+  }
+  return (
+    <Stack py={10}>
+      <SimpleGrid cols={{
+        base: 1, md: 2
+      }}>
+        <Box >
+          <Title order={3}>Artikel Kesehatan</Title>
+          <IntoductionUI />
+          <SymptomUI />
+          <PreventionUI />
+          <FirstAidUI />
+          <MythFactUI />
+          <DoctorSignUI />
+          <Button mt={10} onClick={submitAllForms}>Submit</Button>
+        </Box>
+
+        <Box>
+          <Title order={3}>List Artikel Kesehatan</Title>
+          <AllList />
+        </Box>
+      </SimpleGrid>
+    </Stack>
+  );
+}
+
+function AllList() {
+  const listState = useProxy(stateArtikelKesehatan)
+  useShallowEffect(() => {
+    listState.introduction.findMany.load();
+    listState.symptom.findMany.load();
+    listState.prevention.findMany.load();
+    listState.firstAid.findMany.load();
+    listState.mythFact.findMany.load();
+    listState.doctorSign.findMany.load();
+  }, [])
+
+  if (!listState.introduction.findMany.data
+    || !listState.symptom.findMany.data
+    || !listState.prevention.findMany.data
+    || !listState.firstAid.findMany.data
+    || !listState.mythFact.findMany.data
+    || !listState.doctorSign.findMany.data
+  ) return <Stack>
+    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
+  </Stack>
+  return <Stack>
+    <Title order={4}>Intoduction</Title>
+    {listState.introduction.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+      </Box>
+    ))}
+    {/* Symptom */}
+    {listState.symptom.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Title order={4}>{item.title}</Title>
+        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+      </Box>
+    ))}
+    {/* Prevention */}
+    {listState.prevention.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Title order={4}>{item.title}</Title>
+        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+      </Box>
+    ))}
+    {/* First Aid */}
+    {listState.firstAid.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Title order={4}>{item.title}</Title>
+        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+      </Box>
+    ))}
+    {/* Myth Fact */}
+    {listState.mythFact.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Title order={4}>{item.title}</Title>
+        <Table
+          striped
+          highlightOnHover
+          withTableBorder
+          withColumnBorders
+          bg={colors['white-1']}
+        >
+          <TableThead >
+            <TableTr >
+              <TableTh >
+                <Center>Mitos</Center>
+              </TableTh>
+              <TableTh >
+                <Center>Fakta</Center>
+              </TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody >
+            <TableTr>
+              <TableTd ta="center">{item.mitos}</TableTd>
+              <TableTd ta="center">{item.fakta}</TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+      </Box>
+    ))}
+    {/* Doctor Sign */}
+    <Title order={4}>Kapan Harus Ke Dokter?</Title>
+    {listState.doctorSign.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Text dangerouslySetInnerHTML={{ __html: item.content }}/>
+      </Box>
+    ))}
+  </Stack>
+}
+
+export default ArtikelKesehatan;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/prevention/page.tsx

@@ -0,0 +1,30 @@
+'use client'
+import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import { Box, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function PreventionUI() {
+  const preventionState = useProxy(stateArtikelKesehatan.prevention)
+  return (
+    <Box py={10}>
+      <TextInput
+      mb={10}
+        label={<Text fw={"bold"}>Title Pencegahan Penyakit</Text>}
+        placeholder="Masukkan title"
+        onChange={(val) => {
+          preventionState.create.form.title = val.target.value
+        }}
+      />
+      <KesehatanEditor
+        showSubmit={false}
+        onChange={(val) => {
+          preventionState.create.form.content = val
+        }}
+      />
+    </Box>
+  );
+}
+
+export default PreventionUI;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/symptom/page.tsx

@@ -0,0 +1,29 @@
+'use client'
+import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import { Box, Text, TextInput } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function SymptomUI() {
+  const symptomState = useProxy(stateArtikelKesehatan.symptom)
+  return (
+    <Box py={10}>
+      <TextInput
+      mb={10}
+        label={<Text fw={"bold"}>Title Gejala Penyakit</Text>}
+        placeholder='masukkan title'
+        onChange={(val) => {
+          symptomState.create.form.title = val.target.value
+        }}
+      />
+      <KesehatanEditor
+        showSubmit={false}
+        onChange={(val) => {
+          symptomState.create.form.content = val
+        }}
+      />
+    </Box>
+  );
+}
+
+export default SymptomUI;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/dokterdantenagamedis/listData.tsx

@@ -0,0 +1,89 @@
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import colors from '@/con/colors';
+import { Center, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import _ from 'lodash';
+import { useProxy } from 'valtio/utils';
+
+function DokterdanTenagaMedisList() {
+  const kesehatanState = useProxy(stateFasilitasKesehatan.dokterdantenagamedis);
+  
+  useShallowEffect(() => {
+    kesehatanState.findMany.load();
+  }, []);
+
+  // Penanganan kasus ketika tidak ada data
+  if (_.isEmpty(kesehatanState.findMany.data)) {
+    return (
+      <Stack>
+        <Table
+          striped 
+          highlightOnHover 
+          withTableBorder 
+          withColumnBorders
+          bg={colors['white-1']}
+        >
+          <TableThead>
+            <TableTr>
+              <TableTh>
+                <Center>Nama</Center>
+              </TableTh>
+              <TableTh>
+                <Center>Specialist</Center>
+              </TableTh>
+              <TableTh >
+                <Center>Jadwal</Center>
+              </TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody >
+            <TableTr >
+              <TableTd  colSpan={3}>
+                <Center>
+                  <Text>Tidak ada data</Text>
+                </Center>
+              </TableTd>
+            </TableTr>
+          </TableTbody> 
+        </Table>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack>
+      <Table     
+        striped 
+        highlightOnHover 
+        withTableBorder 
+        withColumnBorders
+        bg={colors['white-1']}
+      >
+        <TableThead >
+          <TableTr >
+            <TableTh >
+              <Center>Nama</Center>
+            </TableTh>
+            <TableTh >
+              <Center>Specialist</Center>
+            </TableTh>
+            <TableTh >
+              <Center>Jadwal</Center>
+            </TableTh>
+          </TableTr>
+        </TableThead>
+        <TableTbody >
+          {kesehatanState.findMany.data?.map((item) => (
+            <TableTr  key={item.id}>
+              <TableTd  ta="center">{item.name}</TableTd>
+              <TableTd  ta="center">Specialist {item.specialist}</TableTd>
+              <TableTd  ta="center">{item.jadwal}</TableTd>
+            </TableTr>
+          ))}
+        </TableTbody> 
+      </Table>
+    </Stack>
+  );
+}
+
+export default DokterdanTenagaMedisList;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/dokterdantenagamedis/page.tsx

@@ -0,0 +1,36 @@
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import { Box, Text, TextInput } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+
+function DokterDanTenagaMedis() {
+  const dokterdantenagamedisState = useProxy(stateFasilitasKesehatan.dokterdantenagamedis)
+  return (
+    <Box>
+      <Text fw={"bold"}>Dokter & Tenaga Medis</Text>
+      <TextInput
+        label="Nama Dokter"
+        placeholder='masukkan nama dokter'
+        onChange={(val) => {
+          dokterdantenagamedisState.create.form.name = val.target.value
+        }}
+      />
+      <TextInput
+        label="Specialist"
+        placeholder='masukkan specialist'
+        onChange={(val) => {
+          dokterdantenagamedisState.create.form.specialist = val.target.value
+        }}
+      />
+      <TextInput
+      mb={10}
+        label="Jadwal"
+        placeholder='masukkan jadwal'
+        onChange={(val) => {
+          dokterdantenagamedisState.create.form.jadwal = val.target.value
+        }}
+      />
+    </Box>
+  );
+}
+
+export default DokterDanTenagaMedis;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/fasilitas_pendukung/listData.tsx

@@ -0,0 +1,21 @@
+import { Box, Stack, Text } from '@mantine/core';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import { useShallowEffect } from '@mantine/hooks';
+
+function FasilitasPendukungList() {
+  const fasilitaspendukungState = useProxy(stateFasilitasKesehatan.fasilitaspendukung)
+  useShallowEffect(() => {
+    fasilitaspendukungState.findMany.load()
+  }, [])
+  return <Stack>
+    {fasilitaspendukungState.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Text dangerouslySetInnerHTML={{__html: item.content}}/>
+      </Box>
+    ))}
+  </Stack>
+}
+
+export default FasilitasPendukungList;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/fasilitas_pendukung/page.tsx

@@ -0,0 +1,18 @@
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import { Box, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function FasilitasPendukung() {
+  const fasilitaspendukungState = useProxy(stateFasilitasKesehatan.fasilitaspendukung)
+  return <Box>
+    <Text fw={"bold"}>Fasilitas Pendukung</Text>
+    <KesehatanEditor 
+        showSubmit={false}
+        onChange={(val) => {
+          fasilitaspendukungState.create.form.content = val;
+        }} />
+  </Box>
+}
+
+export default FasilitasPendukung;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/informasi_umum/page.tsx

@@ -0,0 +1,35 @@
+'use client'
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import { Box, Text, TextInput } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+
+function InformasiUmum() {
+  const infromasiState = useProxy(stateFasilitasKesehatan.informasiumum)
+  return<Box>
+      <Text fw={"bold"}>Informasi Umum</Text>
+      <TextInput
+        label="Fasilitas"
+        placeholder='masukkan nama fasilitas kesehatan'
+        onChange={(val) => {
+          infromasiState.create.form.fasilitas = val.target.value
+        }}
+      />
+      <TextInput
+        label="Alamat"
+        placeholder='masukkan alamat'
+        onChange={(val) => {
+          infromasiState.create.form.alamat = val.target.value
+        }}
+      />
+      <TextInput
+        mb={10}
+        label="Jam Operasional"
+        placeholder='masukkan jam operasional'
+        onChange={(val) => {
+          infromasiState.create.form.jamOperasional = val.target.value
+        }}
+      />
+    </Box>
+}
+
+export default InformasiUmum;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/layanan_unggulan/page.tsx

@@ -0,0 +1,20 @@
+'use client'
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import { Box, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function LayananUnggulan() {
+  const informasiumumState = useProxy(stateFasilitasKesehatan.layananunggulan)
+  return <Box>
+    <Text fw={"bold"}>Layanan Unggulan</Text>
+    <KesehatanEditor 
+    showSubmit={false}
+    onChange={(val) => {
+      informasiumumState.create.form.content = val;
+    }} />
+  </Box>
+    ;
+}
+
+export default LayananUnggulan;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/page.tsx

@@ -0,0 +1,241 @@
+"use client"
+
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import colors from '@/con/colors';
+import { Box, Button, Center, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import DokterDanTenagaMedis from './dokterdantenagamedis/page';
+import FasilitasPendukung from './fasilitas_pendukung/page';
+import InformasiUmum from './informasi_umum/page';
+import LayananUnggulan from './layanan_unggulan/page';
+import ProsedurPendaftaran from './prosedurpendaftaran/page';
+import TarifDanLayanan from './tarifdanlayanan/page';
+
+
+function FasilitasKesehatan() {
+  const allState = useProxy(stateFasilitasKesehatan)
+  const submitAllForms = () => {
+    if (allState.informasiumum.create.form.fasilitas &&
+      allState.informasiumum.create.form.alamat &&
+      allState.informasiumum.create.form.jamOperasional) {
+      allState.informasiumum.create.create()
+    }
+
+    if (allState.layananunggulan.create.form.content) {
+      allState.layananunggulan.create.create();
+    }
+
+    if (allState.dokterdantenagamedis.create.form.name &&
+      allState.dokterdantenagamedis.create.form.specialist &&
+      allState.dokterdantenagamedis.create.form.jadwal) {
+      allState.dokterdantenagamedis.create.create()
+    }
+
+    if (allState.fasilitaspendukung.create.form.content) {
+      allState.fasilitaspendukung.create.create();
+    }
+
+    if (allState.tarifdanlayanan.create.form.tarif &&
+      allState.tarifdanlayanan.create.form.layanan) {
+      allState.tarifdanlayanan.create.create()
+    }
+
+    if (allState.prosedurpendaftaran.create.form.content) {
+      allState.prosedurpendaftaran.create.create();
+    }
+
+    // refreshListData();
+    // resetAllForms();
+  }
+
+  // const refreshListData = () => {
+  //   allState.informasiumum.findMany.load();
+  //   allState.layananunggulan.findMany.load();
+  //   allState.dokterdantenagamedis.findMany.load();
+  //   allState.fasilitaspendukung.findMany.load();
+  //   allState.tarifdanlayanan.findMany.load();
+  //   allState.prosedurpendaftaran.findMany.load();
+  // }
+
+  // const resetAllForms = () => {
+  //   allState.informasiumum.create.form = {
+  //     fasilitas: '',
+  //     alamat: '',
+  //     jamOperasional: ''
+  //   };
+  //   allState.layananunggulan.create.form = {
+  //     content: ''
+  //   };
+  //   allState.dokterdantenagamedis.create.form = {
+  //     name: '',
+  //     specialist: '',
+  //     jadwal: ''
+  //   };
+  //   allState.fasilitaspendukung.create.form = {
+  //     content: ''
+  //   };
+  //   allState.tarifdanlayanan.create.form = {
+  //     tarif: '',
+  //     layanan: ''
+  //   };
+  //   allState.prosedurpendaftaran.create.form = {
+  //     content: ''
+  //   };
+  // }
+
+  return (
+    <Stack py={10}>
+      <SimpleGrid cols={{
+        base: 1, md: 2
+      }}>
+        <Box>
+          <Stack gap={'xs'}>
+            <Title order={3}>Fasilitas Kesehatan</Title>
+            {/* Informasi Umum */}
+            <InformasiUmum />
+            {/* Layanan Unggulan */}
+            <LayananUnggulan />
+            {/* Dokter & Tenaga Medis */}
+            <DokterDanTenagaMedis />
+            {/* Fasilitas Pendukung */}
+            <FasilitasPendukung />
+            {/* Tarif & Layanan */}
+            <TarifDanLayanan />
+            {/* Prosedur Pendaftaran */}
+            <ProsedurPendaftaran />
+            <Button onClick={submitAllForms}>Submit</Button>
+          </Stack>
+        </Box>
+
+        <Box>
+          <Stack gap={"xs"}>
+            <Title order={3}>List Fasilitas Kesehatan</Title>
+            <AllList />
+          </Stack>
+        </Box>
+      </SimpleGrid>
+
+    </Stack>
+  );
+}
+
+function AllList() {
+  const allListState = useProxy(stateFasilitasKesehatan)
+  useShallowEffect(() => {
+    allListState.informasiumum.findMany.load();
+    allListState.layananunggulan.findMany.load();
+    allListState.dokterdantenagamedis.findMany.load();
+    allListState.fasilitaspendukung.findMany.load();
+    allListState.tarifdanlayanan.findMany.load();
+    allListState.prosedurpendaftaran.findMany.load();
+  }, [])
+
+  if (!allListState.informasiumum.findMany.data
+    || !allListState.layananunggulan.findMany.data
+    || !allListState.dokterdantenagamedis.findMany.data
+    || !allListState.fasilitaspendukung.findMany.data
+    || !allListState.tarifdanlayanan.findMany.data
+    || !allListState.prosedurpendaftaran.findMany.data
+  ) return <Stack>
+    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
+  </Stack>
+  return <Stack>
+    <Title order={4}>Informasi Umum</Title>
+    {allListState.informasiumum.findMany.data?.map((item) => (
+      <Box key={item.id}>
+
+        <Text>{item.fasilitas}</Text>
+        <Text>{item.alamat}</Text>
+        <Text>{item.jamOperasional}</Text>
+      </Box>
+    ))}
+
+    <Title order={4}>Layanan Unggulan</Title>
+    {allListState.layananunggulan.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+      </Box>
+    ))}
+
+
+    <Title order={4}>Dokter & Tenaga Medis</Title>
+    
+    <Table
+      striped
+      highlightOnHover
+      withTableBorder
+      withColumnBorders
+      bg={colors['white-1']}
+    >
+      <TableThead >
+        <TableTr >
+          <TableTh >
+            <Center>Nama</Center>
+          </TableTh>
+          <TableTh >
+            <Center>Specialist</Center>
+          </TableTh>
+          <TableTh >
+            <Center>Jadwal</Center>
+          </TableTh>
+        </TableTr>
+      </TableThead>
+      <TableTbody >
+        {allListState.dokterdantenagamedis.findMany.data?.map((item) => (
+          <TableTr key={item.id}>
+            <TableTd ta="center">{item.name}</TableTd>
+            <TableTd ta="center">Specialist {item.specialist}</TableTd>
+            <TableTd ta="center">{item.jadwal}</TableTd>
+          </TableTr>
+        ))}
+      </TableTbody>
+    </Table>
+
+    <Title order={4}>Fasilitas Pendukung</Title>
+    {allListState.fasilitaspendukung.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+      </Box>
+    ))}
+
+    <Title order={4}>Tarif & Layanan</Title>
+    <Table
+      suppressHydrationWarning
+      striped
+      highlightOnHover
+      withTableBorder
+      withColumnBorders
+      bg={colors['white-1']}
+    >
+      <TableThead>
+        <TableTr>
+          <TableTh>
+            Layanan
+          </TableTh>
+          <TableTh>
+            Tarif
+          </TableTh>
+        </TableTr>
+      </TableThead>
+      <TableTbody>
+        {allListState.tarifdanlayanan.findMany.data?.map((item) => (
+          <TableTr key={item.id}>
+            <TableTd>{item.layanan}</TableTd>
+            <TableTd>Rp.{item.tarif}</TableTd>
+          </TableTr>
+        ))}
+      </TableTbody>
+    </Table>
+
+    <Title order={4}>Prosedur Pendaftaran</Title>
+    {allListState.prosedurpendaftaran.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Text dangerouslySetInnerHTML={{__html: item.content}}/>
+      </Box>
+    ))}
+
+  </Stack>
+}
+
+export default FasilitasKesehatan;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/prosedurpendaftaran/listData.tsx

@@ -0,0 +1,25 @@
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import { Box, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+
+function ListProsedurPendaftaran() {
+  const prosedurpendaftaranState = useProxy(stateFasilitasKesehatan.prosedurpendaftaran)
+  useShallowEffect(() => {
+    prosedurpendaftaranState.findMany.load()
+  }, [])
+
+  if (!prosedurpendaftaranState.findMany.data)return<Stack>
+    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
+  </Stack>
+  
+  return <Stack>
+    {prosedurpendaftaranState.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Text dangerouslySetInnerHTML={{__html: item.content}}/>
+      </Box>
+    ))}
+  </Stack>
+}
+
+export default ListProsedurPendaftaran;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/prosedurpendaftaran/page.tsx

@@ -0,0 +1,19 @@
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import { Box, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function ProsedurPendaftaran() {
+  const prosedurpendaftaranState = useProxy(stateFasilitasKesehatan.prosedurpendaftaran)
+  return <Box>
+      <Text fw={"bold"}>Prosedur Pendaftaran</Text>
+      <KesehatanEditor 
+          showSubmit={false}
+          onChange={(val) => {
+            prosedurpendaftaranState.create.form.content = val;
+          }} />
+    </Box>
+  
+}
+
+export default ProsedurPendaftaran;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/tarifdanlayanan/listData.tsx

@@ -0,0 +1,82 @@
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import colors from '@/con/colors';
+import { Center, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import _ from 'lodash';
+import { useProxy } from 'valtio/utils';
+
+function TarifDanLayananList() {
+  const tarifdanlayanan = useProxy(stateFasilitasKesehatan.tarifdanlayanan)
+  useShallowEffect(() => {
+    tarifdanlayanan.findMany.load()
+  }, [])
+  
+  if (_.isEmpty(tarifdanlayanan.findMany.data)) {
+    return (
+      <Stack>
+        <Table
+          striped 
+          highlightOnHover 
+          withTableBorder 
+          withColumnBorders
+          bg={colors['white-1']}
+        >
+          <TableThead>
+            <TableTr>
+              <TableTh>
+                <Center>Nama</Center>
+              </TableTh>
+              <TableTh>
+                <Center>Specialist</Center>
+              </TableTh>
+              <TableTh >
+                <Center>Jadwal</Center>
+              </TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody >
+            <TableTr >
+              <TableTd  colSpan={3}>
+                <Center>
+                  <Text>Tidak ada data</Text>
+                </Center>
+              </TableTd>
+            </TableTr>
+          </TableTbody> 
+        </Table>
+      </Stack>
+    );
+  }
+
+  return <Stack>
+    <Table
+    suppressHydrationWarning
+    striped 
+    highlightOnHover 
+    withTableBorder 
+    withColumnBorders
+    bg={colors['white-1']}
+    >
+      <TableThead>
+        <TableTr>
+          <TableTh>
+            Layanan
+          </TableTh>
+          <TableTh>
+            Tarif
+          </TableTh>
+        </TableTr>
+      </TableThead>
+      <TableTbody>
+        {tarifdanlayanan.findMany.data?.map((item) => (
+          <TableTr key={item.id}>
+            <TableTd>{item.layanan}</TableTd>
+            <TableTd>Rp.{item.tarif}</TableTd>
+          </TableTr>
+        ))}
+      </TableTbody>
+    </Table>
+  </Stack>
+}
+
+export default TarifDanLayananList;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/tarifdanlayanan/page.tsx

@@ -0,0 +1,27 @@
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import { Box, Text, TextInput } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+
+function TarifDanLayanan() {
+  const tarifdanlayanan = useProxy(stateFasilitasKesehatan.tarifdanlayanan)
+  return <Box>
+  <Text fw={"bold"}>Tarif & Layanan</Text>
+  <TextInput
+    label="Tarif"
+    placeholder='masukkan tarif'
+    onChange={(val) => {
+      tarifdanlayanan.create.form.tarif = val.target.value
+    }}
+  />
+  <TextInput
+  mb={10}
+    label="Layanan"
+    placeholder='masukkan layanan'
+    onChange={(val) => {
+      tarifdanlayanan.create.form.layanan = val.target.value
+    }}
+  />
+</Box>
+}
+
+export default TarifDanLayanan;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/grafik_hasil_kepuasan/page.tsx

@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import stategrafikKepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
+import colors from '@/con/colors';
+import { Box, Button, Group, Stack, TextInput, Title } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { useEffect, useState } from 'react';
+import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
+import { useProxy } from 'valtio/utils';
+
+function GrafikHasilKepuasan() {
+  const grafikkepuasan = useProxy(stategrafikKepuasan.grafikkepuasan)
+  const [mounted, setMounted] = useState(false);
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 768px)')
+  const [chartData, setChartData] = useState<any[]>([])
+
+  useShallowEffect(() => {
+    const fetchData = async () => {
+      await grafikkepuasan.findMany.load();
+      if (grafikkepuasan.findMany.data && grafikkepuasan.findMany.data.length > 0) {
+        setChartData(grafikkepuasan.findMany.data);
+      }
+    };
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    setMounted(true); // setelah komponen siap di client
+  }, []);
+
+  if (!mounted) {
+    return null; // Jangan render apa-apa dulu sebelum mounted
+  }
+
+
+  return (
+    <Stack gap={"xs"}>
+      <Title order={3}>Grafik Hasil Kepuasan</Title>
+      <Box>
+        <TextInput
+          w={{ base: '100%', md: '50%' }}
+          label="Label"
+          placeholder='Masukkan label yang diinginkan'
+          value={grafikkepuasan.create.form.label}
+          onChange={(val) => {
+            grafikkepuasan.create.form.label = val.currentTarget.value
+          }}
+        />
+        <TextInput
+          w={{ base: '100%', md: '50%' }}
+          label="Jumlah Penderita"
+          type='number'
+          placeholder='Masukkan jumlah penderita'
+          value={grafikkepuasan.create.form.jumlah}
+          onChange={(val) => {
+            grafikkepuasan.create.form.jumlah = val.currentTarget.value
+          }}
+        />
+      </Box>
+      <Group>
+        <Button mt={10}
+          onClick={async () => {
+            await grafikkepuasan.create.create();
+            await grafikkepuasan.findMany.load();
+            if (grafikkepuasan.findMany.data) {
+              setChartData(grafikkepuasan.findMany.data);
+            }
+          }}
+        >Submit</Button>
+      </Group>
+      <Box h={400} w={{ base: "100%", md: "80%" }}>
+        <Title py={15} order={3}>Data Kelahiran & Kematian</Title>
+        <BarChart
+          width={isMobile ? 450 : isTablet ? 600 : 900}
+          height={380}
+          data={chartData}
+        >
+          <XAxis dataKey="label" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah" />
+        </BarChart>
+      </Box>
+    </Stack>
+  );
+}
+
+export default GrafikHasilKepuasan;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/deskripsi_kegiatan/page.tsx

@@ -0,0 +1,21 @@
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import { Box, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function DeskripsiKegiatan() {
+  const deskripsiKegiatanState = useProxy(stateJadwalKegiatan.deskripsiKegiatan)
+  return (
+    <Box>
+      <Text pt={10} fw={"bold"}>Deskripsi Kegiatan</Text>
+      <KesehatanEditor
+      showSubmit={false}
+      onChange={(val) => {
+        deskripsiKegiatanState.create.form.deskripsi = val
+      }}
+      />
+    </Box>
+  );
+}
+
+export default DeskripsiKegiatan;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/dokumen_yang_diperlukan/page.tsx

@@ -0,0 +1,23 @@
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import { Box, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function DokumenYangDiperlukan() {
+  const dokumenDiperlukan = useProxy(stateJadwalKegiatan.dokumenjadwalkegiatan)
+  return (
+    <Box>
+      <Text pt={10} fw={"bold"}>Dokumen Yang Diperlukan</Text>
+      <KesehatanEditor
+      showSubmit={false}
+      onChange={(val)=> {
+        dokumenDiperlukan.create.form.content = val;
+      }}
+      />
+    </Box>
+  );
+}
+
+export default DokumenYangDiperlukan;
+
+

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/informasi_kegiatan/page.tsx

@@ -0,0 +1,42 @@
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import { Box, Text, TextInput } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+
+function InformasiKegiatan() {
+  const informasiKegiatanState = useProxy(stateJadwalKegiatan.informasiKegiatan)
+  return (
+    <Box>
+      <Text pt={10} fw={"bold"}>Informasi Kegiatan</Text>
+      <TextInput
+        label="Nama Kegiatan"
+        placeholder="Masukkan nama kegiatan"
+        onChange={(val) => {
+          informasiKegiatanState.create.form.name = val.target.value
+        }}
+      />
+      <TextInput
+        label="Tanggal"
+        placeholder="Masukkan tanggal kegiatan"
+        onChange={(val) => {
+          informasiKegiatanState.create.form.tanggal = val.target.value
+        }}
+      />
+      <TextInput
+        label="Waktu"
+        placeholder="Masukkan waktu kegiatan"
+        onChange={(val) => {
+          informasiKegiatanState.create.form.waktu = val.target.value
+        }}
+      />
+      <TextInput
+        label="Lokasi"
+        placeholder="Masukkan lokasi kegiatan"
+        onChange={(val) => {
+          informasiKegiatanState.create.form.lokasi = val.target.value
+        }}
+      />
+    </Box>
+  );
+}
+
+export default InformasiKegiatan;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/layanan_yang_tersedia/page.tsx

@@ -0,0 +1,21 @@
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import { Box, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function LayananTersedia() {
+  const layananTersediaState = useProxy(stateJadwalKegiatan.layanantersedia)
+  return (
+    <Box>
+      <Text pt={10} fw={"bold"}>Layanan Yang Tersedia</Text>
+      <KesehatanEditor
+      showSubmit={false}
+      onChange={(val) => {
+        layananTersediaState.create.form.content = val;
+      }}
+      />
+    </Box>
+  );
+}
+
+export default LayananTersedia;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/page.tsx

@@ -0,0 +1,173 @@
+'use client'
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import { Box, Button, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import DeskripsiKegiatan from './deskripsi_kegiatan/page';
+import DokumenYangDiperlukan from './dokumen_yang_diperlukan/page';
+import InformasiKegiatan from './informasi_kegiatan/page';
+import LayananTersedia from './layanan_yang_tersedia/page';
+import Pendaftaran from './pendaftaran/page';
+import SyaratDanKetentuan from './syarat_dan_ketentuan/page';
+
+function JadwalKegiatan() {
+  const allState = useProxy(stateJadwalKegiatan)
+  const submitAllForms = () => {
+
+    if (allState.informasiKegiatan.create.form.name &&
+      allState.informasiKegiatan.create.form.tanggal &&
+      allState.informasiKegiatan.create.form.waktu &&
+      allState.informasiKegiatan.create.form.lokasi) {
+      allState.informasiKegiatan.create.create()
+    }
+    if (allState.deskripsiKegiatan.create.form.deskripsi) {
+      allState.deskripsiKegiatan.create.create();
+    }
+
+    if (allState.layanantersedia.create.form.content) {
+      allState.layanantersedia.create.create();
+    }
+
+    if (allState.syaratketentuan.create.form.content) {
+      allState.syaratketentuan.create.create();
+    }
+
+    if (allState.dokumenjadwalkegiatan.create.form.content) {
+      allState.dokumenjadwalkegiatan.create.create();
+    }
+
+    if (allState.pendaftaranjadwal.create.form.name &&
+      allState.pendaftaranjadwal.create.form.tanggal &&
+      allState.pendaftaranjadwal.create.form.namaOrangtua &&
+      allState.pendaftaranjadwal.create.form.nomor &&
+      allState.pendaftaranjadwal.create.form.alamat &&
+      allState.pendaftaranjadwal.create.form.catatan
+    ) {
+      allState.pendaftaranjadwal.create.create();
+    }
+  }
+
+
+  return (
+    <Stack py={10}>
+      <SimpleGrid cols={{
+        base: 1, md: 2
+      }}>
+        <Box>
+          <Title order={3}>Jadwal Kegiatan</Title>
+          <InformasiKegiatan />
+          <DeskripsiKegiatan />
+          <LayananTersedia />
+          <SyaratDanKetentuan />
+          <DokumenYangDiperlukan />
+          <Pendaftaran />
+          <Button mt={10} onClick={submitAllForms}>
+            Submit
+          </Button>
+        </Box>
+
+        <Box>
+          <Title order={3}>List Jadwal Kegiatan</Title>
+          <AllList />
+        </Box>
+      </SimpleGrid>
+    </Stack>
+  );
+}
+
+function AllList() {
+  const allList = useProxy(stateJadwalKegiatan)
+
+  useShallowEffect(() => {
+    allList.informasiKegiatan.findMany.load()
+    allList.deskripsiKegiatan.findMany.load()
+    allList.layanantersedia.findMany.load()
+    allList.syaratketentuan.findMany.load()
+    allList.dokumenjadwalkegiatan.findMany.load()
+    allList.pendaftaranjadwal.findMany.load()
+  }, [])
+
+  const isLoading = !allList.informasiKegiatan.findMany.data ||
+    !allList.deskripsiKegiatan.findMany.data ||
+    !allList.layanantersedia.findMany.data ||
+    !allList.syaratketentuan.findMany.data ||
+    !allList.dokumenjadwalkegiatan.findMany.data ||
+    !allList.pendaftaranjadwal.findMany.data
+
+  if (isLoading) {
+    return (
+      <Stack>
+        <Title order={4}>Informasi Kegiatan</Title>
+        {Array.from({ length: 10 }).map((_, k) => <Skeleton key={k} h={40} />)}
+      </Stack>
+    );
+  }
+  return (
+    <Stack>
+      <Title order={4}>Informasi Kegiatan</Title>
+      {allList.informasiKegiatan.findMany.data?.map((item) => {
+        return (
+          <Box key={item.id}>
+            <Text>{item.name}</Text>
+            <Text>{item.tanggal}</Text>
+            <Text>{item.waktu}</Text>
+            <Text>{item.lokasi}</Text>
+          </Box>
+        )
+      })}
+
+      <Title order={4}>Deskripsi Kegiatan</Title>
+      {allList.deskripsiKegiatan.findMany.data?.map((item) => {
+        return (
+          <Box key={item.id}>
+            <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+          </Box>
+        )
+      })}
+
+      <Title order={4}>Layanan Yang Tersedia</Title>
+      {allList.layanantersedia.findMany.data?.map((item) => {
+        return (
+          <Box key={item.id}>
+            <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+          </Box>
+        )
+      })}
+
+      <Title order={4}>Syarat dan Ketentuan</Title>
+      {allList.syaratketentuan.findMany.data?.map((item) => {
+        return (
+          <Box key={item.id}>
+            <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+          </Box>
+        )
+      })}
+
+      <Title order={4}>Dokumen Yang Diperlukan</Title>
+      {allList.dokumenjadwalkegiatan.findMany.data?.map((item) => {
+        return (
+          <Box key={item.id}>
+            <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+          </Box>
+        )
+      })}
+
+      <Title order={4}>Pendaftaran</Title>
+      {allList.pendaftaranjadwal.findMany.data?.map((item) => {
+        return (
+          <Box key={item.id}>
+            <Text>{item.name}</Text>
+            <Text>{item.tanggal}</Text>
+            <Text>{item.namaOrangtua}</Text>
+            <Text>{item.nomor}</Text>
+            <Text>{item.alamat}</Text>
+            <Text>{item.catatan}</Text>
+          </Box>
+        )
+      })}
+    </Stack>
+  )
+}
+
+
+export default JadwalKegiatan;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/pendaftaran/page.tsx

@@ -0,0 +1,58 @@
+'use client'
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import { Box, Text, Textarea, TextInput } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+
+function Pendaftaran() {
+    const pendaftaran = useProxy(stateJadwalKegiatan.pendaftaranjadwal)
+
+  return (
+    <Box>
+      <Text pt={10} fw={"bold"}>Pendaftaran</Text>
+      <TextInput
+      label='Nama Balita'
+      placeholder='Masukkan nama balita'
+      onChange={(val) => {
+        pendaftaran.create.form.name = val.target.value
+      }}
+      />
+      <TextInput
+      label='Tanggal'
+      placeholder='Masukkan tanggal'
+      onChange={(val) => {
+        pendaftaran.create.form.tanggal = val.target.value
+      }}
+      />
+      <TextInput
+      label='Nama Orang Tua / Wali'
+      placeholder='Masukkan nama orang tua / wali'
+      onChange={(val) => {
+        pendaftaran.create.form.namaOrangtua = val.target.value
+      }}
+      />
+      <TextInput
+      label='No. Telepon'
+      placeholder='Masukkan no. telepon'
+      onChange={(val) => {
+        pendaftaran.create.form.nomor = val.target.value
+      }}
+      />
+      <TextInput
+      label='Alamat'
+      placeholder='Masukkan alamat'
+      onChange={(val) => {
+        pendaftaran.create.form.alamat = val.target.value
+      }}
+      />
+      <Textarea
+      label='Catatan Khusus (Opsional)'
+      placeholder='Masukkan catatan khusus'
+      onChange={(val) => {
+        pendaftaran.create.form.catatan = val.target.value
+      }}
+      />
+    </Box>
+  );
+}
+
+export default Pendaftaran;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/syarat_dan_ketentuan/page.tsx

@@ -0,0 +1,21 @@
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import { Box, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function SyaratDanKetentuan() {
+  const syaratKetentuan = useProxy(stateJadwalKegiatan.syaratketentuan)
+  return (
+    <Box>
+      <Text pt={10} fw={"bold"}>Syarat dan Ketentuan</Text>
+      <KesehatanEditor
+      showSubmit={false}
+      onChange={(val) => {
+        syaratKetentuan.create.form.content = val;
+      }}
+      />
+    </Box>
+  );
+}
+
+export default SyaratDanKetentuan;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/persentase_data_kelahiran_kematian/page.tsx

@@ -0,0 +1,109 @@
+'use client'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import statePersentase from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
+import { Box, Button, Stack, TextInput, Title } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { useEffect, useState } from 'react';
+import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
+import { useProxy } from 'valtio/utils';
+
+function PersentaseDataKelahiranKematian() {
+  const persentase = useProxy(statePersentase.persentasekelahiran);
+  const [chartData, setChartData] = useState<any[]>([]);
+  const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useShallowEffect(() => {
+    const fetchData = async () => {
+      await persentase.findMany.load();
+      if (persentase.findMany.data && persentase.findMany.data.length > 0) {
+        setChartData(persentase.findMany.data);
+      }
+    };
+    fetchData();
+  }, []);
+
+  return (
+    <Stack py={10}>
+      {/* Form Input */}
+      <Box>
+        <Title order={3}>Persentase Data Kelahiran & Kematian</Title>
+        <TextInput
+          w={{ base: '100%', md: '50%' }}
+          label="Tahun"
+          type="number"
+          value={persentase.create.form.tahun}
+          placeholder="Masukkan tahun"
+          onChange={(val) => {
+            persentase.create.form.tahun = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          w={{ base: '100%', md: '50%' }}
+          label="Kematian Kasar"
+          type="number"
+          value={persentase.create.form.kematianKasar}
+          placeholder="Masukkan kematian kasar"
+          onChange={(val) => {
+            persentase.create.form.kematianKasar = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          w={{ base: '100%', md: '50%' }}
+          label="Kematian Bayi"
+          type="number"
+          value={persentase.create.form.kematianBayi}
+          placeholder="Masukkan kematian bayi"
+          onChange={(val) => {
+            persentase.create.form.kematianBayi = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          w={{ base: '100%', md: '50%' }}
+          label="Kelahiran Kasar"
+          type="number"
+          value={persentase.create.form.kelahiranKasar}
+          placeholder="Masukkan kelahiran kasar"
+          onChange={(val) => {
+            persentase.create.form.kelahiranKasar = val.currentTarget.value;
+          }}
+        />
+        <Button
+          mt={10}
+          onClick={async () => {
+            await persentase.create.create();
+            await persentase.findMany.load();
+            if (persentase.findMany.data) {
+              setChartData(persentase.findMany.data);
+            }
+          }}
+        >
+          Submit
+        </Button>
+      </Box>
+
+      {/* Chart */}
+      <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+        <Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
+        {mounted && chartData.length > 0 && (
+          <BarChart width={isMobile ? 450 : isTablet ? 600 : 900} height={380} data={chartData} >
+            <XAxis dataKey="tahun" />
+            <YAxis />
+            <Tooltip />
+            <Legend />
+            <Bar dataKey="kematianKasar" fill="#f03e3e" name="Kematian Kasar" />
+            <Bar dataKey="kematianBayi" fill="#ff922b" name="Kematian Bayi" />
+            <Bar dataKey="kelahiranKasar" fill="#4dabf7" name="Kelahiran Kasar" />
+          </BarChart>
+        )}
+      </Box>
+    </Stack>
+  );
+}
+
+export default PersentaseDataKelahiranKematian;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/page.tsx

@@ -1,11 +1,53 @@
-import React from 'react';
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from '@mantine/core';
+import ArtikelKesehatan from './_ui/artikel_kesehatan/page';
+import FasilitasKesehatan from './_ui/fasilitas_kesehatan/page';
+import GrafikHasilKepuasan from './_ui/grafik_hasil_kepuasan/page';
+import JadwalKegiatan from './_ui/jadwal_kegiatan/page';
+import PersentaseDataKelahiranKematian from './_ui/persentase_data_kelahiran_kematian/page';
+
 
 function Page() {
   return (
-    <div>
+    <Stack>
-      Data Kesehatan Warga
+      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Persentase Kelahiran & Kematian"}>
-    </div>
+        <TabsList >
+          <TabsTab value="Persentase Kelahiran & Kematian">
+            Persentase Kelahiran & Kematian
+          </TabsTab>
+          <TabsTab value="Grafik Hasil Kepuasan">
+            Grafik Hasil Kepuasan
+          </TabsTab>
+          <TabsTab value="Fasilitas Kesehatan">
+            Fasilitas Kesehatan
+          </TabsTab>
+          <TabsTab value="Jadwal Kegiatan">
+            Jadwal Kegiatan
+          </TabsTab>
+          <TabsTab value="Artikel Kesehatan">
+            Artikel Kesehatan
+          </TabsTab>
+        </TabsList>
+
+        <TabsPanel value="Persentase Kelahiran & Kematian">
+          <PersentaseDataKelahiranKematian />
+        </TabsPanel>
+        <TabsPanel value="Grafik Hasil Kepuasan">
+          <GrafikHasilKepuasan/>
+        </TabsPanel>
+        <TabsPanel value="Fasilitas Kesehatan">
+          <FasilitasKesehatan/>
+        </TabsPanel>
+        <TabsPanel value="Jadwal Kegiatan">
+          <JadwalKegiatan/>
+        </TabsPanel>
+        <TabsPanel value="Artikel Kesehatan">
+          <ArtikelKesehatan/>
+        </TabsPanel>
+
+      </Tabs>
+    </Stack>
   );
 }
 
-export default Page;
+export default Page;

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

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

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

@@ -0,0 +1,94 @@
+'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';
+
+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 PPIDEditor({ onSubmit, onChange, showSubmit = true }: { 
+  onSubmit?: (val: string) => void, 
+  onChange: (val: string) => void, 
+  showSubmit?: boolean }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content,
+    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>
+  );
+}

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

@@ -1,11 +1,113 @@
+'use client'
+import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, TextInput, Title } from '@mantine/core';
 import React from 'react';
+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';
 
 function Page() {
+  const daftarInformasi = useProxy(stateDaftarInformasiPublik.daftarInformasi)
+  const submit = () => {
+    if (daftarInformasi.create.form.jenisInformasi &&
+      daftarInformasi.create.form.deskripsi &&
+      daftarInformasi.create.form.tanggal) {
+      daftarInformasi.create.create()
+    }
+  }
   return (
-    <div>
+    <Box>
-      daftar-informasi-publik-desa-darmasaba
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
-    </div>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Title fw={"bold"} order={3}>Daftar Informasi Publik Desa Darmasaba</Title>
+              <TextInput
+                label="Jenis Informasi"
+                placeholder="masukkan jenis informasi"
+                onChange={(val) => {
+                  daftarInformasi.create.form.jenisInformasi = val.target.value
+                }}
+              />
+              <PPIDEditor
+                showSubmit={false}
+                onChange={(val) => {
+                  daftarInformasi.create.form.deskripsi = val
+                }}
+              />
+              <TextInput
+                label="Tanggal Publikasi"
+                placeholder="masukkan tanggal publikasi"
+                onChange={(val) => {
+                  daftarInformasi.create.form.tanggal = val.target.value
+                }}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                >Submit</Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <ListDaftarInformasi />
+        </Box>
+      </SimpleGrid>
+    </Box>
   );
 }
 
+function ListDaftarInformasi() {
+  const listData = useProxy(stateDaftarInformasiPublik.daftarInformasi)
+  useShallowEffect(() => {
+    listData.findMany.load()
+  }, [])
+  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>
+}
+
 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>
+    <Stack gap={"xs"}>
-      dasar-hukum
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
-    </div>
+        <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/_ui/grafik_berdasarkan_jenis_kelamin_responden/page.tsx

@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import stateGrafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
+import colors from '@/con/colors';
+import { Box, Button, Center, Flex, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useEffect, useState } from 'react';
+import { Cell, Pie, PieChart } from 'recharts';
+import { useProxy } from 'valtio/utils';
+
+function GrafikBerdasarkanJenisKelamin() {
+  const grafikBerdasarkanJenisKelamin = useProxy(stateGrafikBerdasarkanJenisKelamin.grafikBerdasarkanJenisKelamin)
+  const [donutData, setDonutData] = useState<any[]>([]);
+  const [mounted, setMounted] = useState(false);
+
+  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);
+    }
+  };
+
+  const handleSubmit = async () => {
+    try {
+      // Simpan data baru
+      await grafikBerdasarkanJenisKelamin.create.create();
+
+      // Muat ulang data
+      await grafikBerdasarkanJenisKelamin.findMany.load();
+
+      // Update chart dengan data baru
+      if (grafikBerdasarkanJenisKelamin.findMany.data) {
+        updateChartData(grafikBerdasarkanJenisKelamin.findMany.data);
+      }
+
+      // Reset form setelah submit
+      grafikBerdasarkanJenisKelamin.create.form.laki = '';
+      grafikBerdasarkanJenisKelamin.create.form.perempuan = '';
+    } catch (error) {
+      console.error("Error submitting data:", error);
+    }
+  };
+
+  return (
+    <Box>
+      <Box py={15}>
+        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+          <Title order={3}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
+          <TextInput
+            w={{ base: '100%', md: '50%' }}
+            label="Laki-laki"
+            placeholder="masukkan jumlah laki-laki"
+            value={grafikBerdasarkanJenisKelamin.create.form.laki}
+            onChange={(val) => {
+              grafikBerdasarkanJenisKelamin.create.form.laki = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            w={{ base: '100%', md: '50%' }}
+            label="Perempuan"
+            type="number"
+            placeholder="masukkan jumlah perempuan"
+            value={grafikBerdasarkanJenisKelamin.create.form.perempuan}
+            onChange={(val) => {
+              grafikBerdasarkanJenisKelamin.create.form.perempuan = val.currentTarget.value;
+            }}
+          />
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Submit
+          </Button>
+        </Paper>
+      </Box>
+
+      {/* Chart */}
+      <Box>
+        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+          <Stack>
+            <Title pb={10} order={3}>Grafik Berdasarkan Jenis Kelamin Responden</Title>
+            {mounted && donutData.length > 0 && (
+              <Box style={{ width: '100%', height: 'auto', minHeight: 900 }}>
+                <Center>
+                  <PieChart
+                    width={1000} height={400}
+                    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>
+          </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default GrafikBerdasarkanJenisKelamin;

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

@@ -0,0 +1,173 @@
+'use client'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import stateGrafikResponden from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden';
+import colors from '@/con/colors';
+import { Box, Button, Center, Flex, Group, Paper, Stack, Text, TextInput, Title } 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);
+    }
+  };
+
+  const handleSubmit = async () => {
+    try {
+      // Simpan data baru
+      await grafikBerdasarkanResponden.create.create();
+
+      // Muat ulang data
+      await grafikBerdasarkanResponden.findMany.load();
+
+      // Update chart dengan data baru
+      if (grafikBerdasarkanResponden.findMany.data) {
+        updateChartData(grafikBerdasarkanResponden.findMany.data);
+      }
+
+      // Reset form setelah submit
+      grafikBerdasarkanResponden.create.form.sangatbaik = '';
+      grafikBerdasarkanResponden.create.form.baik = '';
+      grafikBerdasarkanResponden.create.form.kurangbaik = '';
+      grafikBerdasarkanResponden.create.form.tidakbaik = '';
+    } catch (error) {
+      console.error("Error submitting data:", error);
+    }
+  };
+  return (
+    <Box>
+      <Box py={15}>
+        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+          <Stack gap={"xs"}>
+            <Title order={3}>Grafik Berdasarkan Responden</Title>
+            <TextInput
+              w={{ base: '100%', md: '50%' }}
+              label="Sangat Baik"
+              value={grafikBerdasarkanResponden.create.form.sangatbaik}
+              placeholder="masukkan jumlah respon sangat baik"
+              onChange={(val) => {
+                grafikBerdasarkanResponden.create.form.sangatbaik = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              w={{ base: '100%', md: '50%' }}
+              label="Baik"
+              value={grafikBerdasarkanResponden.create.form.baik}
+              placeholder="masukkan jumlah respon baik"
+              onChange={(val) => {
+                grafikBerdasarkanResponden.create.form.baik = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              w={{ base: '100%', md: '50%' }}
+              label="Kurang Baik"
+              value={grafikBerdasarkanResponden.create.form.kurangbaik}
+              placeholder="masukkan jumlah respon kurang baik"
+              onChange={(val) => {
+                grafikBerdasarkanResponden.create.form.kurangbaik = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              w={{ base: '100%', md: '50%' }}
+              label="Tidak Baik"
+              value={grafikBerdasarkanResponden.create.form.tidakbaik}
+              placeholder="masukkan jumlah respon tidak baik"
+              onChange={(val) => {
+                grafikBerdasarkanResponden.create.form.tidakbaik = val.currentTarget.value;
+              }}
+            />
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+
+      {/* Chart */}
+      <Box>
+        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+          <Stack>
+            <Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
+            {mounted && donutData.length > 0 && (
+              <Box style={{ width: '100%', height: 'auto', minHeight: 900 }}>
+                <Center>
+                  <PieChart
+                    width={1000} height={400}
+                    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>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default GrafikBerdasarkanResponden;

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

@@ -0,0 +1,164 @@
+'use client'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import colors from '@/con/colors';
+import { Box, Button, Center, Flex, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import React, { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import stateGrafikBerdasarkanUmur from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanUmur';
+import { useShallowEffect } from '@mantine/hooks';
+import { PieChart, Pie, Cell } from 'recharts';
+
+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);
+    }
+  }
+
+  const handleSubmit = async () => {
+    try {
+      await grafikBerdasarkanUmur.create.create();
+      await grafikBerdasarkanUmur.findMany.load();
+      if (grafikBerdasarkanUmur.findMany.data) {
+        updateChartData(grafikBerdasarkanUmur.findMany.data);
+      }
+    } catch (error) {
+      console.error("Error submitting data:", error);
+    }
+  }
+  return (
+    <Box>
+      <Box py={15}>
+        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+          <Stack gap={"xs"}>
+            <Title order={3}>Grafik Berdasarkan Umur Responden</Title>
+            <TextInput
+              w={{ base: '100%', md: '50%' }}
+              label="Remaja"
+              placeholder="masukkan jumlah responden remaja"
+              value={grafikBerdasarkanUmur.create.form.remaja}
+              onChange={(val) => {
+                grafikBerdasarkanUmur.create.form.remaja = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              w={{ base: '100%', md: '50%' }}
+              label="Dewasa"
+              placeholder="masukkan jumlah responden dewasa"
+              value={grafikBerdasarkanUmur.create.form.dewasa}
+              onChange={(val) => {
+                grafikBerdasarkanUmur.create.form.dewasa = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              w={{ base: '100%', md: '50%' }}
+              label="Orangtua"
+              placeholder="masukkan jumlah responden orangtua"
+              value={grafikBerdasarkanUmur.create.form.orangtua}
+              onChange={(val) => {
+                grafikBerdasarkanUmur.create.form.orangtua = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              w={{ base: '100%', md: '50%' }}
+              label="Lansia"
+              placeholder="masukkan jumlah responden lansia"
+              value={grafikBerdasarkanUmur.create.form.lansia}
+              onChange={(val) => {
+                grafikBerdasarkanUmur.create.form.lansia = val.currentTarget.value;
+              }}
+            />
+            <Group>
+              <Button
+                mt={10}
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+
+      {/* Chart */}
+      <Box>
+        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+          <Stack>
+            <Title pb={10} order={3}>Grafik Berdasarkan Umur Responden</Title>
+            {mounted && donutData.length > 0 && (
+              <Box style={{ width: '100%', height: 'auto', minHeight: 900 }}>
+                <Center>
+                  <PieChart
+                    width={1000} height={400}
+                    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>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default GrafikBerdasarakanUmur;

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

@@ -0,0 +1,96 @@
+/* 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, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import React, { useEffect, useState } from 'react';
+import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } 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();
+  }, []);
+
+  return (
+    <Box>
+      <Box py={15}>
+        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+          <Stack>
+            <Title order={3}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
+            <TextInput
+              w={{ base: '100%', md: '50%' }}
+              label="Label"
+              placeholder="masukkan label"
+              value={grafikHasilKepuasan.create.form.label}
+              onChange={(val) => {
+                grafikHasilKepuasan.create.form.label = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              w={{ base: '100%', md: '50%' }}
+              label="Jumlah Kepuasan"
+              type="number"
+              placeholder="masukkan jumlah kepuasan"
+              value={grafikHasilKepuasan.create.form.kepuasan}
+              onChange={(val) => {
+                grafikHasilKepuasan.create.form.kepuasan = val.currentTarget.value;
+              }}
+            />
+            <Button
+              mt={10}
+              bg={colors['blue-button']}
+              onClick={async () => {
+                await grafikHasilKepuasan.create.create();
+                await grafikHasilKepuasan.findMany.load();
+                if (grafikHasilKepuasan.findMany.data) {
+                  setChartData(grafikHasilKepuasan.findMany.data);
+                }
+              }}
+            >
+              Submit
+            </Button>
+          </Stack>
+        </Paper>
+      </Box>
+
+      {/* Chart */}
+      <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+        <Paper style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }} bg={colors['white-1']} p={'md'}>
+          <Stack gap={"xs"}>
+            <Title pb={10} order={3}>Data Kepuasan Masyarakat</Title>
+            {mounted && chartData.length > 0 && (
+              <BarChart width={isMobile ? 300 : isTablet ? 600 : 900} height={380} data={chartData} >
+                <XAxis dataKey="label" />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+                <Bar dataKey="kepuasan" fill={colors['blue-button']} name="Kepuasan" />
+              </BarChart>
+            )}
+          </Stack>
+        </Paper>
+      </Box>
+
+    </Box>
+  );
+}
+
+export default GrafikHasilKepuasan;

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

@@ -1,10 +1,44 @@
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from '@mantine/core';
 import React from 'react';
+import colors from '@/con/colors';
+import GrafikHasilKepuasan from './_ui/grafik_hasil_kepuasan_masyarakat/page';
+import GrafikBerdasarkanJenisKelamin from './_ui/grafik_berdasarkan_jenis_kelamin_responden/page';
+import GrafikBerdasarkanResponden from './_ui/grafik_berdasarkan_responden/page';
+import GrafikBerdasarakanUmur from './_ui/grafik_berdasarkan_umur/page';
 
 function Page() {
   return (
-    <div>
+    <Stack>
-      ikm-desa-darmasaba
+      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik"}>
-    </div>
+        <TabsList>
+          <TabsTab value="Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik">
+            Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik
+          </TabsTab>
+          <TabsTab value="Grafik Berdasarkan Jenis Kelamin Responden">
+            Grafik Berdasarkan Jenis Kelamin Responden
+          </TabsTab>
+          <TabsTab value="Grafik Berdasarkan Pilihan Responden">
+            Grafik Berdasarkan Pilihan Responden
+          </TabsTab>
+          <TabsTab value="Grafik Berdasarkan Umur Responden">
+            Grafik Berdasarkan Umur Responden
+          </TabsTab>
+        </TabsList>
+
+        <TabsPanel value="Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik">
+          <GrafikHasilKepuasan/>
+        </TabsPanel>
+        <TabsPanel value="Grafik Berdasarkan Jenis Kelamin Responden">
+          <GrafikBerdasarkanJenisKelamin/>
+        </TabsPanel>
+        <TabsPanel value="Grafik Berdasarkan Pilihan Responden">
+          <GrafikBerdasarkanResponden/>
+        </TabsPanel>
+        <TabsPanel value="Grafik Berdasarkan Umur Responden">
+          <GrafikBerdasarakanUmur/>
+        </TabsPanel>
+      </Tabs>
+    </Stack>
   );
 }
 

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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,45 @@
+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,11 +1,115 @@
-import React from 'react';
+'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';
 
 function Page() {
   return (
-    <div>
+    <Box>
-      permohonan-informasi-publik
+      <Stack>
-    </div>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <PermohonanInformasiPublikCreate />
+        </SimpleGrid>
+      </Stack>
+    </Box>
   );
 }
 
-export default Page;
+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,11 +1,98 @@
+'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 { useProxy } from 'valtio/utils';
+import statePermohonanKeberatan from '../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi';
+import { useShallowEffect } from '@mantine/hooks';
 
 function Page() {
   return (
-    <div>
+    <Box>
-      permohonan-keberatan-informasi-publik
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
-    </div>
+        <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)
+  useShallowEffect(() => {
+    listState.findMany.load()
+  }, [])
+
+  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>
+          ))}
+        </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

@@ -0,0 +1,74 @@
+'use client'
+import { Box, Group, Text } from '@mantine/core';
+import React, { useState } from 'react';
+
+import { useProxy } from 'valtio/utils';
+import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
+import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
+import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
+import { IconUpload, IconX, IconPhoto } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+
+
+function Biodata() {
+  const biodataState = useProxy(stateProfilePPID)
+  const [loading, setLoading] = useState(false);
+  return (<Box>
+    <Text fw={"bold"}>Biodata</Text>
+    <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;

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

@@ -0,0 +1,68 @@
+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}>
+            <Box>
+              <Text fw={"bold"}>Gambar</Text>
+              {item.imageUrl ? (
+                <Image
+                  src={item.imageUrl}
+                  alt="Foto Profil"
+                  w={200}
+                  radius="md"
+                />
+              ) : (
+                <Text c="dimmed">Belum ada foto</Text>
+              )}
+            </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,11 +1,79 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+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';
+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() {
   return (
-    <div>
+    <Box>
-      profile-ppid
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
-    </div>
+        <ProfileCreate />
+        <ProfileList />
+      </SimpleGrid>
+    </Box>
   );
 }
 
-export default 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.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 (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"xs"}>
+        <Title order={3}>Profile PPID</Title>
+        <TextInput
+          label={<Text fw={"bold"}>Nama Perbekel</Text>}
+          placeholder="masukkan nama perbekel"
+          value={allState.findById.data?.name || ''}
+          onChange={(val) => {
+            if (allState.findById.data) {
+              allState.findById.data.name = val.currentTarget.value
+            }
+          }}
+        />
+        <Biodata />
+        <RiwayatKarir />
+        <PengalamanOrganisasi />
+        <ProgramKerjaUnggulan />
+        <Group>
+          <Button 
+            bg={colors['blue-button']} 
+            onClick={submit}
+            loading={allState.update.loading}
+          >
+            Submit
+          </Button>
+        </Group>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;

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

@@ -0,0 +1,26 @@
+'use client'
+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 { PPIDTextEditor } from '../../_com/PPIDTextEditor';
+
+function PengalamanOrganisasi() {
+  const pengalamanOrganisasiState = useProxy(stateProfilePPID)
+  return (<Box>
+    <Text fw={"bold"}>Pengalaman Organisasi</Text>
+    <PPIDTextEditor
+    key={pengalamanOrganisasiState.findById.data?.id ?? 'new'}
+    showSubmit={false}
+    onChange={(val) => {
+      if (pengalamanOrganisasiState.findById.data) {
+        pengalamanOrganisasiState.findById.data.pengalaman = val;
+      }
+    }}
+    initialContent={pengalamanOrganisasiState.findById.data?.pengalaman ?? ''}
+    />
+  </Box>
+  );
+}
+
+export default PengalamanOrganisasi;

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

@@ -0,0 +1,26 @@
+'use client'
+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 { PPIDTextEditor } from '../../_com/PPIDTextEditor';
+
+function ProgramKerjaUnggulan() {
+  const programKerjaUnggulanState = useProxy(stateProfilePPID)
+  return (<Box>
+    <Text fw={"bold"}>Program Kerja Unggulan</Text>
+    <PPIDTextEditor
+    key={programKerjaUnggulanState.findById.data?.id ?? 'new'}
+    showSubmit={false}
+    onChange={(val) => {
+      if (programKerjaUnggulanState.findById.data) {
+        programKerjaUnggulanState.findById.data.unggulan = val;
+      }
+    }}
+    initialContent={programKerjaUnggulanState.findById.data?.unggulan ?? ''}
+    />
+  </Box>
+  );
+}
+
+export default ProgramKerjaUnggulan;

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { Box, Text } from '@mantine/core';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import dynamic from 'next/dynamic';
+import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
+
+// ini penting
+const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
+  ssr: false, // disable server side rendering
+});
+function RiwayatKarir() {
+  const riwayatKarirState = useProxy(stateProfilePPID);
+
+  return (
+    <Box>
+      <Text fw={"bold"}>Riwayat Karir</Text>
+      <PPIDTextEditor
+      key={riwayatKarirState.findById.data?.id ?? 'new'}
+        showSubmit={false}
+        onChange={(val) => {
+          if (riwayatKarirState.findById.data) {
+            riwayatKarirState.findById.data.riwayat = val;
+          }
+        }}
+        initialContent={riwayatKarirState.findById.data?.riwayat ?? ''}
+      />
+    </Box>
+  );
+}
+
+export default RiwayatKarir;

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>
+    <Box>
-      visi-misi-ppid
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
-    </div>
+        <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/admin/layout.tsx

@@ -39,9 +39,6 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         c={colors["blue-button"]}
         component={ScrollArea}
       >
-        <AppShell.Section h={100} bg={"gray.1"}>
-          <Text c={colors["blue-button"]}>Heder Navbar</Text>
-        </AppShell.Section>
         <AppShell.Section >
           {navBar.map((v, k) => {
             return (
@@ -73,7 +70,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           })}
         </AppShell.Section>
 
-        <AppShell.Section>
+        <AppShell.Section py={20}>
           <Group justify="end">
             <ActionIcon variant="light" onClick={toggleDesktop}><IconChevronLeft /></ActionIcon>
           </Group>

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/doctor_sign/create.ts

@@ -0,0 +1,26 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.DoctorSignGetPayload<{
+    select: {
+        content: true;
+    }
+}>
+
+export default async function doctorSignCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.doctorSign.create({
+        data: {
+            content: body.content,
+        },
+    });
+    return {
+        success: true,
+        message: "Success create doctor sign",
+        data: {
+            ...body,
+        },
+    };
+}

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/doctor_sign/find-many.ts

@@ -0,0 +1,10 @@
+import prisma from "@/lib/prisma";
+
+export default async function doctorSignFindMany() {
+    const data = await prisma.doctorSign.findMany();
+    return {
+        success: true,
+        message: "Success get doctor sign",
+        data,
+    };
+}

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/doctor_sign/index.ts

@@ -0,0 +1,15 @@
+import Elysia, { t } from "elysia"
+import doctorSignCreate from "./create"
+import doctorSignFindMany from "./find-many"
+
+const DoctorSign = new Elysia({
+    prefix: "/doctor_sign",
+    tags: ["Data Kesehatan/Artikel Kesehatan/Doctor Sign"],
+})
+    .get("/find-many", doctorSignFindMany)
+    .post("/create", doctorSignCreate, {
+        body: t.Object({
+            content: t.String(),
+        }),
+    })
+export default DoctorSign

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/first_aid/create.ts

@@ -0,0 +1,27 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.FirstAidGetPayload<{
+    select: {
+        title: true;
+        content: true;
+    }
+}>
+export default async function firstAidCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.firstAid.create({
+        data: {
+            title: body.title,
+            content: body.content,
+        },
+    });
+    return {
+        success: true,
+        message: "Success create first aid",
+        data: {
+            ...body,
+        },
+    };
+}

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/first_aid/find-many.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/first_aid/index.ts

@@ -0,0 +1,16 @@
+import Elysia, { t } from "elysia"
+import firstAidCreate from "./create"
+import firstAidFindMany from "./find-many"
+
+const FirstAid = new Elysia({
+    prefix: "/firstaid",
+    tags: ["Data Kesehatan/Artikel Kesehatan/First Aid"]
+})
+    .get("/find-many", firstAidFindMany)
+    .post("/create", firstAidCreate, {
+        body: t.Object({
+            title: t.String(),
+            content: t.String(),
+        }),
+    })
+export default FirstAid

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/introduction/create.ts

@@ -0,0 +1,26 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.IntroductionGetPayload<{
+  select: {
+    content: true;
+  };
+}>;
+
+export default async function introductionCreate(context: Context) {
+  const body = context.body as FormCreate;
+
+  await prisma.introduction.create({
+    data: {
+      content: body.content,
+    },
+  });
+  return {
+    success: true,
+    message: "Success create introduction",
+    data: {
+      ...body,
+    },
+  };
+}

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/introduction/find-many.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/introduction/index.ts

@@ -0,0 +1,16 @@
+import Elysia, { t } from "elysia";
+import introductionCreate from "./create";
+import introductionFindMany from "./find-many";
+
+const Introduction = new Elysia({
+    prefix: "/introduction",
+    tags: ["Data Kesehatan/Artikel Kesehatan/Introduction"]
+})
+    .get("/find-many", introductionFindMany)
+    .post("/create", introductionCreate, {
+        body: t.Object({
+            content: t.String(),
+        }),
+    })
+
+export default Introduction;

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/myth_vs_fact/create.ts

@@ -0,0 +1,30 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import { Prisma } from "@prisma/client";
+
+type FormCreate = Prisma.MythVsFactGetPayload<{
+    select: {
+        title: true;
+        mitos: true;
+        fakta: true;
+    }
+}>
+
+export default async function mythVsFactCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.mythVsFact.create({
+        data: {
+            title: body.title,
+            mitos: body.mitos,
+            fakta: body.fakta,
+        },
+    });
+    return {
+        success: true,
+        message: "Success create myth vs fact",
+        data: {
+            ...body,
+        },
+    };
+}