Fix Eror Admin Persentase & Grafik

package.json

@@ -1,6 +1,6 @@
 {
   "name": "desa-darmasaba",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -62,7 +62,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/schema.prisma

@@ -46,6 +46,7 @@ model AppMenuChild {
   AppMenu   AppMenu? @relation(fields: [appMenuId], references: [id])
   appMenuId String?
 }
+
 // ========================================= MENU DESA ========================================= //
 // ========================================= BERITA ========================================= //
 model Berita {
@@ -106,6 +107,7 @@ model Images {
   updatedAt   DateTime      @updatedAt
   GalleryFoto GalleryFoto[]
 }
+
 // ========================================= VIDEOS ========================================= //
 model Videos {
   id           String         @id @default(cuid())
@@ -117,7 +119,6 @@ model Videos {
   GalleryVideo GalleryVideo[]
 }
 
-
 // ========================================= GALLERY ========================================= //
 model GalleryFoto {
   id               String   @id @default(cuid())
@@ -132,19 +133,174 @@ model GalleryFoto {
 }
 
 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
+  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
@@ -153,84 +309,87 @@ model DataKematian_Kelahiran {
   kelahiranKasar String
   createdAt      DateTime @default(now())
   updatedAt      DateTime @updatedAt
+  deletedAt      DateTime @default(now())
+  isActive       Boolean  @default(true)
 }
 
-model FasilitasKesehatan {
-  id   String @id @default(cuid())
-  name String 
+// ========================================= 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)
-  InformasiUmum InformasiUmum[]
-  LayananUnggulan LayananUnggulan[]
-  DokterdanTenagaMedis DokterdanTenagaMedis[]
-  FasilitasPendukung FasilitasPendukung[]
-  ProsedurPendaftaran ProsedurPendaftaran[]
-  TarifDanLayanan TarifDanLayanan[]
+  isActive  Boolean  @default(true)
 }
 
-model InformasiUmum{
-  id   String @id @default(cuid())
-  fasilitas String
-  alamat String
-  jamOperasional String
-  FasilitasKesehatan FasilitasKesehatan[]
+// ========================================= 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)
+  isActive  Boolean  @default(true)
 }
 
-model LayananUnggulan{
-  id   String @id @default(cuid())
-  content String
+model Introduction {
+  id        Int      @id @default(autoincrement())
+  content   String
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
   deletedAt DateTime @default(now())
-  isActive Boolean @default(true)
-  FasilitasKesehatan FasilitasKesehatan[]
+  isActive  Boolean  @default(true)
 }
 
-model DokterdanTenagaMedis{
-  id   String @id @default(cuid())
-  name String
-  specialist String
-  jadwal String
+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)
-  FasilitasKesehatan FasilitasKesehatan[]
+  isActive  Boolean  @default(true)
 }
 
-model FasilitasPendukung{
-  id   String @id @default(cuid())
-  content String
+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)
-  FasilitasKesehatan FasilitasKesehatan[]
+  isActive  Boolean  @default(true)
 }
 
-model ProsedurPendaftaran{
-  id   String @id @default(cuid())
-  content String
+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)
-  FasilitasKesehatan FasilitasKesehatan[]
+  isActive  Boolean  @default(true)
 }
 
-model TarifDanLayanan{
-  id String @id @default(cuid())
-  layanan String
-  tarif String
+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)
-  FasilitasKesehatan FasilitasKesehatan[]
-}
+  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)
+}

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

@@ -321,7 +321,7 @@ const prosedurpendaftaran = proxy({
   },
 })
 
-const stateKesehatan = proxy({
+const stateFasilitasKesehatan = proxy({
   informasiumum,
   layananunggulan,
   dokterdantenagamedis,
@@ -330,4 +330,4 @@ const stateKesehatan = proxy({
   prosedurpendaftaran
 })
 
-export default stateKesehatan
+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)/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,7 +4,7 @@ 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() {

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

@@ -22,6 +22,7 @@ function TextEditor() {
       Highlight,
       TextAlign.configure({ types: ['heading', 'paragraph'] }),
     ],
+    immediatelyRender: false,
     content,
   });
 

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

@@ -1,12 +0,0 @@
-import { Button } from '@mantine/core';
-import React from 'react';
-
-function ButtonSubmit() {
-  return (
-    <>
-      <Button onClick={() => {}}>Submit</Button>
-    </>
-  );
-}
-
-export default ButtonSubmit;

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

@@ -1,26 +1,149 @@
-import { Box, SimpleGrid, Stack, TextInput, Title } from '@mantine/core';
-import React from 'react';
+'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>
+    <Stack py={10}>
       <SimpleGrid cols={{
         base: 1, md: 2
       }}>
-        <Box>
+        <Box >
           <Title order={3}>Artikel Kesehatan</Title>
-          <TextInput
-            label="Jadwal"
-            placeholder='masukkan artikel kesehatan'
-          />
+          <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

@@ -1,4 +1,4 @@
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
+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';
@@ -6,7 +6,7 @@ import _ from 'lodash';
 import { useProxy } from 'valtio/utils';
 
 function DokterdanTenagaMedisList() {
-  const kesehatanState = useProxy(stateKesehatan.dokterdantenagamedis);
+  const kesehatanState = useProxy(stateFasilitasKesehatan.dokterdantenagamedis);
   
   useShallowEffect(() => {
     kesehatanState.findMany.load();
@@ -52,8 +52,7 @@ function DokterdanTenagaMedisList() {
 
   return (
     <Stack>
-      <Table
-        
+      <Table     
         striped 
         highlightOnHover 
         withTableBorder 

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

@@ -1,10 +1,9 @@
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
-import { Box, Button, Text, TextInput } from '@mantine/core';
-import React from 'react';
+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(stateKesehatan.dokterdantenagamedis)
+  const dokterdantenagamedisState = useProxy(stateFasilitasKesehatan.dokterdantenagamedis)
   return (
     <Box>
       <Text fw={"bold"}>Dokter & Tenaga Medis</Text>
@@ -30,10 +29,6 @@ function DokterDanTenagaMedis() {
           dokterdantenagamedisState.create.form.jadwal = val.target.value
         }}
       />
-      <Button
-        onClick={() => {
-          dokterdantenagamedisState.create.create()
-        }}>Simpan</Button>
     </Box>
   );
 }

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

@@ -1,11 +1,11 @@
 import { Box, Stack, Text } from '@mantine/core';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import { useShallowEffect } from '@mantine/hooks';
 
 function FasilitasPendukungList() {
-  const fasilitaspendukungState = useProxy(stateKesehatan.fasilitaspendukung)
+  const fasilitaspendukungState = useProxy(stateFasilitasKesehatan.fasilitaspendukung)
   useShallowEffect(() => {
     fasilitaspendukungState.findMany.load()
   }, [])

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

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

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

@@ -1,25 +1,24 @@
 'use client'
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
-import { Box, Button, Text, TextInput } from '@mantine/core';
-import React from 'react';
+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(stateKesehatan)
+  const infromasiState = useProxy(stateFasilitasKesehatan.informasiumum)
   return<Box>
       <Text fw={"bold"}>Informasi Umum</Text>
       <TextInput
         label="Fasilitas"
         placeholder='masukkan nama fasilitas kesehatan'
         onChange={(val) => {
-          infromasiState.informasiumum.create.form.fasilitas = val.target.value
+          infromasiState.create.form.fasilitas = val.target.value
         }}
       />
       <TextInput
         label="Alamat"
         placeholder='masukkan alamat'
         onChange={(val) => {
-          infromasiState.informasiumum.create.form.alamat = val.target.value
+          infromasiState.create.form.alamat = val.target.value
         }}
       />
       <TextInput
@@ -27,13 +26,9 @@ function InformasiUmum() {
         label="Jam Operasional"
         placeholder='masukkan jam operasional'
         onChange={(val) => {
-          infromasiState.informasiumum.create.form.jamOperasional = val.target.value
+          infromasiState.create.form.jamOperasional = val.target.value
         }}
       />
-      <Button
-        onClick={() => {
-          infromasiState.informasiumum.create.create()
-        }}>Simpan</Button>
     </Box>
 }
 

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

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

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

@@ -1,16 +1,17 @@
 '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 stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
-import { BeritaEditor } from '@/app/admin/(dashboard)/desa/berita/_com/BeritaEditor';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
 
 function LayananUnggulan() {
-  const informasiumumState = useProxy(stateKesehatan.layananunggulan)
+  const informasiumumState = useProxy(stateFasilitasKesehatan.layananunggulan)
   return <Box>
     <Text fw={"bold"}>Layanan Unggulan</Text>
-    <BeritaEditor onSubmit={(val) => {
-      informasiumumState.create.form.content = val
-      informasiumumState.create.create()
+    <KesehatanEditor 
+    showSubmit={false}
+    onChange={(val) => {
+      informasiumumState.create.form.content = val;
     }} />
   </Box>
     ;

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

@@ -1,28 +1,91 @@
 "use client"
 
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
-import { Box, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
+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 DokterdanTenagaMedisList from './dokterdantenagamedis/listData';
 import DokterDanTenagaMedis from './dokterdantenagamedis/page';
-import FasilitasPendukungList from './fasilitas_pendukung/listData';
 import FasilitasPendukung from './fasilitas_pendukung/page';
 import InformasiUmum from './informasi_umum/page';
-import LayananUnggulanList from './layanan_unggulan/layananUnggulanList';
 import LayananUnggulan from './layanan_unggulan/page';
 import ProsedurPendaftaran from './prosedurpendaftaran/page';
-import TarifDanLayananList from './tarifdanlayanan/listData';
 import TarifDanLayanan from './tarifdanlayanan/page';
-import ListProsedurPendaftaran from './prosedurpendaftaran/listData';
 
 
 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>
+    <Stack py={10}>
       <SimpleGrid cols={{
         base: 1, md: 2
       }}>
@@ -32,33 +95,23 @@ function FasilitasKesehatan() {
             {/* Informasi Umum */}
             <InformasiUmum />
             {/* Layanan Unggulan */}
-            <LayananUnggulan/>
+            <LayananUnggulan />
             {/* Dokter & Tenaga Medis */}
-            <DokterDanTenagaMedis/>
+            <DokterDanTenagaMedis />
             {/* Fasilitas Pendukung */}
-            <FasilitasPendukung/>
+            <FasilitasPendukung />
             {/* Tarif & Layanan */}
-            <TarifDanLayanan/>
+            <TarifDanLayanan />
             {/* Prosedur Pendaftaran */}
-            <ProsedurPendaftaran/>
+            <ProsedurPendaftaran />
+            <Button onClick={submitAllForms}>Submit</Button>
           </Stack>
         </Box>
 
         <Box>
           <Stack gap={"xs"}>
-          <Title order={3}>List Fasilitas Kesehatan</Title>
-          <Title order={4}>Informasi Umum</Title>
-          <InformasiUmumList/>
-          <Title order={4}>Layanan Unggulan</Title>
-          <LayananUnggulanList/>
-          <Title order={4}>Dokter & Tenaga Medis</Title>
-          <DokterdanTenagaMedisList/>
-          <Title order={4}>Fasilitas Pendukung</Title>
-          <FasilitasPendukungList/>
-          <Title order={4}>Tarif & Layanan</Title>
-          <TarifDanLayananList/>
-          <Title order={4}>Prosedur Pendaftaran</Title>
-          <ListProsedurPendaftaran/>
+            <Title order={3}>List Fasilitas Kesehatan</Title>
+            <AllList />
           </Stack>
         </Box>
       </SimpleGrid>
@@ -67,24 +120,121 @@ function FasilitasKesehatan() {
   );
 }
 
-function InformasiUmumList(){
-  const infromasiState = useProxy(stateKesehatan)
+function AllList() {
+  const allListState = useProxy(stateFasilitasKesehatan)
   useShallowEffect(() => {
-    infromasiState.informasiumum.findMany.load()
+    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 (!infromasiState.informasiumum.findMany.data) return <Stack>
+  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>
-    {infromasiState.informasiumum.findMany.data?.map((item) => (
+    <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>
 }
 

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

@@ -1,10 +1,10 @@
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
+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(stateKesehatan.prosedurpendaftaran)
+  const prosedurpendaftaranState = useProxy(stateFasilitasKesehatan.prosedurpendaftaran)
   useShallowEffect(() => {
     prosedurpendaftaranState.findMany.load()
   }, [])

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

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

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

@@ -1,4 +1,4 @@
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
+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';
@@ -6,7 +6,7 @@ import _ from 'lodash';
 import { useProxy } from 'valtio/utils';
 
 function TarifDanLayananList() {
-  const tarifdanlayanan = useProxy(stateKesehatan.tarifdanlayanan)
+  const tarifdanlayanan = useProxy(stateFasilitasKesehatan.tarifdanlayanan)
   useShallowEffect(() => {
     tarifdanlayanan.findMany.load()
   }, [])

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

@@ -1,10 +1,9 @@
-import { Box, Button, Text, TextInput } from '@mantine/core';
-import React from 'react';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import { Box, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
 
 function TarifDanLayanan() {
-  const tarifdanlayanan = useProxy(stateKesehatan.tarifdanlayanan)
+  const tarifdanlayanan = useProxy(stateFasilitasKesehatan.tarifdanlayanan)
   return <Box>
   <Text fw={"bold"}>Tarif & Layanan</Text>
   <TextInput
@@ -22,11 +21,6 @@ function TarifDanLayanan() {
       tarifdanlayanan.create.form.layanan = val.target.value
     }}
   />
-  <Button
-    onClick={() => {
-      tarifdanlayanan.create.create()
-    }}
-  >Simpan</Button>
 </Box>
 }
 

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

@@ -1,26 +1,173 @@
-import { Box, SimpleGrid, Stack, TextInput, Title } from '@mantine/core';
-import React from 'react';
+'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>
+    <Stack py={10}>
       <SimpleGrid cols={{
         base: 1, md: 2
       }}>
         <Box>
           <Title order={3}>Jadwal Kegiatan</Title>
-          <TextInput
-            label="Jadwal"
-            placeholder='masukkan jadwal kegiatan'
-          />
+          <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,18 +1,53 @@
-import { Stack } from '@mantine/core';
+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 (
     <Stack>
-        <FasilitasKesehatan/>
-        <JadwalKegiatan/>
-        <ArtikelKesehatan/>
+      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Persentase Kelahiran & Kematian"}>
+        <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;
-//Fasilitas Kesehatan Jadwal Kegiatan Artikel Kesehatan
+export default Page;

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,
+        },
+    };
+}

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

@@ -0,0 +1,10 @@
+import prisma from "@/lib/prisma";
+
+export default async function mythVsFactFindMany() {
+    const mythVsFacts = await prisma.mythVsFact.findMany();
+    return {
+        success: true,
+        message: "Success get myth vs fact",
+        data: mythVsFacts,
+    };
+}

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

@@ -0,0 +1,17 @@
+import Elysia, { t } from "elysia";
+import mythVsFactCreate from "./create";
+import mythVsFactFindMany from "./find-many";
+
+const MythVsFact = new Elysia({
+    prefix: "/mythvsfact",
+    tags: ["Data Kesehatan/Artikel Kesehatan/Myth vs Fact"]
+})
+    .get("/find-many", mythVsFactFindMany)
+    .post("/create", mythVsFactCreate, {
+        body: t.Object({
+            title: t.String(),
+            mitos: t.String(),
+            fakta: t.String(),
+        }),
+    })
+export default MythVsFact

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

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

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

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

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

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

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

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

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

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

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

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/fasilitas_kesehatan/dokterDantenagamedis/index.ts

@@ -4,7 +4,7 @@ import dokterDantenagamedisCreate from "./create";
 
 const DokterDantenagamedis = new Elysia({
   prefix: "/dokterdantenagamedis",
-  tags: ["Dokter dan Tenaga Medis"],
+  tags: ["Data Kesehatan/Fasilitas Kesehatan/Dokter dan Tenaga Medis"],
 })
 .get("/find-many", dokterDantenagamedisFindMany)
 .post("/create", dokterDantenagamedisCreate, {

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/fasilitas_kesehatan/fasilitas_pendukung/index.ts

@@ -4,7 +4,7 @@ import FasilitasPendukungCreate from "./create";
 
 const FasilitasPendukung = new Elysia({
   prefix: "/fasilitaspendukung",
-  tags: ["Fasilitas Pendukung"],
+  tags: ["Data Kesehatan/Fasilitas Kesehatan/Fasilitas Pendukung"],
 })
   .get("/find-many", fasilitasPendukungFindMany)
   .post("/create", FasilitasPendukungCreate, {

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/fasilitas_kesehatan/informasi_umum/index.ts

@@ -4,7 +4,7 @@ import informasiUmumCreate from "./create";
 
 const InformasiUmum = new Elysia({
   prefix: "/informasiumum",
-  tags: ["Informasi Umum"],
+  tags: ["Data Kesehatan/Fasilitas Kesehatan/Informasi Umum"],
 })
   .get("/find-many", informasiUmumFindMany)
   .post("/create", informasiUmumCreate, {

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/fasilitas_kesehatan/layanan_unggulan/index.ts

@@ -4,7 +4,7 @@ import layananUnggulanFindMany from "./find-many";
 
 const LayananUnggulan = new Elysia({
     prefix: "/layananunggulan",
-    tags: ["Layanan Unggulan"]
+    tags: ["Data Kesehatan/Fasilitas Kesehatan/Layanan Unggulan"]
 })
 
 .get("/find-many", layananUnggulanFindMany)

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/fasilitas_kesehatan/prosedur_pendaftaran/index.ts

@@ -4,7 +4,7 @@ import prosedurPendaftaranCreate from "./create";
 
 const ProsedurPendaftaran = new Elysia({
   prefix: "/prosedurpendaftaran",
-  tags: ["Prosedur Pendaftaran"],
+  tags: ["Data Kesehatan/Fasilitas Kesehatan/Prosedur Pendaftaran"],
 })
   .get("/find-many", prosedurPendaftaranFindMany)
   .post("/create", prosedurPendaftaranCreate, {

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/fasilitas_kesehatan/tarifDanlayanan/index.ts

@@ -5,7 +5,7 @@ import tarifdanlayananCreate from "./create";
 
 const TarifDanLayanan = new Elysia({
     prefix: "/tarifdanlayanan",
-    tags: ["Tarif dan Layanan"]
+    tags: ["Data Kesehatan/Fasilitas Kesehatan/Tarif dan Layanan"]
 })
 .get("/find-many", tarifdanlayananFindMany)
 .post("/create", tarifdanlayananCreate, {

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

@@ -0,0 +1,27 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.GrafikKepuasanGetPayload<{
+  select: {
+    label: true;
+    jumlah: true
+  };
+}>;
+export default async function grafikKepuasanCreate(context: Context) {
+  const body = context.body as FormCreate;
+
+  await prisma.grafikKepuasan.create({
+    data: {
+      label: body.label,
+      jumlah: body.jumlah,
+    },
+  });
+  return {
+    success: true,
+    message: "Success create grafik kepuasan",
+    data: {
+      ...body,
+    },
+  };
+}

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

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

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

@@ -0,0 +1,16 @@
+import Elysia, { t } from "elysia";
+import grafikKepuasanCreate from "./create";
+import grafikKepuasanFindMany from "./find-many";
+
+const GrafikKepuasan = new Elysia({
+    prefix: "/grafikkepuasan",
+    tags: ["Data Kesehatan/Grafik Kepuasan"]
+})
+    .get("/find-many", grafikKepuasanFindMany)
+    .post("/create", grafikKepuasanCreate, {
+        body: t.Object({
+            label: t.String(),
+            jumlah: t.String(),
+        }),
+    })
+export default GrafikKepuasan

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/deskripsi_kegiatan/create.ts

@@ -0,0 +1,28 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.DeskripsiJadwalKegiatanGetPayload<{
+    select: {
+        deskripsi: true
+    }
+}>
+
+async function deskripsiJadwalKegiatanCreate(context: Context) {
+    const body = context.body as FormCreate
+
+    await prisma.deskripsiJadwalKegiatan.create({
+        data: {
+            deskripsi: body.deskripsi,
+        }
+    })
+    return{
+        success: true,
+        message: "Success create deskripsi jadwal kegiatan",
+        data: {
+            ...body
+        }
+    }
+}
+
+export default deskripsiJadwalKegiatanCreate

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/deskripsi_kegiatan/find-many.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/deskripsi_kegiatan/index.ts

@@ -0,0 +1,16 @@
+import Elysia, { t } from "elysia";
+import deskripsiJadwalKegiatanFindMany from "./find-many";
+import deskripsiJadwalKegiatanCreate from "./create";
+
+const DeskripsiJadwalKegiatan = new Elysia({
+    prefix: "/deskripsikegiatan",
+    tags: ["Data Kesehatan/Jadwal Kegiatan/Deskripsi Kegiatan"],
+})
+.get("/find-many", deskripsiJadwalKegiatanFindMany)
+.post("/create", deskripsiJadwalKegiatanCreate, {
+    body: t.Object({
+        deskripsi: t.String(),
+    }),
+})
+
+export default DeskripsiJadwalKegiatan

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/dokumen_yang_diperlukan/create.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/dokumen_yang_diperlukan/find-many.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/dokumen_yang_diperlukan/index.ts

@@ -0,0 +1,17 @@
+import Elysia, { t } from "elysia";
+import DokumenDiperlukanCreate from "./create";
+import DokumenDiperlukanFindMany from "./find-many";
+
+const DokumenDiperlukan = new Elysia({
+    prefix: "/dokumendiperlukan",
+    tags: ["Data Kesehatan/Jadwal Kegiatan/Dokumen yang diperlukan"]
+})
+
+.get("/find-many", DokumenDiperlukanFindMany)
+.post("/create", DokumenDiperlukanCreate, {
+    body: t.Object({
+        content: t.String()
+    })
+})
+
+export default DokumenDiperlukan

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/informasi_kegiatan/create.ts

@@ -0,0 +1,33 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.InformasiJadwalKegiatanGetPayload<{
+    select: {
+        name: true
+        tanggal: true
+        waktu: true
+        lokasi: true
+    }
+}>
+
+async function informasiJadwalKegiatanCreate(context: Context) {
+    const body = context.body as FormCreate
+
+    await prisma.informasiJadwalKegiatan.create({
+        data: {
+            name: body.name,
+            tanggal: body.tanggal,
+            waktu: body.waktu,
+            lokasi: body.lokasi,
+        }
+    })
+    return{
+        success: true,
+        message: "Success create informasi jadwal kegiatan",
+        data: {
+            ...body
+        }
+    }
+}
+export default informasiJadwalKegiatanCreate

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/informasi_kegiatan/find-many.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/informasi_kegiatan/index.ts

@@ -0,0 +1,19 @@
+import Elysia, { t } from "elysia";
+import informasiJadwalKegiatanFindMany from "./find-many";
+import informasiJadwalKegiatanCreate from "./create";
+
+const InformasiJadwalKegiatan = new Elysia({
+  prefix: "/informasiJadwalKegiatan",
+  tags: ["Data Kesehatan/Jadwal Kegiatan/Informasi Kegiatan"],
+})
+.get("/find-many", informasiJadwalKegiatanFindMany)
+.post("/create", informasiJadwalKegiatanCreate, {
+  body: t.Object({
+    name: t.String(),
+    tanggal: t.String(),
+    waktu: t.String(),
+    lokasi: t.String(),
+  }),
+})
+
+export default InformasiJadwalKegiatan

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/layanan_yang_tersedia/create.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/layanan_yang_tersedia/find-many.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/layanan_yang_tersedia/index.ts

@@ -0,0 +1,17 @@
+import Elysia, { t } from "elysia";
+import LayananTersediaFindMany from "./find-many";
+import LayananTersediaCreate from "./create";
+
+const LayananTersedia = new Elysia({
+    prefix: "/layanantersedia",
+    tags: ["Data Kesehatan/Jadwal Kegiatan/Layanan Tersedia"]
+})
+
+.get("/find-many", LayananTersediaFindMany)
+.post("/create", LayananTersediaCreate, {
+    body: t.Object({
+        content: t.String()
+    })
+})
+
+export default LayananTersedia

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/pendaftaran/create.ts

@@ -0,0 +1,36 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.PendaftaranJadwalKegiatanGetPayload<{
+    select: {
+        name: true
+        tanggal: true
+        namaOrangtua: true
+        nomor: true
+        alamat: true
+        catatan: true
+    }
+}>
+
+export default async function PendaftaranJadwalCreate(context: Context) {
+    const body = context.body as FormCreate
+
+    await prisma.pendaftaranJadwalKegiatan.create({
+        data: {
+            name: body.name,
+            tanggal: body.tanggal,
+            namaOrangtua: body.namaOrangtua,
+            nomor: body.nomor,
+            alamat: body.alamat,
+            catatan: body.catatan
+        }
+    })
+    return {
+        success: true,
+        message: "Success create pendaftaran jadwal kegiatan",
+        data: {
+            ...body
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/pendaftaran/find-many.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/pendaftaran/index.ts

@@ -0,0 +1,21 @@
+import Elysia, { t } from "elysia"
+import PendaftaranJadwalFindMany from "./find-many"
+import PendaftaranJadwalCreate from "./create"
+
+const PendaftaranJadwal = new Elysia({
+  prefix: "/pendaftaranJadwalKegiatan",
+  tags: ["Data Kesehatan/Jadwal Kegiatan/Pendaftaran Jadwal"],
+})
+.get("/find-many", PendaftaranJadwalFindMany)
+.post("/create", PendaftaranJadwalCreate, {
+  body: t.Object({
+    name: t.String(),
+    tanggal: t.String(),
+    namaOrangtua: t.String(),
+    nomor: t.String(),
+    alamat: t.String(),
+    catatan: t.String(),
+  })
+})
+
+export default PendaftaranJadwal

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/syarat_dan_ketentuan/create.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/syarat_dan_ketentuan/find-many.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/jadwal_kegiatan/syarat_dan_ketentuan/index.ts

@@ -0,0 +1,16 @@
+import Elysia, { t } from "elysia";
+import SyaratKetentuanFindMany from "./find-many";
+import SyaratKetentuanCreate from "./create";
+
+const SyaratKetentuan = new Elysia({
+    prefix: "/syaratketentuan",
+    tags: ["Data Kesehatan/Jadwal Kegiatan/Syarat dan Ketentuan"]
+})
+.get("/find-many", SyaratKetentuanFindMany)
+.post("/create", SyaratKetentuanCreate, {
+    body: t.Object({
+        content: t.String()
+    })
+})
+
+export default SyaratKetentuan

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

@@ -0,0 +1,32 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.DataKematian_KelahiranGetPayload<{
+    select: {
+        tahun: true;
+        kematianKasar: true;
+        kematianBayi: true;
+        kelahiranKasar: true;
+    };
+}>;
+
+export default async function persentaseKelahiranKematianCreate(context: Context) {
+    const body = context.body as FormCreate
+
+    await prisma.dataKematian_Kelahiran.create({
+        data: {
+            tahun: body.tahun,
+            kematianKasar: body.kematianKasar,
+            kematianBayi: body.kematianBayi,
+            kelahiranKasar: body.kelahiranKasar,
+        }
+    })
+    return{
+        success: true,
+        message: "Success create persentase kelahiran kematian",
+        data: {
+            ...body
+        }
+    }
+}

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

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

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

@@ -0,0 +1,19 @@
+import Elysia, { t } from "elysia";
+import persentaseKelahiranKematianCreate from "./create";
+import persentaseKelahiranKematianFindMany from "./find-many";
+
+const PersentaseKelahiranKematian = new Elysia({
+  prefix: "/persentasekelahiran",
+  tags: ["Data Kesehatan/Persentase Kelahiran Kematian"],
+})
+  .get("/find-many", persentaseKelahiranKematianFindMany)
+  .post("/create", persentaseKelahiranKematianCreate, {
+    body: t.Object({
+      tahun: t.String(),
+      kematianKasar: t.String(),
+      kematianBayi: t.String(),
+      kelahiranKasar: t.String(),
+    }),
+  })
+
+export default PersentaseKelahiranKematian;

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

@@ -5,6 +5,21 @@ import DokterDantenagamedis from "./data_kesehatan_warga/fasilitas_kesehatan/dok
 import FasilitasPendukung from "./data_kesehatan_warga/fasilitas_kesehatan/fasilitas_pendukung";
 import TarifDanLayanan from "./data_kesehatan_warga/fasilitas_kesehatan/tarifDanlayanan";
 import ProsedurPendaftaran from "./data_kesehatan_warga/fasilitas_kesehatan/prosedur_pendaftaran";
+import InformasiJadwalKegiatan from "./data_kesehatan_warga/jadwal_kegiatan/informasi_kegiatan";
+import DeskripsiJadwalKegiatan from "./data_kesehatan_warga/jadwal_kegiatan/deskripsi_kegiatan";
+import LayananTersedia from "./data_kesehatan_warga/jadwal_kegiatan/layanan_yang_tersedia";
+import SyaratKetentuan from "./data_kesehatan_warga/jadwal_kegiatan/syarat_dan_ketentuan";
+import DokumenDiperlukan from "./data_kesehatan_warga/jadwal_kegiatan/dokumen_yang_diperlukan";
+import PendaftaranJadwal from "./data_kesehatan_warga/jadwal_kegiatan/pendaftaran";
+import PersentaseKelahiranKematian from "./data_kesehatan_warga/persentase_kelahiran_kematian";
+import GrafikKepuasan from "./data_kesehatan_warga/grafik_kepuasan";
+import Introduction from "./data_kesehatan_warga/artikel_kesehatan/introduction";
+import Syptom from "./data_kesehatan_warga/artikel_kesehatan/syptom";
+import Prevention from "./data_kesehatan_warga/artikel_kesehatan/prevention";
+import FirstAid from "./data_kesehatan_warga/artikel_kesehatan/first_aid";
+import MythVsFact from "./data_kesehatan_warga/artikel_kesehatan/myth_vs_fact";
+import DoctorSign from "./data_kesehatan_warga/artikel_kesehatan/doctor_sign";
+
 
 const Kesehatan = new Elysia({
   prefix: "/api/kesehatan",
@@ -16,5 +31,18 @@ const Kesehatan = new Elysia({
 .use(FasilitasPendukung)
 .use(TarifDanLayanan)
 .use(ProsedurPendaftaran)
-
+.use(InformasiJadwalKegiatan)
+.use(DeskripsiJadwalKegiatan)
+.use(LayananTersedia)
+.use(SyaratKetentuan)
+.use(DokumenDiperlukan)
+.use(PendaftaranJadwal)
+.use(PersentaseKelahiranKematian)
+.use(GrafikKepuasan)
+.use(Introduction)
+.use(Syptom)
+.use(Prevention)
+.use(FirstAid)
+.use(MythVsFact)
+.use(DoctorSign)
 export default Kesehatan;

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

@@ -45,11 +45,25 @@ async function layanan() {
   const data = await prisma.layanan.findMany();
   return { data };
 }
+
+const Utils = new Elysia({
+  prefix: "/api/utils",
+  tags: ["Utils"],
+}).get("/version", async () => {
+  const packageJson = await fs.readFile(
+    path.join(ROOT, "package.json"),
+    "utf-8"
+  );
+  const version = JSON.parse(packageJson).version;
+  return { version };
+});
+
 const ApiServer = new Elysia()
   .use(swagger({ path: "/api/docs" }))
   .use(cors(corsConfig))
   .use(Kesehatan)
   .use(Desa)
+  .use(Utils)
   .onError(({ code }) => {
     if (code === "NOT_FOUND") {
       return {

src/app/darmasaba/_com/main-page/prestasi/index.tsx

@@ -8,7 +8,7 @@ const data = [
         title: "Olahraga dan Kepemudaan",
         deskripsi: "Tim Bola Voli Putri Dharma Temaja meraih juara 3 dalam Turnamen Bola Voli Mangupura Cup 2024 kategori Putri Se-Bali ",
         image: "/api/img/prestasi-voli.jpeg",
-        link: "/darmasaba/prestasi/tim-bola-voli-putri-dharma-temaja-meraih-juara-3-dalam-turnamen-bola-voli-mangupura-cup-2024-kategori-putri-se-bali"
+        link: "/darmasaba/prestasi-desa/tim-bola-voli-putri-dharma-temaja-meraih-juara-3-dalam-turnamen-bola-voli-mangupura-cup-2024-kategori-putri-se-bali"
       },
       {
         id: 2,

src/app/percobaan/_lib/ClientRouter.txt

@@ -0,0 +1,300 @@
+"use client";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import { z } from "zod";
+
+type RouterLeaf<T extends z.ZodType = z.ZodObject<{}>> = {
+  get: () => string;
+  query: (params: z.infer<T>) => string;
+  parse: (searchParams: URLSearchParams) => z.infer<T>;
+};
+
+// Helper type to convert dashes to camelCase
+type DashToCamelCase<S extends string> = S extends `${infer F}-${infer R}`
+  ? `${F}${Capitalize<DashToCamelCase<R>>}`
+  : S;
+
+// Modified RouterPath to handle dash conversion
+type RouterPath<
+  T extends z.ZodType = z.ZodObject<{}>,
+  Segments extends string[] = []
+> = Segments extends [infer Head extends string, ...infer Tail extends string[]]
+  ? { [K in DashToCamelCase<Head>]: RouterPath<T, Tail> }
+  : RouterLeaf<T>;
+
+type RemoveLeadingSlash<S extends string> = S extends `/${infer Rest}`
+  ? Rest
+  : S;
+
+type SplitPath<S extends string> = S extends `${infer Head}/${infer Tail}`
+  ? [Head, ...SplitPath<Tail>]
+  : S extends ""
+  ? []
+  : [S];
+
+type WibuRouterOptions = {
+  prefix?: string;
+  name?: string;
+};
+
+export class V2ClientRouter<Routes = {}> {
+  private tree: any = {};
+  private prefix: string = "";
+  private name: string = "";
+  private querySchemas: Map<string, z.ZodType> = new Map();
+
+  constructor(options?: WibuRouterOptions) {
+    if (options?.prefix) {
+      // Ensure prefix starts with / and doesn't end with /
+      this.prefix = options.prefix.startsWith("/")
+        ? options.prefix
+        : `/${options.prefix}`;
+
+      if (this.prefix.endsWith("/")) {
+        this.prefix = this.prefix.slice(0, -1);
+      }
+    }
+
+    if (options?.name) {
+      this.name = options.name;
+    }
+  }
+
+  // Convert dash-case to camelCase
+  private toCamelCase(str: string): string {
+    return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+  }
+
+  add<
+    Path extends string,
+    NormalizedPath extends string = RemoveLeadingSlash<Path>,
+    Segments extends string[] = SplitPath<NormalizedPath>,
+    T extends z.ZodType = z.ZodObject<{}>
+  >(
+    path: Path,
+    schema?: { query: T }
+  ): V2ClientRouter<
+    Routes &
+      (NormalizedPath extends ""
+        ? RouterLeaf<T>
+        : {
+            [K in Segments[0] as DashToCamelCase<K>]: RouterPath<
+              T,
+              Segments extends [any, ...infer Rest] ? Rest : []
+            >;
+          })
+  > {
+    const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+    const fullPath = `${this.prefix}${normalizedPath}`;
+    const segments = normalizedPath.split("/").filter(Boolean);
+
+    // Store the Zod schema for this path
+    if (schema) {
+      this.querySchemas.set(fullPath, schema.query);
+    } else {
+      // Default empty schema
+      this.querySchemas.set(fullPath, z.object({}));
+    }
+
+    const handleQuery = (params: any): string => {
+      if (!params || Object.keys(params).length === 0) return fullPath;
+
+      // Validate params against schema
+      const schema = this.querySchemas.get(fullPath);
+      if (schema) {
+        try {
+          schema.parse(params);
+        } catch (error) {
+          console.error("Query params validation failed:", error);
+          throw new Error("Invalid query parameters");
+        }
+      }
+
+      const queryString = Object.entries(params)
+        .map(
+          ([key, value]) =>
+            `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`
+        )
+        .join("&");
+      return `${fullPath}?${queryString}`;
+    };
+
+    const handleGet = () => fullPath;
+
+    const handleParse = (searchParams: URLSearchParams): any => {
+      const schema = this.querySchemas.get(fullPath);
+      if (!schema) return {};
+
+      // Convert URLSearchParams to object
+      const queryObject: Record<string, any> = {};
+      searchParams.forEach((value, key) => {
+        queryObject[key] = value;
+      });
+
+      // Parse through Zod schema
+      try {
+        return schema.parse(queryObject);
+      } catch (error) {
+        console.error("Failed to parse search params:", error);
+        // Return safe default values
+        const safeParsed = schema.safeParse(queryObject);
+        if (safeParsed.success) {
+          return safeParsed.data;
+        }
+        return {};
+      }
+    };
+
+    // Special case for root path "/"
+    if (segments.length === 0) {
+      this.tree.get = handleGet;
+      this.tree.query = handleQuery;
+      this.tree.parse = handleParse;
+    } else {
+      let current = this.tree;
+      for (const segment of segments) {
+        // Use camelCase version for the property name
+        const camelSegment = this.toCamelCase(segment);
+        if (!current[camelSegment]) {
+          current[camelSegment] = {};
+        }
+        current = current[camelSegment];
+      }
+
+      current.get = handleGet;
+      current.query = handleQuery;
+      current.parse = handleParse;
+    }
+
+    return this as any;
+  }
+
+  // Add a method to incorporate another router's routes into this one
+  use<N extends string, ChildRoutes>(
+    name: N,
+    childRouter: V2ClientRouter<ChildRoutes>
+  ): V2ClientRouter<Routes & Record<DashToCamelCase<N>, ChildRoutes>> {
+    const camelName = this.toCamelCase(name);
+
+    if (!this.tree[camelName]) {
+      this.tree[camelName] = {};
+    }
+
+    // Copy query schemas from child router
+    childRouter.querySchemas.forEach((schema, path) => {
+      const newPath = `${this.prefix}/${name}${path.substring(
+        childRouter.prefix.length
+      )}`;
+      this.querySchemas.set(newPath, schema);
+    });
+
+    // Create a deep copy of the child router's tree with updated paths
+    const updatePaths = (obj: any, childPrefix: string): any => {
+      const result: any = {};
+
+      for (const key in obj) {
+        if (key === "get" && typeof obj[key] === "function") {
+          // Capture the original path from the child router
+          const originalPath = obj[key]();
+          // Create a new function that returns the combined path
+          result[key] = () => {
+            const newPath = `${this.prefix}/${name}${originalPath.substring(
+              childPrefix.length
+            )}`;
+            return newPath;
+          };
+        } else if (key === "query" && typeof obj[key] === "function") {
+          // Capture the child router's prefix for path adjustment
+          result[key] = (params: any) => {
+            // Get the original result without query params
+            const originalPathWithoutParams = obj["get"]();
+            // Create the proper path with our parent prefix
+            const newBasePath = `${
+              this.prefix
+            }/${name}${originalPathWithoutParams.substring(
+              childPrefix.length
+            )}`;
+
+            // Add query params if any
+            if (!params || Object.keys(params).length === 0) return newBasePath;
+
+            // Validate params against schema
+            const newPath = `${
+              this.prefix
+            }/${name}${originalPathWithoutParams.substring(
+              childPrefix.length
+            )}`;
+            const schema = this.querySchemas.get(newPath);
+
+            if (schema) {
+              try {
+                schema.parse(params);
+              } catch (error) {
+                console.error("Query params validation failed:", error);
+                throw new Error("Invalid query parameters");
+              }
+            }
+
+            const queryString = Object.entries(params)
+              .map(
+                ([k, v]) =>
+                  `${encodeURIComponent(k)}=${encodeURIComponent(String(v))}`
+              )
+              .join("&");
+            return `${newBasePath}?${queryString}`;
+          };
+        } else if (key === "parse" && typeof obj[key] === "function") {
+          result[key] = (searchParams: URLSearchParams) => {
+            const originalPath = obj["get"]();
+            const newPath = `${this.prefix}/${name}${originalPath.substring(
+              childPrefix.length
+            )}`;
+            const schema = this.querySchemas.get(newPath);
+
+            if (!schema) return {};
+
+            // Convert URLSearchParams to object
+            const queryObject: Record<string, any> = {};
+            searchParams.forEach((value, key) => {
+              queryObject[key] = value;
+            });
+
+            // Parse through Zod schema
+            try {
+              return schema.parse(queryObject);
+            } catch (error) {
+              console.error("Failed to parse search params:", error);
+              // Return safe default values
+              const safeParsed = schema.safeParse(queryObject);
+              if (safeParsed.success) {
+                return safeParsed.data;
+              }
+              return {};
+            }
+          };
+        } else if (typeof obj[key] === "object" && obj[key] !== null) {
+          result[key] = updatePaths(obj[key], childPrefix);
+        } else {
+          result[key] = obj[key];
+        }
+      }
+
+      return result;
+    };
+
+    // Copy the child router's tree into this router
+    this.tree[camelName] = updatePaths(
+      (childRouter as any).tree,
+      childRouter.prefix
+    );
+
+    return this as any;
+  }
+
+  // Allow access to the tree with strong typing
+  get routes(): Routes {
+    return this.tree as Routes;
+  }
+}
+
+export default V2ClientRouter;

src/app/percobaan/_router/router.txt

@@ -0,0 +1,20 @@
+import { z } from "zod";
+import V2ClientRouter from "../_lib/ClientRouter";
+
+const dashboard = new V2ClientRouter({
+  prefix: "/dashboard",
+  name: "dashboard",
+})
+  .add("/", {
+    query: z.object({
+      page: z.string(),
+    }),
+  })
+  .add("/berita");
+
+const router = new V2ClientRouter({
+  prefix: "/percobaan",
+  name: "percobaan",
+}).use("dashboard", dashboard);
+
+export default router;

src/app/percobaan/dashboard/berita/page.txt

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