UI & API Data Kesehatan warga sisa 3 tabs

prisma/migrations/20250624034125_24_jun2025/migration.sql

@@ -0,0 +1,139 @@
+/*
+  Warnings:
+
+  - The primary key for the `DataKematian_Kelahiran` table will be changed. If it partially fails, the table could be left without primary key constraint.
+
+*/
+-- AlterTable
+ALTER TABLE "DataKematian_Kelahiran" DROP CONSTRAINT "DataKematian_Kelahiran_pkey",
+ALTER COLUMN "id" DROP DEFAULT,
+ALTER COLUMN "id" SET DATA TYPE TEXT,
+ADD CONSTRAINT "DataKematian_Kelahiran_pkey" PRIMARY KEY ("id");
+DROP SEQUENCE "DataKematian_Kelahiran_id_seq";
+
+-- AlterTable
+ALTER TABLE "ProfilePPID" ADD COLUMN     "imageUrl" TEXT;
+
+-- CreateTable
+CREATE TABLE "Puskesmas" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "alamat" TEXT NOT NULL,
+    "jamId" TEXT NOT NULL,
+    "imageId" TEXT NOT NULL,
+    "kontakId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "Puskesmas_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "JamOperasional" (
+    "id" TEXT NOT NULL,
+    "workDays" TEXT NOT NULL,
+    "weekDays" TEXT NOT NULL,
+    "holiday" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "JamOperasional_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KontakPuskesmas" (
+    "id" TEXT NOT NULL,
+    "kontakPuskesmas" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "facebook" TEXT NOT NULL,
+    "kontakUGD" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "KontakPuskesmas_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ProgramKesehatan" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "deskripsiSingkat" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "imageId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "ProgramKesehatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PenangananDarurat" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "imageId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "PenangananDarurat_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KontakDarurat" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "imageId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "KontakDarurat_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "InfoWabahPenyakit" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "deskripsiSingkat" TEXT NOT NULL,
+    "deskripsiLengkap" TEXT NOT NULL,
+    "imageId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "InfoWabahPenyakit_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "Puskesmas" ADD CONSTRAINT "Puskesmas_jamId_fkey" FOREIGN KEY ("jamId") REFERENCES "JamOperasional"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Puskesmas" ADD CONSTRAINT "Puskesmas_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Puskesmas" ADD CONSTRAINT "Puskesmas_kontakId_fkey" FOREIGN KEY ("kontakId") REFERENCES "KontakPuskesmas"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ProgramKesehatan" ADD CONSTRAINT "ProgramKesehatan_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PenangananDarurat" ADD CONSTRAINT "PenangananDarurat_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "KontakDarurat" ADD CONSTRAINT "KontakDarurat_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "InfoWabahPenyakit" ADD CONSTRAINT "InfoWabahPenyakit_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20250624061829_24jun2025_2/migration.sql

@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - The primary key for the `GrafikKepuasan` table will be changed. If it partially fails, the table could be left without primary key constraint.
+
+*/
+-- AlterTable
+ALTER TABLE "GrafikKepuasan" DROP CONSTRAINT "GrafikKepuasan_pkey",
+ALTER COLUMN "id" DROP DEFAULT,
+ALTER COLUMN "id" SET DATA TYPE TEXT,
+ADD CONSTRAINT "GrafikKepuasan_pkey" PRIMARY KEY ("id");
+DROP SEQUENCE "GrafikKepuasan_id_seq";

prisma/schema.prisma

@@ -70,6 +70,12 @@ model FileStorage {
   ProfileDesaImage         ProfileDesaImage[]
   ProfilePPID              ProfilePPID[]
   ProfilPerbekel           ProfilPerbekel[]
+  Puskesmas                Puskesmas[]
+  ProgramKesehatan         ProgramKesehatan[]
+  PenangananDarurat        PenangananDarurat[]
+  KontakDarurat KontakDarurat[]
+
+  InfoWabahPenyakit InfoWabahPenyakit[]
 }
 
 //========================================= MENU PPID ========================================= //
@@ -618,7 +624,7 @@ model PendaftaranJadwalKegiatan {
 
 // ========================================= PERSENTASE KELAHIRAN & KEMATIAN ========================================= //
 model DataKematian_Kelahiran {
-  id             Int      @id @default(autoincrement())
+  id             String   @id @default(cuid())
   tahun          String
   kematianKasar  String
   kematianBayi   String
@@ -631,7 +637,7 @@ model DataKematian_Kelahiran {
 
 // ========================================= GRAFIK KEPUASAN ========================================= //
 model GrafikKepuasan {
-  id        Int      @id @default(autoincrement())
+  id        String   @id @default(cuid())
   label     String
   jumlah    String
   createdAt DateTime @default(now())
@@ -723,3 +729,98 @@ model Posyandu {
   deletedAt DateTime    @default(now())
   isActive  Boolean     @default(true)
 }
+
+// ========================================= PUSKESMAS ========================================= //
+model Puskesmas {
+  id        String          @id @default(cuid())
+  name      String
+  alamat    String
+  jam       JamOperasional  @relation(fields: [jamId], references: [id])
+  jamId     String
+  image     FileStorage     @relation(fields: [imageId], references: [id])
+  imageId   String
+  kontak    KontakPuskesmas @relation(fields: [kontakId], references: [id])
+  kontakId  String
+  createdAt DateTime        @default(now())
+  updatedAt DateTime        @updatedAt
+  deletedAt DateTime        @default(now())
+  isActive  Boolean         @default(true)
+}
+
+model JamOperasional {
+  id        String      @id @default(cuid())
+  workDays  String
+  weekDays  String
+  holiday   String
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+  Puskesmas Puskesmas[]
+}
+
+model KontakPuskesmas {
+  id              String      @id @default(cuid())
+  kontakPuskesmas String
+  email           String
+  facebook        String
+  kontakUGD       String
+  createdAt       DateTime    @default(now())
+  updatedAt       DateTime    @updatedAt
+  deletedAt       DateTime    @default(now())
+  isActive        Boolean     @default(true)
+  Puskesmas       Puskesmas[]
+}
+
+// ========================================= PROGRAM KESSEHATAN ========================================= //
+model ProgramKesehatan {
+  id               String      @id @default(cuid())
+  name             String
+  deskripsiSingkat String
+  deskripsi        String
+  image            FileStorage @relation(fields: [imageId], references: [id])
+  imageId          String
+  createdAt        DateTime    @default(now())
+  updatedAt        DateTime    @updatedAt
+  deletedAt        DateTime    @default(now())
+  isActive         Boolean     @default(true)
+}
+
+// ========================================= PENANGANAN DARURAT ========================================= //
+model PenangananDarurat {
+  id        String      @id @default(cuid())
+  name      String
+  deskripsi String
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}
+
+// ========================================= KONTAK DARURAT ========================================= //
+model KontakDarurat {
+  id        String      @id @default(cuid())
+  name      String
+  deskripsi String
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}
+// ========================================= INFO WABAH PENYAKIT ========================================= //
+model InfoWabahPenyakit {
+  id        String      @id @default(cuid())
+  name      String
+  deskripsiSingkat String
+  deskripsiLengkap String
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}

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

@@ -6,7 +6,7 @@ import { z } from "zod";
 
 const templateGrafikKepuasan = z.object({
   label: z.string().min(2, "Label harus diisi"),
-  jumlah: z.string().min(2, "Jumlah harus diisi"),
+  jumlah: z.string().min(1, "Jumlah harus diisi"),
 });
 
 type GrafikKepuasan = Prisma.GrafikKepuasanGetPayload<{
@@ -31,24 +31,30 @@ const grafikkepuasan = proxy({
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
           .join("\n")}] required`;
-        return toast.error(err);
+        toast.error(err);
+        return null;
       }
       try {
         grafikkepuasan.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.grafikkepuasan["create"].post(
-          grafikkepuasan.create.form
-        );
+        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");
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            grafikkepuasan.create.form = {
+              label: "",
+              jumlah: "",
+            };
+            grafikkepuasan.findMany.load();
+            return id;
+          }
         }
-        return toast.error("failed create");
+        toast.error("failed create");
+        return null;
       } catch (error) {
         console.log((error as Error).message);
+        return null;
       } finally {
         grafikkepuasan.create.loading = false;
       }
@@ -67,10 +73,110 @@ const grafikkepuasan = proxy({
       }
     },
   },
+  findUnique: {
+    data: null as Prisma.GrafikKepuasanGetPayload<{
+       omit: { isActive: true } 
+      }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/grafikkepuasan/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          grafikkepuasan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch grafikkepuasan:", res.statusText);
+          grafikkepuasan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching grafikkepuasan:", error);
+        grafikkepuasan.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: {...defaultForm},
+    loading: false,
+    async byId() {
+    },
+  async submit() {
+    const id = this.id;
+    if (!id) {
+      toast.warn("ID tidak valid");
+      return null;
+    }
+    const cek = templateGrafikKepuasan.safeParse(grafikkepuasan.update.form);
+    if (!cek.success) {
+      const err = `[${cek.error.issues
+        .map((v) => `${v.path.join(".")}`)
+        .join("\n")}] required`;
+      return toast.error(err);
+    }
+    try {
+      this.loading = true;
+      const response = await fetch(`/api/kesehatan/grafikkepuasan/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(this.form),
+      });
+      const result = await response.json();
+
+      if (!response.ok || !result?.success) {
+        throw new Error(result?.message || "Gagal update data");
+      }
+
+      toast.success("Berhasil update data!");
+
+      // ✅ Optional: refresh list kalau kamu langsung ke halaman list
+      await grafikkepuasan.findMany.load();
+
+      return result.data;
+    } catch (error) {
+      console.error("Error update data:", error);
+      toast.error("Gagal update data grafik kepuasan");
+    } finally {
+      this.loading = false;
+    }
+  },
+},
+delete: {
+  loading: false,
+  async byId(id: string) {
+    if (!id) {
+      return toast.warn("ID tidak valid");
+    }
+    try {
+      grafikkepuasan.delete.loading = true;
+
+      const response = await fetch(`/api/kesehatan/grafikkepuasan/del/${id}`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const result = await response.json();
+
+      if (response.ok && result?.success) {
+        toast.success(
+          result.message || "Grafik kepuasan berhasil dihapus"
+        );
+        await grafikkepuasan.findMany.load(); // refresh list
+      } else {
+        toast.error(
+          result?.message || "Gagal menghapus grafik kepuasan"
+        );
+      }
+    } catch (error) {
+      console.error("Gagal delete:", error);
+      toast.error("Terjadi kesalahan saat menghapus grafik kepuasan");
+    } finally {
+      grafikkepuasan.delete.loading = false;
+    }
+  }
+}
 });
 
-const stategrafikKepuasan = proxy({
-  grafikkepuasan,
-});
-
-export default stategrafikKepuasan;
+export default grafikkepuasan;

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

@@ -6,9 +6,9 @@ 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"),
+  kematianKasar: z.string().min(1, "Kematian kasar harus diisi"),
+  kelahiranKasar: z.string().min(1, "Kelahiran kasar harus diisi"),
+  kematianBayi: z.string().min(1, "Kematian bayi harus diisi"),
 });
 
 type Persentase = Prisma.DataKematian_KelahiranGetPayload<{
@@ -37,26 +37,32 @@ const persentasekelahiran = proxy({
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
           .join("\n")}] required`;
-        return toast.error(err);
+        toast.error(err);
+        return null;
       }
       try {
         persentasekelahiran.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.persentasekelahiran[
-          "create"
-        ].post(persentasekelahiran.create.form);
+        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");
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            persentasekelahiran.create.form = {
+              tahun: "",
+              kematianKasar: "",
+              kelahiranKasar: "",
+              kematianBayi: "",
+            };
+            persentasekelahiran.findMany.load();
+            return id;
+          }
         }
-        return toast.error("failed create");
+        toast.error("failed create");
+        return null;
       } catch (error) {
         console.log((error as Error).message);
+        return null;
       } finally {
         persentasekelahiran.create.loading = false;
       }
@@ -75,10 +81,111 @@ const persentasekelahiran = proxy({
       }
     },
   },
+  findUnique: {
+    data: null as Prisma.DataKematian_KelahiranGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/persentasekelahiran/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          persentasekelahiran.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch persentasekelahiran:", res.statusText);
+          persentasekelahiran.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching persentasekelahiran:", error);
+        persentasekelahiran.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async byId() {},
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templatePersentase.safeParse(persentasekelahiran.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        this.loading = true;
+        const response = await fetch(`/api/kesehatan/persentasekelahiran/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+        const result = await response.json();
+    
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+    
+        toast.success("Berhasil update data!");
+    
+        // ✅ Optional: refresh list kalau kamu langsung ke halaman list
+        await persentasekelahiran.findMany.load();
+    
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data persentase kelahiran");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        persentasekelahiran.delete.loading = true;
+
+        const response = await fetch(
+          `/api/kesehatan/persentasekelahiran/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Persentase kelahiran berhasil dihapus"
+          );
+          await persentasekelahiran.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus persentase kelahiran"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus persentase kelahiran");
+      } finally {
+        persentasekelahiran.delete.loading = false;
+      }
+    },
+  },
 });
 
-const statePersentase = proxy({
-  persentasekelahiran,
-});
-
-export default statePersentase;
+export default persentasekelahiran;

src/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit.ts

@@ -0,0 +1,214 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  name: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsiSingkat: z.string().min(3, "Deskripsi singkat minimal 3 karakter"),
+  deskripsiLengkap: z.string().min(3, "Deskripsi lengkap minimal 3 karakter"),
+  imageId: z.string().nonempty(),
+});
+
+const defaultForm = {
+  name: "",
+  deskripsiSingkat: "",
+  deskripsiLengkap: "",
+  imageId: "",
+};
+
+const infoWabahPenyakit = proxy({
+  findMany: {
+    data: [] as Prisma.InfoWabahPenyakitGetPayload<{
+      include: {
+        image: true;
+      };
+    }>[],
+    async load() {
+      const res = await ApiFetch.api.kesehatan.infowabahpenyakit[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        infoWabahPenyakit.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(infoWabahPenyakit.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        infoWabahPenyakit.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.infowabahpenyakit[
+          "create"
+        ].post(infoWabahPenyakit.create.form);
+        if (res.status === 200) {
+          infoWabahPenyakit.findMany.load();
+          return toast.success("Info wabah penyakit berhasil disimpan!");
+        }
+
+        return toast.error("Gagal menyimpan info wabah penyakit");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        infoWabahPenyakit.create.loading = false;
+      }
+    },
+    resetForm() {
+      infoWabahPenyakit.create.form = { ...defaultForm };
+    },
+  },
+  findUnique: {
+    data: null as Prisma.InfoWabahPenyakitGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/infowabahpenyakit/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          infoWabahPenyakit.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch info wabah penyakit:", res.statusText);
+          infoWabahPenyakit.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching info wabah penyakit:", error);
+        infoWabahPenyakit.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        infoWabahPenyakit.delete.loading = true;
+
+        const response = await fetch(`/api/kesehatan/infowabahpenyakit/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Info wabah penyakit berhasil dihapus");
+          await infoWabahPenyakit.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus info wabah penyakit");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus info wabah penyakit");
+      } finally {
+        infoWabahPenyakit.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/kesehatan/infowabahpenyakit/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsiSingkat: data.deskripsiSingkat,
+            deskripsiLengkap: data.deskripsiLengkap,
+            imageId: data.imageId,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error fetching info wabah penyakit:", error);
+        toast.error(error instanceof Error ? error.message : "Gagal memuat data");
+        return null;
+      }
+    },
+
+    async update() {
+        const cek = templateForm.safeParse(infoWabahPenyakit.edit.form);
+        if (!cek.success) {
+            const err = `[${cek.error.issues
+                .map((v) => `${v.path.join(".")}`)
+                .join("\n")}] required`;
+            return toast.error(err);
+        }
+
+        try {
+            infoWabahPenyakit.edit.loading = true;
+            const response = await fetch(`/api/kesehatan/infowabahpenyakit/${this.id}`, {
+                method: "PUT",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    name: this.form.name,
+                    deskripsiSingkat: this.form.deskripsiSingkat,
+                    deskripsiLengkap: this.form.deskripsiLengkap,
+                    imageId: this.form.imageId,
+                }),
+            });
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+            }
+            const result = await response.json();
+            if (result.success) {
+                toast.success(result.message || "Info wabah penyakit berhasil diupdate");
+                await infoWabahPenyakit.findMany.load();  
+                return true;
+            } else {
+                throw new Error(result.message || "Gagal update info wabah penyakit");
+            }
+        } catch (error) {
+            console.error("Gagal update:", error);
+            toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat mengupdate info wabah penyakit");
+            return false;
+        } finally {
+            infoWabahPenyakit.edit.loading = false;
+        }
+    },
+    reset() {
+        infoWabahPenyakit.edit.id = "";
+        infoWabahPenyakit.edit.form = { ...defaultForm };
+    },
+  },
+});
+
+export default infoWabahPenyakit;

src/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat.ts

@@ -0,0 +1,208 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+    name: z.string().min(3, "Judul minimal 3 karakter"),
+    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+    imageId: z.string().nonempty(),
+})
+
+const defaultForm = {
+    name: "",
+    deskripsi: "",
+    imageId: "",
+}
+
+const kontakDarurat = proxy({
+    findMany: {
+        data: [] as Prisma.KontakDaruratGetPayload<{
+            include: {
+                image: true;
+            };
+        }>[],
+        async load() {
+            const res = await ApiFetch.api.kesehatan.kontakdarurat[
+                "find-many"
+            ].get();
+            if (res.status === 200) {
+                kontakDarurat.findMany.data = res.data?.data ?? [];
+            }
+        },
+    },
+    create:{
+        form: {...defaultForm},
+        loading: false,
+        async create() {
+            const cek = templateForm.safeParse(kontakDarurat.create.form);
+            if (!cek.success) {
+                const err = `[${cek.error.issues
+                    .map((v) => `${v.path.join(".")}`)
+                    .join("\n")}] required`;
+                return toast.error(err);
+            }
+
+            try {
+                kontakDarurat.create.loading = true;
+                const res = await ApiFetch.api.kesehatan.kontakdarurat[
+                    "create"
+                ].post(kontakDarurat.create.form);
+                if (res.status === 200) {
+                    kontakDarurat.findMany.load();
+                    return toast.success("Kontak Darurat berhasil disimpan!");
+                }
+
+                return toast.error("Gagal menyimpan kontak darurat");
+            } catch (error) {
+                console.log((error as Error).message);
+            } finally {
+                kontakDarurat.create.loading = false;
+            }
+        },
+        resetForm() {
+            kontakDarurat.create.form = {...defaultForm};
+        }
+    },
+    findUnique: {
+        data: null as Prisma.KontakDaruratGetPayload<{
+            include: {
+                image: true;
+            };
+        }> | null,
+        async load(id: string) {
+           try {
+            const res = await fetch(`/api/kesehatan/kontakdarurat/${id}`);
+            if (res.ok) {
+                const data = await res.json();
+                kontakDarurat.findUnique.data = data.data ?? null;
+            } else {
+                console.error("Failed to fetch data", res.status, res.statusText);
+                kontakDarurat.findUnique.data = null;
+            }
+           } catch (error) {
+            console.error("Error fetching data:", error);
+            kontakDarurat.findUnique.data = null;
+           }
+        },
+    },
+    delete: {
+        loading: false,
+        async byId(id: string) {
+          try {
+            kontakDarurat.delete.loading = true;
+            const response = await fetch(`/api/kesehatan/kontakdarurat/del/${id}`, {
+              method: 'DELETE',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+            });
+            
+            const result = await response.json();
+            
+            if (response.ok && result?.success) {
+              toast.success(result.message || "Kontak darurat berhasil dihapus");
+              await kontakDarurat.findMany.load(); // refresh list
+            } else {
+              toast.error(result?.message || "Gagal menghapus kontak darurat");
+            }
+          } catch (error) {
+            console.error("Gagal delete:", error);
+            toast.error("Terjadi kesalahan saat menghapus kontak darurat");
+          } finally {
+            kontakDarurat.delete.loading = false;
+          }
+        }
+      },
+    edit: {
+        id: "",
+        form: { ...defaultForm },
+        loading: false,
+    
+        async load(id: string) {
+          if (!id) {
+            toast.warn("ID tidak valid");
+            return null;
+          }
+    
+          try {
+            const response = await fetch(`/api/kesehatan/kontakdarurat/${id}`, {
+              method: "GET",
+              headers: {
+                "Content-Type": "application/json",
+              },
+            });
+            if (!response.ok) {
+              throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const result = await response.json();
+            if (result?.success) {
+              const data = result.data;
+              this.id = data.id;
+              this.form = {
+                name: data.name,
+                deskripsi: data.deskripsi,
+                imageId: data.imageId,
+              };
+              return data; // Return the loaded data
+            } else {
+              throw new Error(result?.message || "Gagal memuat data");
+            }
+          } catch (error) {
+            console.error("Error fetching kontak darurat:", error);
+            toast.error(error instanceof Error ? error.message : "Gagal memuat data");
+            return null;
+          }
+        },
+    
+        async update() {
+            const cek = templateForm.safeParse(kontakDarurat.edit.form);
+            if (!cek.success) {
+                const err = `[${cek.error.issues
+                    .map((v) => `${v.path.join(".")}`)
+                    .join("\n")}] required`;
+                return toast.error(err);
+            }
+    
+            try {
+                kontakDarurat.edit.loading = true;
+                const response = await fetch(`/api/kesehatan/kontakdarurat/${this.id}`, {
+                    method: "PUT",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        name: this.form.name,
+                        deskripsi: this.form.deskripsi,
+                        imageId: this.form.imageId,
+                    }),
+                });
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({}));
+                    throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+                }
+                const result = await response.json();
+                if (result.success) {
+                    toast.success(result.message || "Kontak darurat berhasil diupdate");
+                    await kontakDarurat.findMany.load();  
+                    return true;
+                } else {
+                    throw new Error(result.message || "Gagal update kontak darurat");
+                }
+            } catch (error) {
+                console.error("Gagal update:", error);
+                toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat mengupdate kontak darurat");
+                return false;
+            } finally {
+                kontakDarurat.edit.loading = false;
+            }
+        },
+        reset() {
+            kontakDarurat.edit.id = "";
+            kontakDarurat.edit.form = { ...defaultForm };
+        },
+      },
+});
+
+export default kontakDarurat

src/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat.ts

@@ -0,0 +1,208 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+    name: z.string().min(3, "Judul minimal 3 karakter"),
+    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+    imageId: z.string().nonempty(),
+})
+
+const defaultForm = {
+    name: "",
+    deskripsi: "",
+    imageId: "",
+}
+
+const penangananDarurat = proxy({
+    findMany: {
+        data: [] as Prisma.PenangananDaruratGetPayload<{
+            include: {
+                image: true;
+            };
+        }>[],
+        async load() {
+            const res = await ApiFetch.api.kesehatan.penanganandarurat[
+                "find-many"
+            ].get();
+            if (res.status === 200) {
+                penangananDarurat.findMany.data = res.data?.data ?? [];
+            }
+        },
+    },
+    create:{
+        form: {...defaultForm},
+        loading: false,
+        async create() {
+            const cek = templateForm.safeParse(penangananDarurat.create.form);
+            if (!cek.success) {
+                const err = `[${cek.error.issues
+                    .map((v) => `${v.path.join(".")}`)
+                    .join("\n")}] required`;
+                return toast.error(err);
+            }
+
+            try {
+                penangananDarurat.create.loading = true;
+                const res = await ApiFetch.api.kesehatan.penanganandarurat[
+                    "create"
+                ].post(penangananDarurat.create.form);
+                if (res.status === 200) {
+                    penangananDarurat.findMany.load();
+                    return toast.success("Penanganan Darurat berhasil disimpan!");
+                }
+
+                return toast.error("Gagal menyimpan penanganan darurat");
+            } catch (error) {
+                console.log((error as Error).message);
+            } finally {
+                penangananDarurat.create.loading = false;
+            }
+        },
+        resetForm() {
+            penangananDarurat.create.form = {...defaultForm};
+        }
+    },
+    findUnique: {
+        data: null as Prisma.PenangananDaruratGetPayload<{
+            include: {
+                image: true;
+            };
+        }> | null,
+        async load(id: string) {
+           try {
+            const res = await fetch(`/api/kesehatan/penanganandarurat/${id}`);
+            if (res.ok) {
+                const data = await res.json();
+                penangananDarurat.findUnique.data = data.data ?? null;
+            } else {
+                console.error("Failed to fetch data", res.status, res.statusText);
+                penangananDarurat.findUnique.data = null;
+            }
+           } catch (error) {
+            console.error("Error fetching data:", error);
+            penangananDarurat.findUnique.data = null;
+           }
+        },
+    },
+    delete: {
+        loading: false,
+        async byId(id: string) {
+          try {
+            penangananDarurat.delete.loading = true;
+            const response = await fetch(`/api/kesehatan/penanganandarurat/del/${id}`, {
+              method: 'DELETE',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+            });
+            
+            const result = await response.json();
+            
+            if (response.ok && result?.success) {
+              toast.success(result.message || "Penanganan darurat berhasil dihapus");
+              await penangananDarurat.findMany.load(); // refresh list
+            } else {
+              toast.error(result?.message || "Gagal menghapus penanganan darurat");
+            }
+          } catch (error) {
+            console.error("Gagal delete:", error);
+            toast.error("Terjadi kesalahan saat menghapus penanganan darurat");
+          } finally {
+            penangananDarurat.delete.loading = false;
+          }
+        }
+      },
+    edit: {
+        id: "",
+        form: { ...defaultForm },
+        loading: false,
+    
+        async load(id: string) {
+          if (!id) {
+            toast.warn("ID tidak valid");
+            return null;
+          }
+    
+          try {
+            const response = await fetch(`/api/kesehatan/penanganandarurat/${id}`, {
+              method: "GET",
+              headers: {
+                "Content-Type": "application/json",
+              },
+            });
+            if (!response.ok) {
+              throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const result = await response.json();
+            if (result?.success) {
+              const data = result.data;
+              this.id = data.id;
+              this.form = {
+                name: data.name,
+                deskripsi: data.deskripsi,
+                imageId: data.imageId,
+              };
+              return data; // Return the loaded data
+            } else {
+              throw new Error(result?.message || "Gagal memuat data");
+            }
+          } catch (error) {
+            console.error("Error fetching penanganan darurat:", error);
+            toast.error(error instanceof Error ? error.message : "Gagal memuat data");
+            return null;
+          }
+        },
+    
+        async update() {
+            const cek = templateForm.safeParse(penangananDarurat.edit.form);
+            if (!cek.success) {
+                const err = `[${cek.error.issues
+                    .map((v) => `${v.path.join(".")}`)
+                    .join("\n")}] required`;
+                return toast.error(err);
+            }
+    
+            try {
+                penangananDarurat.edit.loading = true;
+                const response = await fetch(`/api/kesehatan/penanganandarurat/${this.id}`, {
+                    method: "PUT",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        name: this.form.name,
+                        deskripsi: this.form.deskripsi,
+                        imageId: this.form.imageId,
+                    }),
+                });
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({}));
+                    throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+                }
+                const result = await response.json();
+                if (result.success) {
+                    toast.success(result.message || "Penanganan darurat berhasil diupdate");
+                    await penangananDarurat.findMany.load();  
+                    return true;
+                } else {
+                    throw new Error(result.message || "Gagal update penanganan darurat");
+                }
+            } catch (error) {
+                console.error("Gagal update:", error);
+                toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat mengupdate penanganan darurat");
+                return false;
+            } finally {
+                penangananDarurat.edit.loading = false;
+            }
+        },
+        reset() {
+            penangananDarurat.edit.id = "";
+            penangananDarurat.edit.form = { ...defaultForm };
+        },
+      },
+});
+
+export default penangananDarurat

src/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu.ts

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

src/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan.ts

@@ -0,0 +1,214 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  name: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsiSingkat: z.string().min(3, "Deskripsi singkat minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  imageId: z.string().nonempty(),
+});
+
+const defaultForm = {
+  name: "",
+  deskripsiSingkat: "",
+  deskripsi: "",
+  imageId: "",
+};
+
+const programKesehatan = proxy({
+  findMany: {
+    data: [] as Prisma.ProgramKesehatanGetPayload<{
+      include: {
+        image: true;
+      };
+    }>[],
+    async load() {
+      const res = await ApiFetch.api.kesehatan.programkesehatan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        programKesehatan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(programKesehatan.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        programKesehatan.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.programkesehatan[
+          "create"
+        ].post(programKesehatan.create.form);
+        if (res.status === 200) {
+          programKesehatan.findMany.load();
+          return toast.success("Program Kesehatan berhasil disimpan!");
+        }
+
+        return toast.error("Gagal menyimpan program kesehatan");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        programKesehatan.create.loading = false;
+      }
+    },
+    resetForm() {
+      programKesehatan.create.form = { ...defaultForm };
+    },
+  },
+  findUnique: {
+    data: null as Prisma.ProgramKesehatanGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/programkesehatan/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          programKesehatan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch program kesehatan:", res.statusText);
+          programKesehatan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching program kesehatan:", error);
+        programKesehatan.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        programKesehatan.delete.loading = true;
+
+        const response = await fetch(`/api/kesehatan/programkesehatan/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Program kesehatan berhasil dihapus");
+          await programKesehatan.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus program kesehatan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus program kesehatan");
+      } finally {
+        programKesehatan.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/kesehatan/programkesehatan/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsiSingkat: data.deskripsiSingkat,
+            deskripsi: data.deskripsi,
+            imageId: data.imageId,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error fetching program kesehatan:", error);
+        toast.error(error instanceof Error ? error.message : "Gagal memuat data");
+        return null;
+      }
+    },
+
+    async update() {
+        const cek = templateForm.safeParse(programKesehatan.edit.form);
+        if (!cek.success) {
+            const err = `[${cek.error.issues
+                .map((v) => `${v.path.join(".")}`)
+                .join("\n")}] required`;
+            return toast.error(err);
+        }
+
+        try {
+            programKesehatan.edit.loading = true;
+            const response = await fetch(`/api/kesehatan/programkesehatan/${this.id}`, {
+                method: "PUT",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    name: this.form.name,
+                    deskripsiSingkat: this.form.deskripsiSingkat,
+                    deskripsi: this.form.deskripsi,
+                    imageId: this.form.imageId,
+                }),
+            });
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+            }
+            const result = await response.json();
+            if (result.success) {
+                toast.success(result.message || "Program kesehatan berhasil diupdate");
+                await programKesehatan.findMany.load();  
+                return true;
+            } else {
+                throw new Error(result.message || "Gagal update program kesehatan");
+            }
+        } catch (error) {
+            console.error("Gagal update:", error);
+            toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat mengupdate program kesehatan");
+            return false;
+        } finally {
+            programKesehatan.edit.loading = false;
+        }
+    },
+    reset() {
+        programKesehatan.edit.id = "";
+        programKesehatan.edit.form = { ...defaultForm };
+    },
+  },
+});
+
+export default programKesehatan;

src/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas.ts

@@ -0,0 +1,298 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+// Validasi form
+const templateForm = z.object({
+  name: z.string().min(1),
+  alamat: z.string().min(1),
+  imageId: z.string().min(1),
+  jam: z.object({
+    workDays: z.string().min(1),
+    weekDays: z.string().min(1),
+    holiday: z.string().min(1),
+  }),
+  kontak: z.object({
+    kontakPuskesmas: z.string().min(1),
+    email: z.string().min(1),
+    facebook: z.string().min(1),
+    kontakUGD: z.string().min(1),
+  }),
+});
+
+// Default form
+const defaultForm = {
+  name: "",
+  alamat: "",
+  imageId: "",
+  jam: {
+    workDays: "",
+    weekDays: "",
+    holiday: "",
+  },
+  kontak: {
+    kontakPuskesmas: "",
+    email: "",
+    facebook: "",
+    kontakUGD: "",
+  },
+  image: undefined,
+};
+
+const puskesmasState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async submit() {
+      const cek = templateForm.safeParse(puskesmasState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues.map((v) => v.path.join(".")).join(", ")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        puskesmasState.create.loading = true;
+
+        console.log('Form data:', puskesmasState.create.form);
+        interface ErrorResponse {
+          message?: string;
+          error?: string;
+          errors?: Record<string, string[]>;
+        }
+
+        const payload = {
+            name: puskesmasState.create.form.name,
+            alamat: puskesmasState.create.form.alamat,
+            imageId: puskesmasState.create.form.imageId,
+            jam: {
+              workDays: puskesmasState.create.form.jam.workDays,
+              weekDays: puskesmasState.create.form.jam.weekDays,
+              holiday: puskesmasState.create.form.jam.holiday,
+            },
+            kontak: {
+              kontakPuskesmas: puskesmasState.create.form.kontak.kontakPuskesmas,
+              email: puskesmasState.create.form.kontak.email,
+              facebook: puskesmasState.create.form.kontak.facebook,
+              kontakUGD: puskesmasState.create.form.kontak.kontakUGD,
+            },
+          };
+          
+          
+          
+
+        console.log('Sending payload:', JSON.stringify(payload, null, 2));
+
+        try {
+          const res = await ApiFetch.api.kesehatan.puskesmas.create.post(payload);
+          console.log('API Response:', res);
+
+          if (res.status === 200) {
+            await puskesmasState.findMany.load();
+            toast.success("Berhasil menambahkan puskesmas");
+            return res;
+          } else {
+            console.error('API Error Response:', {
+              status: res.status,
+              data: res.data
+            });
+            
+            const errorData = res.data as ErrorResponse;
+            let errorMessage = 'Gagal menambahkan puskesmas';
+            
+            if (errorData?.message) {
+              errorMessage = errorData.message;
+            } else if (errorData?.error) {
+              errorMessage = errorData.error;
+            } else if (errorData?.errors) {
+              errorMessage = Object.entries(errorData.errors)
+                .map(([field, messages]) => `${field}: ${Array.isArray(messages) ? messages.join(', ') : messages}`)
+                .join('; ');
+            }
+            
+            console.error('Extracted error message:', errorMessage);
+            toast.error(errorMessage);
+            throw new Error(errorMessage);
+          }
+        } catch (error) {
+          console.error('Error in API call:', {
+            error,
+            errorString: String(error),
+            jsonError: error instanceof Error ? {
+              name: error.name,
+              message: error.message,
+              stack: error.stack
+            } : 'Not an Error instance'
+          });
+          throw error;
+        }
+      } catch (error) {
+        console.error("Error in puskesmas submit:", {
+          error,
+          errorString: String(error),
+          errorType: typeof error,
+          isErrorInstance: error instanceof Error,
+          errorDetails: error instanceof Error ? {
+            name: error.name,
+            message: error.message,
+            stack: error.stack,
+            cause: error.cause
+          } : null
+        });
+        
+        let errorMessage = "Terjadi kesalahan saat menambahkan puskesmas";
+        if (error instanceof Error) {
+          errorMessage = error.message || errorMessage;
+        } else if (error && typeof error === 'object' && 'message' in error) {
+          errorMessage = String((error as { message: unknown }).message);
+        } else if (typeof error === 'string') {
+          errorMessage = error;
+        }
+        
+        console.error('Displaying error to user:', errorMessage);
+        toast.error(errorMessage);
+        throw error;
+      } finally {
+        puskesmasState.create.loading = false;
+      }
+    },
+    resetForm() {
+      puskesmasState.create.form = { ...defaultForm };
+    }
+  },
+
+  findMany: {
+    data: null as Prisma.PuskesmasGetPayload<{
+      include: { image: true; jam: true; kontak: true };
+    }>[] | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.puskesmas["find-many"].get();
+      if (res.status === 200) {
+        puskesmasState.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+
+  findUnique: {
+    data: null as Prisma.PuskesmasGetPayload<{
+      include: { image: true; jam: true; kontak: true };
+    }> | null,
+    async load(id: string) {
+      const res = await fetch(`/api/kesehatan/puskesmas/${id}`);
+      if (res.ok) {
+        const data = await res.json();
+        puskesmasState.findUnique.data = data.data ?? null;
+      } else {
+        toast.error("Gagal load data puskesmas");
+      }
+    },
+  },
+
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      const res = await fetch(`/api/kesehatan/puskesmas/${id}`);
+      if (!res.ok) {
+        toast.error("Gagal memuat data");
+        return;
+      }
+
+      const result = await res.json();
+      const data = result.data;
+
+      puskesmasState.edit.id = data.id;
+      puskesmasState.edit.form = {
+        name: data.name,
+        alamat: data.alamat,
+        imageId: data.imageId,
+        jam: {
+          workDays: data.jam.workDays,
+          weekDays: data.jam.weekDays,
+          holiday: data.jam.holiday,
+        },
+        kontak: {
+          kontakPuskesmas: data.kontak.kontakPuskesmas,
+          email: data.kontak.email,
+          facebook: data.kontak.facebook,
+          kontakUGD: data.kontak.kontakUGD,
+        },
+        image: data.image,
+      };
+    },
+
+    async submit() {
+      const cek = templateForm.safeParse(puskesmasState.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues.map((v) => v.path.join(".")).join(", ")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        puskesmasState.edit.loading = true;
+        const payload = {
+          name: puskesmasState.edit.form.name,
+          alamat: puskesmasState.edit.form.alamat,
+          imageId: puskesmasState.edit.form.imageId,
+          jam: { ...puskesmasState.edit.form.jam },
+          kontak: { ...puskesmasState.edit.form.kontak }
+        };
+
+        const res = await fetch(`/api/kesehatan/puskesmas/${puskesmasState.edit.id}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+
+        if (!res.ok) {
+          const error = await res.json();
+          throw new Error(error.message || "Update gagal");
+        }
+
+        toast.success("Berhasil update puskesmas");
+        await puskesmasState.findMany.load();
+        return true;
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : "Terjadi kesalahan saat update");
+        return false;
+      } finally {
+        puskesmasState.edit.loading = false;
+      }
+    },
+
+    reset() {
+      puskesmasState.edit.id = "";
+      puskesmasState.edit.form = { ...defaultForm };
+    }
+  },
+
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      try {
+        puskesmasState.delete.loading = true;
+        const res = await fetch(`/api/kesehatan/puskesmas/del/${id}`, {
+          method: "DELETE",
+        });
+
+        const result = await res.json();
+        if (res.ok && result.success) {
+          toast.success("Puskesmas berhasil dihapus");
+          await puskesmasState.findMany.load();
+        } else {
+          toast.error(result.message || "Gagal menghapus");
+        }
+      } catch {
+        toast.error("Terjadi kesalahan saat menghapus");
+      } finally {
+        puskesmasState.delete.loading = false;
+      }
+    }
+  }
+});
+
+export default puskesmasState;

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

@@ -5,9 +5,9 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateGrafikJenisKelamin = z.object({
-  laki: z.string().min(2, "Data laki-laki harus diisi"),
-  perempuan: z.string().min(2, "Data perempuan harus diisi"),
-});
+  laki: z.string().min(1, "Data laki-laki harus diisi"),
+  perempuan: z.string().min(1, "Data perempuan harus diisi"),
+}); 
 
 type GrafikJenisKelamin = Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
   select: {

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

@@ -5,10 +5,10 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateGrafikUmur = z.object({
-  remaja: z.string().min(2, "Data remaja harus diisi"),
-  dewasa: z.string().min(2, "Data dewasa harus diisi"),
-  orangtua: z.string().min(2, "Data orangtua harus diisi"),
-  lansia: z.string().min(2, "Data lansia harus diisi"),
+  remaja: z.string().min(1, "Data remaja harus diisi"),
+  dewasa: z.string().min(1, "Data dewasa harus diisi"),
+  orangtua: z.string().min(1, "Data orangtua harus diisi"),
+  lansia: z.string().min(1, "Data lansia harus diisi"),
 });
 
 type GrafikUmur = Prisma.GrafikBerdasarkanUmurGetPayload<{

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

@@ -6,7 +6,7 @@ import { z } from "zod";
 
 const templateGrafikHasilKepuasanMasyarakat = z.object({
   label: z.string().min(2, "Label harus diisi"),
-  kepuasan: z.string().min(2, "Kepuasan harus diisi"),
+  kepuasan: z.string().min(1, "Kepuasan harus diisi"),
 });
 
 type GrafikHasilKepuasanMasyarakat = Prisma.IndeksKepuasanMasyarakatGetPayload<{

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

@@ -0,0 +1,77 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "Presentase Kelahiran & Kematian",
+            value: "presentasekelahiran&kematian",
+            href: "/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian"
+        },
+        {
+            label: "Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik",
+            value: "grafikhasilkepuasan",
+            href: "/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan"
+        },
+        {
+            label: "Fasilitas Kesehatan",
+            value: "fasilitaskesehatan",
+            href: "/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan"
+        },
+        {
+            label: "Jadwal Kegiatan",
+            value: "jadwalkegiatan",
+            href: "/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan"
+        },
+        {
+            label: "Artikel Kesehatan",
+            value: "artikelkesehatan",
+            href: "/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan"
+        },
+    ];
+    const curentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const handleTabChange = (value: string | null) => {
+        const tab = tabs.find(t => t.value === value)
+        if (tab) {
+            router.push(tab.href)
+        }
+        setActiveTab(value)
+    }
+
+    useEffect(() => {
+        const match = tabs.find(tab => tab.href === pathname)
+        if (match) {
+            setActiveTab(match.value)
+        }
+    }, [pathname])
+
+    return (
+        <Stack>
+            <Title order={3}>Data Kesehatan Warga</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+                    ))}
+                </TabsList>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
+                    </TabsPanel>
+                ))}
+            </Tabs>
+            {children}
+        </Stack>
+    );
+}
+
+export default LayoutTabs;

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

@@ -1,101 +0,0 @@
-/* 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, Paper, Skeleton, 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 py={10} gap={"xs"}>
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Title order={4}>Tambah Grafik Hasil Kepuasan</Title>
-        <Stack gap={"xs"}>
-          <TextInput
-            label="Label"
-            placeholder='Masukkan label yang diinginkan'
-            value={grafikkepuasan.create.form.label}
-            onChange={(val) => {
-              grafikkepuasan.create.form.label = val.currentTarget.value
-            }}
-          />
-          <TextInput
-            label="Jumlah Penderita"
-            type='number'
-            placeholder='Masukkan jumlah penderita'
-            value={grafikkepuasan.create.form.jumlah}
-            onChange={(val) => {
-              grafikkepuasan.create.form.jumlah = val.currentTarget.value
-            }}
-          />
-          <Group>
-            <Button bg={colors['blue-button']} mt={10}
-              onClick={async () => {
-                await grafikkepuasan.create.create();
-                await grafikkepuasan.findMany.load();
-                if (grafikkepuasan.findMany.data) {
-                  setChartData(grafikkepuasan.findMany.data);
-                }
-              }}
-            >Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-      {!chartData ? (
-        <Box style={{ width: '100%', minWidth: 300, minHeight: 300 }}>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Title py={15} order={4}>Data Hasil Kepuasan</Title>
-            <Skeleton h={400} />
-          </Paper>
-        </Box>
-      ) : (
-        <Box style={{ width: '100%', minWidth: 300, minHeight: 300 }}>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Title py={15} order={4}>Data Hasil Kepuasan</Title>
-            <BarChart
-              width={isMobile ? 250 : isTablet ? 300 : 350}
-              height={380}
-              data={chartData}
-            >
-              <XAxis dataKey="label" />
-              <YAxis />
-              <Tooltip />
-              <Legend />
-              <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah" />
-            </BarChart>
-          </Paper>
-        </Box>
-      )}
-    </Stack>
-  );
-}
-
-export default GrafikHasilKepuasan;

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

@@ -1,124 +0,0 @@
-'use client'
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import statePersentase from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Skeleton, 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>
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-          <Title order={4}>Tambah Persentase Data Kelahiran & Kematian</Title>
-          <Stack gap={"xs"}>
-            <TextInput
-              label="Tahun"
-              type="number"
-              value={persentase.create.form.tahun}
-              placeholder="Masukkan tahun"
-              onChange={(val) => {
-                persentase.create.form.tahun = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              label="Kematian Kasar"
-              type="number"
-              value={persentase.create.form.kematianKasar}
-              placeholder="Masukkan kematian kasar"
-              onChange={(val) => {
-                persentase.create.form.kematianKasar = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              label="Kematian Bayi"
-              type="number"
-              value={persentase.create.form.kematianBayi}
-              placeholder="Masukkan kematian bayi"
-              onChange={(val) => {
-                persentase.create.form.kematianBayi = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              label="Kelahiran Kasar"
-              type="number"
-              value={persentase.create.form.kelahiranKasar}
-              placeholder="Masukkan kelahiran kasar"
-              onChange={(val) => {
-                persentase.create.form.kelahiranKasar = val.currentTarget.value;
-              }}
-            />
-            <Group>
-              <Button
-                bg={colors['blue-button']}
-                mt={10}
-                onClick={async () => {
-                  await persentase.create.create();
-                  await persentase.findMany.load();
-                  if (persentase.findMany.data) {
-                    setChartData(persentase.findMany.data);
-                  }
-                }}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
-
-      {/* Chart */}
-      {!mounted && !chartData ? (
-        <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
-            <Skeleton h={400} />
-          </Paper>
-        </Box>
-      ) : (
-        <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Title pb={10} order={4}>Data Kelahiran & Kematian</Title>
-            {mounted && chartData.length > 0 && (
-              <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} 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>
-            )}
-          </Paper>
-        </Box>
-      )}
-    </Stack>
-  );
-}
-
-export default PersentaseDataKelahiranKematian;

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

@@ -1,10 +1,9 @@
 'use client'
-import { Box, Paper, 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';
 import colors from '@/con/colors';
+import { Box, Paper, Text } from '@mantine/core';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
+import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import { useProxy } from 'valtio/utils';
 
 function DoctorSignUI() {
   const doctorSign = useProxy(stateArtikelKesehatan.doctorSign)

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

@@ -1,10 +1,9 @@
 'use client'
-import { Box, Paper, Stack, 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';
 import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
 
 function FirstAidUI() {
   const firstAidState = useProxy(stateArtikelKesehatan.firstAid)

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

@@ -2,9 +2,9 @@
 import { Box, Paper, Stack, 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';
 import colors from '@/con/colors';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
+import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 
 function IntoductionUI() {
   const introduction = useProxy(stateArtikelKesehatan.introduction)

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

@@ -169,4 +169,4 @@ function AllList() {
   </Stack>
 }
 
-export default ArtikelKesehatan;
+export default ArtikelKesehatan;

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

@@ -1,10 +1,9 @@
 'use client'
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
 import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
 
 function PreventionUI() {
   const preventionState = useProxy(stateArtikelKesehatan.prevention)

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

@@ -1,9 +1,9 @@
 'use client'
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import colors from '@/con/colors';
 import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-import colors from '@/con/colors';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
 
 function SymptomUI() {
   const symptomState = useProxy(stateArtikelKesehatan.symptom)

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

@@ -1,3 +1,4 @@
+'use client'
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import colors from '@/con/colors';
 import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';

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

@@ -1,8 +1,9 @@
+'use client'
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import colors from '@/con/colors';
 import { Box, Paper, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-import colors from '@/con/colors';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
 
 function FasilitasPendukung() {
   const fasilitaspendukungState = useProxy(stateFasilitasKesehatan.fasilitaspendukung)

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

@@ -1,9 +1,9 @@
 'use client'
-import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import colors from '@/con/colors';
 import { Box, Paper, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-import colors from '@/con/colors';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 
 function LayananUnggulan() {
   const informasiumumState = useProxy(stateFasilitasKesehatan.layananunggulan)

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

@@ -1,8 +1,9 @@
-import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
-import { Box, Text, Paper } from '@mantine/core';
-import { useProxy } from 'valtio/utils';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+'use client'
 import colors from '@/con/colors';
+import { Box, Paper, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
 
 function ProsedurPendaftaran() {
   const prosedurpendaftaranState = useProxy(stateFasilitasKesehatan.prosedurpendaftaran)

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

@@ -1,3 +1,4 @@
+'use client'
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import colors from '@/con/colors';
 import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/[id]/page.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function EditGrafikHasilKepuasan() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const stateGrafikKepuasan = useProxy(grafikkepuasan)
+
+  const id = params.id
+
+  // Load data saat komponen mount
+  useEffect(() => {
+    if (id) {
+      stateGrafikKepuasan.findUnique.load(id).then(() => {
+        const data = stateGrafikKepuasan.findUnique.data
+        if (data) {
+          stateGrafikKepuasan.update.form = {
+            label: data.label || '',
+            jumlah: data.jumlah || '',
+          }
+        }
+      })
+    }
+  }, [id])
+
+  const handleSubmit = async () => {
+    // Set the ID before submitting
+    stateGrafikKepuasan.update.id = id;
+    await stateGrafikKepuasan.update.submit();
+    router.push('/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan')
+  }
+return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+        <Stack>
+          <Title order={3}>Edit Grafik Hasil Kepuasan</Title>
+          <TextInput
+            label="Label"
+            placeholder="masukkan label"
+            value={stateGrafikKepuasan.update.form.label}
+            onChange={(val) => {
+              stateGrafikKepuasan.update.form.label = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Jumlah"
+            type="number"
+            placeholder="masukkan jumlah"
+            value={stateGrafikKepuasan.update.form.jumlah}
+            onChange={(val) => {
+              stateGrafikKepuasan.update.form.jumlah = val.currentTarget.value;
+            }}
+          />
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default EditGrafikHasilKepuasan;

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

@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function CreateGrafikHasilKepuasanMasyarakat() {
+  const stateGrafikKepuasan = useProxy(grafikkepuasan);
+  const [chartData, setChartData] = useState<any[]>([]);
+  const router = useRouter()
+
+  const resetForm = () => {
+    stateGrafikKepuasan.create.form = {
+      label: "",
+      jumlah: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await stateGrafikKepuasan.create.create();
+    if (id) {
+      const idStr = String(id);
+      await stateGrafikKepuasan.findUnique.load(idStr);
+      if (stateGrafikKepuasan.findUnique.data) {
+        setChartData([stateGrafikKepuasan.findUnique.data]);
+      }
+    }
+    resetForm();
+    router.push("/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan");
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
+        </Button>
+      </Box>
+      <Box>
+        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+          <Title order={4}>Tambah Grafik Hasil Kepuasan Masyarakat</Title>
+          <Stack gap={"xs"}>
+            <TextInput
+              label="Label"
+              type="text"
+              value={stateGrafikKepuasan.create.form.label}
+              placeholder="Masukkan label"
+              onChange={(val) => {
+                stateGrafikKepuasan.create.form.label = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Jumlah"
+              type="number"
+              value={stateGrafikKepuasan.create.form.jumlah}
+              placeholder="Masukkan jumlah"
+              onChange={(val) => {
+                stateGrafikKepuasan.create.form.jumlah = val.currentTarget.value;
+              }}
+            />
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                mt={10}
+                onClick={handleSubmit}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default CreateGrafikHasilKepuasanMasyarakat;

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

@@ -0,0 +1,148 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
+import { useProxy } from 'valtio/utils';
+import JudulListTab from '../../../_com/jusulListTab';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import grafikkepuasan from '../../../_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
+
+function GrafikHasilKepuasanMasyarakat() {
+  type PDKMGrafik = {
+    id: string;
+    label: string;
+    jumlah: number;
+  }
+  const stateGrafikKepuasan = useProxy(grafikkepuasan);
+  const [chartData, setChartData] = useState<PDKMGrafik[]>([]);
+  const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 768px)')
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+
+  const handleDelete = () => {
+    if (selectedId) {
+      stateGrafikKepuasan.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      stateGrafikKepuasan.findMany.load()
+    }
+  }
+
+  useShallowEffect(() => {
+    setMounted(true)
+    stateGrafikKepuasan.findMany.load()
+  }, [])
+
+  useEffect(() => {
+    setMounted(true);
+    if (stateGrafikKepuasan.findMany.data) {
+      setChartData(stateGrafikKepuasan.findMany.data.map((item) => ({
+        id: item.id,
+        label: item.label,
+        jumlah: Number(item.jumlah),
+      })));
+    }
+  }, [stateGrafikKepuasan.findMany.data]);
+
+  if (!stateGrafikKepuasan.findMany.data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        {/* Form Input */}
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulListTab
+            title='List Grafik Hasil Kepuasan Masyarakat'
+            href='/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/create'
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={16} />}
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Label</TableTh>
+                <TableTh>Jumlah</TableTh>
+                <TableTh>Edit</TableTh>
+                <TableTh>Delete</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {stateGrafikKepuasan.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.label}</TableTd>
+                  <TableTd>{item.jumlah}</TableTd>
+                  <TableTd>
+                    <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${item.id}`)}>
+                      <IconEdit size={20} />
+                    </Button>
+                  </TableTd>
+                  <TableTd>
+                    <Button
+                      color='red'
+                      disabled={stateGrafikKepuasan.delete.loading}
+                      onClick={() => {
+                        setSelectedId(item.id)
+                        setModalHapus(true)
+                      }}>
+                      <IconTrash size={20} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Paper>
+
+
+        {/* Chart */}
+        {!mounted && !chartData ? (
+          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Title pb={10} order={3}>Grafik Hasil Kepuasan Masyarakat</Title>
+              <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+            </Paper>
+          </Box>
+        ) : (
+          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Title pb={10} order={4}>Grafik Hasil Kepuasan Masyarakat</Title>
+              {mounted && chartData.length > 0 && (
+                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
+                  <XAxis dataKey="label" />
+                  <YAxis />
+                  <Tooltip />
+                  <Legend />
+                  <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah" />
+                </BarChart>
+              )}
+            </Paper>
+          </Box>
+        )}
+      </Stack>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus grafik hasil kepuasan masyarakat ini?'
+      />
+    </Box>
+  );
+}
+
+export default GrafikHasilKepuasanMasyarakat;

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

@@ -1,8 +1,9 @@
+'use client'
 import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import colors from '@/con/colors';
 import { Box, Paper, Stack, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-import colors from '@/con/colors';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
 
 function DeskripsiKegiatan() {
   const deskripsiKegiatanState = useProxy(stateJadwalKegiatan.deskripsiKegiatan)

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

@@ -1,8 +1,9 @@
+'use client'
 import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import colors from '@/con/colors';
 import { Box, Paper, Stack, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-import colors from '@/con/colors';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
 
 function DokumenYangDiperlukan() {
   const dokumenDiperlukan = useProxy(stateJadwalKegiatan.dokumenjadwalkegiatan)

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

@@ -1,3 +1,4 @@
+'use client'
 import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
 import colors from '@/con/colors';
 import { Box, Paper, Stack, TextInput, Title } from '@mantine/core';

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

@@ -1,8 +1,9 @@
+'use client'
 import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import colors from '@/con/colors';
 import { Box, Paper, Stack, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-import colors from '@/con/colors';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
 
 function LayananTersedia() {
   const layananTersediaState = useProxy(stateJadwalKegiatan.layanantersedia)

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

@@ -1,8 +1,9 @@
-import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+'use client'
+import colors from '@/con/colors';
 import { Box, Paper, Stack, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-import colors from '@/con/colors';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
 
 function SyaratDanKetentuan() {
   const syaratKetentuan = useProxy(stateJadwalKegiatan.syaratketentuan)

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

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

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

@@ -1,54 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } 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>
-      <Title order={3}>Data Kesehatan Warga</Title>
-      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Persentase Kelahiran & Kematian"}>
-        <TabsList bg={colors['BG-trans']} p={'xs'}>
-          <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;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/[id]/page.tsx

@@ -0,0 +1,101 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function EditPersentaseDataKelahiranKematian() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const statePresentase = useProxy(persentasekelahiran)
+
+  const id = params.id
+
+  // Load data saat komponen mount
+  useEffect(() => {
+    if (id) {
+      statePresentase.findUnique.load(id).then(() => {
+        const data = statePresentase.findUnique.data
+        if (data) {
+          statePresentase.update.form = {
+            tahun: data.tahun || '',
+            kematianKasar: data.kematianKasar || '',
+            kelahiranKasar: data.kelahiranKasar || '',
+            kematianBayi: data.kematianBayi || '',
+          }
+        }
+      })
+    }
+  }, [id])
+
+  const handleSubmit = async () => {
+    // Set the ID before submitting
+    statePresentase.update.id = id;
+    await statePresentase.update.submit();
+    router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian')
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+        <Stack>
+          <Title order={3}>Edit Persentase Data Kelahiran & Kematian</Title>
+          <TextInput
+            label="Tahun"
+            placeholder="masukkan tahun"
+            value={statePresentase.update.form.tahun}
+            onChange={(val) => {
+              statePresentase.update.form.tahun = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Kematian Kasar"
+            type="number"
+            placeholder="masukkan kematian kasar"
+            value={statePresentase.update.form.kematianKasar}
+            onChange={(val) => {
+              statePresentase.update.form.kematianKasar = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Kematian Bayi"
+            type="number"
+            placeholder="masukkan kematian bayi"
+            value={statePresentase.update.form.kematianBayi}
+            onChange={(val) => {
+              statePresentase.update.form.kematianBayi = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Kelahiran Kasar"
+            type="number"
+            placeholder="masukkan kelahiran kasar"
+            value={statePresentase.update.form.kelahiranKasar}
+            onChange={(val) => {
+              statePresentase.update.form.kelahiranKasar = val.currentTarget.value;
+            }}
+          />
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Simpan Perubahan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default EditPersentaseDataKelahiranKematian;

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

@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function CreatePersentaseDataKelahiranKematian() {
+  const statePersentase = useProxy(persentasekelahiran);
+  const [chartData, setChartData] = useState<any[]>([]);
+  const router = useRouter()
+
+  const resetForm = () => {
+    statePersentase.create.form = {
+      tahun: "",
+      kematianBayi: "",
+      kematianKasar: "",
+      kelahiranKasar: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await statePersentase.create.create();
+    if (id) {
+      const idStr = String(id);
+      await statePersentase.findUnique.load(idStr);
+      if (statePersentase.findUnique.data) {
+        setChartData([statePersentase.findUnique.data]);
+      }
+    }
+    resetForm();
+    router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian");
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
+        </Button>
+      </Box>
+      <Box>
+        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+          <Title order={4}>Tambah Persentase Data Kelahiran & Kematian</Title>
+          <Stack gap={"xs"}>
+            <TextInput
+              label="Tahun"
+              type="number"
+              value={statePersentase.create.form.tahun}
+              placeholder="Masukkan tahun"
+              onChange={(val) => {
+                statePersentase.create.form.tahun = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Kematian Kasar"
+              type="number"
+              value={statePersentase.create.form.kematianKasar}
+              placeholder="Masukkan kematian kasar"
+              onChange={(val) => {
+                statePersentase.create.form.kematianKasar = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Kematian Bayi"
+              type="number"
+              value={statePersentase.create.form.kematianBayi}
+              placeholder="Masukkan kematian bayi"
+              onChange={(val) => {
+                statePersentase.create.form.kematianBayi = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Kelahiran Kasar"
+              type="number"
+              value={statePersentase.create.form.kelahiranKasar}
+              placeholder="Masukkan kelahiran kasar"
+              onChange={(val) => {
+                statePersentase.create.form.kelahiranKasar = val.currentTarget.value;
+              }}
+            />
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                mt={10}
+                onClick={handleSubmit}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default CreatePersentaseDataKelahiranKematian;

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

@@ -0,0 +1,158 @@
+'use client'
+import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
+import { useProxy } from 'valtio/utils';
+import JudulListTab from '../../../_com/jusulListTab';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function PersentaseDataKelahiranKematian() {
+  type PDKMGrafik = {
+    id: string;
+    tahun: string;
+    kematianKasar: number;
+    kematianBayi: number;
+    kelahiranKasar: number;
+  }
+  const statePersentase = useProxy(persentasekelahiran);
+  const [chartData, setChartData] = useState<PDKMGrafik[]>([]);
+  const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 768px)')
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+
+  const handleDelete = () => {
+    if (selectedId) {
+      statePersentase.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      statePersentase.findMany.load()
+    }
+  }
+
+  useShallowEffect(() => {
+    setMounted(true)
+    statePersentase.findMany.load()
+  }, [])
+
+  useEffect(() => {
+    setMounted(true);
+    if (statePersentase.findMany.data) {
+      setChartData(statePersentase.findMany.data.map((item) => ({
+        id: item.id,
+        tahun: item.tahun,
+        kematianKasar: Number(item.kematianKasar),
+        kematianBayi: Number(item.kematianBayi),
+        kelahiranKasar: Number(item.kelahiranKasar),
+      })));
+    }
+  }, [statePersentase.findMany.data]);
+
+  if (!statePersentase.findMany.data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        {/* Form Input */}
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulListTab
+            title='List Persentase Data Kelahiran & Kematian'
+            href='/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/create'
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={16} />}
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Tahun</TableTh>
+                <TableTh>Kematian Kasar</TableTh>
+                <TableTh>Kematian Bayi</TableTh>
+                <TableTh>kelahiran Kasar</TableTh>
+                <TableTh>Edit</TableTh>
+                <TableTh>Delete</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {statePersentase.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.tahun}</TableTd>
+                  <TableTd>{item.kematianKasar}</TableTd>
+                  <TableTd>{item.kematianBayi}</TableTd>
+                  <TableTd>{item.kelahiranKasar}</TableTd>
+                  <TableTd>
+                    <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/${item.id}`)}>
+                      <IconEdit size={20} />
+                    </Button>
+                  </TableTd>
+                  <TableTd>
+                    <Button
+                      color='red'
+                      disabled={statePersentase.delete.loading}
+                      onClick={() => {
+                        setSelectedId(item.id)
+                        setModalHapus(true)
+                      }}>
+                      <IconTrash size={20} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Paper>
+
+
+        {/* Chart */}
+        {!mounted && !chartData ? (
+          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
+              <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+            </Paper>
+          </Box>
+        ) : (
+          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Title pb={10} order={4}>Data Kelahiran & Kematian</Title>
+              {mounted && chartData.length > 0 && (
+                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} 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>
+              )}
+            </Paper>
+          </Box>
+        )}
+      </Stack>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus persentase data kelahiran & kematian ini?'
+      />
+    </Box>
+  );
+}
+
+export default PersentaseDataKelahiranKematian;

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/[id]/edit/page.tsx

@@ -0,0 +1,150 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import infoWabahPenyakit from '@/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+function EditInfoWabahPenyakit() {
+  const infoWabahPenyakitState = useProxy(infoWabahPenyakit)
+  const router = useRouter();
+  const params = useParams()
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: infoWabahPenyakitState.edit.form.name || '',
+    deskripsiSingkat: infoWabahPenyakitState.edit.form.deskripsiSingkat || '',
+    deskripsi: infoWabahPenyakitState.edit.form.deskripsiLengkap || '',
+    imageId: infoWabahPenyakitState.edit.form.imageId || '',
+  })
+
+  useEffect(() => {
+    const loadInfoWabahPenyakit = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await infoWabahPenyakitState.edit.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsiSingkat: data.deskripsiSingkat || '',
+            deskripsi: data.deskripsiLengkap || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading program kesehatan:", error);
+        toast.error("Gagal memuat data program kesehatan");
+      }
+    };
+
+    loadInfoWabahPenyakit();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      infoWabahPenyakitState.edit.form = {
+        ...infoWabahPenyakitState.edit.form,
+        name: formData.name,
+        deskripsiSingkat: formData.deskripsiSingkat,
+        deskripsiLengkap: formData.deskripsi,
+        imageId: formData.imageId,
+      };
+
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        infoWabahPenyakitState.edit.form.imageId = uploaded.id;
+      }
+
+      await infoWabahPenyakitState.edit.update();
+      toast.success("Info wabah penyakit berhasil diperbarui!");
+      router.push("/admin/kesehatan/info-wabah-penyakit");
+    } catch (error) {
+      console.error("Error updating info wabah penyakit:", error);
+      toast.error("Gagal memuat data info wabah penyakit");
+    }
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Stack gap={"xs"}>
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Edit Info Wabah Penyakit</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <TextInput
+            value={formData.deskripsiSingkat}
+            onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
+            label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <Box>
+            <Text fz="sm" fw="bold">Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+            />
+          </Box>
+
+          <FileInput
+            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+              );
+              setPreviewImage(base64);
+            }}
+          />
+
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg="gray">
+              <IconImageInPicture />
+            </Center>
+          )}
+
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+      </Stack>
+    </Box >
+  );
+}
+
+export default EditInfoWabahPenyakit;

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/[id]/page.tsx

@@ -0,0 +1,103 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image, Skeleton } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import infoWabahPenyakit from '../../../_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailInfoWabahPenyakit() {
+  const infoWabahPenyakitState = useProxy(infoWabahPenyakit)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+  const params = useParams()
+
+  useShallowEffect(() => {
+    infoWabahPenyakitState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      infoWabahPenyakitState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/kesehatan/info-wabah-penyakit")
+    }
+  }
+
+  if (!infoWabahPenyakitState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={400} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Info Wabah Penyakit</Text>
+          {infoWabahPenyakitState.findUnique.data ? (
+            <Paper bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Judul</Text>
+                  <Text fz={"lg"}>{infoWabahPenyakitState.findUnique.data.name}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Deskripsi Singkat</Text>
+                  <Text fz={"lg"}>{infoWabahPenyakitState.findUnique.data.deskripsiSingkat}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: infoWabahPenyakitState.findUnique.data.deskripsiLengkap }} />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                  <Image src={infoWabahPenyakitState.findUnique.data.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Flex gap={"xs"}>
+                    <Button color="red" onClick={() => {
+                      if (infoWabahPenyakitState.findUnique.data) {
+                        setSelectedId(infoWabahPenyakitState.findUnique.data.id)
+                        setModalHapus(true)
+                      }
+                    }}
+                      disabled={infoWabahPenyakitState.delete.loading || !infoWabahPenyakitState.findUnique.data}
+                    >
+                      <IconX size={20} />
+                    </Button>
+                    <Button onClick={() => router.push(`/admin/kesehatan/info-wabah-penyakit/${infoWabahPenyakitState.findUnique.data?.id}/edit`)} color="green">
+                      <IconEdit size={20} />
+                    </Button>
+                  </Flex>
+                </Box>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus info wabah penyakit ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailInfoWabahPenyakit;

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/create/page.tsx

@@ -1,43 +1,101 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KesehatanEditor } from '../../_com/kesehatanEditor';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import infoWabahPenyakit from '../../../_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
 
 function CreateInfoWabahPenyakit() {
   const router = useRouter();
+  const infoWabahPenyakitState = useProxy(infoWabahPenyakit)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const resetForm = () => {
+    // Reset state di valtio
+    infoWabahPenyakitState.create.form = {
+      name: "",
+      deskripsiSingkat: "",
+      deskripsiLengkap: "",
+      imageId: "",
+    };
+
+    // Reset state lokal
+    setPreviewImage(null);
+    setFile(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    // Upload gambar dulu
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar");
+    }
+
+    // Simpan ID gambar ke form
+    infoWabahPenyakitState.create.form.imageId = uploaded.id;
+
+    // Submit data berita
+    await infoWabahPenyakitState.create.create();
+
+    // Reset form setelah submit
+    resetForm();
+    router.push("/admin/kesehatan/info-wabah-penyakit")
+  };
+
   return (
-     <Box>
+    <Box>
       <Box mb={10}>
         <Button variant="subtle" onClick={() => router.back()}>
           <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
-
       <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
         <Stack gap="xs">
           <Title order={3}>Create Info Wabah Penyakit</Title>
-
           <TextInput
-            
+            value={infoWabahPenyakitState.create.form.name}
+            onChange={(val) => {
+              infoWabahPenyakitState.create.form.name = val.target.value;
+            }}
             label={<Text fz="sm" fw="bold">Judul</Text>}
             placeholder="masukkan judul"
           />
 
           <TextInput
-            
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            value={infoWabahPenyakitState.create.form.deskripsiSingkat}
+            onChange={(val) => {
+              infoWabahPenyakitState.create.form.deskripsiSingkat = val.target.value;
+            }}
+            label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
             placeholder="masukkan deskripsi"
           />
 
-          <TextInput
-           
-            label={<Text fz="sm" fw="bold">Kategori</Text>}
-            placeholder="masukkan kategori"
-          />
+          <Box>
+            <Text fz="sm" fw="bold">Deskripsi</Text>
+            <CreateEditor
+              value={infoWabahPenyakitState.create.form.deskripsiLengkap}
+              onChange={(val) => {
+                infoWabahPenyakitState.create.form.deskripsiLengkap = val;
+              }}
+            />
+          </Box>
 
-          {/* <FileInput
+          <FileInput
             label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
             value={file}
             onChange={async (e) => {
@@ -48,25 +106,18 @@ function CreateInfoWabahPenyakit() {
               );
               setPreviewImage(base64);
             }}
-          /> */}
+          />
 
-          {/* {previewImage ? (
+          {previewImage ? (
             <Image alt="" src={previewImage} w={200} h={200} />
           ) : (
             <Center w={200} h={200} bg="gray">
               <IconImageInPicture />
             </Center>
-          )} */}
+          )}
 
-          <Box>
-            <Text fz="sm" fw="bold">Konten</Text>
-            <KesehatanEditor
-              showSubmit={false}
-            />
-          </Box>
-
-          <Button bg={colors['blue-button']}>
-            Simpan Potensi
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
           </Button>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/detail/page.tsx

@@ -1,70 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailInfoWabahPenyakit() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Info Wabah/Penyakit</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Info Wabah/Penyakit</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi Info Wabah/Penyakit</Text>
-                <Text fz={"lg"}>Test Kategori</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"}>Test Deskripsi</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Konten</Text>
-                <Text fz={"lg"} >Test Konten</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/kesehatan/info-wabah-penyakit/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus penanganan darurat ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailInfoWabahPenyakit;

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/edit/page.tsx

@@ -1,62 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Stack, SimpleGrid, Paper, Title, TextInput, Text, Button, Image } from '@mantine/core';
-import { KesehatanEditor } from '../../_com/kesehatanEditor';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-
-function EditInfoWabahPenyakit() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Stack gap={"xs"}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={"md"}>
-              <Stack gap={"xs"}>
-                <Title order={3}>Edit Info Wabah/Penyakit</Title>
-                <TextInput
-                  label={<Text fw={"bold"} fz={"sm"}>Nama Info Wabah/Penyakit</Text>}
-                  placeholder='Masukkan nama Info Wabah/Penyakit'
-                />
-                <TextInput
-                  label={<Text fw={"bold"} fz={"sm"}>Deskripsi Info Wabah/Penyakit</Text>}
-                  placeholder='Masukkan deskripsi Info Wabah/Penyakit'
-                />
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
-                  <KesehatanEditor
-                    showSubmit={false}
-                  />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Gambar</Text>
-                  <Image src={"/"} alt="gambar" />
-                </Box>
-              </Stack>
-            </Paper>
-          </Box>
-          <Box>
-            <Paper bg={colors['white-1']} p={"md"}>
-              <Stack gap={"xs"}>
-                <Title order={4}>Preview Data Info Wabah/Penyakit</Title>
-                <Text fw={"bold"} fz={"sm"}>Nama Info Wabah/Penyakit</Text>
-                <Text fw={"bold"} fz={"sm"}>Deskripsi Info Wabah/Penyakit</Text>
-                <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
-                <Text fw={"bold"} fz={"sm"}>Gambar</Text>
-              </Stack>
-            </Paper>
-          </Box>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default EditInfoWabahPenyakit;

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import JudulList from '../../_com/judulList';
 import HeaderSearch from '../../_com/header';
 import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import infoWabahPenyakit from '../../_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
+import { useShallowEffect } from '@mantine/hooks';
 
 function InfoWabahPenyakit() {
   return (
@@ -20,7 +23,20 @@ function InfoWabahPenyakit() {
 }
 
 function ListInfoWabahPenyakit() {
+  const infoWabahPenyakitState = useProxy(infoWabahPenyakit)
   const router = useRouter()
+
+  useShallowEffect(() => {
+    infoWabahPenyakitState.findMany.load()
+  }, [])
+
+  if (!infoWabahPenyakitState.findMany.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
   return (
     <Box py={10}>
     <Paper bg={colors['white-1']} p={'md'}>
@@ -34,27 +50,32 @@ function ListInfoWabahPenyakit() {
             <TableThead>
               <TableTr>
                 <TableTh>Judul</TableTh>
-                <TableTh>Kategori</TableTh>
+                <TableTh>Deskripsi Singkat</TableTh>
                 <TableTh>Image</TableTh>
                 <TableTh>Detail</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              <TableTr>
-                <TableTd>
-                  <Box w={100}>
-                    <Text truncate="end" fz={"sm"}>Test</Text>
-                  </Box></TableTd>
-                <TableTd>Test</TableTd>
-                <TableTd>
-                  <Image w={100} src={"/"} alt="image" />
-                </TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push('/admin/kesehatan/info-wabah-penyakit/detail')}>
-                    <IconDeviceImacCog size={25} />
-                  </Button>
-                </TableTd>
-              </TableTr>
+              {infoWabahPenyakitState.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>{item.deskripsiSingkat}</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100} src={item.image?.link} alt="image" />
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push(`/admin/kesehatan/info-wabah-penyakit/${item.id}`)}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
             </TableTbody>
           </Table>
         </Box>

src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/edit/page.tsx

@@ -0,0 +1,140 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import kontakDarurat from '@/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+
+function EditKontakDarurat() {
+  const kontakDaruratState = useProxy(kontakDarurat)
+  const router = useRouter();
+  const params = useParams()
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: kontakDaruratState.edit.form.name || '',
+    deskripsi: kontakDaruratState.edit.form.deskripsi || '',
+    imageId: kontakDaruratState.edit.form.imageId || '',
+  })
+
+  useEffect(() => {
+    const loadProgramKesehatan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await kontakDaruratState.edit.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading program kesehatan:", error);
+        toast.error("Gagal memuat data program kesehatan");
+      }
+    };
+
+    loadProgramKesehatan();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      kontakDaruratState.edit.form = {
+        ...kontakDaruratState.edit.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        imageId: formData.imageId,
+      };
+
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        kontakDaruratState.edit.form.imageId = uploaded.id;
+      }
+
+      await kontakDaruratState.edit.update();
+      toast.success("Kontak darurat berhasil diperbarui!");
+      router.push("/admin/kesehatan/kontak-darurat");
+    } catch (error) {
+      console.error("Error updating kontak darurat:", error);
+      toast.error("Gagal memuat data kontak darurat");
+    }
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Stack gap={"xs"}>
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Edit Kontak Darurat</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <Box>
+            <Text fz="sm" fw="bold">Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+            />
+          </Box>
+
+          <FileInput
+            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+              );
+              setPreviewImage(base64);
+            }}
+          />
+
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg="gray">
+              <IconImageInPicture />
+            </Center>
+          )}
+
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+      </Stack>
+    </Box >
+  );
+}
+
+export default EditKontakDarurat;

src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/page.tsx

@@ -0,0 +1,99 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import kontakDarurat from '../../../_state/kesehatan/kontak-darurat/kontakDarurat';
+
+function DetailKontakDarurat() {
+  const kontakDaruratState = useProxy(kontakDarurat)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+  const params = useParams()
+
+  useShallowEffect(() => {
+    kontakDaruratState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      kontakDaruratState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/kesehatan/kontak-darurat")
+    }
+  }
+
+  if (!kontakDaruratState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={400} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Kontak Darurat</Text>
+          {kontakDaruratState.findUnique.data ? (
+            <Paper bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Judul</Text>
+                  <Text fz={"lg"}>{kontakDaruratState.findUnique.data.name}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: kontakDaruratState.findUnique.data.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                  <Image src={kontakDaruratState.findUnique.data.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Flex gap={"xs"}>
+                    <Button color="red" onClick={() => {
+                      if (kontakDaruratState.findUnique.data) {
+                        setSelectedId(kontakDaruratState.findUnique.data.id)
+                        setModalHapus(true)
+                      }
+                    }}
+                      disabled={kontakDaruratState.delete.loading || !kontakDaruratState.findUnique.data}
+                    >
+                      <IconX size={20} />
+                    </Button>
+                    <Button onClick={() => router.push(`/admin/kesehatan/kontak-darurat/${kontakDaruratState.findUnique.data?.id}/edit`)} color="green">
+                      <IconEdit size={20} />
+                    </Button>
+                  </Flex>
+                </Box>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus kontak darurat ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailKontakDarurat;

src/app/admin/(dashboard)/kesehatan/kontak-darurat/create/page.tsx

@@ -1,77 +1,113 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KesehatanEditor } from '../../_com/kesehatanEditor';
+import { useProxy } from 'valtio/utils';
+import kontakDarurat from '../../../_state/kesehatan/kontak-darurat/kontakDarurat';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import ApiFetch from '@/lib/api-fetch';
+import CreateEditor from '../../../_com/createEditor';
+
 
 function CreateKontakDarurat() {
-  const router = useRouter();
-  return (
-     <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Create Kontak Darurat</Title>
-
-          <TextInput
-            
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
-          />
-
-          <TextInput
-            
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
-          />
-
-          <TextInput
-           
-            label={<Text fz="sm" fw="bold">Kategori</Text>}
-            placeholder="masukkan kategori"
-          />
-
-          {/* <FileInput
-            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-              );
-              setPreviewImage(base64);
-            }}
-          /> */}
-
-          {/* {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg="gray">
-              <IconImageInPicture />
-            </Center>
-          )} */}
-
-          <Box>
-            <Text fz="sm" fw="bold">Konten</Text>
-            <KesehatanEditor
-              showSubmit={false}
-            />
-          </Box>
-
-          <Button bg={colors['blue-button']}>
-            Simpan Potensi
+    const router = useRouter();
+    const kontakDaruratState = useProxy(kontakDarurat)
+    const [previewImage, setPreviewImage] = useState<string | null>(null);
+    const [file, setFile] = useState<File | null>(null);
+  
+    const resetForm = () => {
+      kontakDaruratState.create.form = {
+        name: "",
+        deskripsi: "",
+        imageId: "",
+      };
+      setPreviewImage(null);
+      setFile(null);
+    };
+  
+    const handleSubmit = async () => {
+      if (!file) {
+        return toast.warn("Pilih file gambar terlebih dahulu");
+      }
+  
+      const res = await ApiFetch.api.fileStorage.create.post({
+        file,
+        name: file.name,
+      });
+  
+      const uploaded = res.data?.data;
+      if (!uploaded?.id) {
+        return toast.error("Gagal upload gambar");
+      }
+  
+      kontakDaruratState.create.form.imageId = uploaded.id;
+  
+      await kontakDaruratState.create.create();
+  
+      resetForm();
+      router.push("/admin/kesehatan/kontak-darurat")
+    }
+    return (
+      <Box>
+        <Box mb={10}>
+          <Button variant="subtle" onClick={() => router.back()}>
+            <IconArrowBack color={colors['blue-button']} size={25} />
           </Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
+        </Box>
+  
+        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+          <Stack gap="xs">
+            <Title order={3}>Create Kontak Darurat</Title>
+  
+            <TextInput
+              value={kontakDaruratState.create.form.name}
+              onChange={(val) => {
+                kontakDaruratState.create.form.name = val.target.value;
+              }}
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="masukkan judul"
+            />
+  
+            <Box>
+              <Text fz="sm" fw="bold">Deskripsi</Text>
+              <CreateEditor
+                value={kontakDaruratState.create.form.deskripsi}
+                onChange={(val) => {
+                  kontakDaruratState.create.form.deskripsi = val;
+                }}
+              />
+            </Box>
+  
+              <FileInput
+                label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+                value={file}
+                onChange={async (e) => {
+                  if (!e) return;
+                  setFile(e);
+                  const base64 = await e.arrayBuffer().then((buf) =>
+                    'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+                  );
+                  setPreviewImage(base64);
+                }}
+              />
+  
+              {previewImage ? (
+                <Image alt="" src={previewImage} w={200} h={200} />
+              ) : (
+                <Center w={200} h={200} bg="gray">
+                  <IconImageInPicture />
+                </Center>
+              )}
+  
+              <Button onClick={handleSubmit} bg={colors['blue-button']}>
+                Simpan 
+              </Button>
+          </Stack>
+        </Paper>
+      </Box>
+    );
 }
 
 export default CreateKontakDarurat;

src/app/admin/(dashboard)/kesehatan/kontak-darurat/detail/page.tsx

@@ -1,70 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailKontakDarurat() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Kontak Darurat</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Kontak Darurat</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi Kontak Darurat</Text>
-                <Text fz={"lg"}>Test Kategori</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"}>Test Deskripsi</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Konten</Text>
-                <Text fz={"lg"} >Test Konten</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/kesehatan/kontak-darurat/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus penanganan darurat ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailKontakDarurat;

src/app/admin/(dashboard)/kesehatan/kontak-darurat/edit/page.tsx

@@ -1,62 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Stack, SimpleGrid, Paper, Title, TextInput, Text, Button, Image } from '@mantine/core';
-import { KesehatanEditor } from '../../_com/kesehatanEditor';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-
-function EditKontakDarurat() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Stack gap={"xs"}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={"md"}>
-              <Stack gap={"xs"}>
-                <Title order={3}>Edit Kontak Darurat</Title>
-                <TextInput
-                  label={<Text fw={"bold"} fz={"sm"}>Nama Kontak Darurat</Text>}
-                  placeholder='Masukkan nama Kontak Darurat'
-                />
-                <TextInput
-                  label={<Text fw={"bold"} fz={"sm"}>Deskripsi Kontak Darurat</Text>}
-                  placeholder='Masukkan deskripsi Kontak Darurat'
-                />
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
-                  <KesehatanEditor
-                    showSubmit={false}
-                  />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Gambar</Text>
-                  <Image src={"/"} alt="gambar" />
-                </Box>
-              </Stack>
-            </Paper>
-          </Box>
-          <Box>
-            <Paper bg={colors['white-1']} p={"md"}>
-              <Stack gap={"xs"}>
-                <Title order={4}>Preview Data Kontak Darurat</Title>
-                <Text fw={"bold"} fz={"sm"}>Nama Kontak Darurat</Text>
-                <Text fw={"bold"} fz={"sm"}>Deskripsi Kontak Darurat</Text>
-                <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
-                <Text fw={"bold"} fz={"sm"}>Gambar</Text>
-              </Stack>
-            </Paper>
-          </Box>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default EditKontakDarurat;

src/app/admin/(dashboard)/kesehatan/kontak-darurat/page.tsx

@@ -1,66 +1,88 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import JudulList from '../../_com/judulList';
 import HeaderSearch from '../../_com/header';
 import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import kontakDarurat from '../../_state/kesehatan/kontak-darurat/kontakDarurat';
+import { useShallowEffect } from '@mantine/hooks';
 
 function KontakDarurat() {
   return (
     <Box>
       <HeaderSearch
-        title='KontakDarurat'
+        title='Kontak Darurat'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
       />
-      <ListKontakDarurat/>
+      <ListKontakDarurat />
     </Box>
   );
 }
 
 function ListKontakDarurat() {
+  const kontakDaruratState = useProxy(kontakDarurat)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    kontakDaruratState.findMany.load()
+  }, [])
+
+  if (!kontakDaruratState.findMany.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
   return (
     <Box py={10}>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack>
-        <JudulList
-          title='List Kontak Darurat'
-          href='/admin/kesehatan/kontak-darurat/create'
-        />
-        <Box style={{ overflowX: "auto" }}>
-          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-            <TableThead>
-              <TableTr>
-                <TableTh>Judul</TableTh>
-                <TableTh>Kategori</TableTh>
-                <TableTh>Image</TableTh>
-                <TableTh>Detail</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              <TableTr>
-                <TableTd>
-                  <Box w={100}>
-                    <Text truncate="end" fz={"sm"}>Test</Text>
-                  </Box></TableTd>
-                <TableTd>Test</TableTd>
-                <TableTd>
-                  <Image w={100} src={"/"} alt="image" />
-                </TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push('/admin/kesehatan/kontak-darurat/detail')}>
-                    <IconDeviceImacCog size={25} />
-                  </Button>
-                </TableTd>
-              </TableTr>
-            </TableTbody>
-          </Table>
-        </Box>
-      </Stack>
-    </Paper>
-  </Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Kontak Darurat'
+            href='/admin/kesehatan/kontak-darurat/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {kontakDaruratState.findMany.data?.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                    </TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image?.link} alt="image" />
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/kesehatan/kontak-darurat/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
   )
 }
 

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/[id]/edit/page.tsx

@@ -0,0 +1,140 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditPenangananDarurat() {
+  const penangananDaruratState = useProxy(penangananDarurat)
+  const router = useRouter();
+  const params = useParams()
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: penangananDaruratState.edit.form.name || '',
+    deskripsi: penangananDaruratState.edit.form.deskripsi || '',
+    imageId: penangananDaruratState.edit.form.imageId || '',
+  })
+
+  useEffect(() => {
+    const loadPenangananDarurat = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await penangananDaruratState.edit.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            imageId: data.imageId || '',
+          })
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error('Error loading penanganan darurat:', error);
+        toast.error('Gagal memuat data penanganan darurat');
+      }
+    }
+
+    loadPenangananDarurat();
+  }, [params?.id])
+
+  const handleSubmit = async () => {
+    try {
+      penangananDaruratState.edit.form = {
+        ...penangananDaruratState.edit.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        imageId: formData.imageId,
+      }
+
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        penangananDaruratState.edit.form.imageId = uploaded.id;
+      }
+
+      await penangananDaruratState.edit.update();
+      toast.success("Penanganan darurat berhasil diperbarui!");
+      router.push("/admin/kesehatan/penanganan-darurat");
+    } catch (error) {
+      console.error("Error updating penanganan darurat:", error);
+      toast.error("Gagal memuat data penanganan darurat");
+    }
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Stack gap={"xs"}>
+        <Paper bg={colors['white-1']} p={"md"} w={{ base: '100%', md: '50%' }}>
+          <Stack gap="xs">
+            <Title order={3}>Edit Penanganan Darurat</Title>
+
+            <TextInput
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="masukkan judul"
+            />
+
+            <Box>
+              <Text fz="sm" fw="bold">Deskripsi</Text>
+              <EditEditor
+                value={formData.deskripsi}
+                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+              />
+            </Box>
+
+            <FileInput
+              label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+              value={file}
+              onChange={async (e) => {
+                if (!e) return;
+                setFile(e);
+                const base64 = await e.arrayBuffer().then((buf) =>
+                  'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+                );
+                setPreviewImage(base64);
+              }}
+            />
+
+            {previewImage ? (
+              <Image alt="" src={previewImage} w={200} h={200} />
+            ) : (
+              <Center w={200} h={200} bg="gray">
+                <IconImageInPicture />
+              </Center>
+            )}
+
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>
+              Simpan
+            </Button>
+          </Stack>
+        </Paper>
+      </Stack >
+    </Box >
+  );
+}
+
+export default EditPenangananDarurat;

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/[id]/page.tsx

@@ -0,0 +1,101 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import penangananDarurat from '../../../_state/kesehatan/penanganan-darurat/penangananDarurat';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { Skeleton } from '@mantine/core';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPenangananDarurat() {
+  const penangananDaruratState = useProxy(penangananDarurat)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+  const params = useParams()
+
+  useShallowEffect(() => {
+    penangananDaruratState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      penangananDaruratState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/kesehatan/penanganan-darurat")
+    }
+  }
+
+  if (!penangananDaruratState.findUnique.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Penanganan Darurat</Text>
+          {penangananDaruratState.findUnique.data ? (
+            <Paper bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Nama Penanganan Darurat</Text>
+                  <Text fz={"lg"}>{penangananDaruratState.findUnique.data.name}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: penangananDaruratState.findUnique.data.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                  <Image src={penangananDaruratState.findUnique.data.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Flex gap={"xs"}>
+                    <Button color="red" onClick={() => {
+                      if (penangananDaruratState.findUnique.data) {
+                        setSelectedId(penangananDaruratState.findUnique.data.id)
+                        setModalHapus(true)
+                      }
+                    }}
+                      disabled={penangananDaruratState.delete.loading || !penangananDaruratState.findUnique.data}>
+                      <IconX size={20} />
+                    </Button>
+                    <Button onClick={() => router.push(`/admin/kesehatan/penanganan-darurat/${penangananDaruratState.findUnique.data?.id}/edit`)} color="green">
+                      <IconEdit size={20} />
+                    </Button>
+                  </Flex>
+                </Box>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus penanganan darurat ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailPenangananDarurat;

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/create/page.tsx

@@ -1,14 +1,56 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KesehatanEditor } from '../../_com/kesehatanEditor';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import penangananDarurat from '../../../_state/kesehatan/penanganan-darurat/penangananDarurat';
+
 
 function CreatePenangananDarurat() {
   const router = useRouter();
+  const penangananDaruratState = useProxy(penangananDarurat)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const resetForm = () => {
+    penangananDaruratState.create.form = {
+      name: "",
+      deskripsi: "",
+      imageId: "",
+    };
+    setPreviewImage(null);
+    setFile(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar");
+    }
+
+    penangananDaruratState.create.form.imageId = uploaded.id;
+
+    await penangananDaruratState.create.create();
+
+    resetForm();
+    router.push("/admin/kesehatan/penanganan-darurat")
+  }
   return (
-     <Box>
+    <Box>
       <Box mb={10}>
         <Button variant="subtle" onClick={() => router.back()}>
           <IconArrowBack color={colors['blue-button']} size={25} />
@@ -20,54 +62,48 @@ function CreatePenangananDarurat() {
           <Title order={3}>Create Penanganan Darurat</Title>
 
           <TextInput
-            
+            value={penangananDaruratState.create.form.name}
+            onChange={(val) => {
+              penangananDaruratState.create.form.name = val.target.value;
+            }}
             label={<Text fz="sm" fw="bold">Judul</Text>}
             placeholder="masukkan judul"
           />
 
-          <TextInput
-            
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
-          />
-
-          <TextInput
-           
-            label={<Text fz="sm" fw="bold">Kategori</Text>}
-            placeholder="masukkan kategori"
-          />
-
-          {/* <FileInput
-            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-              );
-              setPreviewImage(base64);
-            }}
-          /> */}
-
-          {/* {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg="gray">
-              <IconImageInPicture />
-            </Center>
-          )} */}
-
           <Box>
-            <Text fz="sm" fw="bold">Konten</Text>
-            <KesehatanEditor
-              showSubmit={false}
+            <Text fz="sm" fw="bold">Deskripsi</Text>
+            <CreateEditor
+              value={penangananDaruratState.create.form.deskripsi}
+              onChange={(val) => {
+                penangananDaruratState.create.form.deskripsi = val;
+              }}
             />
           </Box>
 
-          <Button bg={colors['blue-button']}>
-            Simpan Potensi
-          </Button>
+            <FileInput
+              label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+              value={file}
+              onChange={async (e) => {
+                if (!e) return;
+                setFile(e);
+                const base64 = await e.arrayBuffer().then((buf) =>
+                  'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+                );
+                setPreviewImage(base64);
+              }}
+            />
+
+            {previewImage ? (
+              <Image alt="" src={previewImage} w={200} h={200} />
+            ) : (
+              <Center w={200} h={200} bg="gray">
+                <IconImageInPicture />
+              </Center>
+            )}
+
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>
+              Simpan 
+            </Button>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/detail/page.tsx

@@ -1,70 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailPenangananDarurat() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Penanganan Darurat</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Penanganan Darurat</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi Penanganan Darurat</Text>
-                <Text fz={"lg"}>Test Kategori</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"}>Test Deskripsi</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Konten</Text>
-                <Text fz={"lg"} >Test Konten</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/kesehatan/penanganan-darurat/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus penanganan darurat ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailPenangananDarurat;

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/edit/page.tsx

@@ -1,62 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Stack, SimpleGrid, Paper, Title, TextInput, Text, Button, Image } from '@mantine/core';
-import { KesehatanEditor } from '../../_com/kesehatanEditor';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-
-function EditPenangananDarurat() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Stack gap={"xs"}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={"md"}>
-              <Stack gap={"xs"}>
-                <Title order={3}>Edit Penanganan Darurat</Title>
-                <TextInput
-                  label={<Text fw={"bold"} fz={"sm"}>Nama Penanganan Darurat</Text>}
-                  placeholder='Masukkan nama Penanganan Darurat'
-                />
-                <TextInput
-                  label={<Text fw={"bold"} fz={"sm"}>Deskripsi Penanganan Darurat</Text>}
-                  placeholder='Masukkan deskripsi Penanganan Darurat'
-                />
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
-                  <KesehatanEditor
-                    showSubmit={false}
-                  />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Gambar</Text>
-                  <Image src={"/"} alt="gambar" />
-                </Box>
-              </Stack>
-            </Paper>
-          </Box>
-          <Box>
-            <Paper bg={colors['white-1']} p={"md"}>
-              <Stack gap={"xs"}>
-                <Title order={4}>Preview Data Penanganan Darurat</Title>
-                <Text fw={"bold"} fz={"sm"}>Nama Penanganan Darurat</Text>
-                <Text fw={"bold"} fz={"sm"}>No Telp Penanganan Darurat</Text>
-                <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
-                <Text fw={"bold"} fz={"sm"}>Pelayanan Posyandu</Text>
-              </Stack>
-            </Paper>
-          </Box>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default EditPenangananDarurat;

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx

@@ -1,10 +1,14 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import JudulList from '../../_com/judulList';
 import HeaderSearch from '../../_com/header';
 import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
+import penangananDarurat from '../../_state/kesehatan/penanganan-darurat/penangananDarurat';
+
 
 function PenangananDarurat() {
   return (
@@ -20,7 +24,21 @@ function PenangananDarurat() {
 }
 
 function ListPenangananDarurat() {
+  const penangananDaruratState = useProxy(penangananDarurat)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    penangananDaruratState.findMany.load()
+  }, [])
+
+  if (!penangananDaruratState.findMany.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
   return (
     <Box py={10}>
     <Paper bg={colors['white-1']} p={'md'}>
@@ -34,27 +52,31 @@ function ListPenangananDarurat() {
             <TableThead>
               <TableTr>
                 <TableTh>Judul</TableTh>
-                <TableTh>Kategori</TableTh>
+                <TableTh>Deskripsi</TableTh>
                 <TableTh>Image</TableTh>
                 <TableTh>Detail</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              <TableTr>
+              {penangananDaruratState.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
                 <TableTd>
                   <Box w={100}>
-                    <Text truncate="end" fz={"sm"}>Test</Text>
+                    <Text truncate="end" fz={"sm"}>{item.name}</Text>
                   </Box></TableTd>
-                <TableTd>Test</TableTd>
                 <TableTd>
-                  <Image w={100} src={"/"} alt="image" />
+                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                 </TableTd>
                 <TableTd>
-                  <Button onClick={() => router.push('/admin/kesehatan/penanganan-darurat/detail')}>
+                  <Image w={100} src={item.image?.link} alt="image" />
+                </TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/kesehatan/penanganan-darurat/${item.id}`)}>
                     <IconDeviceImacCog size={25} />
                   </Button>
                 </TableTd>
               </TableTr>
+            ))}
             </TableTbody>
           </Table>
         </Box>

src/app/admin/(dashboard)/kesehatan/posyandu/[id]/edit/page.tsx

@@ -0,0 +1,147 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import posyandustate from '@/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+function EditPosyandu() {
+  const statePosyandu = useProxy(posyandustate)
+  const router = useRouter();
+  const params = useParams()
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: statePosyandu.edit.form.name || '',
+    nomor: statePosyandu.edit.form.nomor || '',
+    deskripsi: statePosyandu.edit.form.deskripsi || '',
+    imageId: statePosyandu.edit.form.imageId || '',
+  });
+
+  useEffect(() => {
+    const loadPosyandu = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await statePosyandu.edit.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            nomor: data.nomor || '',
+            deskripsi: data.deskripsi || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading posyandu:", error);
+        toast.error("Gagal memuat data posyandu");
+      }
+    }
+    loadPosyandu();
+  }, [params?.id])
+
+  const handleSubmit = async () => {
+    try {
+      statePosyandu.edit.form = {
+        ...statePosyandu.edit.form,
+        name: formData.name,
+        nomor: formData.nomor,
+        deskripsi: formData.deskripsi,
+        imageId: formData.imageId,
+      }
+
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        statePosyandu.edit.form.imageId = uploaded.id;
+      }
+
+      await statePosyandu.edit.update();
+      toast.success("Posyandu berhasil diperbarui!");
+      router.push("/admin/kesehatan/posyandu");
+    } catch (error) {
+      console.error("Error updating posyandu:", error);
+      toast.error("Gagal memuat data posyandu");
+    }
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Posyandu</Title>
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Posyandu</Text>}
+            placeholder='Masukkan nama posyandu'
+          />
+          <TextInput
+            value={formData.nomor}
+            onChange={(e) => setFormData({ ...formData, nomor: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Nomor Posyandu</Text>}
+            placeholder='Masukkan nomor posyandu'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Posyandu</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData({ ...formData, deskripsi: htmlContent });
+                statePosyandu.edit.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditPosyandu;

src/app/admin/(dashboard)/kesehatan/posyandu/[id]/page.tsx

@@ -0,0 +1,101 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image, Skeleton } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import posyandustate from '../../../_state/kesehatan/posyandu/posyandu';
+import { useShallowEffect } from '@mantine/hooks';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPosyandu() {
+  const statePosyandu = useProxy(posyandustate)
+  const params = useParams()
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useShallowEffect(() => {
+    statePosyandu.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      statePosyandu.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/kesehatan/posyandu")
+    }
+  }
+
+  if (!statePosyandu.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Posyandu</Text>
+          {statePosyandu.findUnique.data ? (
+            <Paper key={statePosyandu.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Nama Posyandu</Text>
+                  <Text fz={"lg"}>{statePosyandu.findUnique.data.name}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Nomor Posyandu</Text>
+                  <Text fz={"lg"}>{statePosyandu.findUnique.data.nomor}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Deskripsi Posyandu</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: statePosyandu.findUnique.data.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                  <Image src={statePosyandu.findUnique.data.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Flex gap={"xs"}>
+                    <Button onClick={() => {
+                      if (statePosyandu.findUnique.data) {
+                        setSelectedId(statePosyandu.findUnique.data.id)
+                        setModalHapus(true)
+                      }
+                    }} color="red">
+                      <IconX size={20} />
+                    </Button>
+                    <Button onClick={() => router.push(`/admin/kesehatan/posyandu/${statePosyandu.findUnique.data?.id}/edit`)} color="green">
+                      <IconEdit size={20} />
+                    </Button>
+                  </Flex>
+                </Box>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus posyandu ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailPosyandu;

src/app/admin/(dashboard)/kesehatan/posyandu/create/page.tsx

@@ -1,13 +1,59 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import React from 'react';
-import { KesehatanEditor } from '../../_com/kesehatanEditor';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import posyandustate from '../../../_state/kesehatan/posyandu/posyandu';
 
 function CreatePosyandu() {
+  const statePosyandu = useProxy(posyandustate)
   const router = useRouter();
+  const [file, setFile] = useState<File | null>(null);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+
+  const resetForm = () => {
+    statePosyandu.create.form = {
+      name: "",
+      nomor: "",
+      deskripsi: "",
+      imageId: "",
+    };
+
+    setFile(null);
+    setPreviewImage(null);
+  }
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    // Upload gambar dulu
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar");
+    }
+
+    statePosyandu.create.form.imageId = uploaded.id;
+
+    await statePosyandu.create.create();
+
+    resetForm();
+    router.push("/admin/kesehatan/posyandu")
+  }
+
+
+
   return (
     <Box>
       <Box mb={10}>
@@ -19,26 +65,52 @@ function CreatePosyandu() {
       <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Posyandu</Title>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
-          </Box>
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
           <TextInput
             label={<Text fw={"bold"} fz={"sm"}>Nama Posyandu</Text>}
             placeholder='Masukkan nama posyandu'
+            value={statePosyandu.create.form.name}
+            onChange={(e) => {
+              statePosyandu.create.form.name = e.target.value;
+            }}
           />
           <TextInput
             label={<Text fw={"bold"} fz={"sm"}>Nomor Posyandu</Text>}
             placeholder='Masukkan nomor posyandu'
+            value={statePosyandu.create.form.nomor}
+            onChange={(e) => {
+              statePosyandu.create.form.nomor = e.target.value;
+            }}
           />
           <Box>
             <Text fw={"bold"} fz={"sm"}>Deskripsi Posyandu</Text>
-            <KesehatanEditor
-              showSubmit={false}
+            <CreateEditor
+              value={statePosyandu.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                statePosyandu.create.form.deskripsi = htmlContent;
+              }}
             />
           </Box>
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/kesehatan/posyandu/detail/page.tsx

@@ -1,66 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailPosyandu() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Posyandu</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Posyandu</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nomor Posyandu</Text>
-                <Text fz={"lg"}>089647038426</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi Posyandu</Text>
-                <Text fz={"lg"}>Test Kategori</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/kesehatan/posyandu/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus penanganan darurat ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailPosyandu;

src/app/admin/(dashboard)/kesehatan/posyandu/edit/page.tsx

@@ -1,49 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-import { KesehatanEditor } from '../../_com/kesehatanEditor';
-
-function EditPosyandu() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Posyandu</Title>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
-          </Box>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Posyandu</Text>}
-          placeholder='Masukkan nama posyandu'
-          />
-           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nomor Posyandu</Text>}
-          placeholder='Masukkan nomor posyandu'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Posyandu</Text>
-            <KesehatanEditor
-              showSubmit={false}
-            />
-          </Box>
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditPosyandu;

src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
 import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import posyandustate from '../../_state/kesehatan/posyandu/posyandu';
+import { useShallowEffect } from '@mantine/hooks';
 
 function Posyandu() {
   return (
@@ -14,13 +17,27 @@ function Posyandu() {
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
       />
-      <ListPosyandu/>
+      <ListPosyandu />
     </Box>
   );
 }
 
 function ListPosyandu() {
+  const statePosyandu = useProxy(posyandustate)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    statePosyandu.findMany.load()
+  }, [])
+
+  if (!statePosyandu.findMany.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -28,28 +45,34 @@ function ListPosyandu() {
           title='List Posyandu'
           href='/admin/kesehatan/posyandu/create'
         />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Posyandu</TableTh>
-              <TableTh>Nomor Posyandu</TableTh>
-              <TableTh>Deskripsi</TableTh>
-              <TableTh>Detail</TableTh>
+        <Box style={{ overflowX: "auto" }}>
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Posyandu</TableTh>
+                <TableTh>Nomor Posyandu</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Detail</TableTh>
               </TableTr>
-          </TableThead>
-          <TableTbody>
-            <TableTr>
-              <TableTd>Posyandu 1</TableTd>
-              <TableTd>0896232831883</TableTd>
-              <TableTd>Posyandu 1</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/kesehatan/posyandu/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          </TableTbody>
-        </Table>  
+            </TableThead>
+            <TableTbody>
+              {statePosyandu.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.name}</TableTd>
+                  <TableTd>{item.nomor}</TableTd>
+                  <TableTd>
+                    <Text fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push(`/admin/kesehatan/posyandu/${item.id}`)}>
+                      <IconDeviceImac size={20} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
     </Box>
   );

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

@@ -0,0 +1,150 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import programKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+function EditProgramKesehatan() {
+  const programKesehatanState = useProxy(programKesehatan)
+  const router = useRouter();
+  const params = useParams()
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: programKesehatanState.edit.form.name || '',
+    deskripsiSingkat: programKesehatanState.edit.form.deskripsiSingkat || '',
+    deskripsi: programKesehatanState.edit.form.deskripsi || '',
+    imageId: programKesehatanState.edit.form.imageId || '',
+  })
+
+  useEffect(() => {
+    const loadProgramKesehatan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await programKesehatanState.edit.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsiSingkat: data.deskripsiSingkat || '',
+            deskripsi: data.deskripsi || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading program kesehatan:", error);
+        toast.error("Gagal memuat data program kesehatan");
+      }
+    };
+
+    loadProgramKesehatan();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      programKesehatanState.edit.form = {
+        ...programKesehatanState.edit.form,
+        name: formData.name,
+        deskripsiSingkat: formData.deskripsiSingkat,
+        deskripsi: formData.deskripsi,
+        imageId: formData.imageId,
+      };
+
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        programKesehatanState.edit.form.imageId = uploaded.id;
+      }
+
+      await programKesehatanState.edit.update();
+      toast.success("Program kesehatan berhasil diperbarui!");
+      router.push("/admin/kesehatan/program-kesehatan");
+    } catch (error) {
+      console.error("Error updating program kesehatan:", error);
+      toast.error("Gagal memuat data program kesehatan");
+    }
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Stack gap={"xs"}>
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Edit Program Kesehatan</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <TextInput
+            value={formData.deskripsiSingkat}
+            onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
+            label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <Box>
+            <Text fz="sm" fw="bold">Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+            />
+          </Box>
+
+          <FileInput
+            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+              );
+              setPreviewImage(base64);
+            }}
+          />
+
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg="gray">
+              <IconImageInPicture />
+            </Center>
+          )}
+
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+      </Stack>
+    </Box >
+  );
+}
+
+export default EditProgramKesehatan;

src/app/admin/(dashboard)/kesehatan/program-kesehatan/[id]/page.tsx

@@ -0,0 +1,103 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image, Skeleton } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import programKesehatan from '../../../_state/kesehatan/program-kesehatan/programKesehatan';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailProgramKesehatan() {
+  const programKesehatanState = useProxy(programKesehatan)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+  const params = useParams()
+
+  useShallowEffect(() => {
+    programKesehatanState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      programKesehatanState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/kesehatan/program-kesehatan")
+    }
+  }
+
+  if (!programKesehatanState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={400} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Program Kesehatan</Text>
+          {programKesehatanState.findUnique.data ? (
+            <Paper bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Judul</Text>
+                  <Text fz={"lg"}>{programKesehatanState.findUnique.data.name}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Deskripsi Singkat</Text>
+                  <Text fz={"lg"}>{programKesehatanState.findUnique.data.deskripsiSingkat}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: programKesehatanState.findUnique.data.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                  <Image src={programKesehatanState.findUnique.data.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Flex gap={"xs"}>
+                    <Button color="red" onClick={() => {
+                      if (programKesehatanState.findUnique.data) {
+                        setSelectedId(programKesehatanState.findUnique.data.id)
+                        setModalHapus(true)
+                      }
+                    }}
+                      disabled={programKesehatanState.delete.loading || !programKesehatanState.findUnique.data}
+                    >
+                      <IconX size={20} />
+                    </Button>
+                    <Button onClick={() => router.push(`/admin/kesehatan/program-kesehatan/${programKesehatanState.findUnique.data?.id}/edit`)} color="green">
+                      <IconEdit size={20} />
+                    </Button>
+                  </Flex>
+                </Box>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus program kesehatan ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailProgramKesehatan;

src/app/admin/(dashboard)/kesehatan/program-kesehatan/create/page.tsx

@@ -1,43 +1,101 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KesehatanEditor } from '../../_com/kesehatanEditor';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import programKesehatan from '../../../_state/kesehatan/program-kesehatan/programKesehatan';
 
 function CreateProgramKesehatan() {
   const router = useRouter();
+  const programKesehatanState = useProxy(programKesehatan)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const resetForm = () => {
+    // Reset state di valtio
+    programKesehatanState.create.form = {
+      name: "",
+      deskripsiSingkat: "",
+      deskripsi: "",
+      imageId: "",
+    };
+
+    // Reset state lokal
+    setPreviewImage(null);
+    setFile(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    // Upload gambar dulu
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar");
+    }
+
+    // Simpan ID gambar ke form
+    programKesehatanState.create.form.imageId = uploaded.id;
+
+    // Submit data berita
+    await programKesehatanState.create.create();
+
+    // Reset form setelah submit
+    resetForm();
+    router.push("/admin/kesehatan/program-kesehatan")
+  };
+
   return (
-     <Box>
+    <Box>
       <Box mb={10}>
         <Button variant="subtle" onClick={() => router.back()}>
           <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
-
       <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
         <Stack gap="xs">
           <Title order={3}>Create Program Kesehatan</Title>
-
           <TextInput
-            
+            value={programKesehatanState.create.form.name}
+            onChange={(val) => {
+              programKesehatanState.create.form.name = val.target.value;
+            }}
             label={<Text fz="sm" fw="bold">Judul</Text>}
             placeholder="masukkan judul"
           />
 
           <TextInput
-            
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            value={programKesehatanState.create.form.deskripsiSingkat}
+            onChange={(val) => {
+              programKesehatanState.create.form.deskripsiSingkat = val.target.value;
+            }}
+            label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
             placeholder="masukkan deskripsi"
           />
 
-          <TextInput
-           
-            label={<Text fz="sm" fw="bold">Kategori</Text>}
-            placeholder="masukkan kategori"
-          />
+          <Box>
+            <Text fz="sm" fw="bold">Deskripsi</Text>
+            <CreateEditor
+              value={programKesehatanState.create.form.deskripsi}
+              onChange={(val) => {
+                programKesehatanState.create.form.deskripsi = val;
+              }}
+            />
+          </Box>
 
-          {/* <FileInput
+          <FileInput
             label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
             value={file}
             onChange={async (e) => {
@@ -48,25 +106,18 @@ function CreateProgramKesehatan() {
               );
               setPreviewImage(base64);
             }}
-          /> */}
+          />
 
-          {/* {previewImage ? (
+          {previewImage ? (
             <Image alt="" src={previewImage} w={200} h={200} />
           ) : (
             <Center w={200} h={200} bg="gray">
               <IconImageInPicture />
             </Center>
-          )} */}
+          )}
 
-          <Box>
-            <Text fz="sm" fw="bold">Konten</Text>
-            <KesehatanEditor
-              showSubmit={false}
-            />
-          </Box>
-
-          <Button bg={colors['blue-button']}>
-            Simpan Potensi
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
           </Button>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/kesehatan/program-kesehatan/detail/page.tsx

@@ -1,70 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailProgramKesehatan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Potensi</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Judul</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Kategori</Text>
-                <Text fz={"lg"}>Test Kategori</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"}>Test Deskripsi</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Konten</Text>
-                <Text fz={"lg"} >Test Konten</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/kesehatan/program-kesehatan/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailProgramKesehatan;

src/app/admin/(dashboard)/kesehatan/program-kesehatan/edit/page.tsx

@@ -1,64 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Stack, SimpleGrid, Paper, Title, TextInput, Text, Button } from '@mantine/core';
-import { KesehatanEditor } from '../../_com/kesehatanEditor';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-
-function EditProgramKesehatan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Stack gap={"xs"}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={"md"}>
-              <Stack gap={"xs"}>
-                <Title order={3}>Edit Program Kesehatan</Title>
-                <TextInput
-                  label={<Text fw={"bold"} fz={"sm"}>Nama Program Kesehatan</Text>}
-                  placeholder='Masukkan nama Program Kesehatan'
-                />
-                <TextInput
-                  label={<Text fw={"bold"} fz={"sm"}>No Telp Program Kesehatan</Text>}
-                  placeholder='Masukkan no telp Program Kesehatan'
-                />
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
-                  <KesehatanEditor
-                    showSubmit={false}
-                  />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Pelayanan Posyandu</Text>
-                  <KesehatanEditor
-                    showSubmit={false}
-                  />
-                </Box>
-              </Stack>
-            </Paper>
-          </Box>
-          <Box>
-            <Paper bg={colors['white-1']} p={"md"}>
-              <Stack gap={"xs"}>
-                <Title order={4}>Preview Data Program Kesehatan</Title>
-                <Text fw={"bold"} fz={"sm"}>Nama Program Kesehatan</Text>
-                <Text fw={"bold"} fz={"sm"}>No Telp Program Kesehatan</Text>
-                <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
-                <Text fw={"bold"} fz={"sm"}>Pelayanan Posyandu</Text>
-              </Stack>
-            </Paper>
-          </Box>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default EditProgramKesehatan;

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

@@ -1,66 +1,86 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import JudulList from '../../_com/judulList';
 import HeaderSearch from '../../_com/header';
 import { useRouter } from 'next/navigation';
+import programKesehatan from '../../_state/kesehatan/program-kesehatan/programKesehatan';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
 
 function ProgramKesehatan() {
   return (
     <Box>
       <HeaderSearch
-        title='ProgramKesehatan'
+        title='Program Kesehatan'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
       />
-      <ListProgramKesehatan/>
+      <ListProgramKesehatan />
     </Box>
   );
 }
 
 function ListProgramKesehatan() {
+  const programKesehatanState = useProxy(programKesehatan)
   const router = useRouter()
+
+  useShallowEffect(() => {
+    programKesehatanState.findMany.load()
+  }, [])
+
+  if (!programKesehatanState.findMany.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
   return (
     <Box py={10}>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack>
-        <JudulList
-          title='List Program Kesehatan'
-          href='/admin/kesehatan/program-kesehatan/create'
-        />
-        <Box style={{ overflowX: "auto" }}>
-          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-            <TableThead>
-              <TableTr>
-                <TableTh>Judul</TableTh>
-                <TableTh>Kategori</TableTh>
-                <TableTh>Image</TableTh>
-                <TableTh>Detail</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              <TableTr>
-                <TableTd>
-                  <Box w={100}>
-                    <Text truncate="end" fz={"sm"}>Test</Text>
-                  </Box></TableTd>
-                <TableTd>Test</TableTd>
-                <TableTd>
-                  <Image w={100} src={"/"} alt="image" />
-                </TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push('/admin/kesehatan/program-kesehatan/detail')}>
-                    <IconDeviceImacCog size={25} />
-                  </Button>
-                </TableTd>
-              </TableTr>
-            </TableTbody>
-          </Table>
-        </Box>
-      </Stack>
-    </Paper>
-  </Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Program Kesehatan'
+            href='/admin/kesehatan/program-kesehatan/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh w={250}>Judul</TableTh>
+                  <TableTh w={250}>Deskripsi Singkat</TableTh>
+                  <TableTh w={250}>Image</TableTh>
+                  <TableTh w={200}>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {programKesehatanState.findMany.data?.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>{item.deskripsiSingkat}</TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image?.link} alt="image" />
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/kesehatan/program-kesehatan/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
   )
 }
 

src/app/admin/(dashboard)/kesehatan/puskesmas/[id]/edit/page.tsx

@@ -0,0 +1,286 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import puskesmasState from '@/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { ChangeEvent, useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+interface PuskesmasFormBase {
+  name: string;
+  alamat: string;
+  jam: {
+    workDays: string;
+    weekDays: string;
+    holiday: string;
+  };
+  kontak: {
+    kontakPuskesmas: string;
+    email: string;
+    facebook: string;
+    kontakUGD: string;
+  };
+  imageId: string;
+}
+
+interface PuskesmasFormData extends PuskesmasFormBase {
+  image?: {
+    link: string;
+  };
+}
+
+function EditPuskesmas() {
+  const statePuskesmas = useProxy(puskesmasState);
+  const router = useRouter();
+  const params = useParams();
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState<PuskesmasFormData>({
+    name: statePuskesmas.edit.form.name || '',
+    alamat: statePuskesmas.edit.form.alamat || '',
+    jam: {
+      workDays: statePuskesmas.edit.form.jam?.workDays || '',
+      weekDays: statePuskesmas.edit.form.jam?.weekDays || '',
+      holiday: statePuskesmas.edit.form.jam?.holiday || '',
+    },
+    kontak: {
+      kontakPuskesmas: statePuskesmas.edit.form.kontak?.kontakPuskesmas || '',
+      email: statePuskesmas.edit.form.kontak?.email || '',
+      facebook: statePuskesmas.edit.form.kontak?.facebook || '',
+      kontakUGD: statePuskesmas.edit.form.kontak?.kontakUGD || '',
+    },
+    imageId: statePuskesmas.edit.form.imageId || '',
+  });
+
+  useEffect(() => {
+    const loadPuskesmas = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        await statePuskesmas.edit.load(id);
+        const { form } = statePuskesmas.edit;
+        if (form) {
+          setFormData({
+            name: form.name,
+            alamat: form.alamat,
+            jam: {
+              workDays: form.jam.workDays,
+              weekDays: form.jam.weekDays,
+              holiday: form.jam.holiday,
+            },
+            kontak: {
+              kontakPuskesmas: form.kontak.kontakPuskesmas,
+              email: form.kontak.email,
+              facebook: form.kontak.facebook,
+              kontakUGD: form.kontak.kontakUGD,
+            },
+            imageId: form.imageId,
+          });
+
+          // Check if there's an existing image URL in the form data
+          const formWithImage = form as PuskesmasFormData;
+          if (formWithImage.image?.link) {
+            setPreviewImage(formWithImage.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading puskesmas:", error);
+        toast.error("Gagal memuat data puskesmas");
+      }
+    };
+    loadPuskesmas();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      statePuskesmas.edit.form = {
+        ...statePuskesmas.edit.form,
+        name: formData.name,
+        alamat: formData.alamat,
+        jam: {
+          workDays: formData.jam.workDays,
+          weekDays: formData.jam.weekDays,
+          holiday: formData.jam.holiday,
+        },
+        kontak: {
+          kontakPuskesmas: formData.kontak.kontakPuskesmas,
+          email: formData.kontak.email,
+          facebook: formData.kontak.facebook,
+          kontakUGD: formData.kontak.kontakUGD,
+        },
+        imageId: formData.imageId,
+      };
+
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          toast.error("Gagal upload gambar");
+          return;
+        }
+
+        statePuskesmas.edit.form.imageId = uploaded.id;
+      }
+
+      const success = await statePuskesmas.edit.submit();
+      if (success) {
+        toast.success("Puskesmas berhasil diperbarui!");
+        router.push("/admin/kesehatan/puskesmas");
+      }
+    } catch (error) {
+      console.error("Error updating puskesmas:", error);
+      toast.error(error instanceof Error ? error.message : "Gagal memperbarui data puskesmas");
+    }
+  };
+
+  const handleFileChange = (selectedFile: File | null) => {
+    if (selectedFile) {
+      setFile(selectedFile);
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (e.target?.result) {
+          setPreviewImage(e.target.result as string);
+        }
+      };
+      reader.readAsDataURL(selectedFile);
+    } else {
+      setFile(null);
+      setPreviewImage(null);
+    }
+  };
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleNestedChange = (section: 'jam' | 'kontak', field: string, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      [section]: {
+        ...prev[section],
+        [field]: value
+      }
+    }));
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant="subtle" color="blue">
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Stack gap="xs">
+        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+          <Stack gap="xs">
+            <Title order={3}>Edit Puskesmas</Title>
+            
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nama Puskesmas</Text>}
+              placeholder="masukkan nama puskesmas"
+              name="name"
+              value={formData.name}
+              onChange={handleInputChange}
+            />
+
+            <TextInput
+              label={<Text fz="sm" fw="bold">Alamat</Text>}
+              placeholder="masukkan alamat"
+              name="alamat"
+              value={formData.alamat}
+              onChange={handleInputChange}
+            />
+
+            <TextInput
+              label={<Text fz="sm" fw="bold">Jam Buka</Text>}
+              placeholder="masukkan jam buka"
+              value={formData.jam.workDays}
+              onChange={(e) => handleNestedChange('jam', 'workDays', e.target.value)}
+            />
+
+            <TextInput
+              label={<Text fz="sm" fw="bold">Jam Tutup</Text>}
+              placeholder="masukkan jam tutup"
+              value={formData.jam.weekDays}
+              onChange={(e) => handleNestedChange('jam', 'weekDays', e.target.value)}
+            />
+
+            <TextInput
+              label={<Text fz="sm" fw="bold">Jam Libur</Text>}
+              placeholder="masukkan jam libur"
+              value={formData.jam.holiday}
+              onChange={(e) => handleNestedChange('jam', 'holiday', e.target.value)}
+            />
+
+            <TextInput
+              label={<Text fz="sm" fw="bold">Kontak Puskesmas</Text>}
+              placeholder="masukkan kontak puskesmas"
+              value={formData.kontak.kontakPuskesmas}
+              onChange={(e) => handleNestedChange('kontak', 'kontakPuskesmas', e.target.value)}
+            />
+
+            <TextInput
+              label={<Text fz="sm" fw="bold">Email</Text>}
+              placeholder="masukkan email"
+              value={formData.kontak.email}
+              onChange={(e) => handleNestedChange('kontak', 'email', e.target.value)}
+            />
+
+            <TextInput
+              label={<Text fz="sm" fw="bold">Facebook</Text>}
+              placeholder="masukkan facebook"
+              value={formData.kontak.facebook}
+              onChange={(e) => handleNestedChange('kontak', 'facebook', e.target.value)}
+            />
+
+            <TextInput
+              label={<Text fz="sm" fw="bold">Kontak UGD</Text>}
+              placeholder="masukkan kontak UGD"
+              value={formData.kontak.kontakUGD}
+              onChange={(e) => handleNestedChange('kontak', 'kontakUGD', e.target.value)}
+            />
+
+            <FileInput
+              placeholder="Pilih gambar"
+              label="Gambar"
+              accept="image/*"
+              leftSection={<IconImageInPicture size={16} />}
+              value={file}
+              onChange={handleFileChange}
+            />
+
+            {previewImage ? (
+              <Image alt="Preview" src={previewImage} w={200} h={200} />
+            ) : (
+              <Center w={200} h={200} bg="gray">
+                <IconImageInPicture />
+              </Center>
+            )}
+
+            <Button 
+              onClick={handleSubmit} 
+              bg={colors['blue-button']} 
+              loading={statePuskesmas.edit.loading}
+            >
+              Simpan Perubahan
+            </Button>
+          </Stack>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditPuskesmas;

src/app/admin/(dashboard)/kesehatan/puskesmas/[id]/page.tsx

@@ -0,0 +1,111 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image, Skeleton } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import puskesmasState from '../../../_state/kesehatan/puskesmas/puskesmas';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPuskesmas() {
+  const params = useParams()
+  const router = useRouter();
+  const statePuskesmas = useProxy(puskesmasState)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useShallowEffect(() => {
+    statePuskesmas.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      statePuskesmas.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/kesehatan/puskesmas")
+    }
+  }
+
+  if (!statePuskesmas.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Puskesmas</Text>
+          {statePuskesmas.findUnique.data ? (
+            <Paper bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Nama Puskesmas</Text>
+                  <Text fz={"lg"}>{statePuskesmas.findUnique.data.name}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Alamat</Text>
+                  <Text fz={"lg"}>{statePuskesmas.findUnique.data.alamat}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Jam Operasional</Text>
+                  <Text fz={"lg"}>{statePuskesmas.findUnique.data.jam.workDays}</Text>
+                  <Text fz={"lg"}>{statePuskesmas.findUnique.data.jam.weekDays}</Text>
+                  <Text fz={"lg"}>{statePuskesmas.findUnique.data.jam.holiday}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                  <Image src={statePuskesmas.findUnique.data.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Kontak</Text>
+                  <Text fz={"lg"} >{statePuskesmas.findUnique.data.kontak.kontakPuskesmas}</Text>
+                  <Text fz={"lg"} >{statePuskesmas.findUnique.data.kontak.email}</Text>
+                  <Text fz={"lg"} >{statePuskesmas.findUnique.data.kontak.facebook}</Text>
+                  <Text fz={"lg"} >{statePuskesmas.findUnique.data.kontak.kontakUGD}</Text>
+                </Box>
+                <Box>
+                  <Flex gap={"xs"}>
+                    <Button color="red" onClick={() => {
+                      if (statePuskesmas.findUnique.data) {
+                        setSelectedId(statePuskesmas.findUnique.data.id)
+                        setModalHapus(true)
+                      }
+                    }}>
+                      <IconX size={20} />
+                    </Button>
+                    <Button onClick={() => router.push(`/admin/kesehatan/puskesmas/${statePuskesmas.findUnique.data?.id}/edit`)} color="green">
+                      <IconEdit size={20} />
+                    </Button>
+                  </Flex>
+                </Box>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailPuskesmas;

src/app/admin/(dashboard)/kesehatan/puskesmas/create/page.tsx

@@ -1,14 +1,76 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KesehatanEditor } from '../../_com/kesehatanEditor';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import puskesmasState from '../../../_state/kesehatan/puskesmas/puskesmas';
 
 function CreatePuskesmas() {
+  const statePuskesmas = useProxy(puskesmasState)
   const router = useRouter();
+  const [file, setFile] = useState<File | null>(null);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+
+
+  const resetForm = () => {
+    statePuskesmas.create.form = {
+      name: "",
+      alamat: "",
+      jam: {
+        workDays: "",
+        weekDays: "",
+        holiday: "",
+      },
+      kontak: {
+        kontakPuskesmas: "",
+        email: "",
+        facebook: "",
+        kontakUGD: "",
+      },
+      imageId: "",
+      image: undefined,
+    };
+
+    setFile(null);
+    setPreviewImage(null);
+  };
+  
+
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    // Upload gambar dulu
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar");
+    }
+
+    statePuskesmas.create.form.imageId = uploaded.id;
+    // State is already being updated directly in the form inputs
+
+    await statePuskesmas.create.submit();
+
+    toast.success("Data berhasil disimpan");
+    resetForm();
+    // After successful submission, redirect to the list page
+    router.push('/admin/kesehatan/puskesmas');
+  }
+
   return (
-     <Box>
+    <Box component="form" onSubmit={handleSubmit}>
       <Box mb={10}>
         <Button variant="subtle" onClick={() => router.back()}>
           <IconArrowBack color={colors['blue-button']} size={25} />
@@ -18,26 +80,80 @@ function CreatePuskesmas() {
       <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
         <Stack gap="xs">
           <Title order={3}>Create Puskesmas</Title>
-
           <TextInput
-            
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            label={<Text fz="sm" fw="bold">Nama Puskesmas</Text>}
+            placeholder="masukkan nama puskesmas"
+            value={statePuskesmas.create.form.name}
+            onChange={(e) => {
+              statePuskesmas.create.form.name = e.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Alamat</Text>}
+            placeholder="masukkan alamat"
+            value={statePuskesmas.create.form.alamat}
+            onChange={(e) => {
+              statePuskesmas.create.form.alamat = e.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Jam Buka</Text>}
+            placeholder="masukkan jam buka"
+            value={statePuskesmas.create.form.jam.workDays}
+            onChange={(e) => {
+              statePuskesmas.create.form.jam.workDays = e.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Jam Tutup</Text>}
+            placeholder="masukkan jam tutup"
+            value={statePuskesmas.create.form.jam.weekDays}
+            onChange={(e) => {
+              statePuskesmas.create.form.jam.weekDays = e.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Holiday</Text>}
+            placeholder="masukkan holiday"
+            value={statePuskesmas.create.form.jam.holiday}
+            onChange={(e) => {
+              statePuskesmas.create.form.jam.holiday = e.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Kontak Puskesmas</Text>}
+            placeholder="masukkan kontak puskesmas"
+            value={statePuskesmas.create.form.kontak.kontakPuskesmas}
+            onChange={(e) => {
+              statePuskesmas.create.form.kontak.kontakPuskesmas = e.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Email</Text>}
+            placeholder="masukkan email"
+            value={statePuskesmas.create.form.kontak.email}
+            onChange={(e) => {
+              statePuskesmas.create.form.kontak.email = e.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Facebook</Text>}
+            placeholder="masukkan facebook"
+            value={statePuskesmas.create.form.kontak.facebook}
+            onChange={(e) => {
+              statePuskesmas.create.form.kontak.facebook = e.target.value;
+            }}
+          />
+           <TextInput
+            label={<Text fz="sm" fw="bold">Kontak UGD</Text>}
+            placeholder="masukkan kontak ugd"
+            value={statePuskesmas.create.form.kontak.kontakUGD}
+            onChange={(e) => {
+              statePuskesmas.create.form.kontak.kontakUGD = e.target.value;
+            }}
           />
 
-          <TextInput
-            
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
-          />
-
-          <TextInput
-           
-            label={<Text fz="sm" fw="bold">Kategori</Text>}
-            placeholder="masukkan kategori"
-          />
-
-          {/* <FileInput
+          <FileInput
             label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
             value={file}
             onChange={async (e) => {
@@ -48,25 +164,18 @@ function CreatePuskesmas() {
               );
               setPreviewImage(base64);
             }}
-          /> */}
+          />
 
-          {/* {previewImage ? (
+          {previewImage ? (
             <Image alt="" src={previewImage} w={200} h={200} />
           ) : (
             <Center w={200} h={200} bg="gray">
               <IconImageInPicture />
             </Center>
-          )} */}
+          )}
 
-          <Box>
-            <Text fz="sm" fw="bold">Konten</Text>
-            <KesehatanEditor
-              showSubmit={false}
-            />
-          </Box>
-
-          <Button bg={colors['blue-button']}>
-            Simpan Potensi
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan Puskesmas
           </Button>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/kesehatan/puskesmas/detail/page.tsx

@@ -1,70 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailPuskesmas() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Potensi</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Judul</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Kategori</Text>
-                <Text fz={"lg"}>Test Kategori</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"}>Test Deskripsi</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Konten</Text>
-                <Text fz={"lg"} >Test Konten</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/kesehatan/puskesmas/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailPuskesmas;

src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import JudulList from '../../_com/judulList';
-import HeaderSearch from '../../_com/header';
 import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import puskesmasState from '../../_state/kesehatan/puskesmas/puskesmas';
 
 function Puskesmas() {
   return (
@@ -20,7 +23,20 @@ function Puskesmas() {
 }
 
 function ListPuskesmas() {
+  const statePuskesmas = useProxy(puskesmasState)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    statePuskesmas.findMany.load()
+  }, [])
+
+  if (!statePuskesmas.findMany.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500}/>
+      </Box>
+    )
+  }
   return (
     <Box py={10}>
     <Paper bg={colors['white-1']} p={'md'}>
@@ -33,28 +49,27 @@ function ListPuskesmas() {
           <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
             <TableThead>
               <TableTr>
-                <TableTh>Judul</TableTh>
-                <TableTh>Kategori</TableTh>
+                <TableTh>Nama Puskesmas</TableTh>
+                <TableTh>Alamat</TableTh>
                 <TableTh>Image</TableTh>
                 <TableTh>Detail</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              <TableTr>
-                <TableTd>
-                  <Box w={100}>
-                    <Text truncate="end" fz={"sm"}>Test</Text>
-                  </Box></TableTd>
-                <TableTd>Test</TableTd>
-                <TableTd>
-                  <Image w={100} src={"/"} alt="image" />
-                </TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push('/admin/kesehatan/puskesmas/detail')}>
-                    <IconDeviceImacCog size={25} />
-                  </Button>
-                </TableTd>
-              </TableTr>
+              {statePuskesmas.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.name}</TableTd>
+                  <TableTd>{item.alamat}</TableTd>
+                  <TableTd>
+                    <Image w={100} src={item.image.link} alt="image" />
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push(`/admin/kesehatan/puskesmas/${item.id}`)}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
             </TableTbody>
           </Table>
         </Box>

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

@@ -42,6 +42,7 @@ function VisiMisiPPIDEdit() {
       visiMisi.findById.data.misi = draftMisi;
       visiMisi.update.save(visiMisi.findById.data);
     }
+    router.push('/admin/ppid/visi-misi-ppid')
   };
 
   return (

src/app/admin/_com/list_PageAdmin.tsx

@@ -11,41 +11,26 @@ export const navBar = [
       },
       {
         id: "Landing_Page_2",
-        name: "Penghargaan",
-        path: "/admin/landing-page/penghargaan"
-      },
-      {
-        id: "Landing_Page_3",
-        name: "Layanan",
-        path: "/admin/landing-page/layanan"
-      },
-      {
-        id: "Landing_Page_4",
-        name: "Potensi",
-        path: "/admin/landing-page/potensi"
-      },
-      {
-        id: "Landing_Page_5",
         name: "Desa Anti Korupsi",
         path: "/admin/landing-page/desa-anti-korupsi"
       },
       {
-        id: "Landing_Page_6",
+        id: "Landing_Page_3",
         name: "Indeks Kepuasan Masyarakat",
         path: "/admin/landing-page/indeks-kepuasan-masyarakat"
       },
       {
-        id: "Landing_Page_7",
+        id: "Landing_Page_4",
         name: "SDGs Desa",
         path: "/admin/landing-page/sdgs-desa"
       },
       {
-        id: "Landing_Page_8",
+        id: "Landing_Page_5",
         name: "APBDes",
         path: "/admin/landing-page/apbdes"
       },
       {
-        id: "Landing_Page_9",
+        id: "Landing_Page_6",
         name: "Prestasi Desa",
         path: "/admin/landing-page/prestasi-desa"
       }
@@ -156,7 +141,7 @@ export const navBar = [
       {
         id: "Kesehatan_2",
         name: "Data Kesehatan Warga",
-        path: "/admin/kesehatan/data-kesehatan-warga"
+        path: "/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian"
       },
       {
         id: "Kesehatan_3",

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

@@ -13,19 +13,23 @@ type FormCreate = Prisma.DokterdanTenagaMedisGetPayload<{
 async function dokterDantenagamedisCreate(context: Context) {
     const body = context.body as FormCreate
 
-    await prisma.dokterdanTenagaMedis.create({
+    const created = await prisma.dokterdanTenagaMedis.create({
         data: {
             name: body.name,
             specialist: body.specialist,
             jadwal: body.jadwal,
+        },
+        select: {
+            id: true,
+            name: true,
+            specialist: true,
+            jadwal: true,
         }
     })
     return {
         success: true,
         message: "Success create dokter dan tenaga medis",
-        data: {
-            ...body
-        }
+        data: created
     }
 }
 export default dokterDantenagamedisCreate

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

@@ -0,0 +1,36 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function dokterDantenagamedisDelete(context: Context) {
+    const id = context.params?.id;
+
+    if (!id) {
+        return {
+            success: false,
+            message: "Id tidak ditemukan",
+        }
+    }
+
+    const existing = await prisma.dokterdanTenagaMedis.findUnique({
+        where: {
+            id: id,
+        },
+    })
+
+    if (!existing) {
+        return {
+            success: false,
+            message: "Data tidak ditemukan",
+        }
+    }
+
+    const deleted = await prisma.dokterdanTenagaMedis.delete({
+        where: { id },
+    })
+
+    return {
+        success: true,
+        message: "Data berhasil dihapus",
+        data: deleted,
+    }
+}

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

@@ -0,0 +1,50 @@
+import prisma from "@/lib/prisma";
+
+export default async function dokterDantenagamedisFindUnique(request: Request) {
+  const url = new URL(request.url);
+  const pathSegments = url.pathname.split("/");
+  const id = pathSegments[pathSegments.length - 1];
+
+  if (!id) {
+    return Response.json(
+      {
+        success: false,
+        message: "ID is required",
+      },
+      { status: 400 }
+    );
+  }
+
+  try {
+    if (typeof id !== 'string') {
+        return Response.json({
+            success: false,
+            message: "ID tidak valid",
+        }, { status: 400 });
+    }
+
+    const data = await prisma.dokterdanTenagaMedis.findUnique({
+        where: { id },
+    });
+
+    if (!data) {
+        return Response.json({
+            success: false,
+            message: "Data tidak ditemukan",
+        }, { status: 404 });
+    }
+
+    return Response.json({
+        success: true,
+        message: "Berhasil mengambil data berdasarkan ID",
+        data,
+    }, { status: 200 });
+    
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return Response.json({
+        success: false,
+        message: "Terjadi kesalahan saat mengambil data",
+    }, { status: 500 });
+  }
+}

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

@@ -1,6 +1,9 @@
 import Elysia, { t } from "elysia";
 import dokterDantenagamedisFindMany from "./find-many";
 import dokterDantenagamedisCreate from "./create";
+import dokterDantenagamedisFindUnique from "./findUnique";
+import dokterDantenagamedisUpdate from "./updt";
+import dokterDantenagamedisDelete from "./del";
 
 const DokterDantenagamedis = new Elysia({
   prefix: "/dokterdantenagamedis",
@@ -14,5 +17,24 @@ const DokterDantenagamedis = new Elysia({
         jadwal: t.String(),
     })
 })
+.get("/:id", async (context) => {
+  const response = await dokterDantenagamedisFindUnique(new Request(context.request))
+  return response
+})
+.put(":/id", dokterDantenagamedisUpdate, {
+    params: t.Object({
+        id: t.String(),
+    }),
+    body: t.Object({
+        name: t.String(),
+        specialist: t.String(),
+        jadwal: t.String(),
+    })
+})
+.delete("/del/:id", dokterDantenagamedisDelete, {
+    params: t.Object({
+        id: t.String(),
+    }),
+})
 
 export default DokterDantenagamedis

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

@@ -0,0 +1,47 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function dokterDantenagamedisUpdate(context: Context) {
+  const id = context.params?.id;
+
+  if (!id) {
+    return {
+      success: false,
+      message: "ID tidak ditemukan",
+    };
+  }
+
+  const { nama, spesialis, jadwal } = context.body as {
+    nama: string;
+    spesialis: string;
+    jadwal: string;
+  };
+
+  const existing = await prisma.dokterdanTenagaMedis.findUnique({
+    where: {
+      id: id,
+    },
+  });
+
+  if (!existing) {
+    return {
+      success: false,
+      message: "Data tidak ditemukan",
+    };
+  }
+
+  const updated = await prisma.dokterdanTenagaMedis.update({
+    where: { id },
+    data: {
+      name: nama,
+      specialist: spesialis,
+      jadwal,
+    },
+  });
+
+  return {
+    success: true,
+    message: "Data berhasil diupdate",
+    data: updated,
+  };
+}

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

@@ -11,18 +11,19 @@ type FormCreate = Prisma.FasilitasPendukungGetPayload<{
 async function FasilitasPendukungCreate(context: Context){
     const body = context.body as FormCreate
 
-    await prisma.fasilitasPendukung.create({
+  const created = await prisma.fasilitasPendukung.create({
         data: {
-  
             content: body.content
+        },
+        select: {
+            id: true,
+            content: true,
         }
     })
     return {
         success: true,
         message: "Success create fasilitas pendukung",
-        data: {
-            ...body
-        }
+        data: created
     }
 }
 

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

@@ -0,0 +1,36 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function fasilitasPendukungDelete(context: Context) {
+    const id = context.params?.id;
+
+    if (!id) {
+        return {
+            success: false,
+            message: "Id tidak ditemukan",
+        }
+    }
+
+    const existing = await prisma.fasilitasPendukung.findUnique({
+        where: {
+            id: id,
+        },
+    })
+
+    if (!existing) {
+        return {
+            success: false,
+            message: "Data tidak ditemukan",
+        }
+    }
+
+    const deleted = await prisma.fasilitasPendukung.delete({
+        where: { id },
+    })
+
+    return {
+        success: true,
+        message: "Data berhasil dihapus",
+        data: deleted,
+    }
+}

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

@@ -0,0 +1,46 @@
+import prisma from "@/lib/prisma";
+
+export default async function fasilitasPendukungFindUnique(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split('/');
+    const id = pathSegments[pathSegments.length - 1];
+
+    if (!id) {
+        return Response.json({
+            success: false,
+            message: "ID is required",
+        }, { status: 400 })
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return Response.json({
+                success: false,
+                message: "ID must be a string",
+            }, { status: 400 })
+        }
+
+        const data = await prisma.fasilitasPendukung.findUnique({
+            where: { id },
+        })
+
+        if (!data) {
+            return Response.json({
+                success: false,
+                message: "Data tidak ditemukan",
+            }, { status: 404 })
+        }
+
+        return Response.json({
+            success: true,
+            message: "Berhasil mengambil data berdasarkan ID",
+            data,
+        }, { status: 200 })
+    } catch (error) {
+        console.error("Error fetching data:", error);
+        return Response.json({
+            success: false,
+            message: "Terjadi kesalahan saat mengambil data",
+        }, { status: 500 })
+    }
+}

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

@@ -1,16 +1,35 @@
 import Elysia, { t } from "elysia";
-import fasilitasPendukungFindMany from "./find-many";
 import FasilitasPendukungCreate from "./create";
+import fasilitasPendukungFindMany from "./find-many";
+import fasilitasPendukungFindUnique from "./findUnique";
+import fasilitasPendukungUpdate from "./updt";
 
 const FasilitasPendukung = new Elysia({
   prefix: "/fasilitaspendukung",
   tags: ["Data Kesehatan/Fasilitas Kesehatan/Fasilitas Pendukung"],
 })
+  .get("/:id", async (context) => {
+    const response = await fasilitasPendukungFindUnique(new Request(context.request))
+    return response
+  })
   .get("/find-many", fasilitasPendukungFindMany)
   .post("/create", FasilitasPendukungCreate, {
     body: t.Object({
       content: t.String(),
     }),
-  });
+  })
+  .put(":/id", fasilitasPendukungUpdate, {
+    params: t.Object({
+      id: t.String(),
+    }),
+    body: t.Object({
+      content: t.String(),
+    }),
+  })
+  .delete("/del/:id", FasilitasPendukungCreate, {
+    params: t.Object({
+      id: t.String(),
+    }),
+  })
 
 export default FasilitasPendukung;

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

@@ -0,0 +1,43 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function fasilitasPendukungUpdate(context: Context) {
+    const id = context.params?.id;
+
+    if (!id) {
+        return {
+            success: false,
+            message: "Id tidak ditemukan",
+        }
+    }
+
+    const {content} = context.body as {
+        content: string;
+    }
+
+    const existing = await prisma.fasilitasPendukung.findUnique({
+        where: {
+            id: id,
+        },
+    })
+
+    if (!existing) {
+        return {
+            success: false,
+            message: "Data tidak ditemukan",
+        }
+    }
+
+    const updated = await prisma.fasilitasPendukung.update({
+        where: { id },
+        data: {
+            content: content,
+        },
+    })
+
+    return {
+        success: true,
+        message: "Data berhasil diupdate",
+        data: updated,
+    }
+}

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

@@ -12,19 +12,23 @@ type FormCreate = Prisma.InformasiUmumGetPayload<{
 async function informasiUmumCreate(context: Context) {
     const body = context.body as FormCreate
 
-    await prisma.informasiUmum.create({
+    const created = await prisma.informasiUmum.create({
         data: {
             fasilitas: body.fasilitas,
             alamat: body.alamat,
             jamOperasional: body.jamOperasional,
+        },
+        select: {
+            id: true,
+            fasilitas: true,
+            alamat: true,
+            jamOperasional: true,
         }
     })
     return{
         success: true,
         message: "Success create informasi umum",
-        data: {
-            ...body
-        }
+        data: created
     }
 }
 

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

@@ -0,0 +1,36 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function informasiumumDelete(context: Context){
+    const id = context.params?.id;
+
+    if (!id) {
+        return {
+            success: false,
+            message: "Id tidak ditemukan",
+        }
+    }
+
+    const existing = await prisma.informasiUmum.findUnique({
+        where: {
+            id: id,
+        },
+    })
+
+    if (!existing) {
+        return {
+            success: false,
+            message: "Data tidak ditemukan",
+        }
+    }
+
+    const deleted = await prisma.informasiUmum.delete({
+        where: { id },
+    })
+
+    return {
+        success: true,
+        message: "Data berhasil dihapus",
+        data: deleted,
+    }
+}

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

@@ -0,0 +1,46 @@
+import prisma from "@/lib/prisma";
+
+export default async function informasiUmumFindUnique(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split('/');
+    const id = pathSegments[pathSegments.length - 1];
+
+    if (!id) {
+        return Response.json({
+            success: false,
+            message: "ID is required",
+        }, { status: 400 })
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return Response.json({
+                success: false,
+                message: "ID tidak valid",
+            }, { status: 400 });
+        }
+
+        const data = await prisma.informasiUmum.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return Response.json({
+                success: false,
+                message: "Data tidak ditemukan",
+            }, { status: 404 });
+        }
+
+        return Response.json({
+            success: true,
+            message: "Berhasil mengambil data berdasarkan ID",
+            data,
+        }, { status: 200 });
+    } catch (error) {
+        console.error("Error fetching data:", error);
+        return Response.json({
+            success: false,
+            message: "Terjadi kesalahan saat mengambil data",
+        }, { status: 500 });
+    }
+}