Save

package.json

@@ -1,6 +1,6 @@
 {
   "name": "desa-darmasaba",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

prisma/migrations/20250624034125_24_jun2025/migration.sql

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

prisma/migrations/20250624061829_24jun2025_2/migration.sql

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

prisma/migrations/20250625035558_25jun2025_1/migration.sql

@@ -0,0 +1,96 @@
+/*
+  Warnings:
+
+  - You are about to drop the `_DokterdanTenagaMedisToFasilitasKesehatan` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `_FasilitasKesehatanToFasilitasPendukung` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `_FasilitasKesehatanToInformasiUmum` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `_FasilitasKesehatanToLayananUnggulan` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `_FasilitasKesehatanToProsedurPendaftaran` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `_FasilitasKesehatanToTarifDanLayanan` table. If the table is not empty, all the data it contains will be lost.
+  - Added the required column `dokterdanTenagaMedisId` to the `FasilitasKesehatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `fasilitasPendukungId` to the `FasilitasKesehatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `informasiUmumId` to the `FasilitasKesehatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `layananUnggulanId` to the `FasilitasKesehatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `prosedurPendaftaranId` to the `FasilitasKesehatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `tarifDanLayananId` to the `FasilitasKesehatan` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropForeignKey
+ALTER TABLE "_DokterdanTenagaMedisToFasilitasKesehatan" DROP CONSTRAINT "_DokterdanTenagaMedisToFasilitasKesehatan_A_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_DokterdanTenagaMedisToFasilitasKesehatan" DROP CONSTRAINT "_DokterdanTenagaMedisToFasilitasKesehatan_B_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_FasilitasKesehatanToFasilitasPendukung" DROP CONSTRAINT "_FasilitasKesehatanToFasilitasPendukung_A_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_FasilitasKesehatanToFasilitasPendukung" DROP CONSTRAINT "_FasilitasKesehatanToFasilitasPendukung_B_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_FasilitasKesehatanToInformasiUmum" DROP CONSTRAINT "_FasilitasKesehatanToInformasiUmum_A_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_FasilitasKesehatanToInformasiUmum" DROP CONSTRAINT "_FasilitasKesehatanToInformasiUmum_B_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_FasilitasKesehatanToLayananUnggulan" DROP CONSTRAINT "_FasilitasKesehatanToLayananUnggulan_A_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_FasilitasKesehatanToLayananUnggulan" DROP CONSTRAINT "_FasilitasKesehatanToLayananUnggulan_B_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_FasilitasKesehatanToProsedurPendaftaran" DROP CONSTRAINT "_FasilitasKesehatanToProsedurPendaftaran_A_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_FasilitasKesehatanToProsedurPendaftaran" DROP CONSTRAINT "_FasilitasKesehatanToProsedurPendaftaran_B_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_FasilitasKesehatanToTarifDanLayanan" DROP CONSTRAINT "_FasilitasKesehatanToTarifDanLayanan_A_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_FasilitasKesehatanToTarifDanLayanan" DROP CONSTRAINT "_FasilitasKesehatanToTarifDanLayanan_B_fkey";
+
+-- AlterTable
+ALTER TABLE "FasilitasKesehatan" ADD COLUMN     "dokterdanTenagaMedisId" TEXT NOT NULL,
+ADD COLUMN     "fasilitasPendukungId" TEXT NOT NULL,
+ADD COLUMN     "informasiUmumId" TEXT NOT NULL,
+ADD COLUMN     "layananUnggulanId" TEXT NOT NULL,
+ADD COLUMN     "prosedurPendaftaranId" TEXT NOT NULL,
+ADD COLUMN     "tarifDanLayananId" TEXT NOT NULL;
+
+-- DropTable
+DROP TABLE "_DokterdanTenagaMedisToFasilitasKesehatan";
+
+-- DropTable
+DROP TABLE "_FasilitasKesehatanToFasilitasPendukung";
+
+-- DropTable
+DROP TABLE "_FasilitasKesehatanToInformasiUmum";
+
+-- DropTable
+DROP TABLE "_FasilitasKesehatanToLayananUnggulan";
+
+-- DropTable
+DROP TABLE "_FasilitasKesehatanToProsedurPendaftaran";
+
+-- DropTable
+DROP TABLE "_FasilitasKesehatanToTarifDanLayanan";
+
+-- AddForeignKey
+ALTER TABLE "FasilitasKesehatan" ADD CONSTRAINT "FasilitasKesehatan_informasiUmumId_fkey" FOREIGN KEY ("informasiUmumId") REFERENCES "InformasiUmum"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "FasilitasKesehatan" ADD CONSTRAINT "FasilitasKesehatan_layananUnggulanId_fkey" FOREIGN KEY ("layananUnggulanId") REFERENCES "LayananUnggulan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "FasilitasKesehatan" ADD CONSTRAINT "FasilitasKesehatan_dokterdanTenagaMedisId_fkey" FOREIGN KEY ("dokterdanTenagaMedisId") REFERENCES "DokterdanTenagaMedis"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "FasilitasKesehatan" ADD CONSTRAINT "FasilitasKesehatan_fasilitasPendukungId_fkey" FOREIGN KEY ("fasilitasPendukungId") REFERENCES "FasilitasPendukung"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "FasilitasKesehatan" ADD CONSTRAINT "FasilitasKesehatan_prosedurPendaftaranId_fkey" FOREIGN KEY ("prosedurPendaftaranId") REFERENCES "ProsedurPendaftaran"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "FasilitasKesehatan" ADD CONSTRAINT "FasilitasKesehatan_tarifDanLayananId_fkey" FOREIGN KEY ("tarifDanLayananId") REFERENCES "TarifDanLayanan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20250625085706_25_jun_25_2/migration.sql

@@ -0,0 +1,32 @@
+/*
+  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.
+  - The `id` column on the `DataKematian_Kelahiran` table would be dropped and recreated. This will lead to data loss if there is data in the column.
+  - The primary key for the `GrafikKepuasan` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - The `id` column on the `GrafikKepuasan` table would be dropped and recreated. This will lead to data loss if there is data in the column.
+  - A unique constraint covering the columns `[uuid]` on the table `DataKematian_Kelahiran` will be added. If there are existing duplicate values, this will fail.
+  - A unique constraint covering the columns `[uuid]` on the table `GrafikKepuasan` will be added. If there are existing duplicate values, this will fail.
+  - The required column `uuid` was added to the `DataKematian_Kelahiran` table with a prisma-level default value. This is not possible if the table is not empty. Please add this column as optional, then populate it before making it required.
+  - The required column `uuid` was added to the `GrafikKepuasan` table with a prisma-level default value. This is not possible if the table is not empty. Please add this column as optional, then populate it before making it required.
+
+*/
+-- AlterTable
+ALTER TABLE "DataKematian_Kelahiran" DROP CONSTRAINT "DataKematian_Kelahiran_pkey",
+ADD COLUMN     "uuid" TEXT NOT NULL,
+DROP COLUMN "id",
+ADD COLUMN     "id" SERIAL NOT NULL,
+ADD CONSTRAINT "DataKematian_Kelahiran_pkey" PRIMARY KEY ("id");
+
+-- AlterTable
+ALTER TABLE "GrafikKepuasan" DROP CONSTRAINT "GrafikKepuasan_pkey",
+ADD COLUMN     "uuid" TEXT NOT NULL,
+DROP COLUMN "id",
+ADD COLUMN     "id" SERIAL NOT NULL,
+ADD CONSTRAINT "GrafikKepuasan_pkey" PRIMARY KEY ("id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "DataKematian_Kelahiran_uuid_key" ON "DataKematian_Kelahiran"("uuid");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "GrafikKepuasan_uuid_key" ON "GrafikKepuasan"("uuid");

prisma/migrations/20250626061909_26_jun_25_01/migration.sql

@@ -0,0 +1,92 @@
+/*
+  Warnings:
+
+  - The primary key for the `ArtikelKesehatan` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - The primary key for the `DoctorSign` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - The primary key for the `FirstAid` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - The primary key for the `Introduction` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - The primary key for the `MythVsFact` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - The primary key for the `Prevention` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - The primary key for the `Symptom` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - Added the required column `deskripsiJadwalKegiatanId` to the `JadwalKegiatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `dokumenJadwalKegiatanId` to the `JadwalKegiatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `informasiJadwalKegiatanId` to the `JadwalKegiatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `layananJadwalKegiatanId` to the `JadwalKegiatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `pendaftaranJadwalKegiatanId` to the `JadwalKegiatan` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `syaratKetentuanJadwalKegiatanId` to the `JadwalKegiatan` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "ArtikelKesehatan" DROP CONSTRAINT "ArtikelKesehatan_pkey",
+ALTER COLUMN "id" DROP DEFAULT,
+ALTER COLUMN "id" SET DATA TYPE TEXT,
+ADD CONSTRAINT "ArtikelKesehatan_pkey" PRIMARY KEY ("id");
+DROP SEQUENCE "ArtikelKesehatan_id_seq";
+
+-- AlterTable
+ALTER TABLE "DoctorSign" DROP CONSTRAINT "DoctorSign_pkey",
+ALTER COLUMN "id" DROP DEFAULT,
+ALTER COLUMN "id" SET DATA TYPE TEXT,
+ADD CONSTRAINT "DoctorSign_pkey" PRIMARY KEY ("id");
+DROP SEQUENCE "DoctorSign_id_seq";
+
+-- AlterTable
+ALTER TABLE "FirstAid" DROP CONSTRAINT "FirstAid_pkey",
+ALTER COLUMN "id" DROP DEFAULT,
+ALTER COLUMN "id" SET DATA TYPE TEXT,
+ADD CONSTRAINT "FirstAid_pkey" PRIMARY KEY ("id");
+DROP SEQUENCE "FirstAid_id_seq";
+
+-- AlterTable
+ALTER TABLE "Introduction" DROP CONSTRAINT "Introduction_pkey",
+ALTER COLUMN "id" DROP DEFAULT,
+ALTER COLUMN "id" SET DATA TYPE TEXT,
+ADD CONSTRAINT "Introduction_pkey" PRIMARY KEY ("id");
+DROP SEQUENCE "Introduction_id_seq";
+
+-- AlterTable
+ALTER TABLE "JadwalKegiatan" ADD COLUMN     "deskripsiJadwalKegiatanId" TEXT NOT NULL,
+ADD COLUMN     "dokumenJadwalKegiatanId" TEXT NOT NULL,
+ADD COLUMN     "informasiJadwalKegiatanId" TEXT NOT NULL,
+ADD COLUMN     "layananJadwalKegiatanId" TEXT NOT NULL,
+ADD COLUMN     "pendaftaranJadwalKegiatanId" TEXT NOT NULL,
+ADD COLUMN     "syaratKetentuanJadwalKegiatanId" TEXT NOT NULL;
+
+-- AlterTable
+ALTER TABLE "MythVsFact" DROP CONSTRAINT "MythVsFact_pkey",
+ALTER COLUMN "id" DROP DEFAULT,
+ALTER COLUMN "id" SET DATA TYPE TEXT,
+ADD CONSTRAINT "MythVsFact_pkey" PRIMARY KEY ("id");
+DROP SEQUENCE "MythVsFact_id_seq";
+
+-- AlterTable
+ALTER TABLE "Prevention" DROP CONSTRAINT "Prevention_pkey",
+ALTER COLUMN "id" DROP DEFAULT,
+ALTER COLUMN "id" SET DATA TYPE TEXT,
+ADD CONSTRAINT "Prevention_pkey" PRIMARY KEY ("id");
+DROP SEQUENCE "Prevention_id_seq";
+
+-- AlterTable
+ALTER TABLE "Symptom" DROP CONSTRAINT "Symptom_pkey",
+ALTER COLUMN "id" DROP DEFAULT,
+ALTER COLUMN "id" SET DATA TYPE TEXT,
+ADD CONSTRAINT "Symptom_pkey" PRIMARY KEY ("id");
+DROP SEQUENCE "Symptom_id_seq";
+
+-- AddForeignKey
+ALTER TABLE "JadwalKegiatan" ADD CONSTRAINT "JadwalKegiatan_informasiJadwalKegiatanId_fkey" FOREIGN KEY ("informasiJadwalKegiatanId") REFERENCES "InformasiJadwalKegiatan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "JadwalKegiatan" ADD CONSTRAINT "JadwalKegiatan_deskripsiJadwalKegiatanId_fkey" FOREIGN KEY ("deskripsiJadwalKegiatanId") REFERENCES "DeskripsiJadwalKegiatan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "JadwalKegiatan" ADD CONSTRAINT "JadwalKegiatan_layananJadwalKegiatanId_fkey" FOREIGN KEY ("layananJadwalKegiatanId") REFERENCES "LayananJadwalKegiatan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "JadwalKegiatan" ADD CONSTRAINT "JadwalKegiatan_syaratKetentuanJadwalKegiatanId_fkey" FOREIGN KEY ("syaratKetentuanJadwalKegiatanId") REFERENCES "SyaratKetentuanJadwalKegiatan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "JadwalKegiatan" ADD CONSTRAINT "JadwalKegiatan_dokumenJadwalKegiatanId_fkey" FOREIGN KEY ("dokumenJadwalKegiatanId") REFERENCES "DokumenJadwalKegiatan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "JadwalKegiatan" ADD CONSTRAINT "JadwalKegiatan_pendaftaranJadwalKegiatanId_fkey" FOREIGN KEY ("pendaftaranJadwalKegiatanId") REFERENCES "PendaftaranJadwalKegiatan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

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/migrations/20250630030216_nico_30_jun_25_1/migration.sql

@@ -0,0 +1,201 @@
+-- CreateEnum
+CREATE TYPE "StatusLaporan" AS ENUM ('SELESAI', 'PROSES', 'GAGAL');
+
+-- AlterTable
+ALTER TABLE "DataKematian_Kelahiran" ADD CONSTRAINT "DataKematian_Kelahiran_pkey" PRIMARY KEY ("id");
+
+-- DropIndex
+DROP INDEX "DataKematian_Kelahiran_id_key";
+
+-- AlterTable
+ALTER TABLE "GrafikKepuasan" ADD CONSTRAINT "GrafikKepuasan_pkey" PRIMARY KEY ("id");
+
+-- DropIndex
+DROP INDEX "GrafikKepuasan_id_key";
+
+-- CreateTable
+CREATE TABLE "KeamananLingkungan" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "imageId" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "KeamananLingkungan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PolsekTerdekat" (
+    "id" TEXT NOT NULL,
+    "nama" TEXT NOT NULL,
+    "jarakKeDesa" TEXT NOT NULL,
+    "alamat" TEXT NOT NULL,
+    "nomorTelepon" TEXT NOT NULL,
+    "jamOperasional" TEXT NOT NULL,
+    "embedMapUrl" TEXT NOT NULL,
+    "namaTempatMaps" TEXT NOT NULL,
+    "alamatMaps" TEXT NOT NULL,
+    "linkPetunjukArah" TEXT NOT NULL,
+    "layananPolsekId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "PolsekTerdekat_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "LayananPolsek" (
+    "id" TEXT NOT NULL,
+    "nama" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "LayananPolsek_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KontakDaruratKeamanan" (
+    "id" TEXT NOT NULL,
+    "nama" TEXT NOT NULL,
+    "kontak" TEXT NOT NULL,
+    "icon" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "KontakDaruratKeamanan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PencegahanKriminalitas" (
+    "id" TEXT NOT NULL,
+    "programKeamananId" TEXT NOT NULL,
+    "tipsKeamananId" TEXT NOT NULL,
+    "videoKeamananId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "PencegahanKriminalitas_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ProgramKeamanan" (
+    "id" TEXT NOT NULL,
+    "nama" TEXT NOT NULL,
+    "deskripsi" TEXT,
+    "slug" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "ProgramKeamanan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TipsKeamanan" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "konten" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "TipsKeamanan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "VideoKeamanan" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" TEXT,
+    "videoUrl" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "VideoKeamanan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "LaporanPublik" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "lokasi" TEXT NOT NULL,
+    "tanggalWaktu" TIMESTAMP(3) NOT NULL,
+    "status" "StatusLaporan" NOT NULL,
+    "kronologi" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "LaporanPublik_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PenangananLaporanPublik" (
+    "id" TEXT NOT NULL,
+    "laporanId" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+
+    CONSTRAINT "PenangananLaporanPublik_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Pelapor" (
+    "id" TEXT NOT NULL,
+    "nama" TEXT NOT NULL,
+    "alamat" TEXT NOT NULL,
+    "nomorTelepon" TEXT NOT NULL,
+    "imageId" TEXT NOT NULL,
+
+    CONSTRAINT "Pelapor_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "MenuTipsKeamanan" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "imageId" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "MenuTipsKeamanan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ProgramKeamanan_slug_key" ON "ProgramKeamanan"("slug");
+
+-- AddForeignKey
+ALTER TABLE "KeamananLingkungan" ADD CONSTRAINT "KeamananLingkungan_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PolsekTerdekat" ADD CONSTRAINT "PolsekTerdekat_layananPolsekId_fkey" FOREIGN KEY ("layananPolsekId") REFERENCES "LayananPolsek"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PencegahanKriminalitas" ADD CONSTRAINT "PencegahanKriminalitas_programKeamananId_fkey" FOREIGN KEY ("programKeamananId") REFERENCES "ProgramKeamanan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PencegahanKriminalitas" ADD CONSTRAINT "PencegahanKriminalitas_tipsKeamananId_fkey" FOREIGN KEY ("tipsKeamananId") REFERENCES "TipsKeamanan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PencegahanKriminalitas" ADD CONSTRAINT "PencegahanKriminalitas_videoKeamananId_fkey" FOREIGN KEY ("videoKeamananId") REFERENCES "VideoKeamanan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PenangananLaporanPublik" ADD CONSTRAINT "PenangananLaporanPublik_laporanId_fkey" FOREIGN KEY ("laporanId") REFERENCES "LaporanPublik"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Pelapor" ADD CONSTRAINT "Pelapor_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "MenuTipsKeamanan" ADD CONSTRAINT "MenuTipsKeamanan_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/migrations/20250630081247_fix_layanan_polsek_deletedat/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "LayananPolsek" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;

prisma/migrations/20250701093155_nico_1_jul_25_test1/migration.sql

@@ -0,0 +1,75 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `deletedAt` on the `KontakDarurat` table. All the data in the column will be lost.
+  - You are about to drop the column `deskripsi` on the `KontakDarurat` table. All the data in the column will be lost.
+  - You are about to drop the column `imageId` on the `KontakDarurat` table. All the data in the column will be lost.
+  - You are about to drop the column `isActive` on the `KontakDarurat` table. All the data in the column will be lost.
+  - You are about to drop the column `name` on the `KontakDarurat` table. All the data in the column will be lost.
+  - Added the required column `nama` to the `KontakDarurat` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropForeignKey
+ALTER TABLE "KontakDarurat" DROP CONSTRAINT "KontakDarurat_imageId_fkey";
+
+-- AlterTable
+ALTER TABLE "KontakDarurat" DROP COLUMN "deletedAt",
+DROP COLUMN "deskripsi",
+DROP COLUMN "imageId",
+DROP COLUMN "isActive",
+DROP COLUMN "name",
+ADD COLUMN     "icon" TEXT,
+ADD COLUMN     "nama" TEXT NOT NULL,
+ADD COLUMN     "urutan" INTEGER;
+
+-- CreateTable
+CREATE TABLE "KontakItem" (
+    "id" TEXT NOT NULL,
+    "nama" TEXT NOT NULL,
+    "nomorTelepon" TEXT NOT NULL,
+    "icon" TEXT,
+    "kategoriId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "KontakItem_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PasarDesa" (
+    "id" TEXT NOT NULL,
+    "nama" TEXT NOT NULL,
+    "harga" INTEGER NOT NULL,
+    "satuan" TEXT NOT NULL,
+    "alamat" TEXT NOT NULL,
+    "imageId" TEXT NOT NULL,
+    "rating" DOUBLE PRECISION NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "kategoriId" TEXT NOT NULL,
+
+    CONSTRAINT "PasarDesa_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KategoriMakanan" (
+    "id" TEXT NOT NULL,
+    "nama" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3),
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "KategoriMakanan_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "KontakItem" ADD CONSTRAINT "KontakItem_kategoriId_fkey" FOREIGN KEY ("kategoriId") REFERENCES "KontakDarurat"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PasarDesa" ADD CONSTRAINT "PasarDesa_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PasarDesa" ADD CONSTRAINT "PasarDesa_kategoriId_fkey" FOREIGN KEY ("kategoriId") REFERENCES "KategoriMakanan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20250701093435_nico_1_jul_25_test2/migration.sql

@@ -0,0 +1,38 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `icon` on the `KontakDarurat` table. All the data in the column will be lost.
+  - You are about to drop the column `nama` on the `KontakDarurat` table. All the data in the column will be lost.
+  - You are about to drop the column `urutan` on the `KontakDarurat` table. All the data in the column will be lost.
+  - You are about to drop the column `deletedAt` on the `KontakDaruratKeamanan` table. All the data in the column will be lost.
+  - You are about to drop the column `isActive` on the `KontakDaruratKeamanan` table. All the data in the column will be lost.
+  - You are about to drop the column `kontak` on the `KontakDaruratKeamanan` table. All the data in the column will be lost.
+  - Added the required column `deskripsi` to the `KontakDarurat` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `imageId` to the `KontakDarurat` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `name` to the `KontakDarurat` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropForeignKey
+ALTER TABLE "KontakItem" DROP CONSTRAINT "KontakItem_kategoriId_fkey";
+
+-- AlterTable
+ALTER TABLE "KontakDarurat" DROP COLUMN "icon",
+DROP COLUMN "nama",
+DROP COLUMN "urutan",
+ADD COLUMN     "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "deskripsi" TEXT NOT NULL,
+ADD COLUMN     "imageId" TEXT NOT NULL,
+ADD COLUMN     "isActive" BOOLEAN NOT NULL DEFAULT true,
+ADD COLUMN     "name" TEXT NOT NULL;
+
+-- AlterTable
+ALTER TABLE "KontakDaruratKeamanan" DROP COLUMN "deletedAt",
+DROP COLUMN "isActive",
+DROP COLUMN "kontak",
+ADD COLUMN     "urutan" INTEGER;
+
+-- AddForeignKey
+ALTER TABLE "KontakDarurat" ADD CONSTRAINT "KontakDarurat_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "KontakItem" ADD CONSTRAINT "KontakItem_kategoriId_fkey" FOREIGN KEY ("kategoriId") REFERENCES "KontakDaruratKeamanan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/schema.prisma

@@ -73,9 +73,21 @@ model FileStorage {
   Puskesmas                Puskesmas[]
   ProgramKesehatan         ProgramKesehatan[]
   PenangananDarurat        PenangananDarurat[]
-  KontakDarurat KontakDarurat[]
+  KontakDarurat            KontakDarurat[]
 
   InfoWabahPenyakit InfoWabahPenyakit[]
+
+  KeamananLingkungan KeamananLingkungan[]
+
+  MenuTipsKeamanan MenuTipsKeamanan[]
+
+  Pelapor Pelapor[]
+
+  PasarDesa PasarDesa[]
+
+  KontakDaruratKeamanan KontakDaruratKeamanan[]
+
+  KontakItem KontakItem[]
 }
 
 //========================================= MENU PPID ========================================= //
@@ -471,18 +483,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[]
-  LayananUnggulan      LayananUnggulan[]
-  DokterdanTenagaMedis DokterdanTenagaMedis[]
-  FasilitasPendukung   FasilitasPendukung[]
-  ProsedurPendaftaran  ProsedurPendaftaran[]
-  TarifDanLayanan      TarifDanLayanan[]
+  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
 }
 
 model InformasiUmum {
@@ -490,10 +508,10 @@ model InformasiUmum {
   fasilitas          String
   alamat             String
   jamOperasional     String
-  FasilitasKesehatan FasilitasKesehatan[]
   createdAt          DateTime             @default(now())
   updatedAt          DateTime             @updatedAt
   deletedAt          DateTime             @default(now())
+  FasilitasKesehatan FasilitasKesehatan[]
   isActive           Boolean              @default(true)
 }
 
@@ -552,33 +570,47 @@ model TarifDanLayanan {
 
 // ========================================= JADWAL KEGIATAN ========================================= //
 model JadwalKegiatan {
-  id        String   @id @default(cuid())
-  content   String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
+  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)
 }
 
 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[]
 }
 
 model LayananJadwalKegiatan {
@@ -588,6 +620,8 @@ model LayananJadwalKegiatan {
   updatedAt DateTime @updatedAt
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
+
+  JadwalKegiatan JadwalKegiatan[]
 }
 
 model SyaratKetentuanJadwalKegiatan {
@@ -597,34 +631,38 @@ model SyaratKetentuanJadwalKegiatan {
   updatedAt DateTime @updatedAt
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
+
+  JadwalKegiatan JadwalKegiatan[]
 }
 
 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())
+  id             String   @id @default(cuid())
   tahun          String
   kematianKasar  String
   kematianBayi   String
@@ -637,7 +675,7 @@ model DataKematian_Kelahiran {
 
 // ========================================= GRAFIK KEPUASAN ========================================= //
 model GrafikKepuasan {
-  id        Int      @id @default(autoincrement())
+  id        String   @id @default(cuid())
   label     String
   jumlah    String
   createdAt DateTime @default(now())
@@ -648,56 +686,74 @@ model GrafikKepuasan {
 
 // ========================================= ARTIKEL KESEHATAN ========================================= //
 model ArtikelKesehatan {
-  id        Int      @id @default(autoincrement())
-  title     String
-  content   String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
+  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        Int      @id @default(autoincrement())
-  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        Int      @id @default(autoincrement())
-  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        Int      @id @default(autoincrement())
+  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        Int      @id @default(autoincrement())
+  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        Int      @id @default(autoincrement())
+  id        String   @id @default(cuid())
   title     String
   mitos     String
   fakta     String
@@ -705,15 +761,19 @@ model MythVsFact {
   updatedAt DateTime @updatedAt
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
+
+  ArtikelKesehatan ArtikelKesehatan[]
 }
 
 model DoctorSign {
-  id        Int      @id @default(autoincrement())
+  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 ========================================= //
@@ -811,16 +871,207 @@ 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)
+}
+
+// ========================================= MENU KEAMANAN ========================================= //
+// ========================================= KEAMANAN LINGKUNGAN ========================================= //
+model KeamananLingkungan {
+  id        String       @id @default(cuid())
+  name      String       @db.Text
+  deskripsi String       @db.Text
+  image     FileStorage? @relation(fields: [imageId], references: [id])
+  imageId   String?
+  createdAt DateTime     @default(now())
+  updatedAt DateTime     @updatedAt
+  deletedAt DateTime     @default(now())
+  isActive  Boolean      @default(true)
+}
+
+// ========================================= POLSEK TERDEKAT ========================================= //
+model PolsekTerdekat {
+  id               String        @id @default(uuid())
+  nama             String
+  jarakKeDesa      String
+  alamat           String
+  nomorTelepon     String
+  jamOperasional   String
+  embedMapUrl      String
+  namaTempatMaps   String
+  alamatMaps       String
+  linkPetunjukArah String
+  layananPolsek    LayananPolsek @relation(fields: [layananPolsekId], references: [id])
+  layananPolsekId  String
+  createdAt        DateTime      @default(now())
+  updatedAt        DateTime      @updatedAt
+  deletedAt        DateTime      @default(now())
+  isActive         Boolean       @default(true)
+}
+
+model LayananPolsek {
+  id             String           @id @default(uuid())
+  nama           String // contoh: "Pelayanan SKCK", "Laporan Kriminal"
+  createdAt      DateTime         @default(now())
+  updatedAt      DateTime         @updatedAt
+  deletedAt      DateTime?
+  isActive       Boolean          @default(true)
+  PolsekTerdekat PolsekTerdekat[]
+}
+
+// ========================================= KONTAK DARURAT ========================================= //
+model KontakDaruratKeamanan {
+  id          String       @id @default(uuid())
+  nama        String       // contoh: "Layanan Darurat", "Fasilitas Kesehatan"
+  image       FileStorage? @relation(fields: [imageId], references: [id])
+  imageId     String?
+  kontakItems KontakItem[]
+  createdAt   DateTime     @default(now())
+  updatedAt   DateTime     @updatedAt
+}
+
+model KontakItem {
+  id              String         @id @default(uuid())
+  nama            String         // contoh: "Polisi", "Ambulans", "Puskesmas Darmasaba"
+  nomorTelepon    String
+  image           FileStorage?   @relation(fields: [imageId], references: [id])
+  imageId         String?
+  kategori        KontakDaruratKeamanan @relation(fields: [kategoriId], references: [id])
+  kategoriId      String
+  createdAt       DateTime       @default(now())
+  updatedAt       DateTime       @updatedAt
+}
+
+// ========================================= PENCEGAHAN KRIMINALITAS ========================================= //
+model PencegahanKriminalitas {
+  id                String          @id @default(cuid())
+  programKeamanan   ProgramKeamanan @relation(fields: [programKeamananId], references: [id])
+  programKeamananId String
+  tipsKeamanan      TipsKeamanan    @relation(fields: [tipsKeamananId], references: [id])
+  tipsKeamananId    String
+  videoKeamanan     VideoKeamanan   @relation(fields: [videoKeamananId], references: [id])
+  videoKeamananId   String
+  createdAt         DateTime        @default(now())
+  updatedAt         DateTime        @updatedAt
+  deletedAt         DateTime        @default(now())
+  isActive          Boolean         @default(true)
+}
+
+model ProgramKeamanan {
+  id                     String                   @id @default(cuid())
+  nama                   String // contoh: "Ronda Malam"
+  deskripsi              String? // jika mau tambahkan info detail
+  slug                   String                   @unique
+  createdAt              DateTime                 @default(now())
+  updatedAt              DateTime                 @updatedAt
+  PencegahanKriminalitas PencegahanKriminalitas[]
+}
+
+model TipsKeamanan {
+  id                     String                   @id @default(cuid())
+  judul                  String
+  konten                 String
+  slug                   String
+  createdAt              DateTime                 @default(now())
+  updatedAt              DateTime                 @updatedAt
+  PencegahanKriminalitas PencegahanKriminalitas[]
+}
+
+model VideoKeamanan {
+  id                     String                   @id @default(cuid())
+  judul                  String
+  deskripsi              String?
+  videoUrl               String // link youtube atau embed url
+  slug                   String
+  createdAt              DateTime                 @default(now())
+  updatedAt              DateTime                 @updatedAt
+  PencegahanKriminalitas PencegahanKriminalitas[]
+}
+
+// ========================================= LAPORAN PUBLIK ========================================= //
+model LaporanPublik {
+  id           String                    @id @default(cuid())
+  judul        String
+  lokasi       String
+  tanggalWaktu DateTime
+  status       StatusLaporan
+  penanganan   PenangananLaporanPublik[]
+  kronologi    String? // Optional, bisa diisi detail kronologi
+  createdAt    DateTime                  @default(now())
+  updatedAt    DateTime                  @updatedAt
+}
+
+model PenangananLaporanPublik {
+  id        String        @id @default(cuid())
+  laporanId String
+  deskripsi String
+  laporan   LaporanPublik @relation(fields: [laporanId], references: [id], onDelete: Cascade)
+}
+
+enum StatusLaporan {
+  SELESAI
+  PROSES
+  GAGAL
+}
+
+model Pelapor {
+  id           String      @id @default(cuid())
+  nama         String
+  alamat       String
+  nomorTelepon String
+  image        FileStorage @relation(fields: [imageId], references: [id])
+  imageId      String
+}
+
+// ========================================= TIPS KEAMANAN ========================================= //
+model MenuTipsKeamanan {
+  id        String       @id @default(cuid())
+  judul     String
+  deskripsi String
+  image     FileStorage? @relation(fields: [imageId], references: [id])
+  imageId   String?
+  createdAt DateTime     @default(now())
+  updatedAt DateTime     @updatedAt
+  deletedAt DateTime     @default(now())
+  isActive  Boolean      @default(true)
+}
+
+// ========================================= MENU EKONOMI ========================================= //
+// ========================================= PASAR DESA ========================================= //
+model PasarDesa {
+  id        String                       @id @default(uuid())
+  nama      String // contoh: "Kerupuk Babi"
+  harga     Int // disimpan dalam bentuk angka: 12000
+  satuan    String // contoh: "pcs", "1 kg"
+  alamat    String // contoh: "Jl. Kenari no.7"
+  image     FileStorage                  @relation(fields: [imageId], references: [id])
+  imageId   String
+  rating    Float // contoh: 4.9
+  createdAt DateTime                     @default(now())
+  updatedAt DateTime                     @updatedAt
+  deletedAt DateTime                     @default(now())
+  isActive  Boolean                      @default(true)
+  kategori  KategoriMakanan @relation(fields: [kategoriId], references: [id])
+  kategoriId String
+}
+
+model KategoriMakanan {
+  id        String                       @id @default(uuid())
+  nama      String // contoh: "Makanan", "Bahan Bangunan", dll
+  createdAt DateTime                     @default(now())
+  updatedAt DateTime                     @updatedAt
+  deletedAt DateTime?
+  isActive  Boolean                      @default(true)
+  PasarDesa PasarDesa[]
 }

src/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa.ts

@@ -0,0 +1,230 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  nama: z.string().min(3, "Nama minimal 3 karakter"),
+  harga: z.number().min(1, "Harga minimal 1"),
+  satuan: z.string().min(3, "Satuan minimal 3 karakter"),
+  alamat: z.string().min(3, "Alamat minimal 3 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+  rating: z.number().min(1, "Rating minimal 1"),
+  kategoriId: z.string().min(1, "Kategori wajib dipilih"),
+});
+
+const defaultForm = {
+  nama: "",
+  harga: 0,
+  satuan: "",
+  alamat: "",
+  imageId: "",
+  rating: 0,
+  kategoriId: "",
+};
+
+const pasarDesaState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(pasarDesaState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        pasarDesaState.create.loading = true;
+        const res = await ApiFetch.api.ekonomi.pasardesa["create"].post(
+          pasarDesaState.create.form
+        );
+        if (res.status === 200) {
+          pasarDesaState.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        pasarDesaState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.PasarDesaGetPayload<{
+          include: { kategori: true; image: true };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.ekonomi.pasardesa["find-many"].get();
+      if (res.status === 200) {
+        pasarDesaState.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PasarDesaGetPayload<{
+      include: { kategori: true; image: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/ekonomi/pasardesa/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          pasarDesaState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          pasarDesaState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        pasarDesaState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        pasarDesaState.delete.loading = true;
+
+        const response = await fetch(`/api/ekonomi/pasardesa/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Pasar desa berhasil dihapus");
+          await pasarDesaState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus pasar desa");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus pasar desa");
+      } finally {
+        pasarDesaState.delete.loading = false;
+      }
+    },
+  },
+   edit: {
+      id: "",
+      form: { ...defaultForm },
+      loading: false,
+  
+      async load(id: string) {
+        if (!id) {
+          toast.warn("ID tidak valid");
+          return null;
+        }
+  
+        try {
+          const response = await fetch(`/api/ekonomi/pasardesa/${id}`, {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          });
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          const result = await response.json();
+          if (result?.success) {
+            const data = result.data;
+            this.id = data.id;
+            this.form = {
+              nama: data.nama,
+              harga: data.harga,
+              satuan: data.satuan,
+              alamat: data.alamat,
+              imageId: data.imageId,
+              rating: data.rating,
+              kategoriId: data.kategoriId,
+            };
+            return data;
+          } else {
+            throw new Error(result?.message || "Gagal memuat data");
+          }
+        } catch (error) {
+          console.error("Error loading pasar desa:", error);
+          toast.error(
+            error instanceof Error ? error.message : "Gagal memuat data"
+          );
+          return null;
+        }
+      },
+  
+      async update() {
+        const cek = templateForm.safeParse(pasarDesaState.edit.form);
+        if (!cek.success) {
+          const err = `[${cek.error.issues
+            .map((v) => `${v.path.join(".")}`)
+            .join("\n")}] required`;
+          return toast.error(err);
+        }
+  
+        try {
+          pasarDesaState.edit.loading = true;
+          const response = await fetch(
+            `/api/ekonomi/pasardesa/${this.id}`,
+            {
+              method: "PUT",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                nama: this.form.nama,
+                harga: this.form.harga,
+                satuan: this.form.satuan,
+                alamat: this.form.alamat,
+                imageId: this.form.imageId,
+                rating: this.form.rating,
+                kategoriId: this.form.kategoriId,
+              }),
+            }
+          );
+          if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(
+              errorData.message || `HTTP error! status: ${response.status}`
+            );
+          }
+          const result = await response.json();
+          if (result.success) {
+            toast.success("Berhasil update pasar desa");
+            await pasarDesaState.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(result.message || "Gagal mengupdate pasar desa");
+          }
+        } catch (error) {
+          console.error("Error updating pasar desa:", error);
+          toast.error(
+            error instanceof Error
+              ? error.message
+              : "Gagal mengupdate pasar desa"
+          );
+          return false;
+        } finally {
+          pasarDesaState.edit.loading = false;
+        }
+      },
+      reset() {
+        pasarDesaState.edit.id = "";
+        pasarDesaState.edit.form = { ...defaultForm };
+      },
+    },
+});
+
+export default pasarDesaState;

src/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan.ts

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

src/app/admin/(dashboard)/_state/keamanan/polsek-terdekat.ts

@@ -0,0 +1,242 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  nama: z.string().min(1, "Nama minimal 1 karakter"),
+  jarakKeDesa: z.string().min(1, "Jarak minimal 1 karakter"),
+  alamat: z.string().min(1, "Alamat minimal 1 karakter"),
+  nomorTelepon: z.string().min(1, "Nomor Telepon minimal 1 karakter"),
+  jamOperasional: z.string().min(1, "Jam Operasional minimal 1 karakter"),
+  embedMapUrl: z.string().min(1, "Embed Map Url minimal 1 karakter"),
+  namaTempatMaps: z.string().min(1, "Nama Tempat Maps minimal 1 karakter"),
+  alamatMaps: z.string().min(1, "Alamat Maps minimal 1 karakter"),
+  linkPetunjukArah: z.string().min(1, "Link Petunjuk Arah minimal 1 karakter"),
+  layananPolsekId: z.string().min(1, "Layanan Polsek Id minimal 1 karakter"),
+});
+
+const defaultForm = {
+  nama: "",
+  jarakKeDesa: "",
+  alamat: "",
+  nomorTelepon: "",
+  jamOperasional: "",
+  embedMapUrl: "",
+  namaTempatMaps: "",
+  alamatMaps: "",
+  linkPetunjukArah: "",
+  layananPolsekId: "",
+};
+
+const polsekTerdekatState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(polsekTerdekatState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        polsekTerdekatState.create.loading = true;
+        const res = await ApiFetch.api.keamanan.polsekterdekat["create"].post(
+          polsekTerdekatState.create.form
+        );
+        if (res.status === 200) {
+          polsekTerdekatState.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        polsekTerdekatState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.PolsekTerdekatGetPayload<{
+          include: { layananPolsek: true };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.keamanan.polsekterdekat["find-many"].get();
+      if (res.status === 200) {
+        polsekTerdekatState.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PolsekTerdekatGetPayload<{
+      include: { layananPolsek: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/keamanan/polsekterdekat/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          polsekTerdekatState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          polsekTerdekatState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        polsekTerdekatState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        polsekTerdekatState.delete.loading = true;
+
+        const response = await fetch(`/api/keamanan/polsekterdekat/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Polsek terdekat berhasil dihapus");
+          await polsekTerdekatState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus polsek terdekat");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus polsek terdekat");
+      } finally {
+        polsekTerdekatState.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/keamanan/polsekterdekat/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            jarakKeDesa: data.jarakKeDesa,
+            alamat: data.alamat,
+            nomorTelepon: data.nomorTelepon,
+            jamOperasional: data.jamOperasional,
+            embedMapUrl: data.embedMapUrl,
+            namaTempatMaps: data.namaTempatMaps,
+            alamatMaps: data.alamatMaps,
+            linkPetunjukArah: data.linkPetunjukArah,
+            layananPolsekId: data.layananPolsekId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading polsek terdekat:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateForm.safeParse(polsekTerdekatState.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        polsekTerdekatState.edit.loading = true;
+        const response = await fetch(
+          `/api/keamanan/polsekterdekat/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: this.form.nama,
+              jarakKeDesa: this.form.jarakKeDesa,
+              alamat: this.form.alamat,
+              nomorTelepon: this.form.nomorTelepon,
+              jamOperasional: this.form.jamOperasional,
+              embedMapUrl: this.form.embedMapUrl,
+              namaTempatMaps: this.form.namaTempatMaps,
+              alamatMaps: this.form.alamatMaps,
+              linkPetunjukArah: this.form.linkPetunjukArah,
+              layananPolsekId: this.form.layananPolsekId,
+            }),
+          }
+        );
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update polsek terdekat");
+          await polsekTerdekatState.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate polsek terdekat");
+        }
+      } catch (error) {
+        console.error("Error updating polsek terdekat:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate polsek terdekat"
+        );
+        return false;
+      } finally {
+        polsekTerdekatState.edit.loading = false;
+      }
+    },
+    reset() {
+      polsekTerdekatState.edit.id = "";
+      polsekTerdekatState.edit.form = { ...defaultForm };
+    },
+  },
+});
+
+export default polsekTerdekatState;

src/app/admin/(dashboard)/_state/keamanan/tips-keamanan.ts

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

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/fasilitasKesehatan.ts

@@ -1,333 +1,308 @@
+/* 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";
 
-/* Informasi Umum */
-const templateInformasiUmum = z.object({
-  fasilitas: z.string().min(3, "Fasilitas minimal 3 karakter"),
-  alamat: z.string().min(3, "Alamat minimal 3 karakter"),
-  jamOperasional: z.string().min(3, "Jam Operasional minimal 3 karakter"),
+// Validasi form
+const templateForm = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+  informasiUmum: z.object({
+    fasilitas: z.string().min(1, "Fasilitas harus diisi"),
+    alamat: z.string().min(1, "Alamat harus diisi"),
+    jamOperasional: z.string().min(1, "Jam operasional harus diisi"),
+  }),
+  layananUnggulan: z.object({
+    content: z.string().min(1, "Layanan unggulan harus diisi"),
+  }),
+  dokterdanTenagaMedis: z.object({
+    name: z.string().min(1, "Nama dokter harus diisi"),
+    specialist: z.string().min(1, "Spesialis harus diisi"),
+    jadwal: z.string().min(1, "Jadwal harus diisi"),
+  }),
+  fasilitasPendukung: z.object({
+    content: z.string().min(1, "Fasilitas pendukung harus diisi"),
+  }),
+  prosedurPendaftaran: z.object({
+    content: z.string().min(1, "Prosedur pendaftaran harus diisi"),
+  }),
+  tarifDanLayanan: z.object({
+    layanan: z.string().min(1, "Layanan harus diisi"),
+    tarif: z.string().min(1, "Tarif harus diisi"),
+  }),
 });
 
-type InfromasiUmum = Prisma.InformasiUmumGetPayload<{
-  select: {
-    fasilitas: true;
-    alamat: true;
-    jamOperasional: true;
-  };
-}>;
+// Default form kosong
+const defaultForm = {
+  name: "",
+  informasiUmum: {
+    fasilitas: "",
+    alamat: "",
+    jamOperasional: "",
+  },
+  layananUnggulan: {
+    content: "",
+  },
+  dokterdanTenagaMedis: {
+    name: "",
+    specialist: "",
+    jadwal: "",
+  },
+  fasilitasPendukung: {
+    content: "",
+  },
+  prosedurPendaftaran: {
+    content: "",
+  },
+  tarifDanLayanan: {
+    layanan: "",
+    tarif: "",
+  },
+};
 
-const informasiumum = proxy({
+const fasilitasKesehatanState = proxy({
   create: {
-    form: {} as InfromasiUmum,
+    form: { ...defaultForm },
     loading: false,
-    async create() {
-      const cek = templateInformasiUmum.safeParse(informasiumum.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 {
-        informasiumum.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.informasiumum["create"].post(
-          informasiumum.create.form
+        this.loading = true;
+        const payload = { ...this.form };
+
+        const res = await (ApiFetch.api.kesehatan as any)[
+          "fasilitas-kesehatan"
+        ].create.post(payload);
+
+        if (res.status === 200) {
+          toast.success("Berhasil menambahkan fasilitas kesehatan");
+          this.resetForm();
+          await fasilitasKesehatanState.findMany.load();
+          return res.data;
+        }
+      } catch (err: any) {
+        const msg = err?.message || "Terjadi kesalahan saat mengirim data";
+        toast.error(msg);
+        console.error("SUBMIT ERROR:", err);
+        return null;
+      } finally {
+        this.loading = false;
+      }
+    },
+    resetForm() {
+      this.form = { ...defaultForm };
+    },
+  },
+
+  findMany: {
+    data: null as
+      | Prisma.FasilitasKesehatanGetPayload<{
+          include: {
+            informasiumum: true;
+            layananunggulan: true;
+            dokterdantenagamedis: true;
+            fasilitaspendukung: true;
+            prosedurpendaftaran: true;
+            tarifdanlayanan: true;
+          };
+        }>[]
+      | null,
+    loading: false,
+    async load() {
+      try {
+        this.loading = true;
+        const res = await (ApiFetch.api.kesehatan as any)[
+          "fasilitas-kesehatan"
+        ]["find-many"].get();
+
+        if (res.status === 200) {
+          this.data = res.data?.data ?? [];
+        } else {
+          toast.error("Gagal memuat data fasilitas 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.FasilitasKesehatanGetPayload<{
+      include: {
+        informasiumum: true;
+        layananunggulan: true;
+        dokterdantenagamedis: true;
+        fasilitaspendukung: true;
+        prosedurpendaftaran: true;
+        tarifdanlayanan: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      const res = await fetch(`/api/kesehatan/fasilitas-kesehatan/${id}`);
+      if (res.ok) {
+        const data = await res.json();
+        fasilitasKesehatanState.findUnique.data = data.data ?? null;
+      } else {
+        toast.error("Gagal load data fasilitas kesehatan");
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async load(id: string) {
+      const res = await fetch(`/api/kesehatan/fasilitas-kesehatan/${id}`);
+      if (!res.ok) {
+        toast.error("Gagal load data fasilitas kesehatan");
+        return;
+      }
+
+      const result = await res.json();
+      const data = result.data;
+
+      fasilitasKesehatanState.edit.id = data.id;
+      fasilitasKesehatanState.edit.form = {
+        name: data.name,
+        informasiUmum: {
+          fasilitas: data.informasiumum.fasilitas,
+          alamat: data.informasiumum.alamat,
+          jamOperasional: data.informasiumum.jamOperasional,
+        },
+        layananUnggulan: {
+          content: data.layananunggulan.content,
+        },
+        dokterdanTenagaMedis: {
+          name: data.dokterdantenagamedis.name,
+          specialist: data.dokterdantenagamedis.specialist,
+          jadwal: data.dokterdantenagamedis.jadwal,
+        },
+        fasilitasPendukung: {
+          content: data.fasilitaspendukung.content,
+        },
+        prosedurPendaftaran: {
+          content: data.prosedurpendaftaran.content,
+        },
+        tarifDanLayanan: {
+          layanan: data.tarifdanlayanan.layanan,
+          tarif: data.tarifdanlayanan.tarif,
+        },
+      };
+    },
+    async submit() {
+      const cek = templateForm.safeParse(fasilitasKesehatanState.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 {
+        fasilitasKesehatanState.edit.loading = true;
+        const payload = {
+          name: fasilitasKesehatanState.edit.form.name,
+          informasiUmum: {
+            fasilitas:
+              fasilitasKesehatanState.edit.form.informasiUmum.fasilitas,
+            alamat: fasilitasKesehatanState.edit.form.informasiUmum.alamat,
+            jamOperasional:
+              fasilitasKesehatanState.edit.form.informasiUmum.jamOperasional,
+          },
+          layananUnggulan: {
+            content: fasilitasKesehatanState.edit.form.layananUnggulan.content,
+          },
+          dokterdanTenagaMedis: {
+            name: fasilitasKesehatanState.edit.form.dokterdanTenagaMedis.name,
+            specialist:
+              fasilitasKesehatanState.edit.form.dokterdanTenagaMedis.specialist,
+            jadwal:
+              fasilitasKesehatanState.edit.form.dokterdanTenagaMedis.jadwal,
+          },
+          fasilitasPendukung: {
+            content:
+              fasilitasKesehatanState.edit.form.fasilitasPendukung.content,
+          },
+          prosedurPendaftaran: {
+            content:
+              fasilitasKesehatanState.edit.form.prosedurPendaftaran.content,
+          },
+          tarifDanLayanan: {
+            layanan: fasilitasKesehatanState.edit.form.tarifDanLayanan.layanan,
+            tarif: fasilitasKesehatanState.edit.form.tarifDanLayanan.tarif,
+          },
+        };
+
+        const res = await fetch(
+          `/api/kesehatan/fasilitas-kesehatan/${fasilitasKesehatanState.edit.id}`,
+          {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
+          }
         );
-        if (res.status === 200) {
-            informasiumum.findMany.load();
-            return toast.success("success create");
+
+        if (!res.ok) {
+          const error = await res.json();
+          throw new Error(error.message || "Update gagal");
         }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
-      } finally {
-        informasiumum.create.loading = false;
-      }
-    },
-  },
-  findMany: {
-    data: null as
-      | Prisma.InformasiUmumGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.
-      informasiumum["find-many"].get();
-      if (res.status === 200) {
-        informasiumum.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-});
-/* ======================================================================= */
 
-/* Layanan Unggulan */
-const templateLayananUnggulanForm = z.object({
-  content: z.string().min(3, "Content minimal 3 karakter"),
-});
-
-type LayananUnggulan = Prisma.LayananUnggulanGetPayload<{
-  select: {
-    content: true;
-  };
-}>;
-
-const layananunggulan = proxy({
-  create: {
-    form: {} as LayananUnggulan,
-    loading: false,
-    async create() {
-      const cek = templateLayananUnggulanForm.safeParse(layananunggulan.create.form);
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
-      try {
-        layananunggulan.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.layananunggulan["create"].post(
-          layananunggulan.create.form
+        toast.success("Berhasil update fasilitas kesehatan");
+        await fasilitasKesehatanState.findMany.load();
+        return true;
+      } catch (err) {
+        toast.error(
+          err instanceof Error ? err.message : "Terjadi kesalahan saat update"
         );
-        if (res.status === 200) {
-          layananunggulan.findMany.load();
-          return toast.success("success create");
-        }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
+        return false;
       } finally {
-        layananunggulan.create.loading = false;
+        fasilitasKesehatanState.edit.loading = false;
       }
     },
-  },
-  findMany: {
-    data: null as
-      | Prisma.LayananUnggulanGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.
-      layananunggulan["find-many"].get();
-      if (res.status === 200) {
-        layananunggulan.findMany.data = res.data?.data ?? [];
-      }
+    resetForm() {
+      fasilitasKesehatanState.edit.id = "";
+      fasilitasKesehatanState.edit.form = { ...defaultForm };
     },
   },
-})
-/* ======================================================================= */  
-
-/* Dokter dan Tenaga Medis */
-const templateDokterdanTenagaMedis = z.object({
-  name: z.string().min(3, "Name minimal 3 karakter"),
-  specialist: z.string().min(3, "Specialist minimal 3 karakter"),
-  jadwal: z.string().min(3, "Jadwal minimal 3 karakter"),
-})
-
-type DokterdanTenagaMedis = Prisma.DokterdanTenagaMedisGetPayload<{
-  select: {
-    name: true;
-    specialist: true;
-    jadwal: true;
-  };
-}>;
-
-const dokterdantenagamedis = proxy({
-  create: {
-    form: {} as DokterdanTenagaMedis,
+  delete: {
     loading: false,
-    async create() {
-      const cek = templateDokterdanTenagaMedis.safeParse(dokterdantenagamedis.create.form);
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
+    async byId(id: string){
       try {
-        dokterdantenagamedis.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.dokterdantenagamedis["create"].post(dokterdantenagamedis.create.form);
-        if (res.status === 200) {
-          dokterdantenagamedis.findMany.load();
-          return toast.success("success create");
+        fasilitasKesehatanState.delete.loading = true;
+        const res = await fetch(`/api/kesehatan/fasilitas-kesehatan/del/${id}`, {
+          method: "DELETE",
+        });
+
+        const result = await res.json();
+        if (res.ok && result.success) {
+          toast.success("Fasilitas kesehatan berhasil dihapus");
+          await fasilitasKesehatanState.findMany.load();
+        } else {
+          toast.error(result.message || "Gagal menghapus");
         }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
+      } catch {
+        toast.error("Terjadi kesalahan saat menghapus");
       } finally {
-        dokterdantenagamedis.create.loading = false;
+        fasilitasKesehatanState.delete.loading = false;
       }
-    },
+    }
   },
-  findMany: {
-    data: null as
-      | Prisma.DokterdanTenagaMedisGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.dokterdantenagamedis["find-many"].get();
-      if (res.status === 200) {
-        dokterdantenagamedis.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-})
-/* ======================================================================= */  
+});
 
-/* Fasilitas Pendukung */
-const templateFasilitasPendukung = z.object({
-  content: z.string().min(3, "Content minimal 3 karakter"),
-})
-
-type FasilitasPendukung = Prisma.FasilitasPendukungGetPayload<{
-  select: {
-    content: true;
-  };
-}>;
-
-const fasilitaspendukung = proxy({
-  create: {
-    form: {} as FasilitasPendukung,
-    loading: false,
-    async create() {
-      const cek = templateFasilitasPendukung.safeParse(fasilitaspendukung.create.form);
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
-      try {
-        fasilitaspendukung.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.fasilitaspendukung["create"].post(fasilitaspendukung.create.form);
-        if (res.status === 200) {
-          fasilitaspendukung.findMany.load();
-          return toast.success("success create");
-        }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
-      } finally {
-        fasilitaspendukung.create.loading = false;
-      }
-    },
-  },
-  findMany: {
-    data: null as
-      | Prisma.FasilitasPendukungGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.
-      fasilitaspendukung["find-many"].get();
-      if (res.status === 200) {
-        fasilitaspendukung.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-})
-/* ======================================================================= */  
-
-/* Tarif dan Layanan */
-const templateTarifDanLayanan = z.object({
-  layanan: z.string().min(3, "Layanan minimal 3 karakter"),
-  tarif: z.string().min(3, "Tarif minimal 3 karakter"),
-})
-
-const tarifdanlayanan = proxy({
-  create: {
-    form: {} as Prisma.TarifDanLayananGetPayload<{ select: { layanan: true; tarif: true } }>,
-    loading: false,
-    async create() {
-      const cek = templateTarifDanLayanan.safeParse(tarifdanlayanan.create.form);
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
-      try {
-        tarifdanlayanan.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.tarifdanlayanan["create"].post(tarifdanlayanan.create.form);
-        if (res.status === 200) {
-          tarifdanlayanan.findMany.load();
-          return toast.success("success create");
-        }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
-      } finally {
-        tarifdanlayanan.create.loading = false;
-      }
-    },
-  },
-  findMany: {
-    data: null as
-      | Prisma.TarifDanLayananGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.
-      tarifdanlayanan["find-many"].get();
-      if (res.status === 200) {
-        tarifdanlayanan.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-})
-/* ======================================================================= */  
-
-/* Prosedur Pendaftaran */
-const templateProsedurPendaftaran = z.object({
-  content: z.string().min(3, "Content minimal 3 karakter"),
-})
-
-const prosedurpendaftaran = proxy({
-  create: {
-    form: {} as Prisma.ProsedurPendaftaranGetPayload<{ select: { content: true } }>,
-    loading: false,
-    async create() {
-      const cek = templateProsedurPendaftaran.safeParse(prosedurpendaftaran.create.form);
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
-      try {
-        prosedurpendaftaran.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.prosedurpendaftaran["create"].post(prosedurpendaftaran.create.form);
-        if (res.status === 200) {
-          prosedurpendaftaran.findMany.load();
-          return toast.success("success create"); 
-        }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
-      } finally {
-        prosedurpendaftaran.create.loading = false;
-      }
-    },
-  },
-  findMany: {
-    data: null as
-      | Prisma.ProsedurPendaftaranGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.
-      prosedurpendaftaran["find-many"].get();
-      if (res.status === 200) {
-        prosedurpendaftaran.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-})
-
-const stateFasilitasKesehatan = proxy({
-  informasiumum,
-  layananunggulan,
-  dokterdantenagamedis,
-  fasilitaspendukung,
-  tarifdanlayanan,
-  prosedurpendaftaran
-})
-
-export default stateFasilitasKesehatan
+export default fasilitasKesehatanState;

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

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

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -5,362 +6,307 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 /* Informasi Kegiatan */
-const templateInformasiKegiatan = z.object({
-  name: z.string().min(3, "Name minimal 3 karakter"),
-  tanggal: z.string().min(3, "Tanggal minimal 3 karakter"),
-  waktu: z.string().min(3, "Waktu minimal 3 karakter"),
-  lokasi: z.string().min(3, "Lokasi minimal 3 karakter"),
+const templateForm = z.object({
+  content: z.string().min(1, "Content minimal 1 karakter"),
+  informasiJadwalKegiatan: z.object({
+    name: z.string().min(1, "Name minimal 1 karakter"),
+    tanggal: z.string().min(1, "Tanggal minimal 1 karakter"),
+    waktu: z.string().min(1, "Waktu minimal 1 karakter"),
+    lokasi: z.string().min(1, "Lokasi minimal 1 karakter"),
+  }),
+  deskripsiJadwalKegiatan: z.object({
+    deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  }),
+  layananJadwalKegiatan: z.object({
+    content: z.string().min(1, "Content minimal 1 karakter"),
+  }),
+  syaratKetentuanJadwalKegiatan: z.object({
+    content: z.string().min(1, "Content minimal 1 karakter"),
+  }),
+  dokumenJadwalKegiatan: z.object({
+    content: z.string().min(1, "Content minimal 1 karakter"),
+  }),
+  pendaftaranJadwalKegiatan: z.object({
+    name: z.string().min(1, "Name minimal 1 karakter"),
+    tanggal: z.string().min(1, "Tanggal minimal 1 karakter"),
+    namaOrangtua: z.string().min(1, "Nama Orangtua minimal 1 karakter"),
+    nomor: z.string().min(1, "Nomor minimal 1 karakter"),
+    alamat: z.string().min(1, "Alamat minimal 1 karakter"),
+    catatan: z.string().min(1, "Catatan minimal 1 karakter"),
+  }),
 });
 
-type InformasiKegiatan = Prisma.InformasiJadwalKegiatanGetPayload<{
-  select: {
-    name: true;
-    tanggal: true;
-    waktu: true;
-    lokasi: true;
-  };
-}>;
+const defaultForm = {
+  content: "",
+  informasiJadwalKegiatan: {
+    name: "",
+    tanggal: "",
+    waktu: "",
+    lokasi: "",
+  },
+  deskripsiJadwalKegiatan: {
+    deskripsi: "",
+  },
+  layananJadwalKegiatan: {
+    content: "",
+  },
+  syaratKetentuanJadwalKegiatan: {
+    content: "",
+  },
+  dokumenJadwalKegiatan: {
+    content: "",
+  },
+  pendaftaranJadwalKegiatan: {
+    name: "",
+    tanggal: "",
+    namaOrangtua: "",
+    nomor: "",
+    alamat: "",
+    catatan: "",
+  },
+};
 
-const informasiKegiatan = proxy({
+const jadwalkegiatanState = proxy({
   create: {
-    form: {} as InformasiKegiatan,
+    form: { ...defaultForm },
     loading: false,
-    async create() {
-      const cek = templateInformasiKegiatan.safeParse(
-        informasiKegiatan.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 {
-        informasiKegiatan.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.informasiJadwalKegiatan[
-          "create"
-        ].post(informasiKegiatan.create.form);
+        this.loading = true;
+        const payload = { ...this.form };
+
+        const res = await (ApiFetch.api.kesehatan as any)[
+          "jadwal-kegiatan"
+        ].create.post(payload);
+
         if (res.status === 200) {
-          informasiKegiatan.findMany.load();
-          return toast.success("success create");
+          toast.success("Berhasil menambahkan jadwal kegiatan");
+          this.resetForm();
+          await jadwalkegiatanState.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 {
-        informasiKegiatan.create.loading = false;
+        this.loading = false;
       }
     },
+    resetForm() {
+      this.form = { ...defaultForm };
+    },
   },
+
   findMany: {
     data: null as
-      | Prisma.InformasiJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
+      | Prisma.JadwalKegiatanGetPayload<{
+          include: {
+            informasijadwalkegiatan: true;
+            deskripsijadwalkegiatan: true;
+            layananjadwalkegiatan: true;
+            dokumenjadwalkegiatan: true;
+            pendaftaranjadwalkegiatan: true;
+          };
+        }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.informasiJadwalKegiatan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        informasiKegiatan.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-});
-/* ======================================================================= */
-
-/* Deskripsi Kegiatan */
-const templateDeskripsiKegiatan = z.object({
-  deskripsi: z.string().min(3, "Content minimal 3 karakter"),
-});
-
-type DeskripsiKegiatan = Prisma.DeskripsiJadwalKegiatanGetPayload<{
-  select: { deskripsi: true };
-}>;
-
-const deskripsiKegiatan = proxy({
-  create: {
-    form: {} as DeskripsiKegiatan,
     loading: false,
-    async create() {
-      const cek = templateDeskripsiKegiatan.safeParse(
-        deskripsiKegiatan.create.form
-      );
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
+    async load() {
       try {
-        deskripsiKegiatan.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.deskripsikegiatan[
-          "create"
-        ].post(deskripsiKegiatan.create.form);
+        this.loading = true;
+        const res = await (ApiFetch.api.kesehatan as any)[
+          "jadwal-kegiatan"
+        ]["find-many"].get();
+
         if (res.status === 200) {
-          deskripsiKegiatan.findMany.load();
-          return toast.success("success create");
+          this.data = res.data?.data ?? [];
+        } else {
+          toast.error("Gagal memuat data jadwal kegiatan");
         }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
+
+        return res;
+      } catch (err) {
+        toast.error("Terjadi error saat load data");
+        console.error("LOAD ERROR:", err);
+        throw err;
       } finally {
-        deskripsiKegiatan.create.loading = false;
+        this.loading = false;
       }
     },
   },
-  findMany: {
-    data: null as
-      | Prisma.DeskripsiJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.deskripsikegiatan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        deskripsiKegiatan.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-});
-/* ======================================================================= */
-
-/* Layanan Tersedia */
-const templateLayananTersedia = z.object({
-  content: z.string().min(3, "Content minimal 3 karakter"),
-});
-
-type LayananTersedia = Prisma.LayananJadwalKegiatanGetPayload<{
-  select: { content: true };
-}>;
-
-const layanantersedia = proxy({
-  create: {
-    form: {} as LayananTersedia,
+  findUnique: {
+    data: null as Prisma.JadwalKegiatanGetPayload<{
+      include: {
+        informasijadwalkegiatan: true;
+        deskripsijadwalkegiatan: true;
+        layananjadwalkegiatan: true;
+        syaratketentuanjadwalkegiatan: true;
+        dokumenjadwalkegiatan: true;
+        pendaftaranjadwalkegiatan: true;
+      };
+    }> | null,
     loading: false,
-    async create() {
-      const cek = templateLayananTersedia.safeParse(
-        layanantersedia.create.form
-      );
+    async load(id: string) {
+      const res = await fetch(`/api/kesehatan/jadwal-kegiatan/${id}`);
+      if (res.ok) {
+        const data = await res.json();
+        jadwalkegiatanState.findUnique.data = data.data ?? null;
+      } else {
+        toast.error("Gagal load data jadwal kegiatan");
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async load(id: string) {
+      const res = await fetch(`/api/kesehatan/jadwal-kegiatan/${id}`);
+      if (!res.ok) {
+        toast.error("Gagal load data jadwal kegiatan");
+        return;
+      }
+
+      const result = await res.json();
+      const data = result.data;
+
+      jadwalkegiatanState.edit.id = data.id;
+      jadwalkegiatanState.edit.form = {
+        content: data.content,
+        informasiJadwalKegiatan: {
+          name: data.informasijadwalkegiatan.name,
+          tanggal: data.informasijadwalkegiatan.tanggal,
+          waktu: data.informasijadwalkegiatan.waktu,
+          lokasi: data.informasijadwalkegiatan.lokasi,
+        },
+        layananJadwalKegiatan: {
+          content: data.layananjadwalkegiatan.content,
+        },
+        deskripsiJadwalKegiatan: {
+          deskripsi: data.deskripsijadwalkegiatan.deskripsi,
+        },
+        syaratKetentuanJadwalKegiatan: {
+          content: data.syaratketentuanjadwalkegiatan.content,
+        },
+        dokumenJadwalKegiatan: {
+          content: data.dokumenjadwalkegiatan.content,
+        },
+        pendaftaranJadwalKegiatan: {
+          name: data.pendaftaranjadwalkegiatan.name,
+          tanggal: data.pendaftaranjadwalkegiatan.tanggal,
+          namaOrangtua: data.pendaftaranjadwalkegiatan.namaOrangtua,
+          nomor: data.pendaftaranjadwalkegiatan.nomor,
+          alamat: data.pendaftaranjadwalkegiatan.alamat,
+          catatan: data.pendaftaranjadwalkegiatan.catatan,
+        },
+      };
+    },
+    async submit() {
+      const cek = templateForm.safeParse(jadwalkegiatanState.edit.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 {
-        layanantersedia.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.layanantersedia["create"].post(
-          layanantersedia.create.form
-        );
-        if (res.status === 200) {
-          layanantersedia.findMany.load();
-          return toast.success("success create");
-        }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
-      } finally {
-        layanantersedia.create.loading = false;
-      }
-    },
-  },
-  findMany: {
-    data: null as
-      | Prisma.LayananJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.layanantersedia[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        layanantersedia.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-});
-/* ======================================================================= */
+        jadwalkegiatanState.edit.loading = true;
+        const payload = {
+          content: jadwalkegiatanState.edit.form.content,
+          informasiJadwalKegiatan: {
+            name: jadwalkegiatanState.edit.form.informasiJadwalKegiatan.name,
+            tanggal: jadwalkegiatanState.edit.form.informasiJadwalKegiatan.tanggal,
+            waktu: jadwalkegiatanState.edit.form.informasiJadwalKegiatan.waktu,
+            lokasi: jadwalkegiatanState.edit.form.informasiJadwalKegiatan.lokasi,
+          },
+          layananJadwalKegiatan: {
+            content: jadwalkegiatanState.edit.form.layananJadwalKegiatan.content,
+          },
+          deskripsiJadwalKegiatan: {
+            deskripsi: jadwalkegiatanState.edit.form.deskripsiJadwalKegiatan.deskripsi,
+          },
+          syaratKetentuanJadwalKegiatan: {
+            content: jadwalkegiatanState.edit.form.syaratKetentuanJadwalKegiatan.content,
+          },
+          dokumenJadwalKegiatan: {
+            content: jadwalkegiatanState.edit.form.dokumenJadwalKegiatan.content,
+          },
+          pendaftaranJadwalKegiatan: {
+            name: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.name,
+            tanggal: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.tanggal,
+            namaOrangtua: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.namaOrangtua,
+            nomor: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.nomor,
+            alamat: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.alamat,
+            catatan: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.catatan,
+          },
+        };
 
-/* Syarat dan Ketentuan */
-const templateSyaratKetentuan = z.object({
-  content: z.string().min(3, "Content minimal 3 karakter"),
-});
-
-type SyaratKetentuan = Prisma.SyaratKetentuanJadwalKegiatanGetPayload<{
-  select: { content: true };
-}>;
-
-const syaratketentuan = proxy({
-  create: {
-    form: {} as SyaratKetentuan,
-    loading: false,
-    async create() {
-      const cek = templateSyaratKetentuan.safeParse(
-       syaratketentuan.create.form
-      );
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
-      try {
-       syaratketentuan.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.syaratketentuan[
-          "create"
-        ].post(syaratketentuan.create.form);
-        if (res.status === 200) {
-         syaratketentuan.findMany.load();
-          return toast.success("success create");
-        }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
-      } finally {
-       syaratketentuan.create.loading = false;
-      }
-    },
-  },
-  findMany: {
-    data: null as
-      | Prisma.SyaratKetentuanJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.syaratketentuan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        syaratketentuan.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-});
-/* ======================================================================= */
-
-/* Dokumen Yang Diperlukan */
-const templateDokumenDiperlukan = z.object({
-  content: z.string().min(3, "Content minimal 3 karakter"),
-});
-
-type DokumenDiperlukan = Prisma.DokumenJadwalKegiatanGetPayload<{
-  select: { content: true };
-}>;
-
-const dokumenjadwalkegiatan = proxy({
-  create: {
-    form: {} as DokumenDiperlukan,
-    loading: false,
-    async create() {
-      const cek = templateDokumenDiperlukan.safeParse(
-        dokumenjadwalkegiatan.create.form
-      );
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
-      try {
-        dokumenjadwalkegiatan.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.dokumendiperlukan[
-          "create"
-        ].post(dokumenjadwalkegiatan.create.form);
-        if (res.status === 200) {
-          dokumenjadwalkegiatan.findMany.load();
-          return toast.success("success create");
-        }
-        return toast.error("failed create");
-      } catch (error) {
-        console.log((error as Error).message);
-      } finally {
-        dokumenjadwalkegiatan.create.loading = false;
-      }
-    },
-  },
-  findMany: {
-    data: null as
-      | Prisma.DokumenJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.dokumendiperlukan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        dokumenjadwalkegiatan.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-});
-/* ======================================================================= */
-
-/* Pendaftaran */
-const templatePendaftaran = z.object({
-  name: z.string().min(3, "Nama minimal 3 karakter"),
-  tanggal: z.string().min(1),
-  namaOrangtua: z.string().min(3, "Nama minimal 3 karakter"),
-  nomor: z.string().min(9, "Nama minimal 9 karakter"),
-  alamat: z.string().min(7, "Alamat minimal 7 karakter"),
-  catatan: z.string().min(3, "Catatan minimal 3 karakter"),
-})
-
-type Pendaftaran = Prisma.PendaftaranJadwalKegiatanGetPayload<{
-  select: {
-    name: true;
-    tanggal: true;
-    namaOrangtua: true;
-    nomor: true;
-    alamat: true;
-    catatan: true;
-  }
-}>
-
-const pendaftaranjadwal = proxy({
-  create: {
-    form: {} as Pendaftaran,
-    loading: false,
-    async create() {
-      const cek = templatePendaftaran.safeParse(pendaftaranjadwal.create.form);
-      if(!cek.success) {
-        const err = `[${cek.error.issues
-        .map((v) => `${v.path.join(".")}`)
-        .join("\n")}] required`;
-        return toast.error(err);
-      }
-      try {
-        pendaftaranjadwal.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.pendaftaranJadwalKegiatan["create"].post(
-          pendaftaranjadwal.create.form);
-          if (res.status === 200) {
-            pendaftaranjadwal.findMany.load();
-            return toast.success("success create")
+        const res = await fetch(
+          `/api/kesehatan/jadwal-kegiatan/${jadwalkegiatanState.edit.id}`,
+          {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
           }
-          return toast.error("failed create")
-      } catch (error) {
-        console.log((error as Error).message)
+        );
+
+        if (!res.ok) {
+          const error = await res.json();
+          throw new Error(error.message || "Update gagal");
+        }
+
+        toast.success("Berhasil update jadwal kegiatan");
+        await jadwalkegiatanState.findMany.load();
+        return true;
+      } catch (err) {
+        toast.error(
+          err instanceof Error ? err.message : "Terjadi kesalahan saat update"
+        );
+        return false;
       } finally {
-        pendaftaranjadwal.create.loading = false;
+        jadwalkegiatanState.edit.loading = false;
+      }
+    },
+    resetForm() {
+      jadwalkegiatanState.edit.id = "";
+      jadwalkegiatanState.edit.form = { ...defaultForm };
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string){
+      try {
+        jadwalkegiatanState.delete.loading = true;
+        const res = await fetch(`/api/kesehatan/jadwal-kegiatan/del/${id}`, {
+          method: "DELETE",
+        });
+
+        const result = await res.json();
+        if (res.ok && result.success) {
+          toast.success("Jadwal kegiatan berhasil dihapus");
+          await jadwalkegiatanState.findMany.load();
+        } else {
+          toast.error(result.message || "Gagal menghapus");
+        }
+      } catch {
+        toast.error("Terjadi kesalahan saat menghapus");
+      } finally {
+        jadwalkegiatanState.delete.loading = false;
       }
     }
   },
-  findMany: {
-    data: null as
-    | Prisma.PendaftaranJadwalKegiatanGetPayload<{omit: {isActive: true}}>[]
-    | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.
-      pendaftaranJadwalKegiatan["find-many"].get();
-      if(res.status === 200) {
-        pendaftaranjadwal.findMany.data = res.data?.data ?? [];
-      }
-    }
-  }
-})
-
-const stateJadwalKegiatan = proxy({
-  informasiKegiatan,
-  deskripsiKegiatan,
-  layanantersedia,
-  syaratketentuan,
-  dokumenjadwalkegiatan,
-  pendaftaranjadwal
 });
-export default stateJadwalKegiatan;
+
+export default jadwalkegiatanState;

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

@@ -6,9 +6,9 @@ import { z } from "zod";
 
 const templatePersentase = z.object({
   tahun: z.string().min(4, "Tahun harus diisi"),
-  kematianKasar: z.string().min(2, "Kematian kasar harus diisi"),
-  kelahiranKasar: z.string().min(2, "Kelahiran kasar harus diisi"),
-  kematianBayi: z.string().min(2, "Kematian bayi harus diisi"),
+  kematianKasar: z.string().min(1, "Kematian kasar harus diisi"),
+  kelahiranKasar: z.string().min(1, "Kelahiran kasar harus diisi"),
+  kematianBayi: z.string().min(1, "Kematian bayi harus diisi"),
 });
 
 type Persentase = Prisma.DataKematian_KelahiranGetPayload<{
@@ -34,51 +34,157 @@ const persentasekelahiran = proxy({
     async create() {
       const cek = templatePersentase.safeParse(persentasekelahiran.create.form);
       if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
+        const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
+        toast.error(err);
+        return null;
       }
       try {
         persentasekelahiran.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.persentasekelahiran[
-          "create"
-        ].post(persentasekelahiran.create.form);
+        const res = await ApiFetch.api.kesehatan.persentasekelahiran["create"].post(
+          persentasekelahiran.create.form
+        );
+
         if (res.status === 200) {
-          persentasekelahiran.create.form = {
-            tahun: "",
-            kematianKasar: "",
-            kelahiranKasar: "",
-            kematianBayi: "",
-          };
-          persentasekelahiran.findMany.load();
-          return toast.success("success create");
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            persentasekelahiran.create.form = { ...defaultForm };
+            persentasekelahiran.findMany.load();
+            return id;
+          }
         }
-        return toast.error("failed create");
+        toast.error("failed create");
+        return null;
       } catch (error) {
         console.log((error as Error).message);
+        return null;
       } finally {
         persentasekelahiran.create.loading = false;
       }
     },
   },
+
   findMany: {
-    data: null as
-      | Prisma.DataKematian_KelahiranGetPayload<{ omit: { isActive: true } }>[]
-      | null,
+    data: null as Prisma.DataKematian_KelahiranGetPayload<{
+      omit: { isActive: true };
+    }>[] | null,
     async load() {
-      const res = await ApiFetch.api.kesehatan.persentasekelahiran[
-        "find-many"
-      ].get();
+      const res = await ApiFetch.api.kesehatan.persentasekelahiran["find-many"].get();
       if (res.status === 200) {
         persentasekelahiran.findMany.data = res.data?.data ?? [];
       }
     },
   },
+
+  findUnique: {
+    data: null as Prisma.DataKematian_KelahiranGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/persentasekelahiran/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          persentasekelahiran.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch persentasekelahiran:", res.statusText);
+          persentasekelahiran.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching persentasekelahiran:", error);
+        persentasekelahiran.findUnique.data = null;
+      }
+    },
+  },
+
+update: {
+  id: "",
+  form: { ...defaultForm },
+  loading: false,
+  async submit() {
+    const id = this.id;
+    if (!id) {
+      toast.warn("ID tidak valid");
+      return null;
+    }
+
+    const formData = {
+      tahun: this.form.tahun,
+      kematianKasar: this.form.kematianKasar,
+      kelahiranKasar: this.form.kelahiranKasar,
+      kematianBayi: this.form.kematianBayi,
+    };
+
+    const cek = templatePersentase.safeParse(formData);
+    if (!cek.success) {
+      const err = `[${cek.error.issues
+        .map((v) => `${v.path.join(".")}`)
+        .join("\n")}] required`;
+      toast.error(err);
+      return null;
+    }
+
+    try {
+      this.loading = true;
+      const res = await fetch(`/api/kesehatan/persentasekelahiran/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formData),
+      });
+
+      const result = await res.json();
+
+      if (!res.ok || !result?.success) {
+        throw new Error(result?.message || "Gagal update data");
+      }
+
+      toast.success("Berhasil update data!");
+      await persentasekelahiran.findMany.load();
+      return result.data;
+    } catch (error) {
+      console.error("Update error:", error);
+      toast.error("Gagal update data persentase kelahiran");
+      throw error;
+    } finally {
+      this.loading = false;
+    }
+  },
+},
+
+
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        persentasekelahiran.delete.loading = true;
+
+        const response = await fetch(`/api/kesehatan/persentasekelahiran/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Persentase kelahiran berhasil dihapus");
+          await persentasekelahiran.findMany.load();
+        } else {
+          toast.error(result?.message || "Gagal menghapus persentase kelahiran");
+        }
+      } catch (error) { 
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus persentase kelahiran");
+      } finally {
+        persentasekelahiran.delete.loading = false;
+      }
+    },
+  },
 });
 
-const statePersentase = proxy({
-  persentasekelahiran,
-});
-
-export default statePersentase;
+export default persentasekelahiran;

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

@@ -35,9 +35,7 @@ function DetailBerita() {
   if (!beritaState.berita.findUnique.data) {
     return (
       <Stack py={10}>
-        {Array.from({ length: 10 }).map((_, k) => (
-          <Skeleton key={k} h={40} />
-        ))}
+        <Skeleton h={40} />
       </Stack>
     )
   }

src/app/admin/(dashboard)/ekonomi/pasar-desa/_lib/layoutTabs.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "Produk Pasar Desa",
+            value: "produkpasardesa",
+            href: "/admin/ekonomi/pasar-desa/pasar-desa-ui"
+        },
+        {
+            label: "Kategori Makanan",
+            value: "kategorimakanan",
+            href: "/admin/ekonomi/pasar-desa/kategori-makanan"
+        },
+    ];
+    const curentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const handleTabChange = (value: string | null) => {
+        const tab = tabs.find(t => t.value === value)
+        if (tab) {
+            router.push(tab.href)
+        }
+        setActiveTab(value)
+    }
+
+    useEffect(() => {
+        const match = tabs.find(tab => tab.href === pathname)
+        if (match) {
+            setActiveTab(match.value)
+        }
+    }, [pathname])
+
+    return (
+        <Stack>
+            <Title order={3}>Pasar Desa</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+                    ))}
+                </TabsList>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
+                    </TabsPanel>
+                ))}
+            </Tabs>
+            {children}
+        </Stack>
+    );
+}
+
+export default LayoutTabs;

src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-makanan/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-makanan/[id]/page.tsx

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

src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-makanan/create/page.tsx

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

src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-makanan/page.tsx

@@ -0,0 +1,79 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useShallowEffect } from '@mantine/hooks';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import pasarDesaState from '../../../_state/ekonomi/pasar-desa/pasar-desa';
+
+function PasarDesa() {
+  return (
+    <Box>
+      <HeaderSearch
+        title='Kategori Makanan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListPasarDesa />
+    </Box>
+  );
+}
+
+function ListPasarDesa() {
+  const statePasar = useProxy(pasarDesaState)
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    statePasar.findMany.load()
+  }, [])
+
+  if (!statePasar.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Produk Pasar Desa'
+          href='/admin/ekonomi/pasar-desa/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Produk</TableTh>
+              <TableTh>Harga Produk</TableTh>
+              <TableTh>Rating Produk</TableTh>
+              <TableTh>Alamat Usaha</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {statePasar.findMany.data?.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.nama}</TableTd>
+                <TableTd>{item.harga}</TableTd>
+                <TableTd>{item.rating}</TableTd>
+                <TableTd>{item.alamat}</TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/ekonomi/pasar-desa/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default PasarDesa;

src/app/admin/(dashboard)/ekonomi/pasar-desa/layout.tsx

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

src/app/admin/(dashboard)/ekonomi/pasar-desa/page.tsx

@@ -1,60 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
-import { useRouter } from 'next/navigation';
-
-function PasarDesa() {
-  return (
-    <Box>
-      <HeaderSearch
-        title='Pasar Desa'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-      />
-      <ListPasarDesa/>
-    </Box>
-  );
-}
-
-function ListPasarDesa() {
-  const router = useRouter();
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Pasar Desa'
-          href='/admin/ekonomi/pasar-desa/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Produk</TableTh>
-              <TableTh>Harga Produk</TableTh>
-              <TableTh>Rating Produk</TableTh>
-              <TableTh>Alamat Usaha</TableTh>
-              <TableTh>Detail</TableTh>
-              </TableTr>
-          </TableThead>
-          <TableTbody>
-            <TableTr>
-              <TableTd>Produk 1</TableTd>
-              <TableTd>Harga Rp. 20.000</TableTd>
-              <TableTd>Rating 5</TableTd>
-              <TableTd>Jalan In Aja</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/ekonomi/pasar-desa/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          </TableTbody>
-        </Table>  
-      </Paper>
-    </Box>
-  );
-}
-
-export default PasarDesa;

src/app/admin/(dashboard)/ekonomi/pasar-desa/pasar-desa-ui/create/page.tsx

@@ -3,7 +3,7 @@ import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+import { KeamananEditor } from '../../../../keamanan/_com/keamananEditor';
 
 function CreatePasarDesa() {
   const router = useRouter();

src/app/admin/(dashboard)/ekonomi/pasar-desa/pasar-desa-ui/edit/page.tsx

@@ -3,7 +3,7 @@ import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+import { KeamananEditor } from '../../../../keamanan/_com/keamananEditor';
 
 function EditPasarDesa() {
   const router = useRouter();

src/app/admin/(dashboard)/ekonomi/pasar-desa/pasar-desa-ui/page.tsx

@@ -0,0 +1,79 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useShallowEffect } from '@mantine/hooks';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import pasarDesaState from '../../../_state/ekonomi/pasar-desa/pasar-desa';
+
+function PasarDesa() {
+  return (
+    <Box>
+      <HeaderSearch
+        title='Produk Pasar Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListPasarDesa />
+    </Box>
+  );
+}
+
+function ListPasarDesa() {
+  const statePasar = useProxy(pasarDesaState)
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    statePasar.findMany.load()
+  }, [])
+
+  if (!statePasar.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Produk Pasar Desa'
+          href='/admin/ekonomi/pasar-desa/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Produk</TableTh>
+              <TableTh>Harga Produk</TableTh>
+              <TableTh>Rating Produk</TableTh>
+              <TableTh>Alamat Usaha</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {statePasar.findMany.data?.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.nama}</TableTd>
+                <TableTd>{item.harga}</TableTd>
+                <TableTd>{item.rating}</TableTd>
+                <TableTd>{item.alamat}</TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/ekonomi/pasar-desa/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default PasarDesa;

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/edit/page.tsx

@@ -0,0 +1,179 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } 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";
+
+
+import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import { Dropzone } from "@mantine/dropzone";
+import keamananLingkunganState from "../../../../_state/keamanan/keamanan-lingkungan";
+
+function EditKeamananLingkungan() {
+  const keamananState = useProxy(keamananLingkunganState);
+  const router = useRouter();
+  const params = useParams();
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: keamananState.edit.form.name || '',
+    deskripsi: keamananState.edit.form.deskripsi || '',
+    imageId: keamananState.edit.form.imageId || ''
+  });
+
+  // Load berita by id saat pertama kali
+  useEffect(() => {
+    const loadBerita = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await keamananState.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading keamananLingkungan:", error);
+        toast.error("Gagal memuat data keamananLingkungan");
+      }
+    };
+
+    loadBerita();
+  }, [params?.id]); // ✅ hapus beritaState dari dependency
+
+  const handleSubmit = async () => {
+
+    try {
+      // Update global state with form data
+      keamananState.edit.form = {
+        ...keamananState.edit.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        imageId: formData.imageId // Keep existing imageId if not changed
+      };
+
+      // Jika ada file baru, upload
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        // Update imageId in global state
+        keamananState.edit.form.imageId = uploaded.id;
+      }
+
+      await keamananState.edit.update();
+      toast.success("Keamanan Lingkungan berhasil diperbarui!");
+      router.push("/admin/keamanan/keamanan-lingkungan-pecalang-patwal");
+    } catch (error) {
+      console.error("Error updating keamananLingkungan:", error);
+      toast.error("Terjadi kesalahan saat memperbarui keamananLingkungan");
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Keamanan Lingkungan</Title>
+          <Dropzone
+            onDrop={(files) => {
+              const selectedFile = files[0]; // Ambil file pertama
+              if (selectedFile) {
+                setFile(selectedFile);
+                setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+              }
+            }}
+            onReject={() => toast.error('File tidak valid.')}
+            maxSize={5 * 1024 ** 2} // Maks 5MB
+            accept={{ 'image/*': [] }}
+          >
+            <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+              <Dropzone.Accept>
+                <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+              </Dropzone.Accept>
+              <Dropzone.Reject>
+                <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+              </Dropzone.Reject>
+              <Dropzone.Idle>
+                <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+              </Dropzone.Idle>
+
+              <div>
+                <Text size="xl" inline>
+                  Drag gambar ke sini atau klik untuk pilih file
+                </Text>
+                <Text size="sm" c="dimmed" inline mt={7}>
+                  Maksimal 5MB dan harus format gambar
+                </Text>
+              </div>
+            </Group>
+          </Dropzone>
+
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Judul Keamanan Lingkungan</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+                keamananState.edit.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKeamananLingkungan;

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx

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

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx

@@ -1,43 +1,147 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../_com/keamananEditor';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import keamananLingkunganState from '../../../_state/keamanan/keamanan-lingkungan';
+
 
 function CreateKeamananLingkungan() {
+  const keamananState = useProxy(keamananLingkunganState)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
   const router = useRouter();
+
+  const resetForm = () => {
+    keamananState.create.form = {
+      name: "",
+      deskripsi: "",
+      imageId: "",
+    }
+    setPreviewImage(null);
+    setFile(null);
+  }
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    })
+
+    const uploaded = res.data?.data;
+
+    if (!uploaded?.id) {
+      return toast.error("Gagal mengupload file");
+    }
+
+    keamananState.create.form.imageId = uploaded.id;
+
+    await keamananState.create.create();
+
+    resetForm();
+    router.push("/admin/keamanan/keamanan-lingkungan-pecalang-patwal")
+  }
+
   return (
     <Box>
       <Box mb={10}>
         <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+          <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
 
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Keamanan Lingkungan</Title>
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
           </Box>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Keamanan Lingkungan</Text>}
-          placeholder='Masukkan nama KeamananLingkungan'
+            value={keamananState.create.form.name}
+            onChange={(val) => {
+              keamananState.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Keamanan Lingkungan</Text>}
+            placeholder='Masukkan nama Keamanan Lingkungan'
           />
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi KeamananLingkungan</Text>
-            <KeamananEditor
-              showSubmit={false}
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Keamanan Lingkungan</Text>
+            <CreateEditor
+              value={keamananState.create.form.deskripsi}
+              onChange={(val) => {
+                keamananState.create.form.deskripsi = val;
+              }}
             />
           </Box>
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
           </Group>
-       </Stack>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/detail/page.tsx

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

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/edit/page.tsx

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

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
 import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import keamananLingkunganState from '../../_state/keamanan/keamanan-lingkungan';
+import { useShallowEffect } from '@mantine/hooks';
 
 function KeamananLingkungan() {
   return (
@@ -14,13 +17,26 @@ function KeamananLingkungan() {
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
       />
-      <ListKeamananLingkungan/>
+      <ListKeamananLingkungan />
     </Box>
   );
 }
 
 function ListKeamananLingkungan() {
+  const keamananState = useProxy(keamananLingkunganState)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    keamananState.findMany.load()
+  }, [])
+
+  if (!keamananState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -32,24 +48,26 @@ function ListKeamananLingkungan() {
           <TableThead>
             <TableTr>
               <TableTh>Nama Keamanan Lingkungan</TableTh>
-              <TableTh>Nomor Keamanan Lingkungan</TableTh>
               <TableTh>Deskripsi</TableTh>
               <TableTh>Detail</TableTh>
-              </TableTr>
+            </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
-              <TableTd>Keamanan Lingkungan 1</TableTd>
-              <TableTd>0896232831883</TableTd>
-              <TableTd>Keamanan Lingkungan 1</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/keamanan/keamanan-lingkungan-pecalang-patwal/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
+            {keamananState.findMany.data?.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                </TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
-        </Table>  
+        </Table>
       </Paper>
     </Box>
   );

src/app/admin/(dashboard)/keamanan/polsek-terdekat/[id]/edit/page.tsx

@@ -0,0 +1,372 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Card, Group, Modal, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import polsekTerdekat from '@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat';
+
+function CreatePolsekTerdekat() {
+  const polsekState = useProxy(polsekTerdekat)
+  const params = useParams();
+  const router = useRouter();
+  const [layananOptions, setLayananOptions] = useState<{ value: string; label: string }[]>([]);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalUpdateOpen, setModalUpdateOpen] = useState(false);
+  const [namaLayananBaru, setNamaLayananBaru] = useState("");
+  const [selectedLayananId, setSelectedLayananId] = useState<string | null>(null);
+  const [namaLayananUpdate, setNamaLayananUpdate] = useState("");
+  const [formData, setFormData] = useState({
+    nama: "",
+    jarakKeDesa: "",
+    alamat: "",
+    nomorTelepon: "",
+    jamOperasional: "",
+    embedMapUrl: "",
+    namaTempatMaps: "",
+    alamatMaps: "",
+    linkPetunjukArah: "",
+    layananPolsekId: "",
+  })
+
+  useEffect(() => {
+    const loadPolsekTerdekat = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await polsekState.edit.load(id);
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+            jarakKeDesa: data.jarakKeDesa || '',
+            alamat: data.alamat || '',
+            nomorTelepon: data.nomorTelepon || '',
+            jamOperasional: data.jamOperasional || '',
+            embedMapUrl: data.embedMapUrl || '',
+            namaTempatMaps: data.namaTempatMaps || '',
+            alamatMaps: data.alamatMaps || '',
+            linkPetunjukArah: data.linkPetunjukArah || '',
+            layananPolsekId: data.layananPolsekId || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading polsek terdekat:", error);
+        toast.error("Gagal memuat data polsek terdekat");
+      }
+    };
+
+    loadPolsekTerdekat();
+  }, [params?.id]);
+
+
+  const handleSubmit = async () => {
+    try {
+      polsekState.edit.form = {
+        ...polsekState.edit.form,
+        nama: formData.nama,
+        jarakKeDesa: formData.jarakKeDesa,
+        alamat: formData.alamat,
+        nomorTelepon: formData.nomorTelepon,
+        jamOperasional: formData.jamOperasional,
+        embedMapUrl: formData.embedMapUrl,
+        namaTempatMaps: formData.namaTempatMaps,
+        alamatMaps: formData.alamatMaps,
+        linkPetunjukArah: formData.linkPetunjukArah,
+        layananPolsekId: formData.layananPolsekId,
+      }
+      await polsekState.edit.update()
+      toast.success("Polsek terdekat berhasil diperbarui!")
+      router.push("/admin/keamanan/polsek-terdekat")
+    } catch (error) {
+      console.error("Error updating polsek terdekat:", error);
+      toast.error("Gagal memuat data polsek terdekat");
+    }
+  }
+
+  const fetchLayanan = async () => {
+    try {
+      const res = await fetch("/api/keamanan/layanan-polsek/find-many")
+      const data = await res.json()
+
+      if (data.success) {
+        const options = data.data.map((item: any) => {
+          return {
+            value: item.id,
+            label: item.nama
+          }
+        })
+        setLayananOptions(options)
+      }
+    } catch {
+      toast.error("Gagal memuat layanan polsek")
+    }
+  }
+
+
+  const handleTambahLayanan = async () => {
+    if (!namaLayananBaru.trim()) return toast.warn("Nama layanan tidak boleh kosong");
+
+    try {
+      const res = await fetch("/api/keamanan/layanan-polsek/create", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ nama: namaLayananBaru }),
+      });
+      const data = await res.json();
+      console.log("data setelah create:", data);
+
+      if (data.success) {
+        const newLayanan = {
+          value: data.data.id,
+          label: data.data.nama,
+        };
+        setLayananOptions((prev) => [...prev, newLayanan]);
+        await fetchLayanan();
+        polsekState.create.form.layananPolsekId = data.data.id;
+        toast.success("Layanan baru ditambahkan!");
+        setModalOpen(false);
+        setNamaLayananBaru("");
+      } else {
+        toast.error(data.message || "Gagal menambah layanan");
+      }
+    } catch {
+      toast.error("Error menambah layanan");
+    }
+  };
+
+  const handleUpdateLayanan = async (id: string, namaBaru: string) => {
+    if (!namaBaru.trim()) return toast.warn("Nama layanan tidak boleh kosong");
+
+    try {
+      const res = await fetch(`/api/keamanan/layanan-polsek/update/${id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ nama: namaBaru }),
+      });
+      const data = await res.json();
+      console.log("data setelah update:", data);
+
+      if (data.success) {
+        await fetchLayanan(); // Refresh list
+        toast.success("Layanan berhasil diupdate!");
+        setModalUpdateOpen(false);
+        setNamaLayananUpdate("");
+      } else {
+        toast.error(data.message || "Gagal mengupdate layanan");
+      }
+    } catch {
+      toast.error("Error mengupdate layanan");
+    }
+  };
+
+  const handleDeleteLayanan = async (id: string) => {
+    const confirmDelete = confirm("Yakin ingin menghapus layanan ini?");
+    if (!confirmDelete) return;
+
+    try {
+      const res = await fetch(`/api/keamanan/layanan-polsek/del/${id}`, {
+        method: "DELETE",
+      });
+      const data = await res.json();
+      console.log("data setelah delete:", data);
+
+      if (data.success) {
+        await fetchLayanan(); // Refresh list
+        setLayananOptions((prev) => prev.filter((layanan) => layanan.value !== id));
+        toast.success("Layanan berhasil dihapus!");
+      } else {
+        toast.error(data.message || "Gagal menghapus layanan");
+      }
+    } catch {
+      toast.error("Error menghapus layanan");
+    }
+  };
+
+
+  useEffect(() => {
+    fetchLayanan();
+  }, []);
+
+  return (
+    <Box>
+      <Modal
+        opened={modalOpen}
+        onClose={() => setModalOpen(false)}
+        title="Tambah Layanan Polsek"
+        centered
+      >
+        <Stack>
+          <TextInput
+            label="Nama Layanan"
+            placeholder="Masukkan nama layanan"
+            value={namaLayananBaru}
+            onChange={(e) => setNamaLayananBaru(e.currentTarget.value)}
+          />
+          <Button onClick={handleTambahLayanan}>Simpan</Button>
+        </Stack>
+      </Modal>
+
+      <Modal
+        opened={modalUpdateOpen}
+        onClose={() => setModalUpdateOpen(false)}
+        title="Tambah Layanan Polsek"
+        centered
+      >
+        <Stack>
+          <TextInput
+            label="Nama Layanan"
+            placeholder="Masukkan nama layanan"
+            value={namaLayananUpdate}
+            onChange={(e) => setNamaLayananUpdate(e.currentTarget.value)}
+          />
+          <Button onClick={() => {
+            if (!selectedLayananId) return toast.warn("ID layanan tidak ditemukan");
+            handleUpdateLayanan(selectedLayananId, namaLayananUpdate);
+          }}>Simpan</Button>
+        </Stack>
+      </Modal>
+
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Polsek Terdekat</Title>
+          <TextInput
+            value={formData.nama}
+            onChange={(val) => {
+              formData.nama = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Polsek Terdekat</Text>}
+            placeholder='Masukkan nama Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.jarakKeDesa}
+            onChange={(val) => {
+              formData.jarakKeDesa = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Jarak Polsek Terdekat</Text>}
+            placeholder='Masukkan jarak Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.alamat}
+            onChange={(val) => {
+              formData.alamat = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Alamat Polsek Terdekat</Text>}
+            placeholder='Masukkan alamat Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.nomorTelepon}
+            onChange={(val) => {
+              formData.nomorTelepon = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Polsek Terdekat</Text>}
+            placeholder='Masukkan nomor telepon Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.jamOperasional}
+            onChange={(val) => {
+              formData.jamOperasional = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Jam Operasional Polsek Terdekat</Text>}
+            placeholder='Masukkan jam operasional Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.embedMapUrl}
+            onChange={(val) => {
+              formData.embedMapUrl = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Embed Map URL Polsek Terdekat</Text>}
+            placeholder='Masukkan embed map url Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.namaTempatMaps}
+            onChange={(val) => {
+              formData.namaTempatMaps = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Tempat Maps Polsek Terdekat</Text>}
+            placeholder='Masukkan nama tempat maps Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.alamatMaps}
+            onChange={(val) => {
+              formData.alamatMaps = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Alamat Maps Polsek Terdekat</Text>}
+            placeholder='Masukkan alamat maps Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.linkPetunjukArah}
+            onChange={(val) => {
+              formData.linkPetunjukArah = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Link Petunjuk Arah Polsek Terdekat</Text>}
+            placeholder='Masukkan link petunjuk arah Polsek Terdekat'
+          />
+          {/* Tambah Dropdown Select */}
+          <Select
+
+            label="Layanan Polsek"
+            placeholder="Pilih layanan polsek"
+            data={layananOptions}
+
+            value={polsekState.create.form.layananPolsekId}
+            onChange={(val) => {
+              polsekState.create.form.layananPolsekId = val || "";
+            }}
+          />
+          <Button variant="light" size="xs" onClick={() => setModalOpen(true)}>
+            + Tambah Layanan Baru
+          </Button>
+
+          <Text>Daftar Layanan Polsek</Text>
+          {layananOptions.map((item) => (
+            <Card style={{border: '1px solid #ccc'}} bg={colors['white-1']} p={'md'} key={item.value}>
+              <Group>
+              <Text>{item.label}</Text>
+              <Button
+                variant="light"
+                size="xs"
+                onClick={() => {
+                  setSelectedLayananId(item.value);
+                  setNamaLayananUpdate(item.label);
+                  setModalUpdateOpen(true);
+                }}
+              >
+                Edit
+              </Button>
+              <Button
+                variant="outline"
+                color="red"
+                size="xs"
+                onClick={() => handleDeleteLayanan(item.value)}
+              >
+                Hapus
+              </Button>
+            </Group>
+            </Card>
+          ))}
+
+
+          {/* Tambah field lainnya di sini... */}
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box >
+  );
+
+}
+
+export default CreatePolsekTerdekat;

src/app/admin/(dashboard)/keamanan/polsek-terdekat/[id]/page.tsx

@@ -0,0 +1,157 @@
+'use client'
+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 polsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPolsekTerdekat() {
+  const router = useRouter();
+  const polsekState = useProxy(polsekTerdekat)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [modalHapus, setModalHapus] = useState(false)
+  const params = useParams()
+
+  useShallowEffect(() => {
+    polsekState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      polsekState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/keamanan/polsek-terdekat")
+    }
+  }
+
+  if (!polsekState.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 Polsek Terdekat</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Polsek Terdekat</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.nama}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Jarak Polsek Ke Desa</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.jarakKeDesa}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Alamat Polsek </Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.alamat}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nomor Polsek</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.nomorTelepon}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Jam Operasional</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.jamOperasional}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Google Maps</Text>
+                {polsekState.findUnique.data?.embedMapUrl ? (
+                  <Box style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
+                    <iframe
+                      src={polsekState.findUnique.data.embedMapUrl}
+                      width="100%"
+                      height="100%"
+                      style={{
+                        border: 0,
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                      }}
+                      allowFullScreen
+                      loading="lazy"
+                      referrerPolicy="no-referrer-when-downgrade"
+                    />
+                  </Box>
+                ) : (
+                  <Text c="dimmed" fz="sm">Tidak ada maps</Text>
+                )}
+              </Box>
+
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Tempat Maps</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.namaTempatMaps}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Alamat Maps</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.alamatMaps}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Link Petunjuk Arah</Text>
+                <Text>
+                  <a
+                    href={polsekState.findUnique.data?.linkPetunjukArah || "#"}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{ color: 'black', textDecoration: 'underline' }}
+                  >
+                    {polsekState.findUnique.data?.linkPetunjukArah || "Tidak ada link"}
+                  </a>
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Layanan Polsek</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.layananPolsek?.nama}</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button
+                    onClick={() => {
+                      if (polsekState.findUnique.data) {
+                        setSelectedId(polsekState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={polsekState.delete.loading || !polsekState.findUnique.data}
+                    color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${polsekState.findUnique.data?.id}/edit`)} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus polsek terdekat ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailPolsekTerdekat;

src/app/admin/(dashboard)/keamanan/polsek-terdekat/_com/converttoEmbed.ts

@@ -0,0 +1,9 @@
+function convertGoogleMapsToEmbed(url: string): string | null {
+    const match = url.match(/https:\/\/www\.google\.com\/maps\/place\/([^/]+)/);
+  
+    if (!match) return null;
+  
+    const place = match[1]; // misal: Polsek+Denpasar+Selatan
+    return `https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=${place}`;
+  }
+export default convertGoogleMapsToEmbed

src/app/admin/(dashboard)/keamanan/polsek-terdekat/create/page.tsx

@@ -1,14 +1,116 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Modal, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../_com/keamananEditor';
+import { useProxy } from 'valtio/utils';
+import polsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
 
 function CreatePolsekTerdekat() {
+  const polsekState = useProxy(polsekTerdekat)
   const router = useRouter();
+  const [layananOptions, setLayananOptions] = useState<{ value: string; label: string }[]>([]);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [namaLayananBaru, setNamaLayananBaru] = useState("");
+
+  const resetForm = () => {
+    polsekState.create.form = {
+      nama: "",
+      jarakKeDesa: "",
+      alamat: "",
+      nomorTelepon: "",
+      jamOperasional: "",
+      embedMapUrl: "",
+      namaTempatMaps: "",
+      alamatMaps: "",
+      linkPetunjukArah: "",
+      layananPolsekId: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    await polsekState.create.create()
+    resetForm()
+    router.push("/admin/keamanan/polsek-terdekat")
+  }
+
+  const fetchLayanan = async () => {
+    try {
+      const res = await fetch("/api/keamanan/layanan-polsek/find-many")
+      const data = await res.json()
+
+      if (data.success) {
+        const options = data.data.map((item: any) => {
+          return {
+            value: item.id,
+            label: item.nama
+          }
+        })
+        setLayananOptions(options)
+      }
+    } catch {
+      toast.error("Gagal memuat layanan polsek")
+    } 
+  }
+
+
+  const handleTambahLayanan = async () => {
+    if (!namaLayananBaru.trim()) return toast.warn("Nama layanan tidak boleh kosong");
+
+    try {
+      const res = await fetch("/api/keamanan/layanan-polsek/create", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ nama: namaLayananBaru }),
+      });
+      const data = await res.json();
+      console.log("data setelah create:", data);
+
+      if (data.success) {
+        const newLayanan = {
+          value: data.data.id,
+          label: data.data.nama,
+        };
+        setLayananOptions((prev) => [...prev, newLayanan]);
+        await fetchLayanan();
+        polsekState.create.form.layananPolsekId = data.data.id;
+        toast.success("Layanan baru ditambahkan!");
+        setModalOpen(false);
+        setNamaLayananBaru("");
+      } else {
+        toast.error(data.message || "Gagal menambah layanan");
+      }
+    } catch  {
+      toast.error("Error menambah layanan");
+    }
+  };
+
+  useEffect(() => {
+    fetchLayanan();
+  }, []);
+
   return (
     <Box>
+       <Modal
+        opened={modalOpen}
+        onClose={() => setModalOpen(false)}
+        title="Tambah Layanan Polsek"
+        centered
+      >
+        <Stack>
+          <TextInput
+            label="Nama Layanan"
+            placeholder="Masukkan nama layanan"
+            value={namaLayananBaru}
+            onChange={(e) => setNamaLayananBaru(e.currentTarget.value)}
+          />
+          <Button onClick={handleTambahLayanan}>Simpan</Button>
+        </Stack>
+      </Modal>
+
       <Box mb={10}>
         <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
           <IconArrowBack color={colors['blue-button']} size={25}/>
@@ -18,27 +120,103 @@ function CreatePolsekTerdekat() {
       <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Polsek Terdekat</Title>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
-          </Box>
           <TextInput
+          value={polsekState.create.form.nama}
+          onChange={(val) => {
+            polsekState.create.form.nama = val.target.value
+          }}
           label={<Text fw={"bold"} fz={"sm"}>Nama Polsek Terdekat</Text>}
           placeholder='Masukkan nama Polsek Terdekat'
           />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Polsek Terdekat</Text>
-            <KeamananEditor
-              showSubmit={false}
-            />
-          </Box>
+          <TextInput
+          value={polsekState.create.form.jarakKeDesa}
+          onChange={(val) => {
+            polsekState.create.form.jarakKeDesa = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Jarak Polsek Terdekat</Text>}
+          placeholder='Masukkan jarak Polsek Terdekat'
+          />
+           <TextInput
+          value={polsekState.create.form.alamat}
+          onChange={(val) => {
+            polsekState.create.form.alamat = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Alamat Polsek Terdekat</Text>}
+          placeholder='Masukkan alamat Polsek Terdekat'
+          />
+           <TextInput
+          value={polsekState.create.form.nomorTelepon}
+          onChange={(val) => {
+            polsekState.create.form.nomorTelepon = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Polsek Terdekat</Text>}
+          placeholder='Masukkan nomor telepon Polsek Terdekat'
+          />
+           <TextInput
+          value={polsekState.create.form.jamOperasional}
+          onChange={(val) => {
+            polsekState.create.form.jamOperasional = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Jam Operasional Polsek Terdekat</Text>}
+          placeholder='Masukkan jam operasional Polsek Terdekat'
+          />
+          <TextInput
+          value={polsekState.create.form.embedMapUrl}
+          onChange={(val) => {
+            polsekState.create.form.embedMapUrl = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Embed Map URL Polsek Terdekat</Text>}
+          placeholder='Masukkan embed map url Polsek Terdekat'
+          />
+          <TextInput
+          value={polsekState.create.form.namaTempatMaps}
+          onChange={(val) => {
+            polsekState.create.form.namaTempatMaps = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Nama Tempat Maps Polsek Terdekat</Text>}
+          placeholder='Masukkan nama tempat maps Polsek Terdekat'
+          />
+          <TextInput
+          value={polsekState.create.form.alamatMaps}
+          onChange={(val) => {
+            polsekState.create.form.alamatMaps = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Alamat Maps Polsek Terdekat</Text>}
+          placeholder='Masukkan alamat maps Polsek Terdekat'
+          />
+          <TextInput
+          value={polsekState.create.form.linkPetunjukArah}
+          onChange={(val) => {
+            polsekState.create.form.linkPetunjukArah = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Link Petunjuk Arah Polsek Terdekat</Text>}
+          placeholder='Masukkan link petunjuk arah Polsek Terdekat'
+          />
+         {/* Tambah Dropdown Select */}
+          <Select
+          
+            label="Layanan Polsek"
+            placeholder="Pilih layanan polsek"
+            data={layananOptions}
+            
+            value={polsekState.create.form.layananPolsekId}
+            onChange={(val) => {
+              polsekState.create.form.layananPolsekId = val || "";
+            }}
+          />
+          <Button variant="light" size="xs" onClick={() => setModalOpen(true)}>
+            + Tambah Layanan Baru
+          </Button>
+
+          {/* Tambah field lainnya di sini... */}
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
           </Group>
        </Stack>
       </Paper>
    </Box>
   );
+
 }
 
 export default CreatePolsekTerdekat;

src/app/admin/(dashboard)/keamanan/polsek-terdekat/detail/page.tsx

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

src/app/admin/(dashboard)/keamanan/polsek-terdekat/edit/page.tsx

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

src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, 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 { useRouter } from 'next/navigation';
+import polsekTerdekat from '../../_state/keamanan/polsek-terdekat';
 
 function PolsekTerdekat() {
   return (
@@ -20,7 +23,20 @@ function PolsekTerdekat() {
 }
 
 function ListPolsekTerdekat() {
+  const polsekState = useProxy(polsekTerdekat)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    polsekState.findMany.load()
+  }, [])
+
+  if (!polsekState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -32,22 +48,24 @@ function ListPolsekTerdekat() {
           <TableThead>
             <TableTr>
               <TableTh>Nama Polsek Terdekat</TableTh>
-              <TableTh>Nomor Polsek Terdekat</TableTh>
-              <TableTh>Deskripsi</TableTh>
+              <TableTh>Jarak Polsek</TableTh>
+              <TableTh>Alamat</TableTh>
               <TableTh>Detail</TableTh>
               </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
-              <TableTd>Polsek Terdekat 1</TableTd>
-              <TableTd>0896232831883</TableTd>
-              <TableTd>Polsek Terdekat 1</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/keamanan/polsek-terdekat/detail')}>
+            {polsekState.findMany.data?.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.nama}</TableTd>
+                <TableTd>{item.jarakKeDesa}</TableTd>
+                <TableTd>{item.alamat}</TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${item.id}`)}>
                   <IconDeviceImac size={20} />
                 </Button>
               </TableTd>
             </TableTr>
+          ))}
           </TableTbody>
         </Table>  
       </Paper>

src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/edit/page.tsx

@@ -0,0 +1,179 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } 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";
+
+
+import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import { Dropzone } from "@mantine/dropzone";
+import tipsKeamananState from "../../../../_state/keamanan/tips-keamanan";
+
+function EditTipsKeamanan() {
+  const keamananState = useProxy(tipsKeamananState);
+  const router = useRouter();
+  const params = useParams();
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    judul: keamananState.update.form.judul || '',
+    deskripsi: keamananState.update.form.deskripsi || '',
+    imageId: keamananState.update.form.imageId || ''
+  });
+
+  // Load berita by id saat pertama kali
+  useEffect(() => {
+    const loadBerita = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await keamananState.update.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            judul: data.judul || '',
+            deskripsi: data.deskripsi || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading keamananLingkungan:", error);
+        toast.error("Gagal memuat data keamananLingkungan");
+      }
+    };
+
+    loadBerita();
+  }, [params?.id]); // ✅ hapus beritaState dari dependency
+
+  const handleSubmit = async () => {
+
+    try {
+      // Update global state with form data
+      keamananState.update.form = {
+        ...keamananState.update.form,
+        judul: formData.judul,
+        deskripsi: formData.deskripsi,
+        imageId: formData.imageId // Keep existing imageId if not changed
+      };
+
+      // Jika ada file baru, upload
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        // Update imageId in global state
+        keamananState.update.form.imageId = uploaded.id;
+      }
+
+      await keamananState.update.update();
+      toast.success("Tips Keamanan berhasil diperbarui!");
+      router.push("/admin/keamanan/tips-keamanan");
+    } catch (error) {
+      console.error("Error updating keamananLingkungan:", error);
+      toast.error("Terjadi kesalahan saat memperbarui keamananLingkungan");
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Tips Keamanan</Title>
+          <Dropzone
+            onDrop={(files) => {
+              const selectedFile = files[0]; // Ambil file pertama
+              if (selectedFile) {
+                setFile(selectedFile);
+                setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+              }
+            }}
+            onReject={() => toast.error('File tidak valid.')}
+            maxSize={5 * 1024 ** 2} // Maks 5MB
+            accept={{ 'image/*': [] }}
+          >
+            <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+              <Dropzone.Accept>
+                <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+              </Dropzone.Accept>
+              <Dropzone.Reject>
+                <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+              </Dropzone.Reject>
+              <Dropzone.Idle>
+                <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+              </Dropzone.Idle>
+
+              <div>
+                <Text size="xl" inline>
+                  Drag gambar ke sini atau klik untuk pilih file
+                </Text>
+                <Text size="sm" c="dimmed" inline mt={7}>
+                  Maksimal 5MB dan harus format gambar
+                </Text>
+              </div>
+            </Group>
+          </Dropzone>
+
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <TextInput
+            value={formData.judul}
+            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Tips Keamanan</Text>}
+            placeholder="masukkan nama tips keamanan"
+          />
+
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+                keamananState.update.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditTipsKeamanan;

src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/page.tsx

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

src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx

@@ -1,44 +1,148 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../_com/keamananEditor';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import tipsKeamananState from '../../../_state/keamanan/tips-keamanan';
 
-function CreateTipsKeamanan() {
+
+function CreateKeamananLingkungan() {
+  const stateKeamanan = useProxy(tipsKeamananState)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
   const router = useRouter();
+
+  const resetForm = () => {
+    stateKeamanan.create.form = {
+      judul: "",
+      deskripsi: "",
+      imageId: "",
+    }
+    setPreviewImage(null);
+    setFile(null);
+  }
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    })
+
+    const uploaded = res.data?.data;
+
+    if (!uploaded?.id) {
+      return toast.error("Gagal mengupload file");
+    }
+
+    stateKeamanan.create.form.imageId = uploaded.id;
+
+    await stateKeamanan.create.create();
+
+    resetForm();
+    router.push("/admin/keamanan/tips-keamanan")
+  }
+
   return (
     <Box>
       <Box mb={10}>
         <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+          <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
 
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Tips Keamanan</Title>
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
           </Box>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Tips Keamanan</Text>}
-          placeholder='Masukkan nama tips keamanan'
+            value={stateKeamanan.create.form.judul}
+            onChange={(val) => {
+              stateKeamanan.create.form.judul = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Tips Keamanan</Text>}
+            placeholder='Masukkan nama Tips Keamanan'
           />
           <Box>
             <Text fw={"bold"} fz={"sm"}>Deskripsi Tips Keamanan</Text>
-            <KeamananEditor
-              showSubmit={false}
+            <CreateEditor
+              value={stateKeamanan.create.form.deskripsi}
+              onChange={(val) => {
+                stateKeamanan.create.form.deskripsi = val;
+              }}
             />
           </Box>
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
           </Group>
-       </Stack>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
 }
 
-export default CreateTipsKeamanan;
+export default CreateKeamananLingkungan;

src/app/admin/(dashboard)/keamanan/tips-keamanan/detail/page.tsx

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

src/app/admin/(dashboard)/keamanan/tips-keamanan/edit/page.tsx

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

src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
 import { useRouter } from 'next/navigation';
+import tipsKeamananState from '../../_state/keamanan/tips-keamanan';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
 
 function TipsKeamanan() {
   return (
@@ -20,7 +23,20 @@ function TipsKeamanan() {
 }
 
 function ListTipsKeamanan() {
+  const stateKeamanan = useProxy(tipsKeamananState)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    stateKeamanan.findMany.load()
+  }, [])
+
+  if (!stateKeamanan.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -32,22 +48,24 @@ function ListTipsKeamanan() {
           <TableThead>
             <TableTr>
               <TableTh>Nama Tips Keamanan</TableTh>
-              <TableTh>Nomor Tips Keamanan</TableTh>
               <TableTh>Deskripsi</TableTh>
               <TableTh>Detail</TableTh>
               </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
-              <TableTd>Tips Keamanan 1</TableTd>
-              <TableTd>0896232831883</TableTd>
-              <TableTd>Tips Keamanan 1</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/keamanan/tips-keamanan/detail')}>
-                  <IconDeviceImac size={20} />
+            {stateKeamanan.findMany.data?.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.judul}</TableTd>
+                <TableTd>
+                  <Text fz={"xs"} dangerouslySetInnerHTML={{__html: item.deskripsi}} />
+                </TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/keamanan/tips-keamanan/${item.id}`)}>
+                    <IconDeviceImac size={20} />
                 </Button>
               </TableTd>
             </TableTr>
+          ))}
           </TableTbody>
         </Table>  
       </Paper>

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

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

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

@@ -1,26 +0,0 @@
-'use client'
-import { Box, Paper, Text } from '@mantine/core';
-import React from 'react';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-import { useProxy } from 'valtio/utils';
-import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import colors from '@/con/colors';
-
-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/_ui/artikel_kesehatan/first_aid/page.tsx

@@ -1,34 +0,0 @@
-'use client'
-import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-import colors from '@/con/colors';
-
-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/_ui/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 { KesehatanEditor } from '../../../_com/kesehatanEditor';
-import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import colors from '@/con/colors';
-
-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/_ui/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/_ui/artikel_kesehatan/page.tsx

@@ -1,172 +0,0 @@
-'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';
-
-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>
-  );
-}
-
-function AllList() {
-  const listState = useProxy(stateArtikelKesehatan)
-  useShallowEffect(() => {
-    listState.introduction.findMany.load();
-    listState.symptom.findMany.load();
-    listState.prevention.findMany.load();
-    listState.firstAid.findMany.load();
-    listState.mythFact.findMany.load();
-    listState.doctorSign.findMany.load();
-  }, [])
-
-  if (!listState.introduction.findMany.data
-    || !listState.symptom.findMany.data
-    || !listState.prevention.findMany.data
-    || !listState.firstAid.findMany.data
-    || !listState.mythFact.findMany.data
-    || !listState.doctorSign.findMany.data
-  ) return <Stack>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
-  return <Stack gap={"xs"}>
-    {/* Introduction */}
-    <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>
-              </TableTr>
-            </TableThead>
-            <TableTbody >
-              <TableTr>
-                <TableTd ta="center">{item.mitos}</TableTd>
-                <TableTd ta="center">{item.fakta}</TableTd>
-              </TableTr>
-            </TableTbody>
-          </Table>
-        </Box>
-      ))}
-    </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>
-}
-
-export default ArtikelKesehatan;

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

@@ -1,35 +0,0 @@
-'use client'
-import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-import colors from '@/con/colors';
-
-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/_ui/artikel_kesehatan/symptom/page.tsx

@@ -1,34 +0,0 @@
-'use client'
-import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
-import { useProxy } from 'valtio/utils';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-import colors from '@/con/colors';
-
-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/_ui/fasilitas_kesehatan/dokterdantenagamedis/listData.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,47 +0,0 @@
-import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
-import colors from '@/con/colors';
-import { Box, Paper, Stack, TextInput, Title } from '@mantine/core';
-import { useProxy } from 'valtio/utils';
-
-function InformasiKegiatan() {
-  const informasiKegiatanState = useProxy(stateJadwalKegiatan.informasiKegiatan)
-  return (
-    <Box>
-     <Paper bg={colors['white-1']} p={'md'}>
-     <Stack gap={"xs"}>
-      <Title order={4}>Informasi Kegiatan</Title>
-      <TextInput
-        label="Nama Kegiatan"
-        placeholder="Masukkan nama kegiatan"
-        onChange={(val) => {
-          informasiKegiatanState.create.form.name = val.target.value
-        }}
-      />
-      <TextInput
-        label="Tanggal"
-        placeholder="Masukkan tanggal kegiatan"
-        onChange={(val) => {
-          informasiKegiatanState.create.form.tanggal = val.target.value
-        }}
-      />
-      <TextInput
-        label="Waktu"
-        placeholder="Masukkan waktu kegiatan"
-        onChange={(val) => {
-          informasiKegiatanState.create.form.waktu = val.target.value
-        }}
-      />
-      <TextInput
-        label="Lokasi"
-        placeholder="Masukkan lokasi kegiatan"
-        onChange={(val) => {
-          informasiKegiatanState.create.form.lokasi = val.target.value
-        }}
-      />
-     </Stack>
-     </Paper>
-    </Box>
-  );
-}
-
-export default InformasiKegiatan;

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

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

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

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

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

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

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

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

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

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

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/[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/page.tsx

@@ -0,0 +1,79 @@
+'use client'
+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() {
+  return (
+    <Box>
+      <HeaderSearch
+        title='Artikel Kesehatan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListArtikelKesehatan/>
+    </Box>
+  );
+}
+
+function ListArtikelKesehatan() {
+  const stateArtikelKesehatan = useProxy(artikelKesehatanState)
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    stateArtikelKesehatan.findMany.load()
+  }, [])
+
+  if (!stateArtikelKesehatan.findMany.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500}/>
+      </Box>
+    )
+  }
+  return (
+    <Box py={10}>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Stack>
+        <JudulList
+          title='List 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>
+              {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>
+  </Box>
+  )
+}
+
+export default ArtikelKesehatan;

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

@@ -0,0 +1,359 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+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 FasilitasKesehatanFormBase {
+  name: string;
+  informasiUmum: {
+    fasilitas: string;
+    alamat: string;
+    jamOperasional: string;
+  };
+  layananUnggulan: {
+    content: string;
+  };
+  dokterdanTenagaMedis: {
+    name: string;
+    specialist: string;
+    jadwal: string;
+  };
+  fasilitasPendukung: {
+    content: string;
+  };
+  prosedurPendaftaran: {
+    content: string;
+  };
+  tarifDanLayanan: {
+    layanan: string;
+    tarif: string;
+  };
+}
+
+function EditFasilitasKesehatan() {
+  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState);
+  const router = useRouter();
+  const params = useParams();
+
+  const [formData, setFormData] = useState<FasilitasKesehatanFormBase>({
+    name: stateFasilitasKesehatan.edit.form.name || '',
+    informasiUmum: {
+      fasilitas: stateFasilitasKesehatan.edit.form.informasiUmum?.fasilitas || '',
+      alamat: stateFasilitasKesehatan.edit.form.informasiUmum?.alamat || '',
+      jamOperasional: stateFasilitasKesehatan.edit.form.informasiUmum?.jamOperasional || '',
+    },
+    layananUnggulan: {
+      content: stateFasilitasKesehatan.edit.form.layananUnggulan?.content || '',
+    },
+    dokterdanTenagaMedis: {
+      name: stateFasilitasKesehatan.edit.form.dokterdanTenagaMedis?.name || '',
+      specialist: stateFasilitasKesehatan.edit.form.dokterdanTenagaMedis?.specialist || '',
+      jadwal: stateFasilitasKesehatan.edit.form.dokterdanTenagaMedis?.jadwal || '',
+    },
+    fasilitasPendukung: {
+      content: stateFasilitasKesehatan.edit.form.fasilitasPendukung?.content || '',
+    },
+    prosedurPendaftaran: {
+      content: stateFasilitasKesehatan.edit.form.prosedurPendaftaran?.content || '',
+    },
+    tarifDanLayanan: {
+      layanan: stateFasilitasKesehatan.edit.form.tarifDanLayanan?.layanan || '',
+      tarif: stateFasilitasKesehatan.edit.form.tarifDanLayanan?.tarif || '',
+    },
+  });
+
+  useEffect(() => {
+    const loadFasilitasKesehatan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        await stateFasilitasKesehatan.edit.load(id);
+        const { form } = stateFasilitasKesehatan.edit;
+        if (form) {
+          setFormData({
+            name: form.name,
+            informasiUmum: {
+              fasilitas: form.informasiUmum?.fasilitas || '',
+              alamat: form.informasiUmum?.alamat || '',
+              jamOperasional: form.informasiUmum?.jamOperasional || '',
+            },
+            layananUnggulan: {
+              content: form.layananUnggulan?.content || '',
+            },
+            dokterdanTenagaMedis: {
+              name: form.dokterdanTenagaMedis?.name || '',
+              specialist: form.dokterdanTenagaMedis?.specialist || '',
+              jadwal: form.dokterdanTenagaMedis?.jadwal || '',
+            },
+            fasilitasPendukung: {
+              content: form.fasilitasPendukung?.content || '',
+            },
+            prosedurPendaftaran: {
+              content: form.prosedurPendaftaran?.content || '',
+            },
+            tarifDanLayanan: {
+              layanan: form.tarifDanLayanan?.layanan || '',
+              tarif: form.tarifDanLayanan?.tarif || '',
+            },
+          });
+        }
+      } catch (error) {
+        console.error("Error loading fasilitas kesehatan:", error);
+        toast.error("Gagal memuat data fasilitas kesehatan");
+      }
+    };
+    loadFasilitasKesehatan();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      stateFasilitasKesehatan.edit.form = {
+        ...stateFasilitasKesehatan.edit.form,
+        name: formData.name,
+        informasiUmum: {
+          fasilitas: formData.informasiUmum.fasilitas,
+          alamat: formData.informasiUmum.alamat,
+          jamOperasional: formData.informasiUmum.jamOperasional,
+        },
+        layananUnggulan: {
+          content: formData.layananUnggulan.content,
+        },
+        dokterdanTenagaMedis: {
+          name: formData.dokterdanTenagaMedis.name,
+          specialist: formData.dokterdanTenagaMedis.specialist,
+          jadwal: formData.dokterdanTenagaMedis.jadwal,
+        },
+        fasilitasPendukung: {
+          content: formData.fasilitasPendukung.content,
+        },
+        prosedurPendaftaran: {
+          content: formData.prosedurPendaftaran.content,
+        },
+        tarifDanLayanan: {
+          layanan: formData.tarifDanLayanan.layanan,
+          tarif: formData.tarifDanLayanan.tarif,
+        },
+      };
+      const success = await stateFasilitasKesehatan.edit.submit();
+      if (success) {
+        toast.success("Fasilitas kesehatan berhasil diperbarui!");
+        router.push("/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan");
+      }
+    } catch (error) {
+      console.error("Error updating fasilitas kesehatan:", error);
+      toast.error(error instanceof Error ? error.message : "Gagal memperbarui data fasilitas kesehatan");
+    }
+  };
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant="subtle" color="blue">
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Stack gap="xs">
+        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+          <Stack gap="xs">
+            <Title order={3}>Edit Fasilitas Kesehatan</Title>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nama Fasilitas Kesehatan</Text>}
+              placeholder="masukkan nama fasilitas kesehatan"
+              value={formData.name}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  name: e.target.value
+                }));
+              }}
+            />
+            <Box>
+              <Text fz="md" fw="bold">Informasi Umum</Text>
+              <TextInput
+                label={<Text fz="sm" fw="bold">Fasilitas</Text>}
+                placeholder="masukkan fasilitas"
+                value={formData.informasiUmum.fasilitas}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    informasiUmum: {
+                      ...prev.informasiUmum,
+                      fasilitas: e.target.value
+                    }
+                  }));
+                }}
+              />
+              <TextInput
+                label={<Text fz="sm" fw="bold">Alamat</Text>}
+                placeholder="masukkan alamat"
+                value={formData.informasiUmum.alamat}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    informasiUmum: {
+                      ...prev.informasiUmum,
+                      alamat: e.target.value
+                    }
+                  }));
+                }}
+              />
+              <TextInput
+                label={<Text fz="sm" fw="bold">Jam Operasional</Text>}
+                placeholder="masukkan jam operasional"
+                value={formData.informasiUmum.jamOperasional}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    informasiUmum: {
+                      ...prev.informasiUmum,
+                      jamOperasional: e.target.value
+                    }
+                  }));
+                }}
+              />
+            </Box>
+            <Box>
+              <Text fz="md" fw="bold">Layanan Unggulan</Text>
+              <EditEditor
+                value={formData.layananUnggulan.content}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    layananUnggulan: {
+                      ...prev.layananUnggulan,
+                      content: e
+                    }
+                  }));
+                }}
+              />
+            </Box>
+            <Box>
+              <Text fz="md" fw="bold">Dokter dan Tenaga Medis</Text>
+              <TextInput
+                label={<Text fz="sm" fw="bold">Nama Dokter</Text>}
+                placeholder="masukkan nama dokter"
+                value={formData.dokterdanTenagaMedis.name}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    dokterdanTenagaMedis: {
+                      ...prev.dokterdanTenagaMedis,
+                      name: e.target.value
+                    }
+                  }));
+                }}
+              />
+              <TextInput
+                label={<Text fz="sm" fw="bold">Specialist</Text>}
+                placeholder="masukkan specialist"
+                value={formData.dokterdanTenagaMedis.specialist}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    dokterdanTenagaMedis: {
+                      ...prev.dokterdanTenagaMedis,
+                      specialist: e.target.value
+                    }
+                  }));
+                }}
+              />
+              <TextInput
+                label={<Text fz="sm" fw="bold">Jadwal</Text>}
+                placeholder="masukkan jadwal"
+                value={formData.dokterdanTenagaMedis.jadwal}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    dokterdanTenagaMedis: {
+                      ...prev.dokterdanTenagaMedis,
+                      jadwal: e.target.value
+                    }
+                  }));
+                }}
+              />
+            </Box>
+            <Box>
+              <Text fz="md" fw="bold">Fasilitas Pendukung</Text>
+              <EditEditor
+                value={formData.fasilitasPendukung.content}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    fasilitasPendukung: {
+                      ...prev.fasilitasPendukung,
+                      content: e
+                    }
+                  }));
+                }}
+              />
+            </Box>
+            <Box>
+              <Text fz="md" fw="bold">Prosedur Pendaftaran</Text>
+              <EditEditor
+                value={formData.prosedurPendaftaran.content}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    prosedurPendaftaran: {
+                      ...prev.prosedurPendaftaran,
+                      content: e
+                    }
+                  }));
+                }}
+              />
+            </Box>
+            <Box>
+              <Text fz="md" fw="bold">Tarif dan Layanan</Text>
+              <TextInput
+                label={<Text fz="sm" fw="bold">Tarif</Text>}
+                placeholder="masukkan tarif"
+                value={formData.tarifDanLayanan.tarif}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    tarifDanLayanan: {
+                      ...prev.tarifDanLayanan,
+                      tarif: e.target.value
+                    }
+                  }));
+                }}
+              />
+              <TextInput
+                label={<Text fz="sm" fw="bold">Layanan</Text>}
+                placeholder="masukkan layanan"
+                value={formData.tarifDanLayanan.layanan}
+                onChange={(e) => {
+                  setFormData(prev => ({
+                    ...prev,
+                    tarifDanLayanan: {
+                      ...prev.tarifDanLayanan,
+                      layanan: e.target.value
+                    }
+                  }));
+                }}
+              />
+            </Box>
+
+              <Button
+                onClick={handleSubmit}
+                bg={colors['blue-button']}
+                loading={stateFasilitasKesehatan.edit.loading}
+              >
+                Simpan
+              </Button>
+          </Stack>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditFasilitasKesehatan;

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

@@ -0,0 +1,127 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+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 DetailFasilitasKesehatan() {
+  const params = useParams()
+  const router = useRouter();
+  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useShallowEffect(() => {
+    stateFasilitasKesehatan.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateFasilitasKesehatan.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan")
+    }
+  }
+
+  if (!stateFasilitasKesehatan.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 Fasilitas Kesehatan</Text>
+          {stateFasilitasKesehatan.findUnique.data ? (
+            <Paper bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Nama Fasilitas Kesehatan</Text>
+                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.name}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Informasi Umum</Text>
+                  <Text fz={"md"} fw={"bold"}>Fasilitas</Text>
+                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.informasiumum.fasilitas}</Text>
+                  <Text fz={"md"} fw={"bold"}>Alamat</Text>
+                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.informasiumum.alamat}</Text>
+                  <Text fz={"md"} fw={"bold"}>Jam Operasional</Text>
+                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.informasiumum.jamOperasional}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"md"} fw={"bold"}>Layanan Unggulan</Text>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateFasilitasKesehatan.findUnique.data.layananunggulan.content }} />
+                </Box>
+                <Box>
+                  <Text fz={"md"} fw={"bold"}>Dokter dan Tenaga Medis</Text>
+                  <Text fz={"md"} fw={"bold"}>Nama Dokter</Text>
+                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.dokterdantenagamedis.name}</Text>
+                  <Text fz={"md"} fw={"bold"}>Specialist</Text>
+                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.dokterdantenagamedis.specialist}</Text>
+                  <Text fz={"md"} fw={"bold"}>Jadwal</Text>
+                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.dokterdantenagamedis.jadwal}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Fasilitas Pendukung</Text>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateFasilitasKesehatan.findUnique.data.fasilitaspendukung.content }} />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Prosedur Pendaftaran</Text>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateFasilitasKesehatan.findUnique.data.prosedurpendaftaran.content }} />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Tarif dan Layanan</Text>
+                  <Text fz={"md"} fw={"bold"}>Layanan</Text>
+                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.tarifdanlayanan.layanan}</Text>
+                  <Text fz={"md"} fw={"bold"}>Tarif</Text>
+                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.tarifdanlayanan.tarif}</Text>
+                </Box>
+                <Box>
+                  <Flex gap={"xs"}>
+                    <Button color="red" onClick={() => {
+                      if (stateFasilitasKesehatan.findUnique.data) {
+                        setSelectedId(stateFasilitasKesehatan.findUnique.data.id)
+                        setModalHapus(true)
+                      }
+                    }}>
+                      <IconX size={20} />
+                    </Button>
+                    <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/${stateFasilitasKesehatan.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 fasilitas kesehatan ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailFasilitasKesehatan;

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

@@ -0,0 +1,187 @@
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+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 CreateFasilitasKesehatan() {
+  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState)
+  const router = useRouter();
+
+
+  const resetForm = () => {
+    stateFasilitasKesehatan.create.form = {
+      name: "",
+      informasiUmum: {
+        fasilitas: "",
+        alamat: "",
+        jamOperasional: "",
+      },
+      layananUnggulan: {
+        content: "",
+      },
+      dokterdanTenagaMedis: {
+        name: "",
+        specialist: "",
+        jadwal: "",
+      },
+      fasilitasPendukung: {
+        content: "",
+      },
+      prosedurPendaftaran: {
+        content: "",
+      },
+      tarifDanLayanan: {
+        layanan: "",
+        tarif: "",
+      },
+    };
+  };
+
+
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await stateFasilitasKesehatan.create.submit();
+
+    toast.success("Data berhasil disimpan");
+    resetForm();
+    // After successful submission, redirect to the list page
+    router.push('/admin/kesehatan/data-kesehatan-warga/fasilitas_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 Fasilitas Kesehatan</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Nama Fasilitas Kesehatan</Text>}
+            placeholder="masukkan nama fasilitas kesehatan"
+            value={stateFasilitasKesehatan.create.form.name}
+            onChange={(e) => {
+              stateFasilitasKesehatan.create.form.name = e.target.value;
+            }}
+          />
+          <Box>
+            <Text fz="md" fw="bold">Informasi Umum</Text>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Fasilitas</Text>}
+              placeholder="masukkan fasilitas"
+              value={stateFasilitasKesehatan.create.form.informasiUmum.fasilitas}
+              onChange={(e) => {
+                stateFasilitasKesehatan.create.form.informasiUmum.fasilitas = e.target.value;
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Alamat</Text>}
+              placeholder="masukkan alamat"
+              value={stateFasilitasKesehatan.create.form.informasiUmum.alamat}
+              onChange={(e) => {
+                stateFasilitasKesehatan.create.form.informasiUmum.alamat = e.target.value;
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Jam Operasional</Text>}
+              placeholder="masukkan jam operasional"
+              value={stateFasilitasKesehatan.create.form.informasiUmum.jamOperasional}
+              onChange={(e) => {
+                stateFasilitasKesehatan.create.form.informasiUmum.jamOperasional = e.target.value;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Layanan Unggulan</Text>
+            <CreateEditor
+              value={stateFasilitasKesehatan.create.form.layananUnggulan.content}
+              onChange={(e) => {
+                stateFasilitasKesehatan.create.form.layananUnggulan.content = e;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Dokter dan Tenaga Medis</Text>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nama Dokter</Text>}
+              placeholder="masukkan nama dokter"
+              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.name}
+              onChange={(e) => {
+                stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.name = e.target.value;
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Specialist</Text>}
+              placeholder="masukkan specialist"
+              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.specialist}
+              onChange={(e) => {
+                stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.specialist = e.target.value;
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Jadwal</Text>}
+              placeholder="masukkan jadwal"
+              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.jadwal}
+              onChange={(e) => {
+                stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.jadwal = e.target.value;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Fasilitas Pendukung</Text>
+            <CreateEditor
+              value={stateFasilitasKesehatan.create.form.fasilitasPendukung.content}
+              onChange={(e) => {
+                stateFasilitasKesehatan.create.form.fasilitasPendukung.content = e;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Prosedur Pendaftaran</Text>
+            <CreateEditor
+              value={stateFasilitasKesehatan.create.form.prosedurPendaftaran.content}
+              onChange={(e) => {
+                stateFasilitasKesehatan.create.form.prosedurPendaftaran.content = e;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Tarif dan Layanan</Text>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Tarif</Text>}
+              placeholder="masukkan tarif"
+              value={stateFasilitasKesehatan.create.form.tarifDanLayanan.tarif}
+              onChange={(e) => {
+                stateFasilitasKesehatan.create.form.tarifDanLayanan.tarif = e.target.value;
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Layanan</Text>}
+              placeholder="masukkan layanan"
+              value={stateFasilitasKesehatan.create.form.tarifDanLayanan.layanan}
+              onChange={(e) => {
+                stateFasilitasKesehatan.create.form.tarifDanLayanan.layanan = e.target.value;
+              }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateFasilitasKesehatan;

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

@@ -0,0 +1,81 @@
+'use client'
+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 fasilitasKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+
+
+function FasilitasKesehatan() {
+  return (
+    <Box>
+      <HeaderSearch
+        title='Fasilitas Kesehatan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListFasilitasKesehatan/>
+    </Box>
+  );
+}
+
+function ListFasilitasKesehatan() {
+  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState)
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    stateFasilitasKesehatan.findMany.load()
+  }, [])
+
+  if (!stateFasilitasKesehatan.findMany.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500}/>
+      </Box>
+    )
+  }
+  return (
+    <Box py={10}>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Stack>
+        <JudulList
+          title='List Fasilitas Kesehatan'
+          href='/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/create'
+        />
+        <Box style={{ overflowX: "auto" }}>
+          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+            <TableThead>
+              <TableTr>
+                <TableTh>Fasilitas Kesehatan</TableTh>
+                <TableTh>Alamat</TableTh>
+                <TableTh>Jam Operasional</TableTh>
+                <TableTh>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {stateFasilitasKesehatan.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.name}</TableTd>
+                  <TableTd>{item.informasiumum.alamat}</TableTd>
+                  <TableTd>{item.informasiumum.jamOperasional}</TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/${item.id}`)}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Box>
+      </Stack>
+    </Paper>
+  </Box>
+  )
+}
+
+export default FasilitasKesehatan;

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

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

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

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

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

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

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

@@ -0,0 +1,407 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import jadwalKegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+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 JadwalKegiatanFormBase {
+  content: string;
+  informasiJadwalKegiatan: {
+    name: string;
+    tanggal: string;
+    waktu: string;
+    lokasi: string;
+  };
+  deskripsiJadwalKegiatan: {
+    deskripsi: string;
+  };
+  layananJadwalKegiatan: {
+    content: string;
+  };
+  syaratKetentuanJadwalKegiatan: {
+    content: string;
+  };
+  dokumenJadwalKegiatan: {
+    content: string;
+  };
+  pendaftaranJadwalKegiatan: {
+    name: string;
+    tanggal: string;
+    namaOrangtua: string;
+    nomor: string;
+    alamat: string;
+    catatan: string;
+  };
+}
+
+function EditJadwalKegiatan() {
+  const stateJadwalKegiatan = useProxy(jadwalKegiatanState);
+  const router = useRouter();
+  const params = useParams();
+
+  const [formData, setFormData] = useState<JadwalKegiatanFormBase>({
+    content: stateJadwalKegiatan.edit.form.content || '',
+    informasiJadwalKegiatan: {
+      name: stateJadwalKegiatan.edit.form.informasiJadwalKegiatan?.name || '',
+      tanggal: stateJadwalKegiatan.edit.form.informasiJadwalKegiatan?.tanggal || '',
+      waktu: stateJadwalKegiatan.edit.form.informasiJadwalKegiatan?.waktu || '',
+      lokasi: stateJadwalKegiatan.edit.form.informasiJadwalKegiatan?.lokasi || '',
+    },
+    deskripsiJadwalKegiatan: {
+      deskripsi: stateJadwalKegiatan.edit.form.deskripsiJadwalKegiatan?.deskripsi || '',
+    },
+    layananJadwalKegiatan: {
+      content: stateJadwalKegiatan.edit.form.layananJadwalKegiatan?.content || '',
+    },
+    syaratKetentuanJadwalKegiatan: {
+      content: stateJadwalKegiatan.edit.form.syaratKetentuanJadwalKegiatan?.content || '',
+    },
+    dokumenJadwalKegiatan: {
+      content: stateJadwalKegiatan.edit.form.dokumenJadwalKegiatan?.content || '',
+    },
+    pendaftaranJadwalKegiatan: {
+      name: stateJadwalKegiatan.edit.form.pendaftaranJadwalKegiatan?.name || '',
+      tanggal: stateJadwalKegiatan.edit.form.pendaftaranJadwalKegiatan?.tanggal || '',
+      namaOrangtua: stateJadwalKegiatan.edit.form.pendaftaranJadwalKegiatan?.namaOrangtua || '',
+      nomor: stateJadwalKegiatan.edit.form.pendaftaranJadwalKegiatan?.nomor || '',
+      alamat: stateJadwalKegiatan.edit.form.pendaftaranJadwalKegiatan?.alamat || '',
+      catatan: stateJadwalKegiatan.edit.form.pendaftaranJadwalKegiatan?.catatan || '',
+    },
+  });
+
+  useEffect(() => {
+    const loadJadwalKegiatan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        await stateJadwalKegiatan.edit.load(id);
+        const { form } = stateJadwalKegiatan.edit;
+        if (form) {
+          setFormData({
+            content: form.content,
+            informasiJadwalKegiatan: {
+              name: form.informasiJadwalKegiatan?.name || '',
+              tanggal: form.informasiJadwalKegiatan?.tanggal || '',
+              waktu: form.informasiJadwalKegiatan?.waktu || '',
+              lokasi: form.informasiJadwalKegiatan?.lokasi || '',
+            },
+            deskripsiJadwalKegiatan: {
+              deskripsi: form.deskripsiJadwalKegiatan?.deskripsi || '',
+            },
+            layananJadwalKegiatan: {
+              content: form.layananJadwalKegiatan?.content || '',
+            },
+            syaratKetentuanJadwalKegiatan: {
+              content: form.syaratKetentuanJadwalKegiatan?.content || '',
+            },
+            dokumenJadwalKegiatan: {
+              content: form.dokumenJadwalKegiatan?.content || '',
+            },
+            pendaftaranJadwalKegiatan: {
+              name: form.pendaftaranJadwalKegiatan?.name || '',
+              tanggal: form.pendaftaranJadwalKegiatan?.tanggal || '',
+              namaOrangtua: form.pendaftaranJadwalKegiatan?.namaOrangtua || '',
+              nomor: form.pendaftaranJadwalKegiatan?.nomor || '',
+              alamat: form.pendaftaranJadwalKegiatan?.alamat || '',
+              catatan: form.pendaftaranJadwalKegiatan?.catatan || '',
+            },
+          });
+        }
+      } catch (error) {
+        console.error("Error loading jadwal kegiatan:", error);
+        toast.error("Gagal memuat data jadwal kegiatan");
+      }
+    };
+    loadJadwalKegiatan();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      stateJadwalKegiatan.edit.form = {
+        ...stateJadwalKegiatan.edit.form,
+        content: formData.content,
+        informasiJadwalKegiatan: {
+          name: formData.informasiJadwalKegiatan.name,
+          tanggal: formData.informasiJadwalKegiatan.tanggal,
+          waktu: formData.informasiJadwalKegiatan.waktu,
+          lokasi: formData.informasiJadwalKegiatan.lokasi,
+        },
+        deskripsiJadwalKegiatan: {
+          deskripsi: formData.deskripsiJadwalKegiatan.deskripsi,
+        },
+        layananJadwalKegiatan: {
+          content: formData.layananJadwalKegiatan.content,
+        },
+        syaratKetentuanJadwalKegiatan: {
+          content: formData.syaratKetentuanJadwalKegiatan.content,
+        },
+        dokumenJadwalKegiatan: {
+          content: formData.dokumenJadwalKegiatan.content,
+        },
+        pendaftaranJadwalKegiatan: {
+          name: formData.pendaftaranJadwalKegiatan.name,
+          tanggal: formData.pendaftaranJadwalKegiatan.tanggal,
+          namaOrangtua: formData.pendaftaranJadwalKegiatan.namaOrangtua,
+          nomor: formData.pendaftaranJadwalKegiatan.nomor,
+          alamat: formData.pendaftaranJadwalKegiatan.alamat,
+          catatan: formData.pendaftaranJadwalKegiatan.catatan,
+        },
+      };
+      const success = await stateJadwalKegiatan.edit.submit();
+      if (success) {
+        toast.success("Jadwal kegiatan berhasil diperbarui!");
+        router.push("/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan");
+      }
+    } catch (error) {
+      console.error("Error updating jadwal kegiatan:", error);
+      toast.error(error instanceof Error ? error.message : "Gagal memperbarui data jadwal kegiatan");
+    }
+  };
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant="subtle" color="blue">
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Stack gap="xs">
+        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Edit Jadwal Kegiatan</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Nama Jadwal Kegiatan</Text>}
+            placeholder="masukkan nama jadwal kegiatan"
+            value={formData.content}
+            onChange={(e) => {
+              setFormData(prev => ({
+                ...prev,
+                content: e.target.value
+              }));
+            }}
+          />
+         <Box>
+         <Text fz="sm" fw="bold">Deskripsi Jadwal Kegiatan</Text>
+          <EditEditor
+            value={formData.deskripsiJadwalKegiatan.deskripsi}
+            onChange={(e) => {
+              setFormData(prev => ({
+                ...prev,
+                deskripsiJadwalKegiatan: {
+                  ...prev.deskripsiJadwalKegiatan,
+                  deskripsi: e
+                }
+              }));
+            }}
+          />
+         </Box>
+          <Box>
+            <Text fz="md" fw="bold">Informasi Jadwal Kegiatan</Text>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nama</Text>}
+              placeholder="masukkan nama"
+              value={formData.informasiJadwalKegiatan.name}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  informasiJadwalKegiatan: {
+                    ...prev.informasiJadwalKegiatan,
+                    name: e.target.value
+                  }
+                }));
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Tanggal</Text>}
+              placeholder="masukkan tanggal"
+              value={formData.informasiJadwalKegiatan.tanggal}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  informasiJadwalKegiatan: {
+                    ...prev.informasiJadwalKegiatan,
+                    tanggal: e.target.value
+                  }
+                }));
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Waktu</Text>}
+              placeholder="masukkan waktu"
+              value={formData.informasiJadwalKegiatan.waktu}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  informasiJadwalKegiatan: {
+                    ...prev.informasiJadwalKegiatan,
+                    waktu: e.target.value
+                  }
+                }));
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Lokasi</Text>}
+              placeholder="masukkan lokasi"
+              value={formData.informasiJadwalKegiatan.lokasi}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  informasiJadwalKegiatan: {
+                    ...prev.informasiJadwalKegiatan,
+                    lokasi: e.target.value
+                  }
+                }));
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Layanan Jadwal Kegiatan</Text>
+            <EditEditor
+              value={formData.layananJadwalKegiatan.content}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  layananJadwalKegiatan: {
+                    ...prev.layananJadwalKegiatan,
+                    content: e
+                  }
+                }));
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Syarat dan Ketentuan Jadwal Kegiatan</Text>
+            <EditEditor
+              value={formData.syaratKetentuanJadwalKegiatan.content}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  syaratKetentuanJadwalKegiatan: {
+                    ...prev.syaratKetentuanJadwalKegiatan,
+                    content: e
+                  }
+                }));
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Dokumen Jadwal Kegiatan</Text>
+            <EditEditor
+              value={formData.dokumenJadwalKegiatan.content}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  dokumenJadwalKegiatan: {
+                    ...prev.dokumenJadwalKegiatan,
+                    content: e
+                  }
+                }));
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Pendaftaran Jadwal Kegiatan</Text>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nama</Text>}
+              placeholder="masukkan nama"
+              value={formData.pendaftaranJadwalKegiatan.name}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  pendaftaranJadwalKegiatan: {
+                    ...prev.pendaftaranJadwalKegiatan,
+                    name: e.target.value
+                  }
+                }));
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Tanggal</Text>}
+              placeholder="masukkan tanggal"
+              value={formData.pendaftaranJadwalKegiatan.tanggal}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  pendaftaranJadwalKegiatan: {
+                    ...prev.pendaftaranJadwalKegiatan,
+                    tanggal: e.target.value
+                  }
+                }));
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nama Orangtua</Text>}
+              placeholder="masukkan nama orangtua"
+              value={formData.pendaftaranJadwalKegiatan.namaOrangtua}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  pendaftaranJadwalKegiatan: {
+                    ...prev.pendaftaranJadwalKegiatan,
+                    namaOrangtua: e.target.value
+                  }
+                }));
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nomor</Text>}
+              placeholder="masukkan nomor"
+              value={formData.pendaftaranJadwalKegiatan.nomor}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  pendaftaranJadwalKegiatan: {
+                    ...prev.pendaftaranJadwalKegiatan,
+                    nomor: e.target.value
+                  }
+                }));
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Alamat</Text>}
+              placeholder="masukkan alamat"
+              value={formData.pendaftaranJadwalKegiatan.alamat}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  pendaftaranJadwalKegiatan: {
+                    ...prev.pendaftaranJadwalKegiatan,
+                    alamat: e.target.value
+                  }
+                }));
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Catatan</Text>}
+              placeholder="masukkan catatan"
+              value={formData.pendaftaranJadwalKegiatan.catatan}
+              onChange={(e) => {
+                setFormData(prev => ({
+                  ...prev,
+                  pendaftaranJadwalKegiatan: {
+                    ...prev.pendaftaranJadwalKegiatan,
+                    catatan: e.target.value
+                  }
+                }));
+              }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
+          </Button>
+        </Stack>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditJadwalKegiatan;

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

@@ -0,0 +1,126 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import jadwalKegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+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 DetailJadwalKegiatan() {
+  const params = useParams()
+  const router = useRouter();
+  const stateJadwalKegiatan = useProxy(jadwalKegiatanState)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useShallowEffect(() => {
+    stateJadwalKegiatan.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateJadwalKegiatan.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan")
+    }
+  }
+
+  if (!stateJadwalKegiatan.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 Jadwal Kegiatan</Text>
+          {stateJadwalKegiatan.findUnique.data ? (
+            <Paper bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Nama Kegiatan</Text>
+                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.content}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Informasi</Text>
+                  <Text fz={"md"} fw={"bold"}>Nama</Text>
+                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.informasijadwalkegiatan.name}</Text>
+                  <Text fz={"md"} fw={"bold"}>Tanggal</Text>
+                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.informasijadwalkegiatan.tanggal}</Text>
+                  <Text fz={"md"} fw={"bold"}>Waktu</Text>
+                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.informasijadwalkegiatan.waktu}</Text>
+                  <Text fz={"md"} fw={"bold"}>Lokasi</Text>
+                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.informasijadwalkegiatan.lokasi}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateJadwalKegiatan.findUnique.data.deskripsijadwalkegiatan.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Layanan</Text>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateJadwalKegiatan.findUnique.data.layananjadwalkegiatan.content }} />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Syarat Ketentuan</Text>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateJadwalKegiatan.findUnique.data.syaratketentuanjadwalkegiatan.content}} />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Dokumen</Text>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateJadwalKegiatan.findUnique.data.dokumenjadwalkegiatan.content }} />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Prosedur Pendaftaran</Text>
+                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.pendaftaranjadwalkegiatan.name}</Text>
+                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.pendaftaranjadwalkegiatan.tanggal}</Text>
+                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.pendaftaranjadwalkegiatan.namaOrangtua}</Text>
+                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.pendaftaranjadwalkegiatan.nomor}</Text>
+                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.pendaftaranjadwalkegiatan.alamat}</Text>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateJadwalKegiatan.findUnique.data.pendaftaranjadwalkegiatan.catatan }} />
+                </Box>
+                <Box>
+                  <Flex gap={"xs"}>
+                    <Button color="red" onClick={() => {
+                      if (stateJadwalKegiatan.findUnique.data) {
+                        setSelectedId(stateJadwalKegiatan.findUnique.data.id)
+                        setModalHapus(true)
+                      }
+                    }}>
+                      <IconX size={20} />
+                    </Button>
+                    <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan/${stateJadwalKegiatan.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 jadwal kegiatan ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailJadwalKegiatan;

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

@@ -0,0 +1,212 @@
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import jadwalKegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+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 CreateJadwalKegiatan() {
+  const stateJadwalKegiatan = useProxy(jadwalKegiatanState)
+  const router = useRouter();
+
+
+  const resetForm = () => {
+    stateJadwalKegiatan.edit.form = {
+      content: "",
+      informasiJadwalKegiatan: {
+        name: "",
+        tanggal: "",
+        waktu: "",
+        lokasi: "",
+      },
+      deskripsiJadwalKegiatan: {
+        deskripsi: "",
+      },
+      layananJadwalKegiatan: {
+        content: "",
+      },
+      syaratKetentuanJadwalKegiatan: {
+        content: "",
+      },
+      dokumenJadwalKegiatan: {
+        content: "",
+      },
+      pendaftaranJadwalKegiatan: {
+        name: "",
+        tanggal: "",
+        namaOrangtua: "",
+        nomor: "",
+        alamat: "",
+        catatan: "",
+      },
+    };
+  };
+
+
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await stateJadwalKegiatan.create.submit();
+
+    toast.success("Data berhasil disimpan");
+    resetForm();
+    // After successful submission, redirect to the list page
+    router.push('/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan');
+  }
+
+  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 Jadwal Kegiatan</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Nama Jadwal Kegiatan</Text>}
+            placeholder="masukkan nama jadwal kegiatan"
+            value={stateJadwalKegiatan.create.form.content}
+            onChange={(e) => {
+              stateJadwalKegiatan.create.form.content = e.target.value;
+            }}
+          />
+         <Box>
+         <Text fz="sm" fw="bold">Deskripsi Jadwal Kegiatan</Text>
+          <CreateEditor
+            value={stateJadwalKegiatan.create.form.deskripsiJadwalKegiatan.deskripsi}
+            onChange={(e) => {
+              stateJadwalKegiatan.create.form.deskripsiJadwalKegiatan.deskripsi = e;
+            }}
+          />
+         </Box>
+          <Box>
+            <Text fz="md" fw="bold">Informasi Jadwal Kegiatan</Text>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nama</Text>}
+              placeholder="masukkan nama"
+              value={stateJadwalKegiatan.create.form.informasiJadwalKegiatan.name}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.informasiJadwalKegiatan.name = e.target.value;
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Tanggal</Text>}
+              placeholder="masukkan tanggal"
+              value={stateJadwalKegiatan.create.form.informasiJadwalKegiatan.tanggal}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.informasiJadwalKegiatan.tanggal = e.target.value;
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Waktu</Text>}
+              placeholder="masukkan waktu"
+              value={stateJadwalKegiatan.create.form.informasiJadwalKegiatan.waktu}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.informasiJadwalKegiatan.waktu = e.target.value;
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Lokasi</Text>}
+              placeholder="masukkan lokasi"
+              value={stateJadwalKegiatan.create.form.informasiJadwalKegiatan.lokasi}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.informasiJadwalKegiatan.lokasi = e.target.value;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Layanan Jadwal Kegiatan</Text>
+            <CreateEditor
+              value={stateJadwalKegiatan.create.form.layananJadwalKegiatan.content}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.layananJadwalKegiatan.content = e;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Syarat dan Ketentuan Jadwal Kegiatan</Text>
+            <CreateEditor
+              value={stateJadwalKegiatan.create.form.syaratKetentuanJadwalKegiatan.content}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.syaratKetentuanJadwalKegiatan.content = e;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Dokumen Jadwal Kegiatan</Text>
+            <CreateEditor
+              value={stateJadwalKegiatan.create.form.dokumenJadwalKegiatan.content}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.dokumenJadwalKegiatan.content = e;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz="md" fw="bold">Pendaftaran Jadwal Kegiatan</Text>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nama</Text>}
+              placeholder="masukkan nama"
+              value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.name}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.name = e.target.value;
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Tanggal</Text>}
+              placeholder="masukkan tanggal"
+              value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.tanggal}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.tanggal = e.target.value;
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nama Orangtua</Text>}
+              placeholder="masukkan nama orangtua"
+              value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.namaOrangtua}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.namaOrangtua = e.target.value;
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nomor</Text>}
+              placeholder="masukkan nomor"
+              value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.nomor}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.nomor = e.target.value;
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Alamat</Text>}
+              placeholder="masukkan alamat"
+              value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.alamat}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.alamat = e.target.value;
+              }}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Catatan</Text>}
+              placeholder="masukkan catatan"
+              value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.catatan}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.catatan = e.target.value;
+              }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateJadwalKegiatan;

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

@@ -0,0 +1,82 @@
+'use client'
+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 jadwalKegiatanState from '../../../_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+
+function JadwalKegiatan() {
+  return (
+    <Box>
+      <HeaderSearch
+        title='Jadwal Kegiatan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListJadwalKegiatan/>
+    </Box>
+  );
+}
+
+function ListJadwalKegiatan() {
+  const stateJadwalKegiatan = useProxy(jadwalKegiatanState)
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    stateJadwalKegiatan.findMany.load()
+  }, [])
+
+  if (!stateJadwalKegiatan.findMany.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500}/>
+      </Box>
+    )
+  }
+  return (
+    <Box py={10}>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Stack>
+        <JudulList
+          title='List Jadwal Kegiatan'
+          href='/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan/create'
+        />
+        <Box style={{ overflowX: "auto" }}>
+          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama</TableTh>
+                <TableTh>Tanggal</TableTh>
+                <TableTh>Waktu</TableTh>
+                <TableTh>Lokasi</TableTh>
+                <TableTh>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {stateJadwalKegiatan.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.informasijadwalkegiatan.name}</TableTd>
+                  <TableTd>{item.informasijadwalkegiatan.tanggal}</TableTd>
+                  <TableTd>{item.informasijadwalkegiatan.waktu}</TableTd>
+                  <TableTd>{item.informasijadwalkegiatan.lokasi}</TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan/${item.id}`)}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Box>
+      </Stack>
+    </Paper>
+  </Box>
+  )
+}
+
+export default JadwalKegiatan;

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

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

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

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

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

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

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

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

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

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