UI Admin Revisi Baru Di Menu Ekonomi

Yang Sudah Di Kerjakan
* Tampilan UI Admin di menu inovasi
* API Create, edit dan delete potensi
* Tampilan UI Landing Page sudah sesuai di mobile

Yang Lagi Dikerjakan:
* Progress Tampilan UI Admin Di Menu lingkungan
* Progress API Create, edit dan delete potensi

Yang Akan Dikerjakan:
* API Create, edit dan delete pengumuman
* Tampilan UI Admin Di Menu Pendidikan

prisma/migrations/20250602082355_perubahan_dikategori_berita/migration.sql

@@ -0,0 +1,582 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `image` on the `Berita` table. All the data in the column will be lost.
+  - You are about to drop the column `katagoryBeritaId` on the `Berita` table. All the data in the column will be lost.
+  - You are about to drop the column `name` on the `FasilitasPendukung` table. All the data in the column will be lost.
+  - You are about to drop the column `fasilitasKesehatanId` on the `InformasiUmum` table. All the data in the column will be lost.
+  - You are about to drop the `KatagoryBerita` table. If the table is not empty, all the data it contains will be lost.
+  - Added the required column `imageId` to the `Berita` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `jadwal` to the `DokterdanTenagaMedis` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `specialist` to the `DokterdanTenagaMedis` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `content` to the `FasilitasPendukung` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Berita" DROP CONSTRAINT "Berita_katagoryBeritaId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "InformasiUmum" DROP CONSTRAINT "InformasiUmum_fasilitasKesehatanId_fkey";
+
+-- AlterTable
+ALTER TABLE "Berita" DROP COLUMN "image",
+DROP COLUMN "katagoryBeritaId",
+ADD COLUMN     "imageId" TEXT NOT NULL,
+ADD COLUMN     "kategoriBeritaId" TEXT;
+
+-- AlterTable
+ALTER TABLE "DataKematian_Kelahiran" ADD COLUMN     "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "isActive" BOOLEAN NOT NULL DEFAULT true;
+
+-- AlterTable
+ALTER TABLE "DokterdanTenagaMedis" ADD COLUMN     "jadwal" TEXT NOT NULL,
+ADD COLUMN     "specialist" TEXT NOT NULL;
+
+-- AlterTable
+ALTER TABLE "FasilitasPendukung" DROP COLUMN "name",
+ADD COLUMN     "content" TEXT NOT NULL;
+
+-- AlterTable
+ALTER TABLE "InformasiUmum" DROP COLUMN "fasilitasKesehatanId";
+
+-- DropTable
+DROP TABLE "KatagoryBerita";
+
+-- CreateTable
+CREATE TABLE "FileStorage" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "realName" TEXT NOT NULL,
+    "path" TEXT NOT NULL,
+    "mimeType" 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,
+    "link" TEXT NOT NULL,
+
+    CONSTRAINT "FileStorage_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "VisiMisiPPID" (
+    "id" TEXT NOT NULL,
+    "visi" TEXT NOT NULL,
+    "misi" 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 "VisiMisiPPID_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DasarHukumPPID" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "DasarHukumPPID_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ProfilePPID" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "biodata" TEXT NOT NULL,
+    "riwayat" TEXT NOT NULL,
+    "pengalaman" TEXT NOT NULL,
+    "unggulan" TEXT NOT NULL,
+    "imageUrl" 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 "ProfilePPID_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DaftarInformasiPublik" (
+    "id" TEXT NOT NULL,
+    "nomor" SERIAL NOT NULL,
+    "jenisInformasi" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "tanggal" 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 "DaftarInformasiPublik_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PermohonanInformasiPublik" (
+    "id" TEXT NOT NULL,
+    "nomor" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "nik" TEXT NOT NULL,
+    "notelp" TEXT NOT NULL,
+    "alamat" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "jenisInformasiDimintaId" TEXT,
+    "caraMemperolehInformasiId" TEXT,
+    "caraMemperolehSalinanInformasiId" 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 "PermohonanInformasiPublik_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "JenisInformasiDiminta" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "JenisInformasiDiminta_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "CaraMemperolehInformasi" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "CaraMemperolehInformasi_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "CaraMemperolehSalinanInformasi" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "CaraMemperolehSalinanInformasi_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "FormulirPermohonanKeberatan" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "notelp" TEXT NOT NULL,
+    "alasan" 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 "FormulirPermohonanKeberatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "IndeksKepuasanMasyarakat" (
+    "id" SERIAL NOT NULL,
+    "label" TEXT NOT NULL,
+    "kepuasan" 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 "IndeksKepuasanMasyarakat_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "GrafikBerdasarkanJenisKelamin" (
+    "id" TEXT NOT NULL,
+    "perempuan" TEXT NOT NULL,
+    "laki" 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 "GrafikBerdasarkanJenisKelamin_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "GrafikBerdasarkanResponden" (
+    "id" TEXT NOT NULL,
+    "sangatbaik" TEXT NOT NULL,
+    "baik" TEXT NOT NULL,
+    "kurangbaik" TEXT NOT NULL,
+    "tidakbaik" 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 "GrafikBerdasarkanResponden_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "GrafikBerdasarkanUmur" (
+    "id" TEXT NOT NULL,
+    "remaja" TEXT NOT NULL,
+    "dewasa" TEXT NOT NULL,
+    "orangtua" TEXT NOT NULL,
+    "lansia" 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 "GrafikBerdasarkanUmur_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ProfileDesa" (
+    "id" TEXT NOT NULL,
+    "sejarah" TEXT NOT NULL,
+    "visi" TEXT NOT NULL,
+    "misi" TEXT NOT NULL,
+    "lambang" TEXT NOT NULL,
+    "maskot" TEXT NOT NULL,
+    "profilPerbekelId" 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 "ProfileDesa_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ProfilPerbekel" (
+    "id" TEXT NOT NULL,
+    "biodata" TEXT NOT NULL,
+    "pengalaman" TEXT NOT NULL,
+    "pengalamanOrganisasi" TEXT NOT NULL,
+    "programUnggulan" 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 "ProfilPerbekel_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KategoriBerita" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "KategoriBerita_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PotensiDesa" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "kategori" TEXT NOT NULL,
+    "imageId" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "PotensiDesa_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TarifDanLayanan" (
+    "id" TEXT NOT NULL,
+    "layanan" TEXT NOT NULL,
+    "tarif" 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 "TarifDanLayanan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "JadwalKegiatan" (
+    "id" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "JadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "InformasiJadwalKegiatan" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "tanggal" TEXT NOT NULL,
+    "waktu" TEXT NOT NULL,
+    "lokasi" 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 "InformasiJadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DeskripsiJadwalKegiatan" (
+    "id" TEXT NOT NULL,
+    "deskripsi" 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 "DeskripsiJadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "LayananJadwalKegiatan" (
+    "id" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "LayananJadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "SyaratKetentuanJadwalKegiatan" (
+    "id" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "SyaratKetentuanJadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DokumenJadwalKegiatan" (
+    "id" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "DokumenJadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PendaftaranJadwalKegiatan" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "tanggal" TEXT NOT NULL,
+    "namaOrangtua" TEXT NOT NULL,
+    "nomor" TEXT NOT NULL,
+    "alamat" TEXT NOT NULL,
+    "catatan" 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 "PendaftaranJadwalKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "GrafikKepuasan" (
+    "id" SERIAL NOT NULL,
+    "label" TEXT NOT NULL,
+    "jumlah" 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 "GrafikKepuasan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ArtikelKesehatan" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "ArtikelKesehatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Introduction" (
+    "id" SERIAL NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "Introduction_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Symptom" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "Symptom_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Prevention" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "Prevention_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "FirstAid" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "FirstAid_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "MythVsFact" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "mitos" TEXT NOT NULL,
+    "fakta" 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 "MythVsFact_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DoctorSign" (
+    "id" SERIAL NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "DoctorSign_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_FasilitasKesehatanToInformasiUmum" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_FasilitasKesehatanToInformasiUmum_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateTable
+CREATE TABLE "_FasilitasKesehatanToTarifDanLayanan" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_FasilitasKesehatanToTarifDanLayanan_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "FileStorage_name_key" ON "FileStorage"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "JenisInformasiDiminta_name_key" ON "JenisInformasiDiminta"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "CaraMemperolehInformasi_name_key" ON "CaraMemperolehInformasi"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "CaraMemperolehSalinanInformasi_name_key" ON "CaraMemperolehSalinanInformasi"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "KategoriBerita_name_key" ON "KategoriBerita"("name");
+
+-- CreateIndex
+CREATE INDEX "_FasilitasKesehatanToInformasiUmum_B_index" ON "_FasilitasKesehatanToInformasiUmum"("B");
+
+-- CreateIndex
+CREATE INDEX "_FasilitasKesehatanToTarifDanLayanan_B_index" ON "_FasilitasKesehatanToTarifDanLayanan"("B");
+
+-- AddForeignKey
+ALTER TABLE "PermohonanInformasiPublik" ADD CONSTRAINT "PermohonanInformasiPublik_jenisInformasiDimintaId_fkey" FOREIGN KEY ("jenisInformasiDimintaId") REFERENCES "JenisInformasiDiminta"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PermohonanInformasiPublik" ADD CONSTRAINT "PermohonanInformasiPublik_caraMemperolehInformasiId_fkey" FOREIGN KEY ("caraMemperolehInformasiId") REFERENCES "CaraMemperolehInformasi"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PermohonanInformasiPublik" ADD CONSTRAINT "PermohonanInformasiPublik_caraMemperolehSalinanInformasiId_fkey" FOREIGN KEY ("caraMemperolehSalinanInformasiId") REFERENCES "CaraMemperolehSalinanInformasi"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ProfileDesa" ADD CONSTRAINT "ProfileDesa_profilPerbekelId_fkey" FOREIGN KEY ("profilPerbekelId") REFERENCES "ProfilPerbekel"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Berita" ADD CONSTRAINT "Berita_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Berita" ADD CONSTRAINT "Berita_kategoriBeritaId_fkey" FOREIGN KEY ("kategoriBeritaId") REFERENCES "KategoriBerita"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PotensiDesa" ADD CONSTRAINT "PotensiDesa_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToInformasiUmum" ADD CONSTRAINT "_FasilitasKesehatanToInformasiUmum_A_fkey" FOREIGN KEY ("A") REFERENCES "FasilitasKesehatan"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToInformasiUmum" ADD CONSTRAINT "_FasilitasKesehatanToInformasiUmum_B_fkey" FOREIGN KEY ("B") REFERENCES "InformasiUmum"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToTarifDanLayanan" ADD CONSTRAINT "_FasilitasKesehatanToTarifDanLayanan_A_fkey" FOREIGN KEY ("A") REFERENCES "FasilitasKesehatan"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_FasilitasKesehatanToTarifDanLayanan" ADD CONSTRAINT "_FasilitasKesehatanToTarifDanLayanan_B_fkey" FOREIGN KEY ("B") REFERENCES "TarifDanLayanan"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/schema.prisma

@@ -47,6 +47,23 @@ model AppMenuChild {
   appMenuId String?
 }
 
+// ========================================= FILE STORAGE ========================================= //
+
+model FileStorage {
+  id          String        @id @default(cuid())
+  name        String        @unique
+  realName    String
+  path        String
+  mimeType    String
+  createdAt   DateTime      @default(now())
+  updatedAt   DateTime      @updatedAt
+  deletedAt   DateTime?
+  isActive    Boolean       @default(true)
+  link        String
+  Berita      Berita[]
+  PotensiDesa PotensiDesa[]
+}
+
 //========================================= MENU PPID ========================================= //
 // ========================================= VISI MISI PPID ========================================= //
 model VisiMisiPPID {
@@ -263,6 +280,21 @@ model KategoriBerita {
   isActive  Boolean  @default(true)
 }
 
+// ========================================= POTENSI DESA ========================================= //
+model PotensiDesa {
+  id        String      @id @default(cuid())
+  name      String
+  deskripsi String
+  kategori  String
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  content   String      @db.Text
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}
+
 // ========================================= PENGUMUMAN ========================================= //
 model Pengumuman {
   id                   String              @id @default(cuid())
@@ -583,19 +615,3 @@ model DoctorSign {
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
 }
-
-// === BARU
-
-model FileStorage {
-  id        String    @id @default(cuid())
-  name      String    @unique
-  realName  String
-  path      String
-  mimeType  String
-  createdAt DateTime  @default(now())
-  updatedAt DateTime  @updatedAt
-  deletedAt DateTime? 
-  isActive  Boolean   @default(true)
-  link      String
-  Berita Berita[]
-}

prisma/seed.ts

@@ -8,8 +8,6 @@ import layanan from "./data/list-layanan.json";
 import potensi from "./data/list-potensi.json";
 import visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
 import dasarHukumPPID from "./data/ppid/dasar-hukum-ppid/dasarhukumPPID.json";
-import profileDesa from "./data/desa/profile/profile_desa.json";
-import profilePerbekel from "./data/desa/profile/profil_perbekel.json";
 import profilePPID from "./data/ppid/profile-ppid/profilePPid.json";
 import path from "path";
 import fs from "fs";
@@ -213,53 +211,7 @@ import { v4 as uuid } from "uuid";
   }
   console.log("dasar hukum PPID success ...");
 
-  for (const v of profileDesa) {
-    await prisma.profileDesa.upsert({
-      where: {
-        id: v.id,
-      },
-      update: {
-        sejarah: v.sejarah,
-        visi: v.visi,
-        misi: v.misi,
-        lambang: v.lambang,
-        maskot: v.maskot,
-        profilPerbekelId: v.profilPerbekelId,
-      },
-      create: {
-        id: v.id,
-        sejarah: v.sejarah,
-        visi: v.visi,
-        misi: v.misi,
-        lambang: v.lambang,
-        maskot: v.maskot,
-        profilPerbekelId: v.profilPerbekelId,
-      },
-    });
-  }
-  console.log("profile desa success ...");
 
-  for (const v of profilePerbekel) {
-    await prisma.profilPerbekel.upsert({
-      where: {
-        id: v.id,
-      },
-      update: {
-        biodata: v.biodata,
-        pengalaman: v.pengalaman,
-        pengalamanOrganisasi: v.pengalamanOrganisasi,
-        programUnggulan: v.programUnggulan,
-      },
-      create: {
-        id: v.id,
-        biodata: v.biodata,
-        pengalaman: v.pengalaman,
-        pengalamanOrganisasi: v.pengalamanOrganisasi,
-        programUnggulan: v.programUnggulan,
-      },
-    });
-  }
-  console.log("profile perbekel success ...");
 })()
   .then(() => prisma.$disconnect())
   .catch((e) => {

src/app/admin/(dashboard)/_com/createEditor.tsx

@@ -0,0 +1,85 @@
+// TestEditor.tsx
+import { RichTextEditor, Link } from '@mantine/tiptap';
+import { useEditor } from '@tiptap/react';
+import Highlight from '@tiptap/extension-highlight';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Superscript from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+
+type CreateEditorProps = {
+  value: string;
+  onChange: (content: string) => void;
+};
+
+export default function CreateEditor({ value, onChange }: CreateEditorProps) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    content: value,
+    onUpdate: () => {
+      if (editor) {
+        onChange(editor.getHTML());
+      }
+    },
+  });
+
+  return (
+    <RichTextEditor editor={editor}>
+      <RichTextEditor.Toolbar sticky stickyOffset="var(--docs-header-height)">
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Bold />
+          <RichTextEditor.Italic />
+          <RichTextEditor.Underline />
+          <RichTextEditor.Strikethrough />
+          <RichTextEditor.ClearFormatting />
+          <RichTextEditor.Highlight />
+          <RichTextEditor.Code />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.H1 />
+          <RichTextEditor.H2 />
+          <RichTextEditor.H3 />
+          <RichTextEditor.H4 />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Blockquote />
+          <RichTextEditor.Hr />
+          <RichTextEditor.BulletList />
+          <RichTextEditor.OrderedList />
+          <RichTextEditor.Subscript />
+          <RichTextEditor.Superscript />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Link />
+          <RichTextEditor.Unlink />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.AlignLeft />
+          <RichTextEditor.AlignCenter />
+          <RichTextEditor.AlignJustify />
+          <RichTextEditor.AlignRight />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Undo />
+          <RichTextEditor.Redo />
+        </RichTextEditor.ControlsGroup>
+      </RichTextEditor.Toolbar>
+
+      <RichTextEditor.Content />
+    </RichTextEditor>
+  );
+}

src/app/admin/(dashboard)/_com/editEditor.tsx

@@ -0,0 +1,102 @@
+'use client'
+import { RichTextEditor, Link } from '@mantine/tiptap';
+import { useEditor } from '@tiptap/react';
+import Highlight from '@tiptap/extension-highlight';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Superscript from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+import { useEffect } from 'react';
+
+type EditEditorProps = {
+  value: string;
+  onChange: (content: string) => void;
+};
+
+export default function EditEditor({ value, onChange }: EditEditorProps) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    content: value,
+    // Hapus `immediatelyRender` dan `onMount`
+  });
+
+  // Sinkronisasi konten saat `value` berubah
+  useEffect(() => {
+    if (editor && value !== editor.getHTML()) {
+      editor.commands.setContent(value);
+    }
+  }, [value, editor]);
+
+  // Sinkronisasi konten ke parent saat diubah
+  useEffect(() => {
+    if (!editor) return;
+
+    const updateHandler = () => onChange(editor.getHTML());
+    editor.on('update', updateHandler);
+
+    return () => {
+      editor.off('update', updateHandler);
+    };
+  }, [editor, onChange]);
+
+  return (
+    <RichTextEditor editor={editor}>
+      <RichTextEditor.Toolbar sticky stickyOffset="var(--docs-header-height)">
+        {/* Toolbar seperti sebelumnya */}
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Bold />
+          <RichTextEditor.Italic />
+          <RichTextEditor.Underline />
+          <RichTextEditor.Strikethrough />
+          <RichTextEditor.ClearFormatting />
+          <RichTextEditor.Highlight />
+          <RichTextEditor.Code />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.H1 />
+          <RichTextEditor.H2 />
+          <RichTextEditor.H3 />
+          <RichTextEditor.H4 />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Blockquote />
+          <RichTextEditor.Hr />
+          <RichTextEditor.BulletList />
+          <RichTextEditor.OrderedList />
+          <RichTextEditor.Subscript />
+          <RichTextEditor.Superscript />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Link />
+          <RichTextEditor.Unlink />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.AlignLeft />
+          <RichTextEditor.AlignCenter />
+          <RichTextEditor.AlignJustify />
+          <RichTextEditor.AlignRight />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Undo />
+          <RichTextEditor.Redo />
+        </RichTextEditor.ControlsGroup>
+      </RichTextEditor.Toolbar>
+
+      <RichTextEditor.Content />
+    </RichTextEditor>
+  );
+}

src/app/admin/(dashboard)/_com/header.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Grid, GridCol, Paper, TextInput, Title } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react'; // Sesuaikan jika kamu pakai icon lain
+import colors from '@/con/colors';
+
+
+const HeaderSearch = ({ title = "", placeholder = "pencarian", searchIcon = <IconSearch size={20} /> }: { title: string, placeholder?: string, searchIcon?: React.ReactNode }) => {
+  return (
+    <Grid>
+      <GridCol span={{ base: 12, md: 9 }}>
+        <Title order={3}>{title}</Title>
+      </GridCol>
+      <GridCol span={{ base: 12, md: 3 }}>
+        <Paper radius={"lg"} bg={colors['white-1']}>
+          <TextInput
+            radius="lg"
+            placeholder={placeholder}
+            leftSection={searchIcon}
+            w="100%"
+          />
+        </Paper>
+      </GridCol>
+    </Grid>
+  );
+};
+
+export default HeaderSearch;

src/app/admin/(dashboard)/_com/judulList.tsx

@@ -0,0 +1,30 @@
+
+'use client'
+import colors from '@/con/colors';
+import { Grid, GridCol, Button, Text } from '@mantine/core';
+import { IconCircleDashedPlus } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const JudulList = ({ title = "", href = "#" }) => {
+  const router = useRouter();
+
+  const handleNavigate = () => {
+    router.push(href);
+  };
+
+  return (
+    <Grid align="center" mb={10}>
+      <GridCol span={{ base: 12, md: 11 }}>
+        <Text fz={"xl"} fw={"bold"}>{title}</Text>
+      </GridCol>
+      <GridCol span={{ base: 12, md: 1 }} ta="right">
+        <Button onClick={handleNavigate} bg={colors['blue-button']}>
+          <IconCircleDashedPlus size={25} />
+        </Button>
+      </GridCol>
+    </Grid>
+  );
+};
+
+export default JudulList;

src/app/admin/(dashboard)/_com/jusulListTab.tsx

@@ -0,0 +1,41 @@
+'use client'
+import colors from '@/con/colors';
+import { Grid, GridCol, Button, Text, Paper, TextInput } from '@mantine/core';
+import { IconCircleDashedPlus, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const JudulListTab = ({ title = "", href = "#", placeholder = "pencarian", searchIcon = <IconSearch size={20} /> }) => {
+  const router = useRouter();
+
+  const handleNavigate = () => {
+    router.push(href);
+  };
+
+
+
+  return (
+    <Grid mb={10}>
+      <GridCol span={{ base: 12, md: 8 }}>
+        <Text fz={{base: "md", md: "xl"}} fw={"bold"}>{title}</Text>
+      </GridCol>
+      <GridCol span={{ base: 9, md: 3}} ta="right">
+        <Paper radius={"lg"} bg={colors['white-1']}>
+          <TextInput
+            radius="lg"
+            placeholder={placeholder}
+            leftSection={searchIcon}
+            w="100%"
+          />
+        </Paper>
+      </GridCol>
+      <GridCol span={{ base: 3, md: 1}} ta="right">
+        <Button onClick={handleNavigate} bg={colors['blue-button']}>
+          <IconCircleDashedPlus size={25} />
+        </Button>
+      </GridCol>
+    </Grid>
+  );
+};
+
+export default JudulListTab;

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

@@ -1,4 +1,3 @@
-
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -57,10 +56,10 @@ const berita = proxy({
         );
         if (res.status === 200) {
           berita.findMany.load();
-          return toast.success("success create");
+          return toast.success("Berita berhasil disimpan!");
         }
 
-        return toast.error("failed create");
+        return toast.error("Gagal menyimpan berita");
       } catch (error) {
         console.log((error as Error).message);
       } finally {
@@ -88,6 +87,30 @@ const berita = proxy({
       }
     },
   },
+  findUnique: {
+    data: null as
+      | Prisma.BeritaGetPayload<{
+          include: {
+            image: true;
+            kategoriBerita: true;
+          };
+        }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/desa/berita/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          berita.findUnique.data = data.data ?? null;
+        } else {
+          console.error('Failed to fetch berita:', res.statusText);
+          berita.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error('Error fetching berita:', error);
+        berita.findUnique.data = null;
+      }
+    },
+  },
   delete: {
     loading: false,
     async byId(id: string) {

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

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

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 "use client";
 
 import {
@@ -12,30 +11,30 @@ import {
   Stack,
   Text,
   TextInput,
+  Title,
 } from "@mantine/core";
-import { IconImageInPicture } from "@tabler/icons-react";
+import { IconArrowBack, IconImageInPicture } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { useRouter, useParams } from "next/navigation";
-import { useProxy } from "valtio/utils";
 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 { FileInput } from "@mantine/core";
-import stateDashboardBerita from "../../../../_state/desa/berita";
-import { Prisma } from "@prisma/client";
 import { useShallowEffect } from "@mantine/hooks";
-import { BeritaEditor } from "../../_com/BeritaEditor";
+import { Prisma } from "@prisma/client";
+import stateDashboardBerita from "../../../../_state/desa/berita";
 
-function BeritaEdit() {
+function EditBerita() {
   const beritaState = useProxy(stateDashboardBerita);
   const router = useRouter();
   const params = useParams();
 
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
-  const [editorInstance, setEditorInstance] = useState<any>(null);
-  const [isEditorReady, setIsEditorReady] = useState(false);
   const [formData, setFormData] = useState({
     judul: beritaState.berita.edit.form.judul || '',
     deskripsi: beritaState.berita.edit.form.deskripsi || '',
@@ -49,7 +48,7 @@ function BeritaEdit() {
     const loadBerita = async () => {
       const id = params?.id as string;
       if (!id) return;
-  
+
       try {
         const data = await stateDashboardBerita.berita.edit.load(id); // akses langsung, bukan dari proxy
         if (data) {
@@ -60,7 +59,7 @@ function BeritaEdit() {
             content: data.content || '',
             imageId: data.imageId || '',
           });
-  
+
           if (data?.image?.link) {
             setPreviewImage(data.image.link);
           }
@@ -70,57 +69,28 @@ function BeritaEdit() {
         toast.error("Gagal memuat data berita");
       }
     };
-  
+
     loadBerita();
   }, [params?.id]); // ✅ hapus beritaState dari dependency
-  
-
-
-  // Handle editor ready
-  const handleEditorReady = (editor: any) => {
-    setEditorInstance(editor);
-    setIsEditorReady(true);
-    
-    // Set initial content if exists
-    if (formData.content) {
-      editor.commands.setContent(formData.content);
-    }
-  };
 
   const handleSubmit = async () => {
-    if (!isEditorReady || !editorInstance) {
-      return toast.error("Editor belum siap");
-    }
 
     try {
-      const htmlContent = editorInstance.getHTML();
-      if (!htmlContent || htmlContent === "<p></p>") {
-        return toast.warn("Konten tidak boleh kosong");
-      }
-
-      // Update form data with editor content
-      const updatedFormData = {
-        ...formData,
-        content: htmlContent
-      };
-
       // Update global state with form data
       beritaState.berita.edit.form = {
-        judul: updatedFormData.judul,
-        deskripsi: updatedFormData.deskripsi,
-        content: updatedFormData.content,
-        kategoriBeritaId: updatedFormData.kategoriBeritaId || '',
-        imageId: beritaState.berita.edit.form.imageId // Keep existing imageId if not changed
+        ...beritaState.berita.edit.form,
+        judul: formData.judul,
+        deskripsi: formData.deskripsi,
+        content: formData.content,
+        kategoriBeritaId: formData.kategoriBeritaId || '',
+        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 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");
         }
@@ -129,7 +99,6 @@ function BeritaEdit() {
         beritaState.berita.edit.form.imageId = uploaded.id;
       }
 
-
       await beritaState.berita.edit.update();
       toast.success("Berita berhasil diperbarui!");
       router.push("/admin/desa/berita");
@@ -140,12 +109,18 @@ function BeritaEdit() {
   };
 
   return (
-    <Box py={10}>
+    <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 Berita</Title>
           <TextInput
             value={formData.judul}
-            onChange={(e) => setFormData({...formData, judul: e.target.value})}
+            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
             label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
             placeholder="masukkan judul"
           />
@@ -162,7 +137,7 @@ function BeritaEdit() {
 
           <TextInput
             value={formData.deskripsi}
-            onChange={(e) => setFormData({...formData, deskripsi: e.target.value})}
+            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
             label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
             placeholder="masukkan deskripsi"
           />
@@ -190,15 +165,16 @@ function BeritaEdit() {
 
           <Box>
             <Text fz={"sm"} fw={"bold"}>Konten</Text>
-            <BeritaEditor
-              initialContent={formData.content}
-              onEditorReady={handleEditorReady}
-              showSubmit={false}
-              onUpdate={(content) => setFormData({...formData, content})}
+            <EditEditor
+            value={formData.content}
+            onChange={(htmlContent) => {
+              setFormData((prev) => ({ ...prev, content: htmlContent }));
+              beritaState.berita.edit.form.content = htmlContent;
+            }}
             />
           </Box>
 
-          <Button onClick={handleSubmit}>Simpan Perubahan</Button>
+          <Button onClick={handleSubmit}>Edit Berita</Button>
         </Stack>
       </Paper>
     </Box>
@@ -233,9 +209,9 @@ function SelectCategory({
     return <Skeleton height={38} />;
   }
 
-  
+
   const selectedValue = value || defaultValue;
-  
+
   return (
     <Select
       label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
@@ -262,4 +238,4 @@ function SelectCategory({
   );
 }
 
-export default BeritaEdit;
+export default EditBerita;

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

@@ -0,0 +1,120 @@
+'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 stateDashboardBerita from '../../../_state/desa/berita';
+
+function DetailBerita() {
+  const beritaState = useProxy(stateDashboardBerita)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    beritaState.berita.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      beritaState.berita.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/berita")
+    }
+  }
+
+  if (!beritaState.berita.findUnique.data) {
+    return (
+      <Stack py={10}>
+        {Array.from({ length: 10 }).map((_, k) => (
+          <Skeleton key={k} 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 Berita</Text>
+          {beritaState.berita.findUnique.data ? (
+            <Paper key={beritaState.berita.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
+                  <Text fz={"lg"}>{beritaState.berita.findUnique.data?.kategoriBerita?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{beritaState.berita.findUnique.data?.judul}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} >{beritaState.berita.findUnique.data?.deskripsi}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={beritaState.berita.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Konten</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: beritaState.berita.findUnique.data?.content }} />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (beritaState.berita.findUnique.data) {
+                        setSelectedId(beritaState.berita.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={beritaState.berita.delete.loading || !beritaState.berita.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (beritaState.berita.findUnique.data) {
+                        router.push(`/admin/desa/berita/${beritaState.berita.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!beritaState.berita.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 berita ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailBerita;

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

@@ -0,0 +1,168 @@
+'use client'
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Select, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Prisma } from '@prisma/client';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import stateDashboardBerita from '../../../_state/desa/berita';
+
+export default function CreateBerita() {
+  const beritaState = useProxy(stateDashboardBerita);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const router = useRouter()
+
+  const resetForm = () => {
+    // Reset state di valtio
+    beritaState.berita.create.form = {
+      judul: "",
+      deskripsi: "",
+      kategoriBeritaId: "",
+      imageId: "",
+      content: "",
+    };
+
+    // Reset state lokal
+    setPreviewImage(null);
+    setFile(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    // Upload gambar dulu
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar");
+    }
+
+    // Simpan ID gambar ke form
+    beritaState.berita.create.form.imageId = uploaded.id;
+
+    // Submit data berita
+    await beritaState.berita.create.create();
+
+    // Reset form setelah submit
+    resetForm();
+    router.push("/admin/desa/berita")
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+      <Button variant="subtle" onClick={() => router.back()}>
+        <IconArrowBack color={colors['blue-button']} size={25} />
+      </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create Berita</Title>
+          <TextInput
+            value={beritaState.berita.create.form.judul}
+            onChange={(val) => {
+              beritaState.berita.create.form.judul = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <SelectCategory
+            onChange={(val) => {
+              beritaState.berita.create.form.kategoriBeritaId = val.id;
+            }}
+          />
+          <TextInput
+            value={beritaState.berita.create.form.deskripsi}
+            onChange={(val) => {
+              beritaState.berita.create.form.deskripsi = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
+            <CreateEditor
+            value={beritaState.berita.create.form.content}
+            onChange={(htmlContent) => {
+              beritaState.berita.create.form.content = htmlContent;
+            }}
+            />
+          </Box>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan Berita</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+
+  function SelectCategory({
+    onChange,
+  }: {
+    onChange: (value: Prisma.KategoriBeritaGetPayload<{
+      select: {
+        name: true;
+        id: true;
+      };
+    }>) => void;
+  }) {
+    const categoryState = useProxy(stateDashboardBerita.category);
+  
+    useShallowEffect(() => {
+      categoryState.findMany.load();
+    }, []);
+  
+    if (!categoryState.findMany.data) {
+      return <Skeleton height={38} />;
+    }
+  
+    return (
+      <Select
+        label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
+        placeholder="Pilih kategori"
+        data={categoryState.findMany.data.map((item) => ({
+          label: item.name,
+          value: item.id,
+        }))}
+        onChange={(val) => {
+          const selected = categoryState.findMany.data?.find((item) => item.id === val);
+          if (selected) {
+            onChange(selected);
+          }
+        }}
+        searchable
+        nothingFoundMessage="Tidak ditemukan"
+      />
+    );
+  }
+}

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

@@ -1,145 +1,38 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import ApiFetch from '@/lib/api-fetch';
-import { ActionIcon, Box, Button, Center, FileInput, Flex, Image, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Grid, GridCol, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
-import { IconEdit, IconImageInPicture, IconX } from '@tabler/icons-react';
+import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
-import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
 import stateDashboardBerita from '../../_state/desa/berita';
-import { BeritaEditor } from './_com/BeritaEditor';
+
 
 function Page() {
   return (
     <Box>
-      <Title order={3}>Berita</Title>
-      <BeritaCreate />
+      <Grid>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Title order={3}>Berita</Title>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <Paper radius={"lg"} bg={colors['white-1']}>
+            <TextInput
+              radius={"lg"}
+              placeholder='pencarian'
+              leftSection={<IconSearch size={20} />}
+            />
+          </Paper>
+        </GridCol>
+      </Grid>
       <BeritaList />
     </Box>
   );
 }
 
-function BeritaCreate() {
-  const beritaState = useProxy(stateDashboardBerita);
-  const [previewImage, setPreviewImage] = useState<string | null>(null);
-  const [file, setFile] = useState<File | null>(null);
-  const [editorInstance, setEditorInstance] = useState<any>(null);
 
-  const resetForm = () => {
-    // Reset state di valtio
-    beritaState.berita.create.form = {
-      judul: "",
-      deskripsi: "",
-      kategoriBeritaId: "",
-      imageId: "",
-      content: "",
-    };
-
-    // Reset state lokal
-    setPreviewImage(null);
-    setFile(null);
-    if (editorInstance) {
-      editorInstance.commands.setContent(""); // Kosongkan editor
-    }
-  };
-
-  const handleSubmit = async () => {
-    if (!file) {
-      return toast.warn("Pilih file gambar terlebih dahulu");
-    }
-    if (!editorInstance) return toast.error("Editor belum siap");
-
-    const htmlContent = editorInstance.getHTML();
-    if (!htmlContent || htmlContent === "<p></p>") return toast.warn("Konten tidak boleh kosong");
-
-    beritaState.berita.create.form.content = htmlContent;
-
-    // Upload gambar dulu
-    const res = await ApiFetch.api.fileStorage.create.post({
-      file,
-      name: file.name,
-    });
-
-    const uploaded = res.data?.data;
-    if (!uploaded?.id) {
-      return toast.error("Gagal upload gambar");
-    }
-
-    // Simpan ID gambar ke form
-    beritaState.berita.create.form.imageId = uploaded.id;
-
-    // Submit data berita
-    await beritaState.berita.create.create();
-
-    toast.success("Berita berhasil disimpan!");
-
-    // Reset form setelah submit
-    resetForm();
-  };
-
-  return (
-    <Box py={10}>
-      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <TextInput
-            value={beritaState.berita.create.form.judul}
-            onChange={(val) => {
-              beritaState.berita.create.form.judul = val.target.value;
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-            placeholder="masukkan judul"
-          />
-          <SelectCategory
-            onChange={(val) => {
-              beritaState.berita.create.form.kategoriBeritaId = val.id;
-            }}
-          />
-          <TextInput
-            value={beritaState.berita.create.form.deskripsi}
-            onChange={(val) => {
-              beritaState.berita.create.form.deskripsi = val.target.value;
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
-          />
-
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
-          <Box>
-            <Text fz={"sm"} fw={"bold"}>Konten</Text>
-            <BeritaEditor
-              showSubmit={false}
-              onEditorReady={(ed) => setEditorInstance(ed)}
-            />
-          </Box>
-          <Button onClick={handleSubmit}>Simpan Berita</Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
 
 
 
@@ -227,9 +120,7 @@ function BeritaList() {
   if (!beritaState.berita.findMany.data) {
     return (
       <Stack py={10}>
-        {Array.from({ length: 10 }).map((_, k) => (
-          <Skeleton key={k} h={40} />
-        ))}
+        <Skeleton h={500} />
       </Stack>
     )
   }
@@ -238,41 +129,49 @@ function BeritaList() {
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
         <Stack>
-          <Text fz={"xl"} fw={"bold"}>List Berita</Text>
-          <SimpleGrid cols={{ base: 1, md: 4 }}>
-            {beritaState.berita.findMany.data?.map((item) => (
-              <Paper key={item.id} bg={colors['BG-trans']} p={'md'}>
-                <Box>
-                  <Flex justify="flex-end" mt={10}>
-                    <ActionIcon
-                      onClick={() => {
-                        setSelectedId(item.id)
-                        setModalHapus(true)
-                      }}
-                      disabled={beritaState.berita.delete.loading}
-                      color={colors['blue-button']} variant='transparent'
-                    >
-                      <IconX size={20} />
-                    </ActionIcon>
-                    <ActionIcon
-                      onClick={() => router.push(`/admin/desa/berita/edit/${item.id}`)}
-                      color={colors['blue-button']} variant='transparent'
-                    >
-                      <IconEdit size={20} />
-                    </ActionIcon>
-                  </Flex>
-                  <Text fw={"bold"} fz={"sm"}>Kategori</Text>
-                  <Text>{item.kategoriBerita?.name}</Text>
-                  <Text fw={"bold"} fz={"sm"}>Judul</Text>
-                  <Text>{item.judul}</Text>
-                  <Text lineClamp={1} fw={"bold"} fz={"sm"}>Deskripsi</Text>
-                  <Text size='sm' lineClamp={2}>{item.deskripsi}</Text>
-                  <Text fw={"bold"} fz={"sm"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={item.image?.link} alt="gambar" />
-                </Box>
-              </Paper>
-            ))}
-          </SimpleGrid>
+          <Grid>
+            <GridCol span={{ base: 12, md: 11 }}>
+              <Text fz={"xl"} fw={"bold"}>List Berita</Text>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 1 }}>
+              <Button onClick={() => router.push("/admin/desa/berita/create")} bg={colors['blue-button']}>
+                <IconCircleDashedPlus size={25} />
+              </Button>
+            </GridCol>
+          </Grid>
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}> 
+              <TableThead>
+                <TableTr>
+                  <TableTh w={250}>Judul</TableTh>
+                  <TableTh w={250}>Kategori</TableTh>
+                  <TableTh w={250}>Image</TableTh>
+                  <TableTh w={200}>Detail</TableTh>
+
+                </TableTr>
+              </TableThead>
+              <TableTbody >
+                {beritaState.berita.findMany.data?.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd >
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.judul}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd >{item.kategoriBerita?.name}</TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image?.link} alt="gambar" />
+                    </TableTd>
+                    <TableTd>
+                      <Button bg={"green"} onClick={() => router.push(`/admin/desa/berita/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table> </Box>
         </Stack>
       </Paper>
 
@@ -287,45 +186,4 @@ function BeritaList() {
   )
 }
 
-
-function SelectCategory({
-  onChange,
-}: {
-  onChange: (value: Prisma.KategoriBeritaGetPayload<{
-    select: {
-      name: true;
-      id: true;
-    };
-  }>) => void;
-}) {
-  const categoryState = useProxy(stateDashboardBerita.category);
-
-  useShallowEffect(() => {
-    categoryState.findMany.load();
-  }, []);
-
-  if (!categoryState.findMany.data) {
-    return <Skeleton height={38} />;
-  }
-
-  return (
-    <Select
-      label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
-      placeholder="Pilih kategori"
-      data={categoryState.findMany.data.map((item) => ({
-        label: item.name,
-        value: item.id,
-      }))}
-      onChange={(val) => {
-        const selected = categoryState.findMany.data?.find((item) => item.id === val);
-        if (selected) {
-          onChange(selected);
-        }
-      }}
-      searchable
-      nothingFoundMessage="Tidak ditemukan"
-    />
-  );
-}
-
 export default Page;

src/app/admin/(dashboard)/desa/potensi/create/page.tsx

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

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

@@ -0,0 +1,121 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import potensiDesaState from '../../../../_state/desa/potensi';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+
+export default function DetailPotensi() {
+  const router = useRouter()
+  const params = useParams()
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const potensiState = useProxy(potensiDesaState)
+
+  useShallowEffect(() => {
+    potensiState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      potensiState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/potensi")
+    }
+  }
+
+  if (!potensiState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        {Array.from({ length: 10 }).map((_, k) => (
+          <Skeleton key={k} h={40} />
+        ))}
+      </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 Potensi</Text>
+          {potensiState.findUnique.data ? (
+            <Paper key={potensiState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Judul</Text>
+                  <Text fz={"lg"}>{potensiState.findUnique.data.name}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Kategori</Text>
+                  <Text fz={"lg"}>{potensiState.findUnique.data.kategori}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                  <Text fz={"lg"}>{potensiState.findUnique.data.deskripsi}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                  <Image src={potensiState.findUnique.data.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Konten</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: potensiState.findUnique.data.content }} />
+                </Box>
+                <Box>
+                  <Flex gap={"xs"}>
+                    <Button
+                      onClick={() => {
+                        if (potensiState.findUnique.data) {
+                          setSelectedId(potensiState.findUnique.data.id)
+                          setModalHapus(true)
+                        }
+                      }}
+                      disabled={potensiState.delete.loading || !potensiState.findUnique.data}
+                      color="red"
+                    >
+                      <IconX size={20} />
+                    </Button>
+                    <Button
+                      onClick={() => {
+                        if (potensiState.findUnique.data) {
+                          router.push(`/admin/desa/potensi/edit/${potensiState.findUnique.data.id}`)
+                        }
+                      }}
+                      disabled={!potensiState.findUnique.data}
+                      color="green"
+                    >
+                      <IconEdit size={20} />
+                    </Button>
+                  </Flex>
+                </Box>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      />
+    </Box>
+  );
+}
+
+

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

@@ -0,0 +1,169 @@
+'use client'
+
+import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import potensiDesaState from "@/app/admin/(dashboard)/_state/desa/potensi";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import { Box, Button, Paper, Stack, Title, TextInput, FileInput, Center, Text, Image } from "@mantine/core";
+import { IconArrowBack, IconImageInPicture } from "@tabler/icons-react";
+import { useParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { useState, useEffect } from "react";
+import { toast } from "react-toastify";
+import { useProxy } from "valtio/utils";
+
+
+
+function EditPotensi() {
+  const potensiState = useProxy(potensiDesaState)
+  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: '',
+    deskripsi: '',
+    kategori: '',
+    content: '',
+    imageId: ''
+  });
+
+  useEffect(() => {
+    const loadPotensi = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await potensiDesaState.edit.load(id); // ambil data dari API
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            kategori: data.kategori || '',
+            content: data.content || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading potensi:", error);
+        toast.error("Gagal memuat data potensi");
+      }
+    };
+
+    loadPotensi();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      // Sinkronkan semua data dari formData ke state global
+      potensiState.edit.form = {
+        ...potensiState.edit.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        kategori: formData.kategori,
+        content: formData.content,
+      };
+
+      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");
+        }
+
+        potensiState.edit.form.imageId = uploaded.id;
+      }
+
+      await potensiState.edit.update();
+      toast.success("Potensi berhasil diperbarui!");
+      router.push("/admin/desa/potensi");
+    } catch (error) {
+      console.error("Error updating potensi:", error);
+      toast.error("Terjadi kesalahan saat memperbarui potensi");
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Potensi</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => {
+              const val = e.target.value;
+              setFormData((prev) => ({ ...prev, name: val }));
+              potensiState.edit.form.name = val;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <TextInput
+            value={formData.deskripsi}
+            onChange={(e) => {
+              const val = e.target.value;
+              setFormData((prev) => ({ ...prev, deskripsi: val }));
+              potensiState.edit.form.deskripsi = val;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+          <TextInput
+            value={formData.kategori}
+            onChange={(e) => {
+              const val = e.target.value;
+              setFormData((prev) => ({ ...prev, kategori: val }));
+              potensiState.edit.form.kategori = val;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
+            placeholder="masukkan kategori"
+          />
+
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
+            <EditEditor
+            value={formData.content}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, content: htmlContent }));
+                potensiState.edit.form.content = htmlContent;
+              }}
+            />
+          </Box>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Edit Potensi</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditPotensi;

src/app/admin/(dashboard)/desa/potensi/listPage.tsx

@@ -1,17 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Title } from '@mantine/core';
-import React from 'react';
-
-function ListPotensi() {
-  return (
-    <Box>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack>
-        <Title order={3}>List Potensi Desa</Title>
-      </Stack>
-    </Paper>
-  </Box>
-  );
-}
-
-export default ListPotensi;

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

@@ -1,40 +1,89 @@
+
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, TextInput, Title } from '@mantine/core';
-import ListPotensi from './listPage';
+import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } 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 potensiDesaState from '../../_state/desa/potensi';
+
 
 function Potensi() {
   return (
-    <Box py={10}>
-      <Stack gap={"xs"}>
-        <Title order={3}>Potensi Desa</Title>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack>
-                <TextInput
-                  label="Nama Potensi"
-                  placeholder='masukkan nama potensi'
-                />
-                <TextInput
-                  label="Kategori Potensi"
-                  placeholder='masukkan kategori potensi'
-                />
-                <Group>
-                  <Button
-                    mt={10}
-                    bg={colors['blue-button']}
-                  >
-                    Submit
-                  </Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-          <ListPotensi />
-        </SimpleGrid>
-      </Stack>
+    <Box>
+      <HeaderSearch
+        title='Potensi Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListPotensi />
     </Box>
   );
 }
 
+function ListPotensi() {
+  const potensiState = useProxy(potensiDesaState)
+  useShallowEffect(() => {
+    potensiState.findMany.load()
+  }, [])
+
+  const router = useRouter()
+
+
+  if (!potensiState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+          title='List Potensi'
+          href='/admin/desa/potensi/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Kategori</TableTh>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {potensiState.findMany.data?.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box></TableTd>
+                    <TableTd>{item.kategori}</TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image?.link} alt="image" />
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/desa/potensi/detail/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
 export default Potensi;

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

@@ -1,36 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-
-function CreatePasarDesa() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <Title order={4}>Produk Pasar Desa</Title>
-        <Box>
-          <Text fz={"sm"} fw={"bold"}>Masukkan Foto Produk</Text>
-          <IconImageInPicture size={24} color={colors['blue-button']} />
-        </Box>
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Nama Produk</Text>}
-          placeholder="masukkan nama produk"
-        />
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Harga Produk</Text>}
-          placeholder="masukkan harga produk"
-        />
-         <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Rating Produk</Text>}
-          placeholder="masukkan rating produk"
-        />
-         <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Alamat Usaha</Text>}
-          placeholder="masukkan alamat usaha"
-        />
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreatePasarDesa;

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

@@ -0,0 +1,56 @@
+'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 '../../../keamanan/_com/keamananEditor';
+
+function CreatePasarDesa() {
+  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}>Create Pasar Desa</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Produk</Text>}
+          placeholder='Masukkan nama produk'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Harga Produk</Text>}
+          placeholder='Masukkan harga produk'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Rating Produk</Text>}
+          placeholder='Masukkan rating produk'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Alamat Usaha</Text>}
+          placeholder='Masukkan alamat usaha'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Produk</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreatePasarDesa;

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

@@ -0,0 +1,74 @@
+'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 DetailPasarDesa() {
+  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 Pasar Desa</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Produk</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Harga Produk</Text>
+                <Text fz={"lg"}>Rp. 20.000</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Rating Produk</Text>
+                <Text fz={"lg"}>5</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Alamat Usaha</Text>
+                <Text fz={"lg"}>Jalan In Aja</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} >Test Konten</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/pasar-desa/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 DetailPasarDesa;

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

@@ -0,0 +1,56 @@
+'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 '../../../keamanan/_com/keamananEditor';
+
+function EditPasarDesa() {
+  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 Pasar Desa</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Produk</Text>}
+          placeholder='Masukkan nama produk'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Harga Produk</Text>}
+          placeholder='Masukkan harga produk'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Rating Produk</Text>}
+          placeholder='Masukkan rating produk'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Alamat Usaha</Text>}
+          placeholder='Masukkan alamat usaha'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Produk</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditPasarDesa;

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

@@ -1,32 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Text, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-
-function ListDataUsaha() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p={'md'} radius={10}>
-          <Box>
-            <Title mb={10} order={4}>List Produk Pasar Desa</Title>
-            <Box>
-              <Text fz={"sm"} fw={"bold"}>Foto Produk</Text>
-              <IconImageInPicture size={24} color={colors['blue-button']} />
-            </Box>
-            <Text fz={"sm"} fw={"bold"}>Nama Produk</Text> 
-            <Text></Text>
-            <Text fz={"sm"} fw={"bold"}>Harga Produk</Text>
-            <Text></Text>
-            <Text fz={"sm"} fw={"bold"}>Rating Produk</Text>
-            <Text></Text>
-            <Text fz={"sm"} fw={"bold"}>Alamat Usaha</Text>
-            <Text></Text>
-          </Box>
-        </Paper>
-      </Stack>
-    </Box>
-  );
-}
-
-export default ListDataUsaha;

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

@@ -1,31 +1,60 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Title } from '@mantine/core';
-import React from 'react';
-import CreatePasarDesa from './create/createPasarDesa';
-import ListDataUsaha from './listData/page';
+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 Page() {
+function PasarDesa() {
   return (
-    <Stack gap={'xs'}>
-      <Box>
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'} radius={10}>
-          <Stack gap={'xs'}>
-            <Title order={3}>Pasar Desa</Title>
-            <CreatePasarDesa />
-            <Group>
-              <Button
-                mt={10}
-                bg={colors['blue-button']}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
-      <ListDataUsaha />
-    </Stack>
+    <Box>
+      <HeaderSearch
+        title='Pasar Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListPasarDesa/>
+    </Box>
   );
 }
 
-export default Page;
+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)/inovasi/ajukan-ide-inovatif/page.tsx

@@ -1,10 +1,43 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
 import React from 'react';
 
 function Page() {
   return (
-    <div>
-      ajukan-ide-inovatif
-    </div>
+    <Box py={5}>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Stack gap={"xs"}>
+        <Title order={3}>Ajukan Ide Inovatif</Title>
+        <Box>
+          <Table striped withRowBorders withColumnBorders withTableBorder>
+            <TableThead>
+              <TableTr>
+                <TableTh>No</TableTh>
+                <TableTh>Nama</TableTh>
+                <TableTh>Alamat</TableTh>
+                <TableTh>Nama Ide Inovatif</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Masalah yang ingin diatasi</TableTh>
+                <TableTh>Benefit</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              
+                <TableTr>
+                  <TableTd>1</TableTd>
+                  <TableTd>nama</TableTd>
+                  <TableTd>alamat</TableTd>
+                  <TableTd>ide inovatif</TableTd>
+                  <TableTd>deskripsi</TableTd>
+                  <TableTd>masalah</TableTd>
+                  <TableTd>benefit</TableTd>
+                </TableTr>
+              
+            </TableTbody>
+          </Table> </Box>
+      </Stack>
+    </Paper>
+  </Box>
   );
 }
 

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/create/page.tsx

@@ -0,0 +1,35 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
+import React from 'react';
+
+function CreateInfoTeknologiTepatGuna() {
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Paper w={{base: "100%", md: "50%"}} p={"md"} bg={colors['white-1']}>
+          <Stack gap={"xs"}>
+            <Title order={4}>Create Info Teknologi Tepat Guna</Title>
+            <Box>
+              <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+              <IconImageInPicture size={24}/>
+            </Box>
+            <TextInput
+              label={<Text fz={"sm"} fw={"bold"}>Nama Info Teknologi Tepat Guna</Text>}
+              placeholder="Masukkan nama info teknologi tepat guna"
+            />
+            <TextInput
+              label={<Text fz={"sm"} fw={"bold"}>Deskripsi Info Teknologi Tepat Guna</Text>}
+              placeholder="Masukkan deskripsi info teknologi tepat guna"
+            />
+            <Group>
+              <Button bg={colors['blue-button']}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}
+
+export default CreateInfoTeknologiTepatGuna;

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/listData/page.tsx

@@ -0,0 +1,31 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListDataInfoTeknologiTepatGuna() {
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Paper p={'md'} bg={colors['BG-trans']}>
+          <Title order={4}>List Data Info Teknologi Tepat Guna</Title>
+          <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
+            <Paper p={'md'} bg={colors['white-1']}>
+              Data 1
+            </Paper>
+            <Paper p={'md'} bg={colors['white-1']}>
+              Data 2
+            </Paper>
+            <Paper p={'md'} bg={colors['white-1']}>
+              Data 3
+            </Paper>
+            <Paper p={'md'} bg={colors['white-1']}>
+              Data 4
+            </Paper>
+          </SimpleGrid>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}
+
+export default ListDataInfoTeknologiTepatGuna;

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx

@@ -1,10 +1,17 @@
+import { Box, Stack, Title } from '@mantine/core';
 import React from 'react';
+import CreateInfoTeknologiTepatGuna from './create/page';
+import ListDataInfoTeknologiTepatGuna from './listData/page';
 
 function Page() {
   return (
-    <div>
-      info-teknologi-tepat-guna
-    </div>
+    <Box>
+      <Stack gap={'xs'}>
+        <Title order={3}>Info Teknologi Tepat Guna</Title>
+        <CreateInfoTeknologiTepatGuna/>
+        <ListDataInfoTeknologiTepatGuna/>
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/page.tsx

@@ -1,10 +1,34 @@
+import colors from '@/con/colors';
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import React from 'react';
+import KolaborasiInovasi from './ui/kolaborasiInovasi/page';
+import MitraKolaborasi from './ui/mitraKolaborasi/page';
 
 function Page() {
   return (
-    <div>
-      kolaborasi-inovasi
-    </div>
+    <Box>
+      <Stack>
+      <Title order={3}>Kolaborasi Inovasi</Title>
+        <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Kolaborasi Inovasi"}>
+          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+            <TabsTab value="Kolaborasi Inovasi">
+               Kolaborasi Inovasi
+            </TabsTab>
+            <TabsTab value="Mitra Kolaborasi">
+              Mitra Kolaborasi
+            </TabsTab>
+          </TabsList>
+
+          <TabsPanel value="Kolaborasi Inovasi">
+            <KolaborasiInovasi/>
+          </TabsPanel>
+
+          <TabsPanel value="Mitra Kolaborasi">
+            <MitraKolaborasi/>
+          </TabsPanel>
+        </Tabs>
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/kolaborasiInovasi/page.tsx

@@ -0,0 +1,53 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import React from 'react';
+
+function KolaborasiInovasi() {
+  return (
+    <Box py={15}>
+      <Stack gap={"xs"}>
+        <Box>
+          <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Title order={4}>Create Kolaborasi Inovasi</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Tahun</Text>}
+                placeholder="Masukkan tahun"
+              />
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Nama Kolaborasi Inovasi</Text>}
+                placeholder="Masukkan nama kolaborasi inovasi"
+              />
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Deskripsi Kolaborasi Inovasi</Text>}
+                placeholder="Masukkan deskripsi kolaborasi inovasi"
+              />
+
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Title order={4}>List Data Kolaborasi Inovasi</Title>
+            <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Data 1
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Data 2
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Data 3
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Data 4
+              </Paper>
+            </SimpleGrid>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default KolaborasiInovasi;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/mitraKolaborasi/page.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import colors from '@/con/colors';
+import { IconImageInPicture } from '@tabler/icons-react';
+
+function MitraKolaborasi() {
+  return (
+    <Box py={15}>
+      <Stack gap={'xs'}>
+        <Box>
+        <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+          <Stack gap={'xs'}>
+            <Title order={4}>Create Mitra Kolaborasi</Title>
+            <TextInput
+              label={<Text fz={"sm"} fw={"bold"}>Nama Mitra Kolaborasi</Text>}
+              placeholder="Masukkan nama mitra kolaborasi"
+            />
+            <Box>
+              <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+              <IconImageInPicture size={50}/>
+            </Box>
+            <Group>
+              <Button bg={colors['blue-button']}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Title order={4}>List Data Kolaborasi Inovasi</Title>
+            <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Foto 1
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Foto 2
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Foto 3
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Foto 4
+              </Paper>
+            </SimpleGrid>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default MitraKolaborasi;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx

@@ -0,0 +1,37 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
+import React from 'react';
+
+function ProgramKreatifCreate() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Paper w={{base: "100%", md: "50%"}} p={"md"} bg={colors["white-1"]}>
+          <Stack gap={"xs"}>
+            <Title order={4}>Create Program Kreatif Desa</Title>
+            <Box>
+              <Text fz={"sm"} fw={"bold"}>Gambar</Text>
+              <IconImageInPicture size={24}/>
+            </Box>
+            <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Nama Program</Text>}
+            placeholder="Masukkan nama program"
+            />
+            <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="Masukkan deskripsi"
+            />
+            <Group>
+              <Button
+              bg={colors["blue-button"]}
+              >Simpan</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}
+
+export default ProgramKreatifCreate;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/listData/page.tsx

@@ -0,0 +1,29 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListDataProgramKreatifDesa() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Title order={3}>List Data Program Kreatif Desa</Title>
+        <SimpleGrid cols={{ base: 1, md: 4 }}>
+          <Paper p={"md"} bg={colors["white-1"]}>
+          Data 1
+          </Paper>
+          <Paper p={"md"} bg={colors["white-1"]}>
+          Data 2
+          </Paper>
+          <Paper p={"md"} bg={colors["white-1"]}>
+          Data 3
+          </Paper>
+          <Paper p={"md"} bg={colors["white-1"]}>
+          Data 4
+          </Paper>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default ListDataProgramKreatifDesa;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/page.tsx

@@ -1,10 +1,17 @@
+import { Box, Stack, Title } from '@mantine/core';
 import React from 'react';
+import ProgramKreatifCreate from './create/page';
+import ListDataProgramKreatifDesa from './listData/page';
 
 function Page() {
   return (
-    <div>
-      program-kreatif-desa
-    </div>
+    <Box>
+      <Stack gap={"xs"}>
+        <Title order={3}>Program Kreatif Desa</Title>
+        <ProgramKreatifCreate />
+        <ListDataProgramKreatifDesa />
+      </Stack>
+    </Box>
   );
 }
 

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

@@ -0,0 +1,44 @@
+'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 CreateKeamananLingkungan() {
+  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}>Create 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 KeamananLingkungan'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi KeamananLingkungan</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateKeamananLingkungan;

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

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

@@ -0,0 +1,44 @@
+'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,36 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import React from 'react';
-import CreateKeamananLingkungan from './ui/tambah_keamanan_lingkungan/page';
-import ListKeamananLingkungan from './ui/list_keamanan_lingkungan/page';
+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 Page() {
+function KeamananLingkungan() {
   return (
     <Box>
-     <Stack gap={'xs'}>
-      <Title order={3}>Keamanan Lingkungan </Title>
-      <Tabs defaultValue="create" color={colors['blue-button']} variant='pills'>
-        <TabsList mb={10} bg={colors['BG-trans']} p={'xs'}>
-          <TabsTab value="create" >
-            Tambah Keamanan Lingkungan 
-          </TabsTab>
-          <TabsTab value="list" >
-            List Keamanan Lingkungan 
-          </TabsTab>
-        </TabsList>
-
-        <TabsPanel value="create">
-          <CreateKeamananLingkungan/>
-        </TabsPanel>
-
-        <TabsPanel value="list">
-          <ListKeamananLingkungan/>
-        </TabsPanel>
-      </Tabs>
-      </Stack>
+      <HeaderSearch
+        title='Keamanan Lingkungan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListKeamananLingkungan/>
     </Box>
   );
 }
 
-export default Page;
+function ListKeamananLingkungan() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Keamanan Lingkungan'
+          href='/admin/keamanan/keamanan-lingkungan-pecalang-patwal/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Keamanan Lingkungan</TableTh>
+              <TableTh>Nomor Keamanan Lingkungan</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </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>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default KeamananLingkungan;

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

@@ -1,33 +0,0 @@
-import { Box, Paper, Stack, Table, TableTbody, TableTh, TableThead, TableTr, Title } from '@mantine/core';
-import colors from '@/con/colors';
-import React from 'react';
-
-function ListKeamananLingkungan() {
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'} radius={10}>
-        <Stack gap={'xs'}>
-          <Title order={3}>List Keamanan Lingkungan</Title>
-          <Box>
-            <Table striped withTableBorder withColumnBorders withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Image</TableTh>
-                  <TableTh>Nama Keamanan Lingkungan</TableTh>
-                  <TableTh>Deskripsi Keamanan Lingkungan</TableTh>
-                  <TableTh>Aksi</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default ListKeamananLingkungan;

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

@@ -1,46 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-import { KeamananEditor } from '../../../_com/keamananEditor';
-
-
-function KeamananLingkungan() {
-  return (
-    <Box>
-      <Stack gap={'xs'}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Title order={4}>Tambah 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>
-          <Box>
-
-          </Box>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default KeamananLingkungan;

src/app/admin/(dashboard)/keamanan/kontak-darurat/create/createKontak.tsx

@@ -1,28 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Stack, Text, TextInput } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-
-function CreateKontakDarurat() {
-  return (
-    <Box>
-     <Stack gap={"xs"}>
-      <TextInput 
-      label={<Text fz={"sm"} fw={"bold"}>Judul Kontak Darurat</Text>}
-      placeholder="masukkan judul kontak darurat"
-      />
-      <IconImageInPicture size={24} color={colors['blue-button']} />
-      <TextInput 
-      label={<Text fz={"sm"} fw={"bold"}>Nama Kontak Darurat</Text>}
-      placeholder="masukkan nama kontak darurat"
-      />
-      <IconImageInPicture size={24} color={colors['blue-button']} />
-      <TextInput 
-      label={<Text fz={"sm"} fw={"bold"}>Nomor Kontak Darurat</Text>}
-      placeholder="masukkan nomor kontak darurat"
-      />
-     </Stack>
-    </Box>
-  );
-}
-
-export default CreateKontakDarurat;

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

@@ -0,0 +1,44 @@
+'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 CreateKontakDarurat() {
+  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}>Create Kontak Darurat</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Kontak Darurat</Text>}
+          placeholder='Masukkan nama Kontak Darurat'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Kontak Darurat</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateKontakDarurat;

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

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

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

@@ -0,0 +1,44 @@
+'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 EditKontakDarurat() {
+  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 Kontak Darurat</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Kontak Darurat</Text>}
+          placeholder='Masukkan nama Kontak Darurat'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Kontak Darurat</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditKontakDarurat;

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

@@ -1,23 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Text, Title } from '@mantine/core';
-import React from 'react';
-
-function ListDataKontakDarurat() {
-  return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Data Kontak Darurat</Title>
-        <Box>
-          <Text fw={"bold"}>Judul Kontak Darurat</Text>
-          <Text> </Text>
-          <Text fw={"bold"}>Nama Kontak Darurat</Text>
-          <Text> </Text>
-          <Text fw={"bold"}>Nomor Kontak Darurat</Text>
-          <Text> </Text>
-        </Box>
-      </Stack>
-    </Paper>
-  );
-}
-
-export default ListDataKontakDarurat;

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

@@ -1,31 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
-import React from 'react';
-import CreateKontakDarurat from './create/createKontak';
-import ListDataKontakDarurat from './listData/page';
+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 Page() {
+function KontakDaurat() {
   return (
-    <Stack gap={"xs"}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10}>
-            <Title order={3}>Kontak Darurat</Title>
-          <CreateKontakDarurat/>
-          <Group>
-            <Button
-              mt={10}
-              bg={colors['blue-button']}
-            >
-              Submit
-            </Button>
-          </Group>
-          </Paper>
-        </Box>
-        <ListDataKontakDarurat/>
-      </SimpleGrid>
-    </Stack>
+    <Box>
+      <HeaderSearch
+        title='Kontak Darurat'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListKontakDaurat/>
+    </Box>
   );
 }
 
-export default Page;
+function ListKontakDaurat() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Kontak Darurat'
+          href='/admin/keamanan/kontak-darurat/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Kontak Darurat</TableTh>
+              <TableTh>Nomor Kontak Darurat</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Kontak Darurat 1</TableTd>
+              <TableTd>0896232831883</TableTd>
+              <TableTd>Kontak Darurat 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/keamanan/kontak-darurat/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default KontakDaurat;

src/app/admin/(dashboard)/keamanan/laporan-publik/create/createLaporan.tsx

@@ -1,27 +0,0 @@
-import { Box, Stack, Text, TextInput } from '@mantine/core';
-import React from 'react';
-import { KeamananEditor } from '../../_com/keamananEditor';
-
-
-function CreateLaporanPublik() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Judul Laporan Publik</Text>}
-          placeholder="masukkan judul laporan publik"
-        />
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Tanggal Laporan Publik</Text>}
-          placeholder="masukkan tanggal laporan publik"
-        />
-        <Box>
-          <Text fz={"sm"} fw={"bold"}>Deskripsi Laporan Publik</Text>
-          <KeamananEditor showSubmit={false} />
-        </Box>
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreateLaporanPublik;

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

@@ -0,0 +1,48 @@
+'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 CreateLaporanPublik() {
+  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}>Create Laporan Publik</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Laporan Publik</Text>}
+          placeholder='Masukkan judul LaporanPublik'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal Laporan Publik</Text>}
+          placeholder='Masukkan tanggal LaporanPublik'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Laporan Publik</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateLaporanPublik;

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

@@ -0,0 +1,70 @@
+'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 DetailLaporanPublik() {
+  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 Laporan Publik</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul Laporan Publik</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Tanggal Laporan Publik</Text>
+                <Text fz={"lg"}>Test Tanggal</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/laporan-publik/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 DetailLaporanPublik;

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

@@ -0,0 +1,48 @@
+'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 EditLaporanPublik() {
+  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 Laporan Publik</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Laporan Publik</Text>}
+          placeholder='Masukkan judul Laporan Publik'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal Laporan Publik</Text>}
+          placeholder='Masukkan tanggal Laporan Publik'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Laporan Publik</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditLaporanPublik;

src/app/admin/(dashboard)/keamanan/laporan-publik/listData/page.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Box, Paper, Stack, Text, Title } from '@mantine/core';
-import colors from '@/con/colors';
-
-function ListDataLaporanPublik() {
-  return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Data Laporan Publik</Title>
-        <Box>
-          <Text fw={"bold"}>Judul Laporan Publik</Text>
-          <Text></Text>
-          <Text fw={"bold"}>Tanggal Laporan Publik</Text>
-          <Text></Text>
-          <Text fw={"bold"}>Deskripsi Laporan Publik</Text>
-          <Text></Text>
-        </Box>
-      </Stack>
-    </Paper>
-  );
-}
-
-export default ListDataLaporanPublik;

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

@@ -1,28 +1,58 @@
-import colors from "@/con/colors";
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from "@mantine/core";
-import CreateLaporanPublik from "./create/createLaporan";
-import ListDataLaporanPublik from "./listData/page";
+'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';
 
-export default function Page() {
+function LaporanPublik() {
   return (
-    <Stack gap={"xs"}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>  
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10}>
-            <Title order={3}>Laporan Publik</Title>
-            <CreateLaporanPublik/>
-            <Group>
-              <Button
-              mt={10}
-              bg={colors['blue-button']}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Paper>
-        </Box>
-        <ListDataLaporanPublik/>
-      </SimpleGrid>
-    </Stack>
-  )
-}
+    <Box>
+      <HeaderSearch
+        title='Laporan Publik'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListLaporanPublik/>
+    </Box>
+  );
+}
+
+function ListLaporanPublik() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Laporan Publik'
+          href='/admin/keamanan/laporan-publik/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Judul Laporan Publik</TableTh>
+              <TableTh>Tanggal Laporan Publik</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Laporan Publik 1</TableTd>
+              <TableTd>0896232831883</TableTd>
+              <TableTd>Laporan Publik 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/keamanan/laporan-publik/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default LaporanPublik;

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/createPencegahan.tsx

@@ -1,25 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Stack, Text, TextInput } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-
-function CreatePencegahan() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Judul Pencegahan Kriminalitas</Text>}
-          placeholder="masukkan judul pencegahan kriminalitas"
-        />
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Deskripsi Pencegahan Kriminalitas</Text>}
-          placeholder="masukkan deskripsi pencegahan kriminalitas"
-        />
-        <Text fw={"bold"} fz={"sm"} >Gambar Pencegahan Kriminalitas</Text>
-        <IconImageInPicture size={24} color={colors['blue-button']} />
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreatePencegahan;

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

@@ -0,0 +1,44 @@
+'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 CreatePencegahanKriminalitas() {
+  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}>Create Pencegahan Kriminalitas</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Pencegahan Kriminalitas</Text>}
+          placeholder='Masukkan nama Pencegahan Kriminalitas'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Pencegahan Kriminalitas</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreatePencegahanKriminalitas;

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

@@ -0,0 +1,70 @@
+'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 DetailPencegahanKriminalitas() {
+  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 Pencegahan Kriminalitas</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Pencegahan Kriminalitas</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nomor Pencegahan Kriminalitas</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/pencegahan-kriminalitas/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 DetailPencegahanKriminalitas;

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

@@ -0,0 +1,44 @@
+'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 EditPencegahanKriminalitas() {
+  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 Pencegahan Kriminalitas</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Pencegahan Kriminalitas</Text>}
+          placeholder='Masukkan nama Pencegahan Kriminalitas'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Pencegahan Kriminalitas</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditPencegahanKriminalitas;

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/listData/page.tsx

@@ -1,23 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Text, Title } from '@mantine/core';
-import React from 'react';
-
-function ListDataPencegahan() {
-  return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Data Pencegahan Kriminalitas</Title>
-        <Box>
-          <Text fw={"bold"}>Judul Pencegahan Kriminalitas</Text>
-          <Text> </Text>
-          <Text fw={"bold"}>Deskripsi Pencegahan Kriminalitas</Text>
-          <Text> </Text>
-          <Text fw={"bold"}>Gambar Pencegahan Kriminalitas</Text>
-          <Text> </Text>
-        </Box>
-      </Stack>
-    </Paper>
-  );
-}
-
-export default ListDataPencegahan;

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

@@ -1,32 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Stack, SimpleGrid, Box, Paper, Title, Group, Button } from '@mantine/core';
-import React from 'react';
-import CreatePencegahan from './create/createPencegahan';
-import ListDataPencegahan from './listData/page';
+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 Page() {
+function PencegahanKriminalitas() {
   return (
-    <Stack gap={"xs"}>
-    <SimpleGrid cols={{ base: 1, md: 2 }}>
-      <Box>
-        <Paper bg={colors['white-1']} p={'md'} radius={10}>
-          <Title order={3}>Kontak Darurat</Title>
-        <CreatePencegahan/>
-        <Group>
-          <Button
-            mt={10}
-            bg={colors['blue-button']}
-          >
-            Submit
-          </Button>
-        </Group>
-        </Paper>
-      </Box>
-      <ListDataPencegahan/>
-    </SimpleGrid>
-  </Stack>
+    <Box>
+      <HeaderSearch
+        title='Pencegahan Kriminalitas'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListPencegahanKriminalitas/>
+    </Box>
   );
 }
 
-export default Page;
+function ListPencegahanKriminalitas() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Pencegahan Kriminalitas'
+          href='/admin/keamanan/pencegahan-kriminalitas/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Pencegahan Kriminalitas</TableTh>
+              <TableTh>Nomor Pencegahan Kriminalitas</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Pencegahan Kriminalitas 1</TableTd>
+              <TableTd>0896232831883</TableTd>
+              <TableTd>Pencegahan Kriminalitas 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/keamanan/pencegahan-kriminalitas/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default PencegahanKriminalitas;

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

@@ -0,0 +1,44 @@
+'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 CreatePolsekTerdekat() {
+  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}>Create 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 CreatePolsekTerdekat;

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

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

@@ -0,0 +1,44 @@
+'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,36 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import React from 'react';
-import CreatePolsekTerdekat from './ui/tambah_polsek_terdekat/page';
-import ListPolsekTerdekat from './ui/list_polsek_terdekat/page';
+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 Page() {
+function PolsekTerdekat() {
   return (
     <Box>
-     <Stack gap={'xs'}>
-      <Title order={3}>Polsek Terdekat</Title>
-      <Tabs defaultValue="create" color={colors['blue-button']} variant='pills'>
-        <TabsList mb={10} bg={colors['BG-trans']} p={'xs'}>
-          <TabsTab value="create" >
-            Tambah Polsek Terdekat
-          </TabsTab>
-          <TabsTab value="list" >
-            List Polsek Terdekat
-          </TabsTab>
-        </TabsList>
-
-        <TabsPanel value="create">
-          <CreatePolsekTerdekat/>
-        </TabsPanel>
-
-        <TabsPanel value="list">
-          <ListPolsekTerdekat/>
-        </TabsPanel>
-      </Tabs>
-      </Stack>
+      <HeaderSearch
+        title='Polsek Terdekat'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListPolsekTerdekat/>
     </Box>
   );
 }
 
-export default Page;
+function ListPolsekTerdekat() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Polsek Terdekat'
+          href='/admin/keamanan/polsek-terdekat/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Polsek Terdekat</TableTh>
+              <TableTh>Nomor Polsek Terdekat</TableTh>
+              <TableTh>Deskripsi</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')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default PolsekTerdekat;

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

@@ -1,36 +0,0 @@
-import { Box, Paper, Stack, Table, TableTbody, TableTh, TableThead, TableTr, Title } from '@mantine/core';
-import colors from '@/con/colors';
-import React from 'react';
-
-function ListPolsekTerdekat() {
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'} radius={10}>
-        <Stack gap={'xs'}>
-          <Title order={3}>List Polsek Terdekat</Title>
-          <Box>
-            <Table striped withTableBorder withColumnBorders withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama Polsek Terdekat</TableTh>
-                  <TableTh>Jarak Polsek Terdekat</TableTh>
-                  <TableTh>Alamat Polsek Terdekat</TableTh>
-                  <TableTh>Nomor Telepon Polsek Terdekat</TableTh>
-                  <TableTh>Jam Aktif</TableTh>
-                  <TableTh>Deskripsi Polsek Terdekat</TableTh>
-                  <TableTh>Aksi</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default ListPolsekTerdekat;

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

@@ -1,56 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import { KeamananEditor } from '../../../_com/keamananEditor';
-
-
-function CreatePolsekTerdekat() {
-  return (
-    <Box>
-      <Stack gap={'xs'}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Title order={4}>Tambah Polsek Terdekat</Title>
-                <TextInput
-                label={<Text fw={"bold"} fz={"sm"}>Nama Polsek Terdekat</Text>}
-                placeholder='Masukkan nama polsek terdekat'
-                />
-                <TextInput
-                label={<Text fw={"bold"} fz={"sm"}>Jarak Polsek Terdekat</Text>}
-                placeholder='Masukkan jarak polsek terdekat'
-                />
-                <TextInput
-                label={<Text fw={"bold"} fz={"sm"}>Alamat Polsek Terdekat</Text>}
-                placeholder='Masukkan alamat polsek terdekat'
-                />
-                <TextInput
-                label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Polsek Terdekat</Text>}
-                placeholder='Masukkan nomor telepon polsek terdekat'
-                />
-                <TextInput
-                label={<Text fw={"bold"} fz={"sm"}>Jam Aktif</Text>}
-                placeholder='Masukkan jam aktif 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>
-          <Box>
-
-          </Box>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreatePolsekTerdekat;

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

@@ -1,27 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Stack, Text, TextInput } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-import { KeamananEditor } from '../../_com/keamananEditor';
-
-function CreateTipsKeamanan() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Judul Tips Keamanan</Text>}
-          placeholder="masukkan judul tips keamanan"
-        />
-        <Box>
-          <Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>
-          <IconImageInPicture size={24} color={colors['blue-button']} />
-        </Box>
-        <KeamananEditor
-          showSubmit={false}
-        />
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreateTipsKeamanan;

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

@@ -0,0 +1,44 @@
+'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 CreateTipsKeamanan() {
+  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}>Create 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 CreateTipsKeamanan;

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

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

@@ -0,0 +1,44 @@
+'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/listData/page.tsx

@@ -1,24 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Text, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-
-function ListDataTipsKeamanan() {
-  return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Data Tips Keamanan</Title>
-        <Box>
-          <Text fw={"bold"}>Judul Tips Keamanan</Text>
-          <Text></Text>
-          <Text fw={"bold"}>Gambar Tips Keamanan</Text>
-          <IconImageInPicture size={24} color={colors['blue-button']} />
-          <Text fw={"bold"}>Deskripsi Tips Keamanan</Text>
-          <Text></Text>
-        </Box>
-      </Stack>
-    </Paper>
-  );
-}
-
-export default ListDataTipsKeamanan;

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

@@ -1,31 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
-import React from 'react';
-import CreateTipsKeamanan from './create/createTips';
-import ListDataTipsKeamanan from './listData/page';
+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 Page() {
+function TipsKeamanan() {
   return (
-    <Stack gap={"xs"}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>  
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10}>
-            <Title order={3}>Tips Keamanan</Title>
-            <CreateTipsKeamanan/>
-            <Group>
-              <Button
-              mt={10}
-              bg={colors['blue-button']}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Paper>
-        </Box>
-        <ListDataTipsKeamanan/>
-      </SimpleGrid>
-    </Stack>
-  )
+    <Box>
+      <HeaderSearch
+        title='Tips Keamanan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListTipsKeamanan/>
+    </Box>
+  );
 }
 
-export default Page;
+function ListTipsKeamanan() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Tips Keamanan'
+          href='/admin/keamanan/tips-keamanan/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <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} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default TipsKeamanan;

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

@@ -0,0 +1,77 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
+
+function CreateInfoWabahPenyakit() {
+  const router = useRouter();
+  return (
+     <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Create Info Wabah Penyakit</Title>
+
+          <TextInput
+            
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <TextInput
+            
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <TextInput
+           
+            label={<Text fz="sm" fw="bold">Kategori</Text>}
+            placeholder="masukkan kategori"
+          />
+
+          {/* <FileInput
+            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+              );
+              setPreviewImage(base64);
+            }}
+          /> */}
+
+          {/* {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg="gray">
+              <IconImageInPicture />
+            </Center>
+          )} */}
+
+          <Box>
+            <Text fz="sm" fw="bold">Konten</Text>
+            <KesehatanEditor
+              showSubmit={false}
+            />
+          </Box>
+
+          <Button bg={colors['blue-button']}>
+            Simpan Potensi
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateInfoWabahPenyakit;

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

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

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

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

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

@@ -1,36 +1,67 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import React from 'react';
-import CreateInfoWabahPenyakit from './ui/tambah_wabah_penyakit/page';
-import ListInfoWabahPenyakit from './ui/list_wabah_penyakit/page';
+import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import JudulList from '../../_com/judulList';
+import HeaderSearch from '../../_com/header';
+import { useRouter } from 'next/navigation';
 
-
-function Page() {
+function InfoWabahPenyakit() {
   return (
     <Box>
-     <Stack gap={'xs'}>
-      <Title order={3}>Info Wabah/Penyakit</Title>
-      <Tabs defaultValue="create" color={colors['blue-button']} variant='pills'>
-        <TabsList mb={10} bg={colors['BG-trans']} p={'xs'}>
-          <TabsTab value="create" >
-            Tambah Info Wabah/Penyakit
-          </TabsTab>
-          <TabsTab value="list" >
-            List Info Wabah/Penyakit
-          </TabsTab>
-        </TabsList>
-
-        <TabsPanel value="create">
-          <CreateInfoWabahPenyakit/>
-        </TabsPanel>
-
-        <TabsPanel value="list">
-          <ListInfoWabahPenyakit/>
-        </TabsPanel>
-      </Tabs>
-      </Stack>
+      <HeaderSearch
+        title='Info Wabah Penyakit'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListInfoWabahPenyakit/>
     </Box>
   );
 }
 
-export default Page;
+function ListInfoWabahPenyakit() {
+  const router = useRouter()
+  return (
+    <Box py={10}>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Stack>
+        <JudulList
+          title='List Info Wabah Penyakit'
+          href='/admin/kesehatan/info-wabah-penyakit/create'
+        />
+        <Box style={{ overflowX: "auto" }}>
+          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+            <TableThead>
+              <TableTr>
+                <TableTh>Judul</TableTh>
+                <TableTh>Kategori</TableTh>
+                <TableTh>Image</TableTh>
+                <TableTh>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              <TableTr>
+                <TableTd>
+                  <Box w={100}>
+                    <Text truncate="end" fz={"sm"}>Test</Text>
+                  </Box></TableTd>
+                <TableTd>Test</TableTd>
+                <TableTd>
+                  <Image w={100} src={"/"} alt="image" />
+                </TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push('/admin/kesehatan/info-wabah-penyakit/detail')}>
+                    <IconDeviceImacCog size={25} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            </TableTbody>
+          </Table>
+        </Box>
+      </Stack>
+    </Paper>
+  </Box>
+  )
+}
+
+export default InfoWabahPenyakit;

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

@@ -1,33 +0,0 @@
-import { Box, Paper, Stack, Table, TableTbody, TableTh, TableThead, TableTr, Title } from '@mantine/core';
-import colors from '@/con/colors';
-import React from 'react';
-
-function ListInfoWabahPenyakit() {
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'} radius={10}>
-        <Stack gap={'xs'}>
-          <Title order={3}>List Info Wabah/Penyakit</Title>
-          <Box>
-            <Table striped withTableBorder withColumnBorders withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Image</TableTh>
-                  <TableTh>Nama Info Wabah/Penyakit</TableTh>
-                  <TableTh>Deskripsi Info Wabah/Penyakit</TableTh>
-                  <TableTh>Aksi</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default ListInfoWabahPenyakit;

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

@@ -1,45 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-
-function CreateInfoWabahPenyakit() {
-  return (
-    <Box>
-      <Stack gap={'xs'}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Title order={4}>Tambah Info Wabah/Penyakit</Title>
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-                  <IconImageInPicture size={50} />
-                </Box>
-                <TextInput
-                label={<Text fw={"bold"} fz={"sm"}>Nama Info Wabah/Penyakit</Text>}
-                placeholder='Masukkan nama info wabah/penyakit'
-                />
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Deskripsi Info Wabah/Penyakit</Text>
-                  <KesehatanEditor
-                    showSubmit={false}
-                  />
-                </Box>
-                <Group>
-                  <Button bg={colors['blue-button']}>Submit</Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-          <Box>
-
-          </Box>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreateInfoWabahPenyakit;

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

@@ -0,0 +1,77 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
+
+function CreateKontakDarurat() {
+  const router = useRouter();
+  return (
+     <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Create Kontak Darurat</Title>
+
+          <TextInput
+            
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <TextInput
+            
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <TextInput
+           
+            label={<Text fz="sm" fw="bold">Kategori</Text>}
+            placeholder="masukkan kategori"
+          />
+
+          {/* <FileInput
+            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+              );
+              setPreviewImage(base64);
+            }}
+          /> */}
+
+          {/* {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg="gray">
+              <IconImageInPicture />
+            </Center>
+          )} */}
+
+          <Box>
+            <Text fz="sm" fw="bold">Konten</Text>
+            <KesehatanEditor
+              showSubmit={false}
+            />
+          </Box>
+
+          <Button bg={colors['blue-button']}>
+            Simpan Potensi
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateKontakDarurat;

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

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

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

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

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

@@ -1,35 +1,67 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import React from 'react';
-import CreateKontakDarurat from './ui/tambah_kontak_darurat/page';
-import ListKontakDarurat from './ui/list_kontak_darurat/page';
+import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import JudulList from '../../_com/judulList';
+import HeaderSearch from '../../_com/header';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function KontakDarurat() {
   return (
     <Box>
-     <Stack gap={'xs'}>
-      <Title order={3}>Kontak Darurat</Title>
-      <Tabs defaultValue="create" color={colors['blue-button']} variant='pills'>
-        <TabsList mb={10} bg={colors['BG-trans']} p={'xs'}>
-          <TabsTab value="create" >
-            Tambah Kontak Darurat
-          </TabsTab>
-          <TabsTab value="list" >
-            List Kontak Darurat
-          </TabsTab>
-        </TabsList>
-
-        <TabsPanel value="create">
-          <CreateKontakDarurat />
-        </TabsPanel>
-
-        <TabsPanel value="list">
-          <ListKontakDarurat/>
-        </TabsPanel>
-      </Tabs>
-      </Stack>
+      <HeaderSearch
+        title='KontakDarurat'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListKontakDarurat/>
     </Box>
   );
 }
 
-export default Page;
+function ListKontakDarurat() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Stack>
+        <JudulList
+          title='List Kontak Darurat'
+          href='/admin/kesehatan/kontak-darurat/create'
+        />
+        <Box style={{ overflowX: "auto" }}>
+          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+            <TableThead>
+              <TableTr>
+                <TableTh>Judul</TableTh>
+                <TableTh>Kategori</TableTh>
+                <TableTh>Image</TableTh>
+                <TableTh>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              <TableTr>
+                <TableTd>
+                  <Box w={100}>
+                    <Text truncate="end" fz={"sm"}>Test</Text>
+                  </Box></TableTd>
+                <TableTd>Test</TableTd>
+                <TableTd>
+                  <Image w={100} src={"/"} alt="image" />
+                </TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push('/admin/kesehatan/kontak-darurat/detail')}>
+                    <IconDeviceImacCog size={25} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            </TableTbody>
+          </Table>
+        </Box>
+      </Stack>
+    </Paper>
+  </Box>
+  )
+}
+
+export default KontakDarurat;

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

@@ -1,33 +0,0 @@
-import { Box, Paper, Stack, Table, TableTbody, TableTh, TableThead, TableTr, Title } from '@mantine/core';
-import colors from '@/con/colors';
-import React from 'react';
-
-function ListKontakDarurat() {
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'} radius={10}>
-        <Stack gap={'xs'}>
-          <Title order={3}>List Kontak Darurat</Title>
-          <Box>
-            <Table striped withTableBorder withColumnBorders withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Image</TableTh>
-                  <TableTh>Nama Kontak Darurat</TableTh>
-                  <TableTh>Deskripsi Kontak Darurat</TableTh>
-                  <TableTh>Aksi</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default ListKontakDarurat;

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

@@ -1,45 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-
-function CreateKontakDarurat() {
-  return (
-    <Box>
-      <Stack gap={'xs'}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Title order={4}>Tambah Kontak Darurat</Title>
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-                  <IconImageInPicture size={50} />
-                </Box>
-                <TextInput
-                label={<Text fw={"bold"} fz={"sm"}>Nama Kontak Darurat</Text>}
-                placeholder='Masukkan nama kontak darurat'
-                />
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Deskripsi Kontak Darurat</Text>
-                  <KesehatanEditor
-                    showSubmit={false}
-                  />
-                </Box>
-                <Group>
-                  <Button bg={colors['blue-button']}>Submit</Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-          <Box>
-
-          </Box>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreateKontakDarurat;

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

@@ -0,0 +1,77 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
+
+function CreatePenangananDarurat() {
+  const router = useRouter();
+  return (
+     <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Create Penanganan Darurat</Title>
+
+          <TextInput
+            
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <TextInput
+            
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <TextInput
+           
+            label={<Text fz="sm" fw="bold">Kategori</Text>}
+            placeholder="masukkan kategori"
+          />
+
+          {/* <FileInput
+            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+              );
+              setPreviewImage(base64);
+            }}
+          /> */}
+
+          {/* {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg="gray">
+              <IconImageInPicture />
+            </Center>
+          )} */}
+
+          <Box>
+            <Text fz="sm" fw="bold">Konten</Text>
+            <KesehatanEditor
+              showSubmit={false}
+            />
+          </Box>
+
+          <Button bg={colors['blue-button']}>
+            Simpan Potensi
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreatePenangananDarurat;

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

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

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

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

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

@@ -1,35 +1,67 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import React from 'react';
-import CreatePenangananDarurat from './ui/tambah_penanganan_darurat/page';
-import ListPenangananDarurat from './ui/list_penanganan_darurat/page';
+import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import JudulList from '../../_com/judulList';
+import HeaderSearch from '../../_com/header';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function PenangananDarurat() {
   return (
     <Box>
-     <Stack gap={'xs'}>
-      <Title order={3}>Penanganan Darurat</Title>
-      <Tabs defaultValue="create" color={colors['blue-button']} variant='pills'>
-        <TabsList mb={10} bg={colors['BG-trans']} p={'xs'}>
-          <TabsTab value="create" >
-            Tambah Penanganan Darurat
-          </TabsTab>
-          <TabsTab value="list" >
-            List Penanganan Darurat
-          </TabsTab>
-        </TabsList>
-
-        <TabsPanel value="create">
-          <CreatePenangananDarurat/>
-        </TabsPanel>
-
-        <TabsPanel value="list">
-          <ListPenangananDarurat/>
-        </TabsPanel>
-      </Tabs>
-      </Stack>
+      <HeaderSearch
+        title='PenangananDarurat'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListPenangananDarurat/>
     </Box>
   );
 }
 
-export default Page;
+function ListPenangananDarurat() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Stack>
+        <JudulList
+          title='List Penanganan Darurat'
+          href='/admin/kesehatan/penanganan-darurat/create'
+        />
+        <Box style={{ overflowX: "auto" }}>
+          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+            <TableThead>
+              <TableTr>
+                <TableTh>Judul</TableTh>
+                <TableTh>Kategori</TableTh>
+                <TableTh>Image</TableTh>
+                <TableTh>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              <TableTr>
+                <TableTd>
+                  <Box w={100}>
+                    <Text truncate="end" fz={"sm"}>Test</Text>
+                  </Box></TableTd>
+                <TableTd>Test</TableTd>
+                <TableTd>
+                  <Image w={100} src={"/"} alt="image" />
+                </TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push('/admin/kesehatan/penanganan-darurat/detail')}>
+                    <IconDeviceImacCog size={25} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            </TableTbody>
+          </Table>
+        </Box>
+      </Stack>
+    </Paper>
+  </Box>
+  )
+}
+
+export default PenangananDarurat;

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

@@ -1,33 +0,0 @@
-import { Box, Paper, Stack, Table, TableTbody, TableTh, TableThead, TableTr, Title } from '@mantine/core';
-import colors from '@/con/colors';
-import React from 'react';
-
-function ListPenangananDarurat() {
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'} radius={10}>
-        <Stack gap={'xs'}>
-          <Title order={3}>List Penanganan Darurat</Title>
-          <Box>
-            <Table striped withTableBorder withColumnBorders withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Image</TableTh>
-                  <TableTh>Nama Penanganan Darurat</TableTh>
-                  <TableTh>Deskripsi Penanganan Darurat</TableTh>
-                  <TableTh>Aksi</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default ListPenangananDarurat;

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

@@ -1,45 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-import { KesehatanEditor } from '../../../_com/kesehatanEditor';
-
-function CreatePenangananDarurat() {
-  return (
-    <Box>
-      <Stack gap={'xs'}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Title order={4}>Tambah Penanganan Darurat</Title>
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-                  <IconImageInPicture size={50} />
-                </Box>
-                <TextInput
-                label={<Text fw={"bold"} fz={"sm"}>Nama Penanganan Darurat</Text>}
-                placeholder='Masukkan nama penanganan darurat'
-                />
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Deskripsi Penanganan Darurat</Text>
-                  <KesehatanEditor
-                    showSubmit={false}
-                  />
-                </Box>
-                <Group>
-                  <Button bg={colors['blue-button']}>Submit</Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-          <Box>
-
-          </Box>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreatePenangananDarurat;

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

@@ -0,0 +1,45 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
+
+function CreatePosyandu() {
+  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}>Create Posyandu</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Posyandu</Text>}
+          placeholder='Masukkan nama posyandu'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Posyandu</Text>
+            <KesehatanEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreatePosyandu;

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

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

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

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

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

@@ -1,52 +1,56 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
-import { KesehatanEditor } from '../_com/kesehatanEditor';
+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 Posyandu() {
   return (
     <Box>
-      <Title order={3}>Kesehatan</Title>
-      <SimpleGrid py={10} cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={"md"}>
-            <Stack gap={"xs"}>
-              <Title order={3}>Posyandu</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Nama Posyandu</Text>}
-                placeholder='masukkan nama posyandu'
-              />
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Nomor Telepon Posyandu</Text>}
-                placeholder='masukkan nomor telepon posyandu'
-              />
-              <Box>
-              <Text fz={"sm"} fw={"bold"}>Deskripsi Posyandu</Text>
-              <KesehatanEditor
-                showSubmit={false}
-                />
-                </Box>
-                <Box>
-              <Text fz={"sm"} fw={"bold"}>Pelayanan Posyandu</Text>
-              <KesehatanEditor
-                showSubmit={false}
-                />
-                </Box>
-              <Group>
-                <Button bg={colors['blue-button']}>Submit</Button>
-              </Group>
+      <HeaderSearch
+        title='Posyandu'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListPosyandu/>
+    </Box>
+  );
+}
 
-            </Stack>
-          </Paper>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={"md"}>
-            <Stack>
-              <Title order={3}>Preview Data Posyandu</Title>
-            </Stack>
-          </Paper>
-        </Box>
-      </SimpleGrid>
+function ListPosyandu() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Posyandu'
+          href='/admin/kesehatan/posyandu/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Posyandu</TableTh>
+              <TableTh>Nomor Posyandu</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Posyandu 1</TableTd>
+              <TableTd>0896232831883</TableTd>
+              <TableTd>Posyandu 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/kesehatan/posyandu/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
     </Box>
   );
 }