Fix Dibagian Data Kesehatan Warga

prisma/migrations/20250627155416_nico_27_jun_25_o1/migration.sql

@@ -0,0 +1,68 @@
+/*
+  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.
+  - You are about to drop the column `uuid` on the `DataKematian_Kelahiran` table. All the data in the column will be lost.
+  - The primary key for the `GrafikKepuasan` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - You are about to drop the column `uuid` on the `GrafikKepuasan` table. All the data in the column will be lost.
+  - A unique constraint covering the columns `[id]` on the table `DataKematian_Kelahiran` will be added. If there are existing duplicate values, this will fail.
+  - A unique constraint covering the columns `[id]` on the table `GrafikKepuasan` will be added. If there are existing duplicate values, this will fail.
+  - Added the required column `doctorSignId` to the `ArtikelKesehatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `firstAidId` to the `ArtikelKesehatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `introductionId` to the `ArtikelKesehatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `mythVsFactId` to the `ArtikelKesehatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `preventionId` to the `ArtikelKesehatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `symptomId` to the `ArtikelKesehatan` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropIndex
+DROP INDEX "DataKematian_Kelahiran_uuid_key";
+
+-- DropIndex
+DROP INDEX "GrafikKepuasan_uuid_key";
+
+-- AlterTable
+ALTER TABLE "ArtikelKesehatan" ADD COLUMN     "doctorSignId" TEXT NOT NULL,
+ADD COLUMN     "firstAidId" TEXT NOT NULL,
+ADD COLUMN     "introductionId" TEXT NOT NULL,
+ADD COLUMN     "mythVsFactId" TEXT NOT NULL,
+ADD COLUMN     "preventionId" TEXT NOT NULL,
+ADD COLUMN     "symptomId" TEXT NOT NULL;
+
+-- AlterTable
+ALTER TABLE "DataKematian_Kelahiran" DROP CONSTRAINT "DataKematian_Kelahiran_pkey",
+DROP COLUMN "uuid",
+ALTER COLUMN "id" DROP DEFAULT,
+ALTER COLUMN "id" SET DATA TYPE TEXT;
+DROP SEQUENCE "DataKematian_Kelahiran_id_seq";
+
+-- AlterTable
+ALTER TABLE "GrafikKepuasan" DROP CONSTRAINT "GrafikKepuasan_pkey",
+DROP COLUMN "uuid",
+ALTER COLUMN "id" DROP DEFAULT,
+ALTER COLUMN "id" SET DATA TYPE TEXT;
+DROP SEQUENCE "GrafikKepuasan_id_seq";
+
+-- CreateIndex
+CREATE UNIQUE INDEX "DataKematian_Kelahiran_id_key" ON "DataKematian_Kelahiran"("id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "GrafikKepuasan_id_key" ON "GrafikKepuasan"("id");
+
+-- AddForeignKey
+ALTER TABLE "ArtikelKesehatan" ADD CONSTRAINT "ArtikelKesehatan_introductionId_fkey" FOREIGN KEY ("introductionId") REFERENCES "Introduction"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ArtikelKesehatan" ADD CONSTRAINT "ArtikelKesehatan_symptomId_fkey" FOREIGN KEY ("symptomId") REFERENCES "Symptom"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ArtikelKesehatan" ADD CONSTRAINT "ArtikelKesehatan_preventionId_fkey" FOREIGN KEY ("preventionId") REFERENCES "Prevention"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ArtikelKesehatan" ADD CONSTRAINT "ArtikelKesehatan_firstAidId_fkey" FOREIGN KEY ("firstAidId") REFERENCES "FirstAid"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ArtikelKesehatan" ADD CONSTRAINT "ArtikelKesehatan_mythVsFactId_fkey" FOREIGN KEY ("mythVsFactId") REFERENCES "MythVsFact"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ArtikelKesehatan" ADD CONSTRAINT "ArtikelKesehatan_doctorSignId_fkey" FOREIGN KEY ("doctorSignId") REFERENCES "DoctorSign"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/schema.prisma

@@ -73,7 +73,7 @@ model FileStorage {
   Puskesmas                Puskesmas[]
   ProgramKesehatan         ProgramKesehatan[]
   PenangananDarurat        PenangananDarurat[]
-  KontakDarurat KontakDarurat[]
+  KontakDarurat            KontakDarurat[]
 
   InfoWabahPenyakit InfoWabahPenyakit[]
 }
@@ -471,24 +471,24 @@ model Penghargaan {
 
 // ========================================= FASILITAS KESEHATAN ========================================= //
 model FasilitasKesehatan {
-  id                   String                 @id @default(cuid())
-  name                 String
-  createdAt            DateTime               @default(now())
-  updatedAt            DateTime               @updatedAt
-  deletedAt            DateTime               @default(now())
-  isActive             Boolean                @default(true)
-  informasiumum        InformasiUmum @relation(fields: [informasiUmumId], references: [id])
-  informasiUmumId      String
-  layananunggulan      LayananUnggulan @relation(fields: [layananUnggulanId], references: [id])
-  layananUnggulanId    String
-  dokterdantenagamedis DokterdanTenagaMedis @relation(fields: [dokterdanTenagaMedisId], references: [id])
+  id                     String               @id @default(cuid())
+  name                   String
+  createdAt              DateTime             @default(now())
+  updatedAt              DateTime             @updatedAt
+  deletedAt              DateTime             @default(now())
+  isActive               Boolean              @default(true)
+  informasiumum          InformasiUmum        @relation(fields: [informasiUmumId], references: [id])
+  informasiUmumId        String
+  layananunggulan        LayananUnggulan      @relation(fields: [layananUnggulanId], references: [id])
+  layananUnggulanId      String
+  dokterdantenagamedis   DokterdanTenagaMedis @relation(fields: [dokterdanTenagaMedisId], references: [id])
   dokterdanTenagaMedisId String
-  fasilitaspendukung   FasilitasPendukung @relation(fields: [fasilitasPendukungId], references: [id])
-  fasilitasPendukungId String
-  prosedurpendaftaran  ProsedurPendaftaran @relation(fields: [prosedurPendaftaranId], references: [id])
-  prosedurPendaftaranId String
-  tarifdanlayanan      TarifDanLayanan @relation(fields: [tarifDanLayananId], references: [id])
-  tarifDanLayananId String
+  fasilitaspendukung     FasilitasPendukung   @relation(fields: [fasilitasPendukungId], references: [id])
+  fasilitasPendukungId   String
+  prosedurpendaftaran    ProsedurPendaftaran  @relation(fields: [prosedurPendaftaranId], references: [id])
+  prosedurPendaftaranId  String
+  tarifdanlayanan        TarifDanLayanan      @relation(fields: [tarifDanLayananId], references: [id])
+  tarifDanLayananId      String
 }
 
 model InformasiUmum {
@@ -558,46 +558,46 @@ model TarifDanLayanan {
 
 // ========================================= JADWAL KEGIATAN ========================================= //
 model JadwalKegiatan {
-  id        String   @id @default(cuid())
-  content   String
-  informasijadwalkegiatan InformasiJadwalKegiatan @relation(fields: [informasiJadwalKegiatanId], references: [id])
-  informasiJadwalKegiatanId String
-  deskripsijadwalkegiatan DeskripsiJadwalKegiatan @relation(fields: [deskripsiJadwalKegiatanId], references: [id])
-  deskripsiJadwalKegiatanId String
-  layananjadwalkegiatan LayananJadwalKegiatan @relation(fields: [layananJadwalKegiatanId], references: [id])
-  layananJadwalKegiatanId String
-  syaratketentuanjadwalkegiatan SyaratKetentuanJadwalKegiatan @relation(fields: [syaratKetentuanJadwalKegiatanId], references: [id])
+  id                              String                        @id @default(cuid())
+  content                         String
+  informasijadwalkegiatan         InformasiJadwalKegiatan       @relation(fields: [informasiJadwalKegiatanId], references: [id])
+  informasiJadwalKegiatanId       String
+  deskripsijadwalkegiatan         DeskripsiJadwalKegiatan       @relation(fields: [deskripsiJadwalKegiatanId], references: [id])
+  deskripsiJadwalKegiatanId       String
+  layananjadwalkegiatan           LayananJadwalKegiatan         @relation(fields: [layananJadwalKegiatanId], references: [id])
+  layananJadwalKegiatanId         String
+  syaratketentuanjadwalkegiatan   SyaratKetentuanJadwalKegiatan @relation(fields: [syaratKetentuanJadwalKegiatanId], references: [id])
   syaratKetentuanJadwalKegiatanId String
-  dokumenjadwalkegiatan DokumenJadwalKegiatan @relation(fields: [dokumenJadwalKegiatanId], references: [id])
-  dokumenJadwalKegiatanId String
-  pendaftaranjadwalkegiatan PendaftaranJadwalKegiatan @relation(fields: [pendaftaranJadwalKegiatanId], references: [id])
-  pendaftaranJadwalKegiatanId String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
+  dokumenjadwalkegiatan           DokumenJadwalKegiatan         @relation(fields: [dokumenJadwalKegiatanId], references: [id])
+  dokumenJadwalKegiatanId         String
+  pendaftaranjadwalkegiatan       PendaftaranJadwalKegiatan     @relation(fields: [pendaftaranJadwalKegiatanId], references: [id])
+  pendaftaranJadwalKegiatanId     String
+  createdAt                       DateTime                      @default(now())
+  updatedAt                       DateTime                      @updatedAt
+  deletedAt                       DateTime                      @default(now())
+  isActive                        Boolean                       @default(true)
 }
 
 model InformasiJadwalKegiatan {
-  id        String   @id @default(cuid())
-  name      String
-  tanggal   String
-  waktu     String
-  lokasi    String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
+  id             String           @id @default(cuid())
+  name           String
+  tanggal        String
+  waktu          String
+  lokasi         String
+  createdAt      DateTime         @default(now())
+  updatedAt      DateTime         @updatedAt
+  deletedAt      DateTime         @default(now())
+  isActive       Boolean          @default(true)
   JadwalKegiatan JadwalKegiatan[]
 }
 
 model DeskripsiJadwalKegiatan {
-  id        String   @id @default(cuid())
-  deskripsi String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
+  id             String           @id @default(cuid())
+  deskripsi      String
+  createdAt      DateTime         @default(now())
+  updatedAt      DateTime         @updatedAt
+  deletedAt      DateTime         @default(now())
+  isActive       Boolean          @default(true)
   JadwalKegiatan JadwalKegiatan[]
 }
 
@@ -624,34 +624,33 @@ model SyaratKetentuanJadwalKegiatan {
 }
 
 model DokumenJadwalKegiatan {
-  id        String   @id @default(cuid())
-  content   String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
+  id             String           @id @default(cuid())
+  content        String
+  createdAt      DateTime         @default(now())
+  updatedAt      DateTime         @updatedAt
+  deletedAt      DateTime         @default(now())
+  isActive       Boolean          @default(true)
   JadwalKegiatan JadwalKegiatan[]
 }
 
 model PendaftaranJadwalKegiatan {
-  id           String   @id @default(cuid())
-  name         String
-  tanggal      String
-  namaOrangtua String
-  nomor        String
-  alamat       String
-  catatan      String
-  createdAt    DateTime @default(now())
-  updatedAt    DateTime @updatedAt
-  deletedAt    DateTime @default(now())
-  isActive     Boolean  @default(true)
+  id             String           @id @default(cuid())
+  name           String
+  tanggal        String
+  namaOrangtua   String
+  nomor          String
+  alamat         String
+  catatan        String
+  createdAt      DateTime         @default(now())
+  updatedAt      DateTime         @updatedAt
+  deletedAt      DateTime         @default(now())
+  isActive       Boolean          @default(true)
   JadwalKegiatan JadwalKegiatan[]
 }
 
 // ========================================= PERSENTASE KELAHIRAN & KEMATIAN ========================================= //
 model DataKematian_Kelahiran {
-  id        Int      @id @default(autoincrement())
-  uuid      String   @default(cuid()) @unique
+  id             String   @unique @default(cuid())
   tahun          String
   kematianKasar  String
   kematianBayi   String
@@ -664,8 +663,7 @@ model DataKematian_Kelahiran {
 
 // ========================================= GRAFIK KEPUASAN ========================================= //
 model GrafikKepuasan {
-  id        Int      @id @default(autoincrement())
-  uuid      String   @default(cuid()) @unique
+  id        String   @unique @default(cuid())
   label     String
   jumlah    String
   createdAt DateTime @default(now())
@@ -676,56 +674,74 @@ model GrafikKepuasan {
 
 // ========================================= ARTIKEL KESEHATAN ========================================= //
 model ArtikelKesehatan {
-  id        String      @id @default(cuid())
-  title     String
-  content   String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
+  id             String       @id @default(cuid())
+  title          String
+  content        String
+  introduction   Introduction @relation(fields: [introductionId], references: [id])
+  introductionId String
+  symptom        Symptom      @relation(fields: [symptomId], references: [id])
+  symptomId      String
+  prevention     Prevention   @relation(fields: [preventionId], references: [id])
+  preventionId   String
+  firstaid       FirstAid     @relation(fields: [firstAidId], references: [id])
+  firstAidId     String
+  mythvsfact     MythVsFact   @relation(fields: [mythVsFactId], references: [id])
+  mythVsFactId   String
+  doctorsign     DoctorSign   @relation(fields: [doctorSignId], references: [id])
+  doctorSignId   String
+  createdAt      DateTime     @default(now())
+  updatedAt      DateTime     @updatedAt
+  deletedAt      DateTime     @default(now())
+  isActive       Boolean      @default(true)
 }
 
 model Introduction {
-  id        String      @id @default(cuid())
-  content   String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
+  id               String             @id @default(cuid())
+  content          String
+  createdAt        DateTime           @default(now())
+  updatedAt        DateTime           @updatedAt
+  deletedAt        DateTime           @default(now())
+  isActive         Boolean            @default(true)
+  ArtikelKesehatan ArtikelKesehatan[]
 }
 
 model Symptom {
-  id        String      @id @default(cuid())
-  title     String
-  content   String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
+  id               String             @id @default(cuid())
+  title            String
+  content          String
+  createdAt        DateTime           @default(now())
+  updatedAt        DateTime           @updatedAt
+  deletedAt        DateTime           @default(now())
+  isActive         Boolean            @default(true)
+  ArtikelKesehatan ArtikelKesehatan[]
 }
 
 model Prevention {
-  id        String      @id @default(cuid())
+  id        String   @id @default(cuid())
   title     String
   content   String
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
+
+  ArtikelKesehatan ArtikelKesehatan[]
 }
 
 model FirstAid {
-  id        String      @id @default(cuid())
+  id        String   @id @default(cuid())
   title     String
   content   String
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
+
+  ArtikelKesehatan ArtikelKesehatan[]
 }
 
 model MythVsFact {
-  id        String      @id @default(cuid())
+  id        String   @id @default(cuid())
   title     String
   mitos     String
   fakta     String
@@ -733,15 +749,19 @@ model MythVsFact {
   updatedAt DateTime @updatedAt
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
+
+  ArtikelKesehatan ArtikelKesehatan[]
 }
 
 model DoctorSign {
-  id        String      @id @default(cuid())
+  id        String   @id @default(cuid())
   content   String
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
+
+  ArtikelKesehatan ArtikelKesehatan[]
 }
 
 // ========================================= POSYANDU ========================================= //
@@ -839,16 +859,17 @@ model KontakDarurat {
   deletedAt DateTime    @default(now())
   isActive  Boolean     @default(true)
 }
+
 // ========================================= INFO WABAH PENYAKIT ========================================= //
 model InfoWabahPenyakit {
-  id        String      @id @default(cuid())
-  name      String
+  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)
+  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/artikelKesehatan.ts

@@ -1,339 +1,306 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";
 
-/* Introduction */
-const templateIntroduction = z.object({
-  content: z.string().min(3, "Content minimal 3 karakter"),
-})
+const templateForm = z.object({
+  title: z.string().min(1, "Judul harus diisi"),
+  content: z.string().min(1, "Content harus diisi"),
+  introduction: z.object({
+    content: z.string().min(1, "Content harus diisi"),
+  }),
+  symptom: z.object({
+    title: z.string().min(1, "Judul harus diisi"),
+    content: z.string().min(1, "Content harus diisi"),
+  }),
+  prevention: z.object({
+    title: z.string().min(1, "Judul harus diisi"),
+    content: z.string().min(1, "Content harus diisi"),
+  }),
+  firstAid: z.object({
+    title: z.string().min(1, "Judul harus diisi"),
+    content: z.string().min(1, "Content harus diisi"),
+  }),
+  mythVsFact: z.object({
+    title: z.string().min(1, "Judul harus diisi"),
+    mitos: z.string().min(1, "Mitos harus diisi"),
+    fakta: z.string().min(1, "Fakta harus diisi"),
+  }),
+  doctorSign: z.object({
+    content: z.string().min(1, "Content harus diisi"),
+  }),
+});
 
-type Introduction = Prisma.IntroductionGetPayload<{
-  select: {
-    content: true;
-  };
-}>;
+const defaultForm = {
+  title: "",
+  content: "",
+  introduction: {
+    content: "",
+  },
+  symptom: {
+    title: "",
+    content: "",
+  },
+  prevention: {
+    title: "",
+    content: "",
+  },
+  firstAid: {
+    title: "",
+    content: "",
+  },
+  mythVsFact: {
+    title: "",
+    mitos: "",
+    fakta: "",
+  },
+  doctorSign: {
+    content: "",
+  },
+};
 
-const introduction = proxy({
+const artikelKesehatanState = proxy({
   create: {
-    form: {} as Introduction,
+    form: { ...defaultForm },
     loading: false,
-    async create() {
-      const cek = templateIntroduction.safeParse(introduction.create.form);
+    async submit() {
+      const cek = templateForm.safeParse(this.form);
       if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
+        const errMsg = cek.error.issues
+          .map((v) => `${v.path.join(".")}: ${v.message}`)
+          .join("\n");
+        toast.error(errMsg);
+        return null;
       }
+
       try {
-        introduction.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.introduction["create"].post(introduction.create.form);
+        this.loading = true;
+        const payload = { ...this.form };
+
+        const res = await (ApiFetch.api.kesehatan as any)[
+          "artikel-kesehatan"
+        ].create.post(payload);
+
         if (res.status === 200) {
-          introduction.findMany.load();
-          return toast.success("success create");
+          toast.success("Berhasil menambahkan artikel kesehatan");
+          this.resetForm();
+          await artikelKesehatanState.findMany.load();
+          return res.data;
         }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
+      } catch (err: any) {
+        const msg = err?.message || "Terjadi kesalahan saat mengirim data";
+        toast.error(msg);
+        console.error("SUBMIT ERROR:", err);
+        return null;
       } finally {
-        introduction.create.loading = false;
+        this.loading = false;
       }
     },
-  },
-  findMany: {
-      data: null as
-      | Prisma.IntroductionGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-      async load() {
-        const res = await ApiFetch.api.kesehatan.introduction["find-many"].get();
-        if (res.status === 200) {
-          introduction.findMany.data = res.data?.data ?? [];
-        }
-      }
-  }
-});
-/* ======================================================================= */
-
-/* symptom */
-const templateSymptom = z.object({
-  title: z.string().min(3, "Title minimal 3 karakter"),
-  content: z.string().min(3, "Content minimal 3 karakter"),
-})
-
-type Symptom = Prisma.SymptomGetPayload<{
-  select: {
-    title: true;
-    content: true;
-  };
-}>;
-
-const symptom = proxy({
-  create: {
-    form: {} as Symptom,
-    loading: false,
-    async create() {
-      const cek = templateSymptom.safeParse(symptom.create.form);
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
-      try {
-        symptom.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.symptom["create"].post(symptom.create.form);
-        if (res.status === 200) {
-          symptom.findMany.load();
-          return toast.success("success create");
-        }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
-      } finally {
-        symptom.create.loading = false;
-      }
+    resetForm() {
+      this.form = { ...defaultForm };
     },
   },
   findMany: {
     data: null as
-      | Prisma.SymptomGetPayload<{ omit: { isActive: true } }>[]
+      | Prisma.ArtikelKesehatanGetPayload<{
+          include: {
+            introduction: true;
+            symptom: true;
+            prevention: true;
+            firstaid: true;
+            mythvsfact: true;
+            doctorsign: true;
+          };
+        }>[]
       | null,
+    loading: false,
     async load() {
-      const res = await ApiFetch.api.kesehatan.symptom["find-many"].get();
-      if (res.status === 200) {
-        symptom.findMany.data = res.data?.data ?? [];
+      try {
+        this.loading = true;
+        const res = await (ApiFetch.api.kesehatan as any)["artikel-kesehatan"][
+          "find-many"
+        ].get();
+
+        if (res.status === 200) {
+          this.data = res.data?.data ?? [];
+        } else {
+          toast.error("Gagal memuat data artikel kesehatan");
+        }
+
+        return res;
+      } catch (err) {
+        toast.error("Terjadi error saat load data");
+        console.error("LOAD ERROR:", err);
+        throw err;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.ArtikelKesehatanGetPayload<{
+      include: {
+        introduction: true;
+        symptom: true;
+        prevention: true;
+        firstaid: true;
+        mythvsfact: true;
+        doctorsign: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      const res = await fetch(`/api/kesehatan/artikel-kesehatan/${id}`);
+      if (res.ok) {
+        const data = await res.json();
+        artikelKesehatanState.findUnique.data = data.data ?? null;
+      } else {
+        toast.error("Gagal load data artikel kesehatan");
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async load(id: string) {
+      const res = await fetch(`/api/kesehatan/artikel-kesehatan/${id}`);
+      if (!res.ok) {
+        toast.error("Gagal load data artikel kesehatan");
+        return;
+      }
+
+      const result = await res.json();
+      const data = result.data;
+
+      artikelKesehatanState.edit.id = data.id;
+      artikelKesehatanState.edit.form = {
+        title: data.title,
+        content: data.content,
+        introduction: {
+          content: data.introduction.content,
+        },
+        symptom: {
+          title: data.symptom.title,
+          content: data.symptom.content,
+        },
+        prevention: {
+          title: data.prevention.title,
+          content: data.prevention.content,
+        },
+        firstAid: {
+          title: data.firstaid.title,
+          content: data.firstaid.content,
+        },
+        mythVsFact: {
+          title: data.mythvsfact.title,
+          mitos: data.mythvsfact.mitos,
+          fakta: data.mythvsfact.fakta,
+        },
+        doctorSign: {
+          content: data.doctorsign.content,
+        },
+      };
+    },
+    async submit() {
+      const cek = templateForm.safeParse(artikelKesehatanState.edit.form);
+      if (!cek.success) {
+        const errMsg = cek.error.issues
+          .map((v) => `${v.path.join(".")}: ${v.message}`)
+          .join("\n");
+        toast.error(errMsg);
+        return null;
+      }
+
+      try {
+        artikelKesehatanState.edit.loading = true;
+        const payload = {
+          title: artikelKesehatanState.edit.form.title,
+          content: artikelKesehatanState.edit.form.content,
+          introduction: {
+            content: artikelKesehatanState.edit.form.introduction.content,
+          },
+          symptom: {
+            title: artikelKesehatanState.edit.form.symptom.title,
+            content: artikelKesehatanState.edit.form.symptom.content,
+          },
+          prevention: {
+            title: artikelKesehatanState.edit.form.prevention.title,
+            content: artikelKesehatanState.edit.form.prevention.content,
+          },
+          firstAid: {
+            title: artikelKesehatanState.edit.form.firstAid.title,
+            content: artikelKesehatanState.edit.form.firstAid.content,
+          },
+          mythVsFact: {
+            title: artikelKesehatanState.edit.form.mythVsFact.title,
+            mitos: artikelKesehatanState.edit.form.mythVsFact.mitos,
+            fakta: artikelKesehatanState.edit.form.mythVsFact.fakta,
+          },
+          doctorSign: {
+            content: artikelKesehatanState.edit.form.doctorSign.content,
+          },
+        };
+
+        const res = await fetch(
+          `/api/kesehatan/artikel-kesehatan/${artikelKesehatanState.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 artikel kesehatan");
+        await artikelKesehatanState.findMany.load();
+        return true;
+      } catch (err) {
+        toast.error(
+          err instanceof Error ? err.message : "Terjadi kesalahan saat update"
+        );
+        return false;
+      } finally {
+        artikelKesehatanState.edit.loading = false;
+      }
+    },
+    resetForm() {
+      artikelKesehatanState.edit.id = "";
+      artikelKesehatanState.edit.form = { ...defaultForm };
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      try {
+        artikelKesehatanState.delete.loading = true;
+        const res = await fetch(
+          `/api/kesehatan/artikel-kesehatan/del/${id}`,
+          {
+            method: "DELETE",
+          }
+        );
+
+        const result = await res.json();
+        if (res.ok && result.success) {
+          toast.success("Artikel kesehatan berhasil dihapus");
+          await artikelKesehatanState.findMany.load();
+        } else {
+          toast.error(result.message || "Gagal menghapus");
+        }
+      } catch {
+        toast.error("Terjadi kesalahan saat menghapus");
+      } finally {
+        artikelKesehatanState.delete.loading = false;
       }
     },
   },
 });
-/* ======================================================================= */
 
-/* Prevention */
-const templatePrevention = z.object({
-  title: z.string().min(3, "Title minimal 3 karakter"),
-  content: z.string().min(3, "Content minimal 3 karakter"),
-})
-
-type Prevention = Prisma.PreventionGetPayload<{
-  select: {
-    title: true;
-    content: true;
-  };
-}>;
-
-const prevention = proxy({
-  create: {
-    form: {} as Prevention,
-    loading: false,
-    async create() {
-      const cek = templatePrevention.safeParse(prevention.create.form);
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
-      try {
-        prevention.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.prevention["create"].post(prevention.create.form);
-        if (res.status === 200) {
-          prevention.findMany.load();
-          return toast.success("success create");
-        }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
-      } finally {
-        prevention.create.loading = false;
-      }
-    },
-  },
-  findMany: {
-    data: null as
-      | Prisma.PreventionGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.prevention["find-many"].get();
-      if (res.status === 200) {
-        prevention.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-});
-/* ======================================================================= */
-
-/* First Aid */
-const templateFirstAid = z.object({
-  title: z.string().min(3, "Title minimal 3 karakter"),
-  content: z.string().min(3, "Content minimal 3 karakter"),
-})
-
-type FirstAid = Prisma.FirstAidGetPayload<{
-  select: {
-    title: true;
-    content: true;
-  };
-}>;
-
-const firstAid = proxy({
-    create: {
-        form: {} as FirstAid,
-        loading: false,
-        async create() {
-            const cek = templateFirstAid.safeParse(firstAid.create.form);
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-            try {
-                firstAid.create.loading = true;
-                const res = await ApiFetch.api.kesehatan.firstaid["create"].post(firstAid.create.form);
-                if (res.status === 200) {
-                    firstAid.findMany.load();
-                    return toast.success("success create");
-                }
-                return toast.error("failed create");
-            } catch (error) {
-                console.log((error as Error).message);
-            } finally {
-                firstAid.create.loading = false;
-            }
-        },
-    },
-    findMany: {
-        data: null as
-            | Prisma.FirstAidGetPayload<{ omit: { isActive: true } }>[]
-            | null,
-        async load() {
-            const res = await ApiFetch.api.kesehatan.firstaid["find-many"].get();
-            if (res.status === 200) {
-                firstAid.findMany.data = res.data?.data ?? [];
-            }
-        },
-    },
-})
-/* ======================================================================= */
-
-/* Myth vs Fact */
-const templateMythFact = z.object({
-  title: z.string().min(3, "Title minimal 3 karakter"),
-  mitos: z.string().min(3, "Mitos minimal 3 karakter"),
-  fakta: z.string().min(3, "Fakta minimal 3 karakter"),
-})
-
-type MythFact = Prisma.MythVsFactGetPayload<{
-  select: {
-    title: true;
-    mitos: true;
-    fakta: true;
-  };
-}>;
-
-const mythFact = proxy({
-  create: {
-    form: {} as MythFact,
-    loading: false,
-    async create() {
-      const cek = templateMythFact.safeParse(mythFact.create.form);
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
-      try {
-        mythFact.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.mythvsfact["create"].post(mythFact.create.form);
-        if (res.status === 200) {
-          mythFact.findMany.load();
-          return toast.success("success create");
-        }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
-      } finally {
-        mythFact.create.loading = false;
-      }
-    },
-  },
-  findMany: {
-    data: null as
-      | Prisma.MythVsFactGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.mythvsfact["find-many"].get();
-      if (res.status === 200) {
-        mythFact.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-})
-/* ======================================================================= */
-
-/* Doctor Sign */
-const templateDoctorSign = z.object({
-  content: z.string().min(3, "Content minimal 3 karakter"),
-})
-
-type DoctorSign = Prisma.DoctorSignGetPayload<{
-    select: {
-        content: true
-    }
-}>
-
-const doctorSign = proxy({
-    create: {
-        form: {} as DoctorSign,
-        loading: false,
-        async create() {
-            const cek = templateDoctorSign.safeParse(doctorSign.create.form);
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-            try {
-                doctorSign.create.loading = true;
-                const res = await ApiFetch.api.kesehatan.doctor_sign["create"].post(doctorSign.create.form);
-                if (res.status === 200) {
-                    doctorSign.findMany.load();
-                    return toast.success("success create");
-                }
-                return toast.error("failed create");
-            } catch (error) {
-                console.log((error as Error).message);
-            } finally {
-                doctorSign.create.loading = false;
-            }
-        },
-    },
-    findMany: {
-        data: null as
-            | Prisma.DoctorSignGetPayload<{ omit: { isActive: true } }>[]
-            | null,
-        async load() {
-            const res = await ApiFetch.api.kesehatan.doctor_sign["find-many"].get();
-            if (res.status === 200) {
-                doctorSign.findMany.data = res.data?.data ?? [];
-            }
-        },
-    },
-})
-
-/* ======================================================================= */
-
-const stateArtikelKesehatan = proxy({
-  introduction,
-  symptom,
-  prevention,
-  firstAid,
-  mythFact,
-  doctorSign
-})
-
-export default stateArtikelKesehatan
+export default artikelKesehatanState;

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

@@ -39,15 +39,15 @@ const grafikkepuasan = proxy({
         const res = await ApiFetch.api.kesehatan.grafikkepuasan["create"].post(grafikkepuasan.create.form);
     
         if (res.status === 200) {
-          const uuid = res.data?.data?.uuid;
-          if (uuid) {
+          const id = res.data?.data?.id;
+          if (id) {
             toast.success("Success create");
             grafikkepuasan.create.form = {
               label: "",
               jumlah: "",
             };
             grafikkepuasan.findMany.load();
-            return uuid;
+            return id;
           }
         }
         toast.error("failed create");
@@ -77,9 +77,9 @@ const grafikkepuasan = proxy({
     data: null as Prisma.GrafikKepuasanGetPayload<{
        omit: { isActive: true } 
       }> | null,
-    async load(uuid: string) {
+    async load(id: string) {
       try {
-        const res = await fetch(`/api/kesehatan/grafikkepuasan/${uuid}`);
+        const res = await fetch(`/api/kesehatan/grafikkepuasan/${id}`);
         if (res.ok) {
           const data = await res.json();
           grafikkepuasan.findUnique.data = data.data ?? null;
@@ -94,14 +94,14 @@ const grafikkepuasan = proxy({
     },
   },
   update: {
-    uuid: "",
+    id: "",
     form: {...defaultForm},
     loading: false,
     async byId() {
     },
   async submit() {
-    const uuid = this.uuid;
-    if (!uuid) {
+    const id = this.id;
+    if (!id) {
       toast.warn("ID tidak valid");
       return null;
     }
@@ -114,7 +114,7 @@ const grafikkepuasan = proxy({
     }
     try {
       this.loading = true;
-      const response = await fetch(`/api/kesehatan/grafikkepuasan/${uuid}`, {
+      const response = await fetch(`/api/kesehatan/grafikkepuasan/${id}`, {
         method: "PUT",
         headers: {
           "Content-Type": "application/json",
@@ -143,14 +143,14 @@ const grafikkepuasan = proxy({
 },
 delete: {
   loading: false,
-  async byId(uuid: string) {
-    if (!uuid) {
+  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/${uuid}`, {
+      const response = await fetch(`/api/kesehatan/grafikkepuasan/del/${id}`, {
         method: "DELETE",
         headers: {
           "Content-Type": "application/json",

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

@@ -45,12 +45,12 @@ const persentasekelahiran = proxy({
         );
 
         if (res.status === 200) {
-          const uuid = res.data?.data?.uuid;
-          if (uuid) {
+          const id = res.data?.data?.id;
+          if (id) {
             toast.success("Success create");
             persentasekelahiran.create.form = { ...defaultForm };
             persentasekelahiran.findMany.load();
-            return uuid;
+            return id;
           }
         }
         toast.error("failed create");
@@ -80,9 +80,9 @@ const persentasekelahiran = proxy({
     data: null as Prisma.DataKematian_KelahiranGetPayload<{
       omit: { isActive: true };
     }> | null,
-    async load(uuid: string) {
+    async load(id: string) {
       try {
-        const res = await fetch(`/api/kesehatan/persentasekelahiran/${uuid}`);
+        const res = await fetch(`/api/kesehatan/persentasekelahiran/${id}`);
         if (res.ok) {
           const data = await res.json();
           persentasekelahiran.findUnique.data = data.data ?? null;
@@ -98,13 +98,13 @@ const persentasekelahiran = proxy({
   },
 
 update: {
-  uuid: "",
+  id: "",
   form: { ...defaultForm },
   loading: false,
   async submit() {
-    const uuid = this.uuid;
-    if (!uuid) {
-      toast.warn("UUID tidak valid");
+    const id = this.id;
+    if (!id) {
+      toast.warn("ID tidak valid");
       return null;
     }
 
@@ -126,7 +126,7 @@ update: {
 
     try {
       this.loading = true;
-      const res = await fetch(`/api/kesehatan/persentasekelahiran/${uuid}`, {
+      const res = await fetch(`/api/kesehatan/persentasekelahiran/${id}`, {
         method: "PUT",
         headers: {
           "Content-Type": "application/json",
@@ -156,13 +156,13 @@ update: {
 
   delete: {
     loading: false,
-    async byId(uuid: string) {
-      if (!uuid) return toast.warn("UUID tidak valid");
+    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/${uuid}`, {
+        const response = await fetch(`/api/kesehatan/persentasekelahiran/del/${id}`, {
           method: "DELETE",
           headers: {
             "Content-Type": "application/json",
@@ -177,7 +177,7 @@ update: {
         } else {
           toast.error(result?.message || "Gagal menghapus persentase kelahiran");
         }
-      } catch (error) {
+      } catch (error) { 
         console.error("Gagal delete:", error);
         toast.error("Terjadi kesalahan saat menghapus persentase kelahiran");
       } finally {

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

@@ -0,0 +1,374 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } 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';
+
+interface ArtikelKesehatanFormBase {
+  title: string;
+  content: string;
+  introduction: {
+    content: string;
+  };
+  symptom: {
+    title: string;
+    content: string;
+  };
+  prevention: {
+    title: string;
+    content: string;
+  };
+  firstAid: {
+    title: string;
+    content: string;
+  };
+  mythVsFact: {
+    title: string;
+    mitos: string;
+    fakta: string;
+  };
+  doctorSign: {
+    content: string;
+  };
+}
+
+function EditArtikelKesehatan() {
+  const stateArtikelKesehatan = useProxy(artikelKesehatanState);
+  const router = useRouter();
+  const params = useParams();
+
+  const [formData, setFormData] = useState<ArtikelKesehatanFormBase>({
+    title: stateArtikelKesehatan.edit.form.title || '',
+    content: stateArtikelKesehatan.edit.form.content || '',
+    introduction: {
+      content: stateArtikelKesehatan.edit.form.introduction?.content || '',
+    },
+    symptom: {
+      title: stateArtikelKesehatan.edit.form.symptom?.title || '',
+      content: stateArtikelKesehatan.edit.form.symptom?.content || '',
+    },
+    prevention: {
+      title: stateArtikelKesehatan.edit.form.prevention?.title || '',
+      content: stateArtikelKesehatan.edit.form.prevention?.content || '',
+    },
+    firstAid: {
+      title: stateArtikelKesehatan.edit.form.firstAid?.title || '',
+      content: stateArtikelKesehatan.edit.form.firstAid?.content || '',
+    },
+    mythVsFact: {
+      title: stateArtikelKesehatan.edit.form.mythVsFact?.title || '',
+      mitos: stateArtikelKesehatan.edit.form.mythVsFact?.mitos || '',
+      fakta: stateArtikelKesehatan.edit.form.mythVsFact?.fakta || '',
+    },
+    doctorSign: {
+      content: stateArtikelKesehatan.edit.form.doctorSign?.content || '',
+    },
+  });
+
+  useEffect(() => {
+    const loadArtikelKesehatan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        await stateArtikelKesehatan.edit.load(id);
+        const { form } = stateArtikelKesehatan.edit;
+        if (form) {
+          setFormData({
+            title: form.title,
+            content: form.content,
+            introduction: {
+              content: form.introduction?.content || '',
+            },
+            symptom: {
+              title: form.symptom?.title || '',
+              content: form.symptom?.content || '',
+            },
+            prevention: {
+              title: form.prevention?.title || '',
+              content: form.prevention?.content || '',
+            },
+            firstAid: {
+              title: form.firstAid?.title || '',
+              content: form.firstAid?.content || '',
+            },
+            mythVsFact: {
+              title: form.mythVsFact?.title || '',
+              mitos: form.mythVsFact?.mitos || '',
+              fakta: form.mythVsFact?.fakta || '',
+            },
+            doctorSign: {
+              content: form.doctorSign?.content || '',
+            },
+          });
+        }
+      } catch (error) {
+        console.error("Error loading artikel kesehatan:", error);
+        toast.error("Gagal memuat data artikel kesehatan");
+      }
+    };
+    loadArtikelKesehatan();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      stateArtikelKesehatan.edit.form = {
+        ...stateArtikelKesehatan.edit.form,
+        title: formData.title,
+        content: formData.content,
+        introduction: {
+          content: formData.introduction.content,
+        },
+        symptom: {
+          title: formData.symptom.title,
+          content: formData.symptom.content,
+        },
+        prevention: {
+          title: formData.prevention.title,
+          content: formData.prevention.content,
+        },
+        firstAid: {
+          title: formData.firstAid.title,
+          content: formData.firstAid.content,
+        },
+        mythVsFact: {
+          title: formData.mythVsFact.title,
+          mitos: formData.mythVsFact.mitos,
+          fakta: formData.mythVsFact.fakta,
+        },
+        doctorSign: {
+          content: formData.doctorSign.content,
+        },
+      };
+      const success = await stateArtikelKesehatan.edit.submit();
+      if (success) {
+        toast.success("Artikel kesehatan berhasil diperbarui!");
+        router.push("/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan");
+      }
+    } catch (error) {
+      console.error("Error updating artikel kesehatan:", error);
+      toast.error(error instanceof Error ? error.message : "Gagal memperbarui data artikel kesehatan");
+    }
+  };
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant="subtle" color="blue">
+          <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}>Edit Artikel Kesehatan</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+            value={formData.title}
+            onChange={(e) => {
+              setFormData(prev => ({
+                ...prev,
+                title: e.target.value
+              }));
+            }}
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+            value={formData.content}
+            onChange={(e) => {
+              setFormData(prev => ({
+                ...prev,
+                content: e.target.value
+              }));
+            }}
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Pendahuluan</Text>}
+            placeholder="masukkan pendahuluan"
+            value={formData.introduction.content}
+            onChange={(e) => {
+              setFormData(prev => ({
+                ...prev,
+                introduction: {
+                  ...prev.introduction,
+                  content: e.target.value
+                }
+              }));
+            }}
+          />
+          <Box>
+            <Text fz="md" fw="bold">Gejala</Text>
+            <Stack gap="xs">
+              <TextInput
+                label={<Text fz="sm" fw="bold">Judul</Text>}
+                placeholder="masukkan judul gejala penyakit"
+                value={formData.symptom.title}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    symptom: {
+                      ...prev.symptom,
+                      title: e.target.value
+                    }
+                  }));
+                }}
+              />
+              <Box>
+                <Text fz="sm" fw="bold">Deskripsi Gejala</Text>
+                <EditEditor
+                  value={formData.symptom.content}
+                  onChange={(e) => {
+                    setFormData(prev => ({
+                      ...prev,
+                      symptom: {
+                        ...prev.symptom,
+                        content: e
+                      }
+                    }));
+                  }}
+                />
+              </Box>
+            </Stack>
+          </Box>
+
+          <Box>
+            <Text fz="md" fw="bold">Pencegahan</Text>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="masukkan judul"
+              value={formData.prevention.title}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  prevention: {
+                    ...prev.prevention,
+                    title: e.target.value
+                  }
+                }));
+              }}
+            />
+            <EditEditor
+              value={formData.prevention.content}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  prevention: {
+                    ...prev.prevention,
+                    content: e
+                  }
+                }));
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Pertolongan Pertama</Text>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="masukkan judul"
+              value={formData.firstAid.title}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  firstAid: {
+                    ...prev.firstAid,
+                    title: e.target.value
+                  }
+                }));
+              }}
+            />
+            <EditEditor
+              value={formData.firstAid.content}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  firstAid: {
+                    ...prev.firstAid,
+                    content: e
+                  }
+                }));
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Mitos dan Fakta</Text>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="masukkan judul"
+              value={formData.mythVsFact.title}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  mythVsFact: {
+                    ...prev.mythVsFact,
+                    title: e.target.value
+                  }
+                }));
+              }}
+            />
+            <Box>
+              <Text>
+                Mitos
+              </Text>
+              <EditEditor
+                value={formData.mythVsFact.mitos}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    mythVsFact: {
+                      ...prev.mythVsFact,
+                      mitos: e
+                    }
+                  }));
+                }}
+              />
+            </Box>
+            <Box>
+              <Text>
+                Fakta
+              </Text>
+              <EditEditor
+                value={formData.mythVsFact.fakta}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    mythVsFact: {
+                      ...prev.mythVsFact,
+                      fakta: e
+                    }
+                  }));
+                }}
+              />
+            </Box>
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Kapan Harus Ke Dokter</Text>
+            <EditEditor
+              value={formData.doctorSign.content}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  doctorSign: {
+                    ...prev.doctorSign,
+                    content: e
+                  }
+                }));
+              }}
+            />
+          </Box>
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditArtikelKesehatan;

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

@@ -0,0 +1,143 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import colors from '@/con/colors';
+import { Box, Button, Flex, 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';
+
+function DetailArtikelKesehatan() {
+  const params = useParams()
+  const router = useRouter();
+  const stateArtikelKesehatan = useProxy(artikelKesehatanState)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useShallowEffect(() => {
+    stateArtikelKesehatan.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateArtikelKesehatan.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan")
+    }
+  }
+
+  if (!stateArtikelKesehatan.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 Artikel Kesehatan</Text>
+          {stateArtikelKesehatan.findUnique.data ? (
+            <Paper bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Judul</Text>
+                  <Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.title}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.content }} />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Pendahuluan</Text>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.introduction.content }} />
+                </Box>
+                <Box>
+                  <Stack gap={"xs"}>
+                    <Text fz={"lg"} fw={"bold"}>Gejala</Text>
+                    <Text fz={"md"} fw={"bold"}>Judul Gejala</Text>
+                    <Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.symptom.title}</Text>
+                    <Text fz={"md"} fw={"bold"}>Deskripsi Gejala</Text>
+                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.symptom.content }} />
+                  </Stack>
+                </Box>
+                <Box>
+                  <Stack gap={"xs"}>
+                    <Text fz={"lg"} fw={"bold"}>Pencegahan</Text>
+                    <Text fz={"md"} fw={"bold"}>Judul Pencegahan</Text>
+                    <Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.prevention.title}</Text>
+                    <Text fz={"md"} fw={"bold"}>Deskripsi Pencegahan</Text>
+                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.prevention.content }} />
+                  </Stack>
+                </Box>
+                <Box>
+                  <Stack gap={"xs"}>
+                    <Text fz={"lg"} fw={"bold"}>Pertolongan Pertama</Text>
+                    <Text fz={"md"} fw={"bold"}>Judul Pertolongan Pertama</Text>
+                    <Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.firstaid.title}</Text>
+                    <Text fz={"md"} fw={"bold"}>Deskripsi Pertolongan Pertama</Text>
+                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.firstaid.content }} />
+                  </Stack>
+                </Box>
+                <Box>
+                  <Stack gap={"xs"}>
+                    <Text fz={"lg"} fw={"bold"}>Mitos dan Fakta</Text>
+                    <Text fz={"md"} fw={"bold"}>Judul Mitos dan Fakta</Text>
+                    <Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.mythvsfact.title}</Text>
+                    <Text fz={"md"} fw={"bold"}>Deskripsi Mitos</Text>
+                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.mythvsfact.mitos }} />
+                    <Text fz={"md"} fw={"bold"}>Deskripsi Fakta</Text>
+                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.mythvsfact.fakta }} />
+                  </Stack>
+                </Box>
+                <Box>
+                  <Stack gap={"xs"}>
+                    <Text fz={"lg"} fw={"bold"}>Kapan Harus ke Dokter</Text>
+                    <Text fz={"md"} fw={"bold"}>Deskripsi Kapan Harus ke Dokter</Text>
+                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.doctorsign.content }} />
+                  </Stack>
+                </Box>
+                <Box>
+                  <Flex gap={"xs"}>
+                    <Button color="red" onClick={() => {
+                      if (stateArtikelKesehatan.findUnique.data) {
+                        setSelectedId(stateArtikelKesehatan.findUnique.data.id)
+                        setModalHapus(true)
+                      }
+                    }}>
+                      <IconX size={20} />
+                    </Button>
+                    <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/${stateArtikelKesehatan.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 artikel kesehatan ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailArtikelKesehatan;

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

@@ -0,0 +1,203 @@
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+function CreateArtikelKesehatan() {
+  const stateArtikelKesehatan = useProxy(artikelKesehatanState)
+  const router = useRouter();
+
+
+  const resetForm = () => {
+    stateArtikelKesehatan.create.form = {
+      title: "",
+      content: "",
+      introduction: {
+        content: "",
+      },
+      symptom: {
+        title: "",
+        content: "",
+      },
+      prevention: {
+        title: "",
+        content: "",
+      },
+      firstAid: {
+        title: "",
+        content: "",
+      },
+      mythVsFact: {
+        title: "",
+        mitos: "",
+        fakta: "",
+      },
+      doctorSign: {
+        content: ""
+      }
+    };
+  };
+
+
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await stateArtikelKesehatan.create.submit();
+
+    toast.success("Data berhasil disimpan");
+    resetForm();
+    // After successful submission, redirect to the list page
+    router.push('/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan');
+  }
+
+  return (
+    <Box component="form" onSubmit={handleSubmit}>
+      <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 Artikel Kesehatan</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+            value={stateArtikelKesehatan.create.form.title}
+            onChange={(e) => {
+              stateArtikelKesehatan.create.form.title = e.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+            value={stateArtikelKesehatan.create.form.content}
+            onChange={(e) => {
+              stateArtikelKesehatan.create.form.content = e.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Pendahuluan</Text>}
+            placeholder="masukkan pendahuluan"
+            value={stateArtikelKesehatan.create.form.introduction.content}
+            onChange={(e) => {
+              stateArtikelKesehatan.create.form.introduction.content = e.target.value;
+            }}
+          />
+          <Box>
+          <Text fz="md" fw="bold">Gejala</Text>
+            <Stack gap="xs">
+              <TextInput
+                label={<Text fz="sm" fw="bold">Judul</Text>}
+                placeholder="masukkan judul gejala penyakit"
+                value={stateArtikelKesehatan.create.form.symptom.title}
+                onChange={(e) => {
+                  stateArtikelKesehatan.create.form.symptom.title = e.target.value;
+                }}
+              />
+              <Box>
+                <Text fz="sm" fw="bold">Deskripsi Gejala</Text>
+                <CreateEditor
+                  value={stateArtikelKesehatan.create.form.symptom.content}
+                  onChange={(e) => {
+                    stateArtikelKesehatan.create.form.symptom.content = e;
+                  }}
+                />
+              </Box>
+            </Stack>
+          </Box>
+
+          <Box>
+            <Text fz="md" fw="bold">Pencegahan</Text>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="masukkan judul"
+              value={stateArtikelKesehatan.create.form.prevention.title}
+              onChange={(e) => {
+                stateArtikelKesehatan.create.form.prevention.title = e.target.value;
+              }}
+            />
+            <CreateEditor
+              value={stateArtikelKesehatan.create.form.prevention.content}
+              onChange={(e) => {
+                stateArtikelKesehatan.create.form.prevention.content = e;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Pertolongan Pertama</Text>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="masukkan judul"
+              value={stateArtikelKesehatan.create.form.firstAid.title}
+              onChange={(e) => {
+                stateArtikelKesehatan.create.form.firstAid.title = e.target.value;
+              }}
+            />
+            <CreateEditor
+              value={stateArtikelKesehatan.create.form.firstAid.content}
+              onChange={(e) => {
+                stateArtikelKesehatan.create.form.firstAid.content = e;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Mitos dan Fakta</Text>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="masukkan judul"
+              value={stateArtikelKesehatan.create.form.mythVsFact.title}
+              onChange={(e) => {
+                stateArtikelKesehatan.create.form.mythVsFact.title = e.target.value;
+              }}
+            />
+            <Box>
+              <Text>
+                Mitos
+              </Text>
+              <CreateEditor
+                value={stateArtikelKesehatan.create.form.mythVsFact.mitos}
+                onChange={(e) => {
+                  stateArtikelKesehatan.create.form.mythVsFact.mitos = e;
+                }}
+              />
+            </Box>
+            <Box>
+              <Text>
+                Fakta
+              </Text>
+              <CreateEditor
+                value={stateArtikelKesehatan.create.form.mythVsFact.fakta}
+                onChange={(e) => {
+                  stateArtikelKesehatan.create.form.mythVsFact.fakta = e;
+                }}
+              />
+            </Box>
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Kapan Harus Ke Dokter</Text>
+            <CreateEditor
+              value={stateArtikelKesehatan.create.form.doctorSign.content}
+              onChange={(e) => {
+                stateArtikelKesehatan.create.form.doctorSign.content = e;
+              }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateArtikelKesehatan;

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

@@ -1,25 +0,0 @@
-'use client'
-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)
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Text fw={"bold"}>Kapan Harus ke Dokter</Text>
-        <KesehatanEditor
-          showSubmit={false}
-          onChange={(val) => {
-            doctorSign.create.form.content = val
-          }}
-        />
-      </Paper>
-    </Box>
-  );
-}
-
-export default DoctorSignUI;

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

@@ -1,33 +0,0 @@
-'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';
-
-function FirstAidUI() {
-  const firstAidState = useProxy(stateArtikelKesehatan.firstAid)
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <TextInput
-            label={<Text fw={"bold"}>Judul Pertolongan Pertama</Text>}
-            placeholder="Masukkan judul"
-            onChange={(val) => {
-              firstAidState.create.form.title = val.target.value
-            }}
-          />
-          <KesehatanEditor
-            showSubmit={false}
-            onChange={(val) => {
-              firstAidState.create.form.content = val
-            }}
-          />
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default FirstAidUI;

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

@@ -1,28 +0,0 @@
-'use client'
-import { Box, Paper, Stack, Text } from '@mantine/core';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-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)
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Text fw={"bold"}>Pendahuluan</Text>
-          <KesehatanEditor
-            showSubmit={false}
-            onChange={(val) => {
-              introduction.create.form.content = val;
-            }}
-          />
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default IntoductionUI;

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

@@ -1,40 +0,0 @@
-'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';
-
-function MythFactUI() {
-  const mythFact = useProxy(stateArtikelKesehatan.mythFact)
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <TextInput
-            label={<Text fw={"bold"}>Judul Pertolongan Pertama Penyakit</Text>}
-            placeholder="Masukkan judul"
-            onChange={(val) => {
-              mythFact.create.form.title = val.target.value
-            }}
-          />
-          <TextInput
-            label={<Text fw={"bold"}>Mitos</Text>}
-            placeholder="Masukkan mitos"
-            onChange={(val) => {
-              mythFact.create.form.mitos = val.target.value
-            }}
-          />
-          <TextInput
-            label={<Text fw={"bold"}>Fakta</Text>}
-            placeholder="Masukkan fakta"
-            onChange={(val) => {
-              mythFact.create.form.fakta = val.target.value
-            }}
-          />
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default MythFactUI;

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

@@ -1,172 +1,79 @@
 'use client'
-import { Box, Button, Center, Group, Paper, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import IntoductionUI from './introduction/page';
-import SymptomUI from './symptom/page';
-import PreventionUI from './prevention/page';
-import MythFactUI from './mythVsfact/page';
-import DoctorSignUI from './doctor_sign/page';
-import { useProxy } from 'valtio/utils';
-import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import FirstAidUI from './first_aid/page';
-import { useShallowEffect } from '@mantine/hooks';
 import colors from '@/con/colors';
+import { Box, Button, 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 { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import artikelKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+
 
 function ArtikelKesehatan() {
-  const state = useProxy(stateArtikelKesehatan)
-  const submitAllForms = () => {
-    if (state.introduction.create.form.content) {
-      state.introduction.create.create()
-    }
-    if (state.symptom.create.form.title && state.symptom.create.form.content) {
-      state.symptom.create.create()
-    }
-    if (state.prevention.create.form.title && state.prevention.create.form.content) {
-      state.prevention.create.create()
-    }
-    if (state.firstAid.create.form.title && state.firstAid.create.form.content) {
-      state.firstAid.create.create()
-    }
-    if (state.mythFact.create.form.title && state.mythFact.create.form.mitos && state.mythFact.create.form.fakta) {
-      state.mythFact.create.create()
-    }
-    if (state.doctorSign.create.form.content) {
-      state.doctorSign.create.create()
-    }
-  }
   return (
-    <Stack py={10}>
-      <SimpleGrid cols={{
-        base: 1, md: 2
-      }}>
-        <Box >
-          <Stack gap={"xs"}>
-            <Title order={4}>Artikel Kesehatan</Title>
-            <IntoductionUI />
-            <SymptomUI />
-            <PreventionUI />
-            <FirstAidUI />
-            <MythFactUI />
-            <DoctorSignUI />
-            <Group>
-              <Button bg={colors['blue-button']} mt={10} onClick={submitAllForms}>Submit</Button>
-            </Group>
-          </Stack>
-        </Box>
-
-        <Box>
-          <Stack gap={"xs"}>
-            <Title order={4}>Data Artikel Kesehatan</Title>
-            <AllList />
-          </Stack>
-        </Box>
-      </SimpleGrid>
-    </Stack>
+    <Box>
+      <HeaderSearch
+        title='Artikel Kesehatan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListArtikelKesehatan/>
+    </Box>
   );
 }
 
-function AllList() {
-  const listState = useProxy(stateArtikelKesehatan)
+function ListArtikelKesehatan() {
+  const stateArtikelKesehatan = useProxy(artikelKesehatanState)
+  const router = useRouter();
+
   useShallowEffect(() => {
-    listState.introduction.findMany.load();
-    listState.symptom.findMany.load();
-    listState.prevention.findMany.load();
-    listState.firstAid.findMany.load();
-    listState.mythFact.findMany.load();
-    listState.doctorSign.findMany.load();
+    stateArtikelKesehatan.findMany.load()
   }, [])
 
-  if (!listState.introduction.findMany.data
-    || !listState.symptom.findMany.data
-    || !listState.prevention.findMany.data
-    || !listState.firstAid.findMany.data
-    || !listState.mythFact.findMany.data
-    || !listState.doctorSign.findMany.data
-  ) return <Stack>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
-  return <Stack gap={"xs"}>
-    {/* Introduction */}
+  if (!stateArtikelKesehatan.findMany.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500}/>
+      </Box>
+    )
+  }
+  return (
+    <Box py={10}>
     <Paper bg={colors['white-1']} p={'md'}>
-      <Title order={4}>Pendahuluan</Title>
-      {listState.introduction.findMany.data?.map((item) => (
-        <Box key={item.id}>
-          <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-        </Box>
-      ))}
-    </Paper>
-    {/* Symptom */}
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Title order={4}>Gejala Penyakit</Title>
-      {listState.symptom.findMany.data?.map((item) => (
-        <Box key={item.id}>
-          <Title order={4}>{item.title}</Title>
-          <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-        </Box>
-      ))}
-    </Paper>
-    {/* Prevention */}
-    <Paper bg={colors['white-1']} p={'md'}>
-    <Title order={4}>Pencegahan Penyakit</Title>
-      {listState.prevention.findMany.data?.map((item) => (
-        <Box key={item.id}>
-          <Title order={4}>{item.title}</Title>
-          <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-        </Box>
-      ))}
-    </Paper>
-    {/* First Aid */}
-    <Paper bg={colors['white-1']} p={'md'}>
-    <Title order={4}>Pertolongan Pertama</Title>
-      {listState.firstAid.findMany.data?.map((item) => (
-        <Box key={item.id}>
-          <Title order={4}>{item.title}</Title>
-          <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-        </Box>
-      ))}
-    </Paper>
-    {/* Myth Fact */}
-    <Paper bg={colors['white-1']} p={'md'}>
-    <Title order={4}>Mitos vs Fakta</Title>
-      {listState.mythFact.findMany.data?.map((item) => (
-        <Box key={item.id}>
-          <Title order={4}>{item.title}</Title>
-          <Table
-            striped
-            highlightOnHover
-            withTableBorder
-            withColumnBorders
-            bg={colors['white-1']}
-          >
-            <TableThead >
-              <TableTr >
-                <TableTh >
-                  <Center>Mitos</Center>
-                </TableTh>
-                <TableTh >
-                  <Center>Fakta</Center>
-                </TableTh>
+      <Stack>
+        <JudulList
+          title='List Artikel Kesehatan'
+          href='/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/create'
+        />
+        <Box style={{ overflowX: "auto" }}>
+          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+            <TableThead>
+              <TableTr>
+                <TableTh>Judul</TableTh>
+                <TableTh>Content</TableTh>
+                <TableTh>Detail</TableTh>
               </TableTr>
             </TableThead>
-            <TableTbody >
-              <TableTr>
-                <TableTd ta="center">{item.mitos}</TableTd>
-                <TableTd ta="center">{item.fakta}</TableTd>
-              </TableTr>
+            <TableTbody>
+              {stateArtikelKesehatan.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.title}</TableTd>
+                  <TableTd>{item.content}</TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/${item.id}`)}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
             </TableTbody>
           </Table>
         </Box>
-      ))}
+      </Stack>
     </Paper>
-    {/* Doctor Sign */}
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Title order={4}>Kapan Harus Ke Dokter?</Title>
-      {listState.doctorSign.findMany.data?.map((item) => (
-        <Box key={item.id}>
-          <Text dangerouslySetInnerHTML={{ __html: item.content }} />
-        </Box>
-      ))}
-    </Paper>
-  </Stack>
+  </Box>
+  )
 }
 
-export default ArtikelKesehatan;
+export default ArtikelKesehatan;

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

@@ -1,34 +0,0 @@
-'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';
-
-function PreventionUI() {
-  const preventionState = useProxy(stateArtikelKesehatan.prevention)
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <TextInput
-            mb={10}
-            label={<Text fw={"bold"}>Judul Pencegahan Penyakit</Text>}
-            placeholder="Masukkan judul"
-            onChange={(val) => {
-              preventionState.create.form.title = val.target.value
-            }}
-          />
-          <KesehatanEditor
-            showSubmit={false}
-            onChange={(val) => {
-              preventionState.create.form.content = val
-            }}
-          />
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default PreventionUI;

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

@@ -1,34 +0,0 @@
-'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';
-
-function SymptomUI() {
-  const symptomState = useProxy(stateArtikelKesehatan.symptom)
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <TextInput
-            mb={10}
-            label={<Text fw={"bold"}>Judul Gejala Penyakit</Text>}
-            placeholder='masukkan judul'
-            onChange={(val) => {
-              symptomState.create.form.title = val.target.value
-            }}
-          />
-          <KesehatanEditor
-            showSubmit={false}
-            onChange={(val) => {
-              symptomState.create.form.content = val
-            }}
-          />
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default SymptomUI;

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

@@ -11,15 +11,15 @@ import { useProxy } from 'valtio/utils';
 
 function EditGrafikHasilKepuasan() {
   const router = useRouter()
-  const params = useParams() as { uuid: string }
+  const params = useParams() as { id: string }
   const stateGrafikKepuasan = useProxy(grafikkepuasan)
 
-  const uuid = params.uuid
+  const id = params.id
 
   // Load data saat komponen mount
   useEffect(() => {
-    if (uuid) {
-      stateGrafikKepuasan.findUnique.load(uuid).then(() => {
+    if (id) {
+      stateGrafikKepuasan.findUnique.load(id).then(() => {
         const data = stateGrafikKepuasan.findUnique.data
         if (data) {
           stateGrafikKepuasan.update.form = {
@@ -29,11 +29,11 @@ function EditGrafikHasilKepuasan() {
         }
       })
     }
-  }, [uuid])
+  }, [id])
 
   const handleSubmit = async () => {
     // Set the ID before submitting
-    stateGrafikKepuasan.update.uuid = uuid;
+    stateGrafikKepuasan.update.id = id;
     await stateGrafikKepuasan.update.submit();
     router.push('/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan')
   }

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

@@ -45,7 +45,7 @@ function GrafikHasilKepuasanMasyarakat() {
     setMounted(true);
     if (stateGrafikKepuasan.findMany.data) {
       setChartData(stateGrafikKepuasan.findMany.data.map((item) => ({
-        id: item.uuid,
+        id: item.id,
         label: item.label,
         jumlah: Number(item.jumlah),
       })));
@@ -82,11 +82,11 @@ function GrafikHasilKepuasanMasyarakat() {
             </TableThead>
             <TableTbody>
               {stateGrafikKepuasan.findMany.data?.map((item) => (
-                <TableTr key={item.uuid}>
+                <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.uuid}`)}>
+                    <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${item.id}`)}>
                       <IconEdit size={20} />
                     </Button>
                   </TableTd>
@@ -95,7 +95,7 @@ function GrafikHasilKepuasanMasyarakat() {
                       color='red'
                       disabled={stateGrafikKepuasan.delete.loading}
                       onClick={() => {
-                        setSelectedId(item.uuid)
+                        setSelectedId(item.id)
                         setModalHapus(true)
                       }}>
                       <IconTrash size={20} />

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

@@ -12,16 +12,16 @@ import { useProxy } from 'valtio/utils';
 
 function EditPersentaseDataKelahiranKematian() {
   const router = useRouter()
-  const params = useParams() as { uuid: string }
+  const params = useParams() as { id: string }
   const statePresentase = useProxy(persentasekelahiran)
 
-  const id = params.uuid
+  const id = params.id
 
   // Load data saat komponen mount
 // Di file page.tsx, ubah useEffect-nya menjadi:
 useEffect(() => {
   if (!id) return;
-  statePresentase.update.uuid = id;
+  statePresentase.update.id = id;
   statePresentase.findUnique.load(id)
     .then(() => {
       const data = statePresentase.findUnique.data;
@@ -43,7 +43,7 @@ useEffect(() => {
 // Di handleSubmit, ubah menjadi:
 const handleSubmit = async () => {
   try {
-    statePresentase.update.uuid = id;
+    statePresentase.update.id = id;
     await statePresentase.update.submit();
     toast.success('Data berhasil diperbarui');
     router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian');

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

@@ -13,7 +13,7 @@ import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
 function PersentaseDataKelahiranKematian() {
   type PDKMGrafik = {
-    uuid: string;
+    id: string;
     tahun: string;
     kematianKasar: number;
     kematianBayi: number;
@@ -47,7 +47,7 @@ function PersentaseDataKelahiranKematian() {
     setMounted(true);
     if (statePersentase.findMany.data) {
       setChartData(statePersentase.findMany.data.map((item) => ({
-        uuid: item.uuid,
+        id: item.id,
         tahun: item.tahun,
         kematianKasar: Number(item.kematianKasar),
         kematianBayi: Number(item.kematianBayi),
@@ -88,13 +88,13 @@ function PersentaseDataKelahiranKematian() {
             </TableThead>
             <TableTbody>
               {statePersentase.findMany.data?.map((item) => (
-                <TableTr key={item.uuid}>
+                <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.uuid}`)}>
+                    <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/${item.id}`)}>
                       <IconEdit size={20} />
                     </Button>
                   </TableTd>
@@ -103,7 +103,7 @@ function PersentaseDataKelahiranKematian() {
                       color='red'
                       disabled={statePersentase.delete.loading}
                       onClick={() => {
-                        setSelectedId(item.uuid)
+                        setSelectedId(item.id)
                         setModalHapus(true)
                       }}>
                       <IconTrash size={20} />

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

@@ -0,0 +1,55 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type ArtikelKesehatanInput = {
+    title: string;
+    content: string;
+    introduction: {content: string};
+    symptom: {title: string; content: string};
+    prevention: {title: string; content: string};
+    firstAid: {title: string; content: string};
+    mythVsFact: {title: string; mitos: string; fakta: string};
+    doctorSign: {content: string};
+}
+
+const artikelKesehatanCreate = async (context: Context) => {
+    const body = await context.body as ArtikelKesehatanInput;
+    const { title, content, introduction, symptom, prevention, firstAid, mythVsFact, doctorSign } = body;
+
+    const [createdIntroduction, createdSymptom, createdPrevention, createdFirstAid, createdMythVsFact, createdDoctorSign] = await Promise.all([
+        prisma.introduction.create({ data: introduction }),
+        prisma.symptom.create({ data: symptom }),
+        prisma.prevention.create({ data: prevention }),
+        prisma.firstAid.create({ data: firstAid }),
+        prisma.mythVsFact.create({ data: mythVsFact }),
+        prisma.doctorSign.create({ data: doctorSign }),
+    ])
+
+    const artikelKesehatan = await prisma.artikelKesehatan.create({
+        data: {
+            title,
+            content,
+            introductionId: createdIntroduction.id,
+            symptomId: createdSymptom.id,
+            preventionId: createdPrevention.id,
+            firstAidId: createdFirstAid.id,
+            mythVsFactId: createdMythVsFact.id,
+            doctorSignId: createdDoctorSign.id,
+        },
+        include: {
+            introduction: true,
+            symptom: true,
+            prevention: true,
+            firstaid: true,
+            mythvsfact: true,
+            doctorsign: true,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Success create artikel kesehatan",
+        data: artikelKesehatan,
+    }
+}
+export default artikelKesehatanCreate;  // export the function

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

@@ -0,0 +1,41 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+const artikelKesehatanDelete = async (context: Context) => {
+    const id = context.params?.id as string;
+
+    if (!id) {
+        return {
+            status: 400,
+            message: "ID tidak ditemukan",
+        }
+    }
+
+    const artikelKesehatan = await prisma.artikelKesehatan.findUnique({
+        where: { id },
+        include: {
+            introduction: true,
+            symptom: true,
+            prevention: true,
+            firstaid: true,
+            mythvsfact: true,
+            doctorsign: true,
+        }
+    })
+
+    if (!artikelKesehatan) {
+        return {
+            status: 404,
+            message: "Artikel kesehatan tidak ditemukan",
+        }
+    }
+
+    await prisma.artikelKesehatan.delete({ where: { id } })
+
+    return {
+        status: 200,
+        success: true,
+        message: "Artikel kesehatan berhasil dihapus",
+    }
+}
+export default artikelKesehatanDelete;

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

@@ -0,0 +1,30 @@
+import prisma from "@/lib/prisma";
+
+export default async function artikelKesehatanFindMany() {
+    try {
+        const data = await prisma.artikelKesehatan.findMany({
+            where: {
+                isActive: true,
+            },
+            include: {
+                introduction: true,
+                symptom: true,
+                prevention: true,
+                firstaid: true,
+                mythvsfact: true,
+                doctorsign: true,
+            }
+        })
+        return {
+            success: true,
+            message: "Success fetch artikel kesehatan",
+            data,
+        }
+    } catch (error) {
+        console.error("Find many error:", error);
+        return {
+            success: false,
+            message: "Failed fetch artikel kesehatan",
+        }
+    }
+}

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

@@ -0,0 +1,52 @@
+import prisma from "@/lib/prisma";
+
+export async function artikelKesehatanFindUnique(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 tidak boleh kosong",
+        }, { status: 400 })
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return Response.json({
+                success: false,
+                message: "ID tidak valid",
+            }, { status: 400 })
+        }
+
+        const data = await prisma.artikelKesehatan.findUnique({
+            where: {id},
+            include: {
+                introduction: true,
+                symptom: true,
+                prevention: true,
+                firstaid: true,
+                mythvsfact: true,
+                doctorsign: true,
+            }
+        })
+        if (!data) {
+            return Response.json({
+                success: false,
+                message: "Data tidak ditemukan",
+            }, { status: 404 })
+        }
+
+        return Response.json({
+            success: true,
+            data,
+        }, { status: 200 })
+    } catch (error) {
+        console.error("Find unique error:", error);
+        return Response.json({
+            success: false,
+            message: "Failed fetch artikel kesehatan",
+        }, { status: 500 })
+    }
+}

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

@@ -0,0 +1,85 @@
+import Elysia, { t } from "elysia";
+import artikelKesehatanCreate from "./create";
+import artikelKesehatanFindMany from "./findMany";
+import artikelKesehatanDelete from "./del";
+import { artikelKesehatanFindUnique } from "./findUnique";
+import artikelKesehatanUpdate from "./updt";
+
+const ArtikelKesehatan = new Elysia({
+  prefix: "artikel-kesehatan",
+  tags: ["Kesehatan/Artikel Kesehatan"],
+})
+  .post("/create", artikelKesehatanCreate, {
+    body: t.Object({
+      title: t.String(),
+      content: t.String(),
+      introduction: t.Object({
+        content: t.String(),
+      }),
+      symptom: t.Object({
+        title: t.String(),
+        content: t.String(),
+      }),
+      prevention: t.Object({
+        title: t.String(),
+        content: t.String(),
+      }),
+      firstAid: t.Object({
+        title: t.String(),
+        content: t.String(),
+      }),
+      mythVsFact: t.Object({
+        title: t.String(),
+        mitos: t.String(),
+        fakta: t.String(),
+      }),
+      doctorSign: t.Object({
+        content: t.String(),
+      }),
+    }),
+  })
+  .get("/find-many", artikelKesehatanFindMany)
+  .delete("/del/:id", artikelKesehatanDelete)
+  .get("/:id", async (context) => {
+    const response = await artikelKesehatanFindUnique(
+      new Request(context.request)
+    );
+    return response;
+  })
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await artikelKesehatanUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        title: t.String(),
+        content: t.String(),
+        introduction: t.Object({
+          content: t.String(),
+        }),
+        symptom: t.Object({
+          title: t.String(),
+          content: t.String(),
+        }),
+        prevention: t.Object({
+          title: t.String(),
+          content: t.String(),
+        }),
+        firstAid: t.Object({
+          title: t.String(),
+          content: t.String(),
+        }),
+        mythVsFact: t.Object({
+          title: t.String(),
+          mitos: t.String(),
+          fakta: t.String(),
+        }),
+        doctorSign: t.Object({
+          content: t.String(),
+        }),
+      }),
+    }
+  );
+export default ArtikelKesehatan;

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

@@ -0,0 +1,106 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type ArtikelKesehatanInput = {
+  title: string;
+  content: string;
+  introduction: { content: string };
+  symptom: { title: string; content: string };
+  prevention: { title: string; content: string };
+  firstAid: { title: string; content: string };
+  mythVsFact: { title: string; mitos: string; fakta: string };
+  doctorSign: { content: string };
+};
+
+const artikelKesehatanUpdate = async (context: Context) => {
+  const id = context.params?.id as string;
+  const body = (await context.body) as ArtikelKesehatanInput;
+
+  if (!id) {
+    return new Response(
+      JSON.stringify({
+        success: false,
+        message: "ID is required",
+      }),
+      {
+        status: 400,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
+
+  const existing = await prisma.artikelKesehatan.findUnique({
+    where: { id },
+  });
+
+  if (!existing) {
+    return new Response(
+      JSON.stringify({ success: false, message: "Data not found" }),
+      { status: 404, headers: { "Content-Type": "application/json" } }
+    );
+  }
+
+  const {
+    title,
+    content,
+    introduction,
+    symptom,
+    prevention,
+    firstAid,
+    mythVsFact,
+    doctorSign,
+  } = body;
+
+  await Promise.all([
+    prisma.introduction.update({
+      where: { id: existing.introductionId },
+      data: introduction,
+    }),
+    prisma.symptom.update({
+      where: { id: existing.symptomId },
+      data: symptom,
+    }),
+    prisma.prevention.update({
+      where: { id: existing.preventionId },
+      data: prevention,
+    }),
+    prisma.firstAid.update({
+      where: { id: existing.firstAidId },
+      data: firstAid,
+    }),
+    prisma.mythVsFact.update({
+      where: { id: existing.mythVsFactId },
+      data: mythVsFact,
+    }),
+    prisma.doctorSign.update({
+      where: { id: existing.doctorSignId },
+      data: doctorSign,
+    }),
+  ]);
+
+  const updated = await prisma.artikelKesehatan.update({
+    where: { id },
+    data: {
+      title,
+      content
+    },
+    include: {
+      introduction: true,
+      symptom: true,
+      prevention: true,
+      firstaid: true,
+      mythvsfact: true,
+      doctorsign: true,
+    },
+  });
+
+  return {
+    status: 200,
+    success: true,
+    message: "Artikel kesehatan berhasil dihapus",
+    data: updated,
+  };
+};
+export default artikelKesehatanUpdate;

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

@@ -17,7 +17,7 @@ export default async function grafikKepuasanCreate(context: Context) {
       jumlah: body.jumlah,
     },
     select: {
-      uuid: true,
+      id: true,
       label: true,
       jumlah: true,
     }

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

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

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

@@ -3,9 +3,9 @@ import prisma from "@/lib/prisma";
 export default async function grafikKepuasanFindUnique(request: Request) {
     const url = new URL(request.url);
     const pathSegments = url.pathname.split('/');
-    const uuid = pathSegments[pathSegments.length - 1];
+    const id = pathSegments[pathSegments.length - 1];
 
-    if (!uuid) {
+    if (!id) {
         return Response.json({
             success: false,
             message: 'ID tidak boleh kosong',
@@ -13,7 +13,7 @@ export default async function grafikKepuasanFindUnique(request: Request) {
     }
 
     try {
-        if (typeof uuid !== 'string') {
+        if (typeof id !== 'string') {
             return Response.json({
                 success: false,
                 message: "ID tidak valid",
@@ -21,7 +21,7 @@ export default async function grafikKepuasanFindUnique(request: Request) {
         }
 
         const data = await prisma.grafikKepuasan.findUnique({
-            where: { uuid },
+            where: { id },
         });
 
         if (!data) {

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

@@ -9,7 +9,7 @@ const GrafikKepuasan = new Elysia({
     prefix: "/grafikkepuasan",
     tags: ["Data Kesehatan/Grafik Kepuasan"]
 })
-    .get("/:uuid", async (context) => {
+    .get("/:id", async (context) => {
         const response = await grafikKepuasanFindUnique(new Request(context.request));
         return response;
     })
@@ -20,18 +20,18 @@ const GrafikKepuasan = new Elysia({
             jumlah: t.String(),
         }),
     })
-    .put("/:uuid", grafikKepuasanUpdate, {
+    .put("/:id", grafikKepuasanUpdate, {
         params: t.Object({
-            uuid: t.String(),
+            id: t.String(),
         }),
         body: t.Object({
             label: t.String(),
             jumlah: t.String(),
         }),
     })
-    .delete("/del/:uuid", grafikKepuasanDelete, {
+    .delete("/del/:id", grafikKepuasanDelete, {
         params: t.Object({
-            uuid: t.String(),
+            id: t.String(),
         }),
     })
 export default GrafikKepuasan

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

@@ -2,9 +2,9 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 export default async function grafikKepuasanUpdate(context: Context) {
-    const uuid = context.params?.uuid;
+    const id = context.params?.id;
     
-    if (!uuid) {
+    if (!id) {
         return {
             success: false,
             message: "ID tidak ditemukan"
@@ -18,7 +18,7 @@ export default async function grafikKepuasanUpdate(context: Context) {
     
     const existing = await prisma.grafikKepuasan.findUnique({
         where: {
-            uuid: uuid,
+            id: id,
         },
     })
 
@@ -30,7 +30,7 @@ export default async function grafikKepuasanUpdate(context: Context) {
     }
 
     const updated = await prisma.grafikKepuasan.update({
-        where: { uuid },
+        where: { id },
         data: {
             label,
             jumlah,

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

@@ -22,7 +22,7 @@ export default async function persentaseKelahiranKematianCreate(context: Context
             kelahiranKasar: body.kelahiranKasar,
         },
         select: {
-            uuid: true,
+            id: true,
             tahun: true,
             kematianKasar: true,
             kematianBayi: true,

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

@@ -2,9 +2,9 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 export default async function persentaseKelahiranKematianDelete(context: Context) {
-    const uuid = context.params?.uuid;
+    const id = context.params?.id;
 
-    if (!uuid) {
+    if (!id) {
         return {
             success: false,
             message: "ID tidak ditemukan",
@@ -13,7 +13,7 @@ export default async function persentaseKelahiranKematianDelete(context: Context
 
     const existing = await prisma.dataKematian_Kelahiran.findUnique({
         where: {
-            uuid: uuid,
+            id: id,
         },
     })
 
@@ -25,7 +25,7 @@ export default async function persentaseKelahiranKematianDelete(context: Context
     }
 
     const deleted = await prisma.dataKematian_Kelahiran.delete({
-        where: { uuid },
+        where: { id },
     })
 
     return {

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

@@ -3,9 +3,9 @@ import prisma from "@/lib/prisma";
 export default async function persentaseKelahiranKematianFindUnique(request: Request) {
     const url = new URL(request.url);
     const pathSegments = url.pathname.split('/');
-    const uuid = pathSegments[pathSegments.length - 1];
+    const id = pathSegments[pathSegments.length - 1];
 
-    if (!uuid) {
+    if (!id) {
         return Response.json({
             success: false,
             message: "ID tidak boleh kosong",
@@ -13,7 +13,7 @@ export default async function persentaseKelahiranKematianFindUnique(request: Req
     }
 
     try {
-        if (typeof uuid !== 'string') {
+        if (typeof id !== 'string') {
             return Response.json({
                 success: false,
                 message: "ID tidak valid",
@@ -21,7 +21,7 @@ export default async function persentaseKelahiranKematianFindUnique(request: Req
         }
 
         const data = await prisma.dataKematian_Kelahiran.findUnique({
-            where: { uuid },
+            where: { id },
         });
 
         if (!data) {

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

@@ -9,7 +9,7 @@ const PersentaseKelahiranKematian = new Elysia({
   prefix: "/persentasekelahiran",
   tags: ["Data Kesehatan/Persentase Kelahiran Kematian"],
 })
-  .get("/:uuid", async (context) => {
+  .get("/:id", async (context) => {
     const response = await persentaseKelahiranKematianFindUnique(new Request(context.request))
     return response
   })
@@ -22,9 +22,9 @@ const PersentaseKelahiranKematian = new Elysia({
       kelahiranKasar: t.String(),
     }),
   })
-  .put("/:uuid", persentaseKelahiranKematianUpdate, {
+  .put("/:id", persentaseKelahiranKematianUpdate, {
     params: t.Object({
-      uuid: t.String(),
+      id: t.String(),
     }),
     body: t.Object({
       tahun: t.String(),
@@ -33,9 +33,9 @@ const PersentaseKelahiranKematian = new Elysia({
       kelahiranKasar: t.String(),
     }),
   })
-  .delete("/del/:uuid", persentaseKelahiranKematianDelete, {
+  .delete("/del/:id", persentaseKelahiranKematianDelete, {
     params: t.Object({
-      uuid: t.String(),
+      id: t.String(),
     }),
   })
 export default PersentaseKelahiranKematian;

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

@@ -2,9 +2,9 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 export default async function persentaseKelahiranKematianUpdate(context: Context) {
-    const uuid = context.params?.uuid;
+    const id = context.params?.id;
 
-    if (!uuid) {
+    if (!id) {
         return {
             success: false,
             message: "ID tidak ditemukan",
@@ -20,7 +20,7 @@ export default async function persentaseKelahiranKematianUpdate(context: Context
 
     const existing = await prisma.dataKematian_Kelahiran.findUnique({
         where: {
-            uuid: uuid,
+            id: id,
         },
     })
 
@@ -32,7 +32,7 @@ export default async function persentaseKelahiranKematianUpdate(context: Context
     }
 
     const updated = await prisma.dataKematian_Kelahiran.update({
-        where: { uuid },
+        where: { id },
         data: {
             tahun,
             kematianKasar,

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

@@ -15,6 +15,7 @@ import ProgramKesehatan from "./program-kesehatan";
 import Puskesmas from "./puskesmas";
 import FasilitasKesehatan from "./data_kesehatan_warga/fasilitas_kesehatan";
 import JadwalKegiatan from "./data_kesehatan_warga/jadwal_kegiatan";
+import ArtikelKesehatan from "./data_kesehatan_warga/artikel_kesehatan";
 
 
 const Kesehatan = new Elysia({
@@ -37,4 +38,5 @@ const Kesehatan = new Elysia({
 .use(InfoWabahPenyakit)
 .use(FasilitasKesehatan)
 .use(JadwalKegiatan)
+.use(ArtikelKesehatan);
 export default Kesehatan;