API Menu Kesehatan, Sub Menu Posyandu

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/data/ppid/profile-ppid/profilePPid.json

@@ -6,6 +6,6 @@
     "riwayat": "<ul> <li>2021 - 2027: Perbekel Desa Darmasaba</li> <li>2015 - Sekarang: Founder & Managing Director Mantra Legal Consultants & Advocates</li> <li>2020 - Sekarang: Founder Ugawa Record Music Studio</li> <li>2010 - 2016: Dosen Fakultas Hukum Universitas Mahasaraswati Denpasar</li> </ul>",
     "pengalaman": "<ul> <li>1996 – 1997: Ketua OSIS SMP Negeri 1 Abiansemal</li><li>1999 – 2000: Ketua OSIS SMA Negeri 1 Mengwi</li> <li>2008 – 2009: Ketua BEM Universitas Mahasaraswati Denpasar</li> <li>2008 – 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</li> <li>2020 – Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</li> <li>2021 – Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</li> <li>2023 – 2028: Komite Tetap Advokasi – Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</li> </ul>",
     "unggulan": "<h3>Pemberdayaan Ekonomi dan UMKM</h3> <ul> <li>Pelatihan dan pendampingan UMKM lokal</li> <li>Program bantuan modal usaha bagi pelaku usaha kecil</li><li>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</li></ul>",
-    "imageUrl": "/assets/images/ppid/profile-ppid/perbekel.png"
+    "imageUrl": "/uploads/seeded-images/profile-ppid/perbekel.png"
   }
 ]

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,25 @@ 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[]
+
+  Posyandu Posyandu[]
+}
+
 //========================================= MENU PPID ========================================= //
 // ========================================= VISI MISI PPID ========================================= //
 model VisiMisiPPID {
@@ -242,17 +261,18 @@ model Berita {
   id               String          @id @default(cuid())
   judul            String
   deskripsi        String
-  image            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)
-  KatagoryBerita   KatagoryBerita? @relation(fields: [katagoryBeritaId], references: [id])
-  katagoryBeritaId String?
+  kategoriBerita   KategoriBerita? @relation(fields: [kategoriBeritaId], references: [id])
+  kategoriBeritaId String?
 }
 
-model KatagoryBerita {
+model KategoriBerita {
   id        String   @id @default(cuid())
   name      String   @unique
   beritas   Berita[]
@@ -262,6 +282,21 @@ model KatagoryBerita {
   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,17 +618,16 @@ model DoctorSign {
   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? // nullable agar bisa menandakan belum dihapus
-  isActive  Boolean   @default(true)
-  link      String
+// ========================================= POSYANDU ========================================= //
+model Posyandu {
+  id        String      @id @default(cuid())
+  name      String
+  nomor     String
+  deskripsi String
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
 }

prisma/seed.ts

@@ -1,277 +1,229 @@
-import prisma from '@/lib/prisma'
-import categoryPengumuman from './data/category-pengumuman.json'
-import katagoryBerita from './data/katagory-berita.json'
-import caraMemperolehInformasi from './data/list-caraMemperolehInformasi.json'
-import caraMemperolehSalinanInformasi from './data/list-caraMemperolehSalinanInformasi.json'
-import jenisInformasiDiminta from './data/list-jenisInfromasi.json'
-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'
-import { mkdir, writeFile } from 'fs/promises'
-import { v4 as uuid } from 'uuid'
+import prisma from "@/lib/prisma";
+import categoryPengumuman from "./data/category-pengumuman.json";
+import kategoriBerita from "./data/kategori-berita.json";
+import caraMemperolehInformasi from "./data/list-caraMemperolehInformasi.json";
+import caraMemperolehSalinanInformasi from "./data/list-caraMemperolehSalinanInformasi.json";
+import jenisInformasiDiminta from "./data/list-jenisInfromasi.json";
+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 profilePPID from "./data/ppid/profile-ppid/profilePPid.json";
+import path from "path";
+import fs from "fs";
+import { mkdir, writeFile } from "fs/promises";
+import { v4 as uuid } from "uuid";
 
 (async () => {
-    for (const l of layanan) {
-        await prisma.layanan.upsert({
-            where: {
-                name: l.name
-            },
-            update: {
-                name: l.name
-            },
-            create: {
-                name: l.name
-            }
-        })
+  for (const l of layanan) {
+    await prisma.layanan.upsert({
+      where: {
+        name: l.name,
+      },
+      update: {
+        name: l.name,
+      },
+      create: {
+        name: l.name,
+      },
+    });
+  }
+
+  console.log("layanan success ...");
+
+  for (const p of potensi) {
+    await prisma.potensi.upsert({
+      where: {
+        name: p.name,
+      },
+      update: {
+        name: p.name,
+      },
+      create: {
+        name: p.name,
+      },
+    });
+  }
+
+  console.log("potensi success ...");
+
+  for (const k of kategoriBerita) {
+    await prisma.kategoriBerita.upsert({
+      where: {
+        name: k.name,
+      },
+      update: {
+        name: k.name,
+      },
+      create: {
+        name: k.name,
+      },
+    });
+  }
+
+  console.log("kategori berita success ...");
+
+  for (const c of categoryPengumuman) {
+    await prisma.categoryPengumuman.upsert({
+      where: {
+        name: c.name,
+      },
+      update: {
+        name: c.name,
+      },
+      create: {
+        name: c.name,
+      },
+    });
+  }
+
+  console.log("category pengumuman success ...");
+
+  for (const j of jenisInformasiDiminta) {
+    await prisma.jenisInformasiDiminta.upsert({
+      where: {
+        name: j.name,
+      },
+      update: {
+        name: j.name,
+      },
+      create: {
+        name: j.name,
+      },
+    });
+  }
+  console.log("jenis informasi diminta success ...");
+
+  for (const c of caraMemperolehInformasi) {
+    await prisma.caraMemperolehInformasi.upsert({
+      where: {
+        name: c.name,
+      },
+      update: {
+        name: c.name,
+      },
+      create: {
+        name: c.name,
+      },
+    });
+  }
+  console.log("cara memperoleh informasi success ...");
+
+  for (const c of caraMemperolehSalinanInformasi) {
+    await prisma.caraMemperolehSalinanInformasi.upsert({
+      where: {
+        name: c.name,
+      },
+      update: {
+        name: c.name,
+      },
+      create: {
+        name: c.name,
+      },
+    });
+  }
+  console.log("cara memperoleh salinan informasi success ...");
+
+  const seedProfilePPID = async () => {
+    const targetDir = path.resolve("public", "uploads", "seeded-images", "profile-ppid")
+  
+    // Buat folder hanya jika belum ada
+    if (!fs.existsSync(targetDir)) {
+      await mkdir(targetDir, { recursive: true })
     }
-
-    console.log("layanan success ...")
-
-    for (const p of potensi) {
-        await prisma.potensi.upsert({
-            where: {
-                name: p.name
-            },
-            update: {
-                name: p.name
-            },
-            create: {
-                name: p.name
-            }
-        })
-    }
-
-    console.log("potensi success ...")
-
-    for (const k of katagoryBerita) {
-        await prisma.katagoryBerita.upsert({
-            where: {
-                name: k.name
-            },
-            update: {
-                name: k.name
-            },
-            create: {
-                name: k.name
-            }
-        })
-    }
-
-    console.log("katagory berita success ...")
-
-    for (const c of categoryPengumuman) {
-        await prisma.categoryPengumuman.upsert({
-            where: {
-                name: c.name
-            },
-            update: {
-                name: c.name
-            },
-            create: {
-                name: c.name
-            }
-        })
-    }
-
-    console.log("category pengumuman success ...")
-
-    for (const j of jenisInformasiDiminta) {
-        await prisma.jenisInformasiDiminta.upsert({
-            where: {
-                name: j.name
-            },
-            update: {
-                name: j.name
-            },
-            create: {
-                name: j.name
-            }
-        })
-    }
-    console.log("jenis informasi diminta success ...")
-
-    for (const c of caraMemperolehInformasi) {
-        await prisma.caraMemperolehInformasi.upsert({
-            where: {
-                name: c.name
-            },
-            update: {
-                name: c.name
-            },
-            create: {
-                name: c.name
-            }
-        })
-    }
-    console.log("cara memperoleh informasi success ...")
-
-    for (const c of caraMemperolehSalinanInformasi) {
-        await prisma.caraMemperolehSalinanInformasi.upsert({
-            where: {
-                name: c.name
-            },
-            update: {
-                name: c.name
-            },
-            create: {
-                name: c.name
-            }
-        })
-    }
-    console.log("cara memperoleh salinan informasi success ...")
-
-    const seedProfilePPID = async () => {
-        const targetDir = path.resolve("public", "assets", "images", "ppid", "profile-ppid")
-        await mkdir(targetDir, { recursive: true })
-      
-        for (const c of profilePPID) {
-          let finalImageUrl = c.imageUrl
-      
-          // kalau imageUrl diawali dengan "/assets/images", artinya kita harus copy file dari seed-images
-          if (c.imageUrl.startsWith("/assets/images/")) {
-            const filename = path.basename(c.imageUrl) // misal "perbekel.png"
-            const seedImagePath = path.resolve("prisma", "seed-images", filename)
-      
-            // Buat nama baru yang unik agar tidak bentrok
-            const targetFilename = `${uuid()}_${filename}`
-            const targetPath = path.join(targetDir, targetFilename)
-      
-            // Salin file dari prisma/seed-images ke public/
-            const buffer = fs.readFileSync(seedImagePath)
-            await writeFile(targetPath, buffer)
-      
-            finalImageUrl = `/assets/images/ppid/profile-ppid/${targetFilename}`
-          }
-      
-          // Upsert ke database
-          await prisma.profilePPID.upsert({
-            where: { id: c.id },
-            update: {
-              name: c.name,
-              biodata: c.biodata,
-              riwayat: c.riwayat,
-              pengalaman: c.pengalaman,
-              unggulan: c.unggulan,
-              imageUrl: finalImageUrl,
-            },
-            create: {
-              id: c.id,
-              name: c.name,
-              biodata: c.biodata,
-              riwayat: c.riwayat,
-              pengalaman: c.pengalaman,
-              unggulan: c.unggulan,
-              imageUrl: finalImageUrl,
-            },
-          })
-        }
-      
-        console.log("✅ profilePPID seeded from JSON with image copying")
+  
+    for (const c of profilePPID) {
+      let finalImageUrl = c.imageUrl
+  
+      if (c.imageUrl.startsWith("/uploads/seeded-images/")) {
+        const filename = path.basename(c.imageUrl)
+        const seedImagePath = path.resolve("prisma", "seed-images", filename)
+  
+        const targetFilename = `${uuid()}_${filename}`
+        const targetPath = path.join(targetDir, targetFilename)
+  
+        const buffer = fs.readFileSync(seedImagePath)
+        await writeFile(targetPath, buffer)
+  
+        finalImageUrl = `/uploads/seeded-images/profile-ppid/${targetFilename}`
       }
-      
-      await seedProfilePPID()
-
-    
-    for (const v of visiMisiPPID) {
-        await prisma.visiMisiPPID.upsert({
-            where: {
-                id: v.id,
-            },
-            update: {
-                misi: v.misi,
-                visi: v.visi
-            },
-            create: {
-                id: v.id,
-                misi: v.misi,
-                visi: v.visi
-            }
-        })
+  
+      await prisma.profilePPID.upsert({
+        where: { id: c.id },
+        update: {
+          name: c.name,
+          biodata: c.biodata,
+          riwayat: c.riwayat,
+          pengalaman: c.pengalaman,
+          unggulan: c.unggulan,
+          imageUrl: finalImageUrl,
+        },
+        create: {
+          id: c.id,
+          name: c.name,
+          biodata: c.biodata,
+          riwayat: c.riwayat,
+          pengalaman: c.pengalaman,
+          unggulan: c.unggulan,
+          imageUrl: finalImageUrl,
+        },
+      })
     }
-    console.log("visi misi PPID success ...")
+  
+    console.log("✅ profilePPID seeded from JSON with image copying")
+  }
+  
+  await seedProfilePPID()
 
-    for (const v of dasarHukumPPID) {
-        await prisma.dasarHukumPPID.upsert({
-            where: {
-                id: v.id,
-            },
-            update: {
-                judul: v.judul,
-                content: v.content
-            },
-            create: {
-                id: v.id,
-                judul: v.judul,
-                content: v.content
-            }
-        })
-    }
-    console.log("dasar hukum PPID success ...")
+  for (const v of visiMisiPPID) {
+    await prisma.visiMisiPPID.upsert({
+      where: {
+        id: v.id,
+      },
+      update: {
+        misi: v.misi,
+        visi: v.visi,
+      },
+      create: {
+        id: v.id,
+        misi: v.misi,
+        visi: v.visi,
+      },
+    });
+  }
+  console.log("visi misi 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 dasarHukumPPID) {
+    await prisma.dasarHukumPPID.upsert({
+      where: {
+        id: v.id,
+      },
+      update: {
+        judul: v.judul,
+        content: v.content,
+      },
+      create: {
+        id: v.id,
+        judul: v.judul,
+        content: v.content,
+      },
+    });
+  }
+  console.log("dasar hukum PPID 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) => {
-    console.error(e)
-    prisma.$disconnect()
+})()
+  .then(() => prisma.$disconnect())
+  .catch((e) => {
+    console.error(e);
+    prisma.$disconnect();
+  });
+
+process.on("exit", () => {
+  prisma.$disconnect();
 });
 
-process.on('exit', () => {
-    prisma.$disconnect()
-})
-
-process.on('SIGINT', () => {
-    prisma.$disconnect()
-    process.exit(0)
-})
+process.on("SIGINT", () => {
+  prisma.$disconnect();
+  process.exit(0);
+});

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)/_com/modalKonfirmasiHapus.tsx

@@ -0,0 +1,36 @@
+// components/modal/ModalKonfirmasiHapus.tsx
+import colors from "@/con/colors"
+import { Modal, Text, Button, Flex } from "@mantine/core"
+
+interface ModalKonfirmasiHapusProps {
+  opened: boolean
+  loading?: boolean
+  onClose: () => void
+  onConfirm: () => void
+  text: string
+}
+
+export function ModalKonfirmasiHapus({
+  opened,
+  loading = false,
+  onClose,
+  onConfirm,
+  text,
+}: ModalKonfirmasiHapusProps) {
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Konfirmasi Hapus"
+      centered
+    >
+      <Text mb="md">{text}</Text>
+      <Flex justify="flex-end" gap="sm">
+        <Button style={{color: "white"}} bg={colors['blue-button']} variant="default" onClick={onClose}>Batal</Button>
+        <Button color="red" onClick={onConfirm} loading={loading}>
+          Yakin Hapus
+        </Button>
+      </Flex>
+    </Modal>
+  )
+}

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

@@ -1,23 +1,31 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";
 
+// 1. Schema validasi dengan Zod
 const templateForm = z.object({
   judul: z.string().min(3, "Judul minimal 3 karakter"),
   deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
-  image: z.string().url().min(3, "Image minimal 3 karakter"),
   content: z.string().min(3, "Content minimal 3 karakter"),
-  katagoryBeritaId: z.string().nonempty(),
+  kategoriBeritaId: z.string().nonempty(),
+  imageId: z.string().nonempty(),
 });
 
+// 2. Default value form berita (hindari uncontrolled input)
+const defaultForm = {
+  judul: "",
+  deskripsi: "",
+  imageId: "",
+  content: "",
+  kategoriBeritaId: "",
+};
+
+// 3. Kategori proxy
 const category = proxy({
   findMany: {
-    data: null as
-      | null
-      | Prisma.KatagoryBeritaGetPayload<{ omit: { isActive: true } }>[],
+    data: [] as Prisma.KategoriBeritaGetPayload<{ omit: { isActive: true } }>[],
     async load() {
       const res = await ApiFetch.api.desa.berita.category["find-many"].get();
       if (res.status === 200) {
@@ -27,23 +35,12 @@ const category = proxy({
   },
 });
 
-type BeritaForm = Prisma.BeritaGetPayload<{
-  select: {
-    judul: true;
-    deskripsi: true;
-    image: true;
-    content: true;
-    katagoryBeritaId: true;
-  };
-}>;
-
+// 4. Berita proxy
 const berita = proxy({
   create: {
-    form: {} as BeritaForm,
+    form: { ...defaultForm }, // ✅ ini kunci fix-nya
     loading: false,
     async create() {
-      berita.create.form.image =
-        "https://www.shutterstock.com/image-vector/lower-news-live-streaming-breaking-600nw-2535984111.jpg";
       const cek = templateForm.safeParse(berita.create.form);
       if (!cek.success) {
         const err = `[${cek.error.issues
@@ -51,6 +48,7 @@ const berita = proxy({
           .join("\n")}] required`;
         return toast.error(err);
       }
+
       try {
         berita.create.loading = true;
         const res = await ApiFetch.api.desa.berita["create"].post(
@@ -58,33 +56,200 @@ const berita = proxy({
         );
         if (res.status === 200) {
           berita.findMany.load();
-          return toast.success("succes 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 {
         berita.create.loading = false;
       }
     },
+    resetForm() {
+      berita.create.form = { ...defaultForm };
+    },
   },
+
   findMany: {
     data: null as
-      | Prisma.BeritaGetPayload<{ omit: { isActive: true } }>[]
+      | Prisma.BeritaGetPayload<{
+          include: {
+            image: true;
+            kategoriBerita: true;
+          };
+        }>[]
       | null,
     async load() {
       const res = await ApiFetch.api.desa.berita["find-many"].get();
       if (res.status === 200) {
-        berita.findMany.data = (res.data?.data as any) ?? [];
+        berita.findMany.data = (res.data?.data ) ?? [];
       }
     },
   },
+  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) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        berita.delete.loading = true;
+
+        const response = await fetch(`/api/desa/berita/delete/${id}`, {
+          method: 'DELETE',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+        
+        const result = await response.json();
+        
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Berita berhasil dihapus");
+          await berita.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus berita");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus berita");
+      } finally {
+        berita.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/berita/${id}`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+        
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const result = await response.json();
+        
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            judul: data.judul,
+            deskripsi: data.deskripsi,
+            content: data.content,
+            kategoriBeritaId: data.kategoriBeritaId || "",
+            imageId: data.imageId || "",
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading berita:", error);
+        toast.error(error instanceof Error ? error.message : "Gagal memuat data");
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateForm.safeParse(berita.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+    
+      try {
+        berita.edit.loading = true;
+        
+        const response = await fetch(`/api/desa/berita/${this.id}`, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            judul: this.form.judul,
+            deskripsi: this.form.deskripsi,
+            content: this.form.content,
+            kategoriBeritaId: this.form.kategoriBeritaId || null,
+            imageId: this.form.imageId,
+          }),
+        });
+        
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+        }
+        
+        const result = await response.json();
+    
+        if (result.success) {
+          toast.success("Berhasil update berita");
+          await berita.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update berita");
+        }
+      } catch (error) {
+        console.error("Error updating berita:", error);
+        toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat update berita");
+        return false;
+      } finally {
+        berita.edit.loading = false;
+      }
+    },
+
+    reset() {
+      berita.edit.id = "";
+      berita.edit.form = { ...defaultForm };
+    },
+  },
+  
 });
 
+// 5. State global
 const stateDashboardBerita = proxy({
   category,
   berita,
 });
 
-export default stateDashboardBerita;
+export default stateDashboardBerita;

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

@@ -1,83 +1,246 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import ApiFetch from "@/lib/api-fetch"
-import { Prisma } from "@prisma/client"
-import { toast } from "react-toastify"
-import { proxy } from "valtio"
-import { z } from "zod"
+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 templateFormPengumuman = z.object({
-    judul: z.string().min(3, "Judul minimal 3 karakter"),
-    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
-    content: z.string().min(3, "Content minimal 3 karakter"),
-    categoryPengumumanId: z.string().nonempty(),
-})
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  content: z.string().min(3, "Content minimal 3 karakter"),
+  categoryPengumumanId: z.string().nonempty(),
+});
 
-const category = proxy ({
-    findMany: {
-        data: null as
-          | null
-          | Prisma.CategoryPengumumanGetPayload<{ omit: { isActive: true } }>[],
-          async load() {
-            const res = await ApiFetch.api.desa.pengumuman.category["find-many"].get();
-            if (res.status === 200) {
-                category.findMany.data = res.data?.data as any ?? [];
-            }
-          }
-    }
-})
+const category = proxy({
+  findMany: {
+    data: null as
+      | null
+      | Prisma.CategoryPengumumanGetPayload<{ omit: { isActive: true } }>[],
+    async load() {
+      const res = await ApiFetch.api.desa.pengumuman.category[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        category.findMany.data = (res.data?.data as any) ?? [];
+      }
+    },
+  },
+});
 
 type PengumumanForm = Prisma.PengumumanGetPayload<{
-    select: {
-        judul: true;
-        deskripsi: true;
-        content: true;
-        categoryPengumumanId: true;
-    }
-}>
+  select: {
+    judul: true;
+    deskripsi: true;
+    content: true;
+    categoryPengumumanId: true;
+  };
+}>;
 const pengumuman = proxy({
-create: {
+  create: {
     form: {} as PengumumanForm,
     loading: false,
     async create() {
-       const cek = templateFormPengumuman.safeParse(pengumuman.create.form);
-       if (!cek.success) {
+      const cek = templateFormPengumuman.safeParse(pengumuman.create.form);
+      if (!cek.success) {
         const err = `[${cek.error.issues
-        .map((v) => `${v.path.join(".")}`)
-        .join("\n")}] required`;
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
         return toast.error(err);
-       }
-       try {
+      }
+      try {
         pengumuman.create.loading = true;
-        const res = await ApiFetch.api.desa.pengumuman["create"].post(pengumuman.create.form)
+        const res = await ApiFetch.api.desa.pengumuman["create"].post(
+          pengumuman.create.form
+        );
         if (res.status === 200) {
-            pengumuman.findMany.load();
-            return toast.success("success create");
+          pengumuman.findMany.load();
+          return toast.success("success create");
         }
-        console.log(res)
+        console.log(res);
         return toast.error("failed create");
-       } catch (error) {
+      } catch (error) {
         console.log((error as Error).message);
-       } finally{
+      } finally {
         pengumuman.create.loading = false;
-       }
-    }
-},
-findMany: {
+      }
+    },
+  },
+  findMany: {
     data: null as
-    | Prisma.PengumumanGetPayload<{omit: {isActive: true}}>[]
-    | null,
-    async load () {
-        const res = await ApiFetch.api.desa.pengumuman["find-many"].get();
-        console.log(res)
-        if (res.status === 200) {
-            pengumuman.findMany.data = res.data?.data ?? [];
+      | Prisma.PengumumanGetPayload<{ 
+        include: {
+            CategoryPengumuman: true;
         }
-    }
-}
-})
+       }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.desa.pengumuman["find-many"].get();
+      console.log(res);
+      if (res.status === 200) {
+        pengumuman.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  // findUnique: {
+  //   data: null as
+  //   | Prisma.PengumumanGetPayload<{
+  //       include: {
+  //           CategoryPengumuman: true;
+  //       }
+  //   }>
+  //   | null,
+  //   async load(id: string) {
+  //     try {
+  //       const res = await fetch(`/api/desa/pengumuman/${id}`);
+  //       if (res.ok) {
+  //         const data = await res.json();
+  //         pengumuman.findUnique.data = data.data ?? null;
+  //       } else {
+  //         console.error('Failed to fetch pengumuman:', res.statusText);
+  //         pengumuman.findUnique.data = null;
+  //       }
+  //     } catch (error) {
+  //       console.error('Error fetching pengumuman:', error);
+  //       pengumuman.findUnique.data = null;
+  //     }
+  //   },
+  // },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        pengumuman.delete.loading = true;
+
+        const response = await fetch(`/api/desa/pengumuman/delete/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Pengumuman berhasil dihapus");
+          await pengumuman.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus pengumuman");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus pengumuman");
+      } finally {
+        pengumuman.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: {} as PengumumanForm,
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/desa/pengumuman/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            judul: data.judul,
+            deskripsi: data.deskripsi,
+            content: data.content,
+            categoryPengumumanId: data.categoryPengumumanId || "",
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data pengumuman");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data pengumuman");
+      } finally {
+        pengumuman.update.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateFormPengumuman.safeParse(pengumuman.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        pengumuman.update.loading = true;
+
+        const response = await fetch(`/api/desa/pengumuman/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            judul: this.form.judul,
+            deskripsi: this.form.deskripsi,
+            content: this.form.content,
+            categoryPengumumanId: this.form.categoryPengumumanId,
+          }),
+        });
+
+        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 pengumuman");
+          await pengumuman.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update pengumuman");
+        }
+      } catch (error) {
+        console.error("Error updating pengumuman:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update pengumuman"
+        );
+        return false;
+      } finally {
+        pengumuman.update.loading = false;
+      }
+    },
+  },
+});
 
 const stateDesaPengumuman = proxy({
-    category,
-    pengumuman
-})
-export default stateDesaPengumuman
+  category,
+  pengumuman,
+});
+export default stateDesaPengumuman;

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

@@ -0,0 +1,241 @@
+"use client";
+
+import {
+  Box,
+  Button,
+  Center,
+  Image,
+  Paper,
+  Select,
+  Skeleton,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { IconArrowBack, IconImageInPicture } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { useProxy } from "valtio/utils";
+
+
+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 { useShallowEffect } from "@mantine/hooks";
+import { Prisma } from "@prisma/client";
+import stateDashboardBerita from "../../../../_state/desa/berita";
+
+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 [formData, setFormData] = useState({
+    judul: beritaState.berita.edit.form.judul || '',
+    deskripsi: beritaState.berita.edit.form.deskripsi || '',
+    kategoriBeritaId: beritaState.berita.edit.form.kategoriBeritaId || '',
+    content: beritaState.berita.edit.form.content || '',
+    imageId: beritaState.berita.edit.form.imageId || ''
+  });
+
+  // Load berita by id saat pertama kali
+  useEffect(() => {
+    const loadBerita = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await stateDashboardBerita.berita.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            judul: data.judul || '',
+            deskripsi: data.deskripsi || '',
+            kategoriBeritaId: data.kategoriBeritaId || '',
+            content: data.content || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading berita:", error);
+        toast.error("Gagal memuat data berita");
+      }
+    };
+
+    loadBerita();
+  }, [params?.id]); // ✅ hapus beritaState dari dependency
+
+  const handleSubmit = async () => {
+
+    try {
+      // Update global state with form data
+      beritaState.berita.edit.form = {
+        ...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 uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        // Update imageId in global state
+        beritaState.berita.edit.form.imageId = uploaded.id;
+      }
+
+      await beritaState.berita.edit.update();
+      toast.success("Berita berhasil diperbarui!");
+      router.push("/admin/desa/berita");
+    } catch (error) {
+      console.error("Error updating berita:", error);
+      toast.error("Terjadi kesalahan saat memperbarui berita");
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Berita</Title>
+          <TextInput
+            value={formData.judul}
+            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <SelectCategory
+            value={formData.kategoriBeritaId}
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                kategoriBeritaId: val?.id || ''
+              });
+            }}
+          />
+
+          <TextInput
+            value={formData.deskripsi}
+            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</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 }));
+              beritaState.berita.edit.form.content = htmlContent;
+            }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit}>Edit Berita</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+interface SelectCategoryProps {
+  onChange: (value: Prisma.KategoriBeritaGetPayload<{
+    select: {
+      name: true;
+      id: true;
+    };
+  }> | null) => void;
+  value?: string | null;
+  defaultValue?: string | null;
+}
+
+function SelectCategory({
+  onChange,
+  value,
+  defaultValue,
+}: SelectCategoryProps) {
+  const categoryState = useProxy(stateDashboardBerita.category);
+
+  useShallowEffect(() => {
+    categoryState.findMany.load().then(() => {
+      console.log("Kategori berhasil dimuat:", categoryState.findMany.data);
+    });
+  }, []);
+
+  if (!categoryState.findMany.data) {
+    return <Skeleton height={38} />;
+  }
+
+
+  const selectedValue = value || defaultValue;
+
+  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,
+      }))}
+      value={selectedValue || null}
+      onChange={(val: string | null) => {
+        if (val) {
+          const selected = categoryState.findMany.data?.find((item) => item.id === val);
+          if (selected) {
+            onChange(selected);
+          }
+        } else {
+          onChange(null);
+        }
+      }}
+      searchable
+      clearable
+      nothingFoundMessage="Tidak ditemukan"
+    />
+  );
+}
+
+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/_com/BeritaEditor.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import { RichTextEditor, Link } from '@mantine/tiptap';
 import { useEditor } from '@tiptap/react';
@@ -8,28 +9,77 @@ import TextAlign from '@tiptap/extension-text-align';
 import Superscript from '@tiptap/extension-superscript';
 import SubScript from '@tiptap/extension-subscript';
 import { Button, Stack } from '@mantine/core';
+import { useEffect, useState } from 'react';
 
-const content =
-  '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
+// const content =
+//   '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
 
-export function BeritaEditor({ onSubmit }: { onSubmit: (val: string) => void }) {
-  const editor = useEditor({
-    extensions: [
-      StarterKit,
-      Underline,
-      Link,
-      Superscript,
-      SubScript,
-      Highlight,
-      TextAlign.configure({ types: ['heading', 'paragraph'] }),
-    ],
-    content,
-    immediatelyRender: false
-  });
-
-  if (!editor) {
-    return null;
-  }
+  export function BeritaEditor({
+    onEditorReady,
+    showSubmit = true,
+    onSubmit,
+    initialContent = '',
+    onUpdate,
+  }: {
+    onEditorReady?: (editor: any | null) => void;
+    onSubmit?: (val: string) => void;
+    showSubmit?: boolean;
+    initialContent?: string;
+    onUpdate?: (content: string) => void;
+  }) {
+    const [mounted, setMounted] = useState(false);
+    const [isReady, setIsReady] = useState(false);
+    
+    const editor = useEditor({
+      extensions: [
+        StarterKit,
+        Underline,
+        Link,
+        Superscript,
+        SubScript,
+        Highlight,
+        TextAlign.configure({ types: ['heading', 'paragraph'] }),
+      ],
+      content: initialContent || '<p></p>',
+      onUpdate: ({ editor }) => {
+        if (onUpdate) {
+          onUpdate(editor.getHTML());
+        }
+      },
+      editorProps: {
+        attributes: {
+          class: 'prose max-w-none',
+        },
+      },
+      onSelectionUpdate: () => {
+        if (!isReady && editor) {
+          setIsReady(true);
+          onEditorReady?.(editor);
+        }
+      },
+      immediatelyRender: false
+    });
+  
+    useEffect(() => {
+      if (editor) {
+        // Set initial content when component mounts
+        editor.commands.setContent(initialContent || '<p></p>');
+        
+        // Mark as mounted and notify parent
+        if (!mounted) {
+          setMounted(true);
+          onEditorReady?.(editor);
+        }
+      }
+      
+      return () => {
+        if (editor) {
+          editor.destroy();
+        }
+      };
+    }, [editor, initialContent, mounted, onEditorReady]);
+  
+    if (!editor) return <div>Loading editor...</div>;
 
 
   return (
@@ -82,10 +132,12 @@ export function BeritaEditor({ onSubmit }: { onSubmit: (val: string) => void })
 
         <RichTextEditor.Content />
       </RichTextEditor>
-      <Button onClick={() => {
-        if (!editor) return
-        onSubmit(editor?.getHTML())
-      }}>Submit</Button>
+      {showSubmit && (
+        <Button onClick={() => {
+          if (!editor) return
+          onSubmit?.(editor?.getHTML())
+        }}>Submit</Button>
+      )}
     </Stack>
   );
 }

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,101 +1,123 @@
 'use client'
-import { Box, Center, Group, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
-import { IconImageInPicture } from '@tabler/icons-react';
-import { useProxy } from 'valtio/utils';
-import stateDashboardBerita from '../../_state/desa/berita';
-import { BeritaEditor } from './_com/BeritaEditor';
 import colors from '@/con/colors';
+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 { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+import stateDashboardBerita from '../../_state/desa/berita';
+
 
 function Page() {
   return (
     <Box>
-      <Title order={3}>Berita</Title>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <BeritaCreate />
-        <BeritaList />
-      </SimpleGrid>
+      <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)
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <SelectCategory onChange={(val) => {
-            beritaState.berita.create.form.katagoryBeritaId = val.id
-          }} />
-          <TextInput onChange={(val) => {
-            beritaState.berita.create.form.judul = val.target.value
-          }} label={"Judul"} placeholder='masukkan judul' />
-          <TextInput onChange={(val) => {
-            beritaState.berita.create.form.deskripsi = val.target.value
-          }} label={"Deskripsi"} placeholder='masukkan deskripsi' />
-          <Center w={200} h={200} bg={"gray"}>
-            <IconImageInPicture />
-          </Center>
-          <BeritaEditor onSubmit={(val) => {
-
-            beritaState.berita.create.form.content = val
-            beritaState.berita.create.create()
-          }} />
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
 function BeritaList() {
   const beritaState = useProxy(stateDashboardBerita)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
   useShallowEffect(() => {
     beritaState.berita.findMany.load()
   }, [])
 
-  if (!beritaState.berita.findMany.data) return <Stack py={10}>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
+  const router = useRouter()
+
+  const handleHapus = () => {
+    if (selectedId) {
+      beritaState.berita.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+
+  if (!beritaState.berita.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
         <Stack>
-          <Text fz={"xl"} fw={"bold"}>List Berita</Text>
-          {beritaState.berita.findMany.data?.map((item) => (
-            <Text key={item.id}>{item.judul}</Text>
-          ))}
+          <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>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus berita ini?'
+      />
     </Box>
   )
 }
 
-function SelectCategory({ onChange }: {
-  onChange: (value: Prisma.KatagoryBeritaGetPayload<{
-    select: {
-      name: true,
-      id: true
-    }
-  }>) => void
-}) {
-  const beritaState = useProxy(stateDashboardBerita)
-  useShallowEffect(() => {
-    beritaState.category.findMany.load()
-  }, [])
-
-  if (!beritaState.category.findMany.data) return <Skeleton h={40} />
-  return <Group>
-    <Select placeholder='pilih katagori' label={<Text fz={"sm"} fw={"bold"}>Pilih Kategori</Text>} data={beritaState.category.findMany.data.map((item) => ({
-      value: item.id,
-      label: item.name
-    }))} onChange={(v) => {
-      const data = beritaState.category.findMany.data?.find((item) => item.id === v)
-      if (!data) return
-      onChange(data)
-    }} />
-  </Group>
-}
-
 export default Page;

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

@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function CreateFoto() {
+  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 Foto</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Foto</Text>}
+          placeholder='Masukkan judul foto'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal Foto</Text>}
+          placeholder='Masukkan tanggal foto'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Foto</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateFoto;

src/app/admin/(dashboard)/desa/gallery/foto/detail/page.tsx

@@ -0,0 +1,62 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailFoto() {
+  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 Foto</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+             <Box>
+             <Text fw={"bold"}>Judul Foto</Text>
+             <Text>Foto 1</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Tanggal Foto</Text>
+             <Text>2022-01-01</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Deskripsi Foto</Text>
+             <Text>Deskripsi Foto 1</Text>
+             </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/desa/gallery/foto/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 DetailFoto;
+

src/app/admin/(dashboard)/desa/gallery/foto/edit/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function EditFoto() {
+  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 Foto</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Foto</Text>}
+          placeholder='Masukkan judul foto'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal Foto</Text>}
+          placeholder='Masukkan tanggal foto'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Foto</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditFoto;

src/app/admin/(dashboard)/desa/gallery/foto/page.tsx

@@ -0,0 +1,46 @@
+'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 { useRouter } from 'next/navigation';
+import JudulListTab from '../../../_com/jusulListTab';
+
+function Foto() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulListTab
+          title='List Foto'
+          href='/admin/desa/gallery/foto/create'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={16} />}
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Judul Foto</TableTh>
+              <TableTh>Tanggal Foto</TableTh>
+              <TableTh>Deskripsi Foto</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Foto 1</TableTd>
+              <TableTd>2022-01-01</TableTd>
+              <TableTd>Deskripsi Foto 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/desa/gallery/foto/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Foto;

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

@@ -1,8 +1,8 @@
 import colors from '@/con/colors';
 import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconPhoto, IconVideo } from '@tabler/icons-react';
-import Foto from './ui/foto/page';
-import Video from './ui/video/page';
+import Foto from './foto/page';
+import Video from './video/page';
 
 function Gallery() {
   return (

src/app/admin/(dashboard)/desa/gallery/ui/foto/listPage.tsx

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

src/app/admin/(dashboard)/desa/gallery/ui/foto/page.tsx

@@ -1,52 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconUpload } from '@tabler/icons-react';
-import { DesaEditor } from '../../../_com/desaEditor';
-import ListFoto from './listPage';
-
-function Foto() {
-  return (
-    <Box py={10}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Title order={3}>Foto</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Tanggal Foto</Text>}
-                placeholder="2022-01-01"
-              />
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Judul Foto</Text>}
-                placeholder="Judul Foto"
-              />
-              <Text fz={"sm"} fw={"bold"}>Upload Foto</Text>
-              <Box bg={colors['BG-trans']} p={"md"}>
-                <Center>
-                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                </Center>
-              </Box>
-              <Box>
-                <Text fz={"sm"} fw={"bold"}>Deskripsi Foto</Text>
-                <DesaEditor
-                  showSubmit={false}
-                />
-              </Box>
-              <Group>
-                <Button
-                  mt={10}
-                  bg={colors['blue-button']}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-        <ListFoto/>
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-export default Foto;

src/app/admin/(dashboard)/desa/gallery/ui/video/listPage.tsx

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

src/app/admin/(dashboard)/desa/gallery/ui/video/page.tsx

@@ -1,52 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconUpload } from '@tabler/icons-react';
-import { DesaEditor } from '../../../_com/desaEditor';
-import ListVideo from './listPage';
-
-function Video() {
-  return (
-    <Box py={10}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Title order={3}>Video</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Tanggal Video</Text>}
-                placeholder="2022-01-01"
-              />
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Judul Video</Text>}
-                placeholder="Judul Video"
-              />
-              <Text fz={"sm"} fw={"bold"}>Upload Video</Text>
-              <Box bg={colors['BG-trans']} p={"md"}>
-                <Center>
-                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                </Center>
-              </Box>
-              <Box>
-                <Text fz={"sm"} fw={"bold"}>Deskripsi Video</Text>
-                <DesaEditor
-                  showSubmit={false}
-                />
-              </Box>
-              <Group>
-                <Button
-                  mt={10}
-                  bg={colors['blue-button']}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-        <ListVideo/>
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-export default Video;

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

@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function CreateVideo() {
+  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 Video</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Video</Text>}
+          placeholder='Masukkan judul video'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal Video</Text>}
+          placeholder='Masukkan tanggal video'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Video</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateVideo;

src/app/admin/(dashboard)/desa/gallery/video/detail/page.tsx

@@ -0,0 +1,62 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailVideo() {
+  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 Video</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+             <Box>
+             <Text fw={"bold"}>Judul Video</Text>
+             <Text>Video 1</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Tanggal Video</Text>
+             <Text>2022-01-01</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Deskripsi Video</Text>
+             <Text>Deskripsi Video 1</Text>
+             </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/desa/gallery/video/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 DetailVideo;
+

src/app/admin/(dashboard)/desa/gallery/video/edit/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function EditVideo() {
+  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 Video</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Video</Text>}
+          placeholder='Masukkan judul video'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal Video</Text>}
+          placeholder='Masukkan tanggal video'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Video</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditVideo;

src/app/admin/(dashboard)/desa/gallery/video/page.tsx

@@ -0,0 +1,46 @@
+'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 { useRouter } from 'next/navigation';
+import JudulListTab from '../../../_com/jusulListTab';
+
+function Video() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulListTab
+          title='List Video'
+          href='/admin/desa/gallery/video/create'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={16} />}
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Judul Video</TableTh>
+              <TableTh>Tanggal Video</TableTh>
+              <TableTh>Deskripsi Video</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Video 1</TableTd>
+              <TableTd>2022-01-01</TableTd>
+              <TableTd>Deskripsi Video 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/desa/gallery/video/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Video;

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

@@ -0,0 +1,53 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+
+function EditPengumuman() {
+  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 Pengumuman</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+          placeholder='Masukkan judul'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
+          placeholder='Masukkan deskripsi singkat'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
+          placeholder='Masukkan tanggal'
+          />
+           <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Waktu</Text>}
+          placeholder='Masukkan waktu'
+          />
+          <Box>
+          <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+          <KeamananEditor
+          showSubmit={false}
+          />
+          </Box>
+
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditPengumuman;

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

@@ -0,0 +1,110 @@
+'use client'
+
+import { Box, Button, Paper } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+import colors from '@/con/colors';
+
+
+function DetailPengumuman() {
+  // const pengumumanState = useProxy(stateDesaPengumuman)
+  // const [modalHapus, setModalHapus] = useState(false)
+  // const [selectedId, setSelectedId] = useState<string | null>(null)
+  // const params = useParams()
+  const router = useRouter()
+
+  // useShallowEffect(() => {
+  //   pengumumanState.pengumuman.findUnique.load(params?.id as string)
+  // }, [])
+
+
+  // const handleHapus = () => {
+  //   if (selectedId) {
+  //     pengumumanState.pengumuman.delete.byId(selectedId)
+  //     setModalHapus(false)
+  //     setSelectedId(null)
+  //     router.push("/admin/desa/pengumuman")
+  //   }
+  // }
+
+  // if (!pengumumanState.pengumuman.findUnique.data) {
+  //   return (
+  //     <Stack py={10}>
+  //         <Skeleton h={400} />
+  //     </Stack>
+  //   )
+  // }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        {/* <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Pengumuman</Text>
+          {pengumumanState.pengumuman.findUnique.data ? (
+            <Paper key={pengumumanState.pengumuman.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.CategoryPengumuman?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.judul}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.deskripsi}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Konten</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: pengumumanState.pengumuman.findUnique.data?.content }} />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (pengumumanState.pengumuman.findUnique.data) {
+                        setSelectedId(pengumumanState.pengumuman.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={pengumumanState.pengumuman.delete.loading || !pengumumanState.pengumuman.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                   onClick={() => {
+                    if (pengumumanState.pengumuman.findUnique.data) {
+                      router.push(`/admin/desa/pengumuman/${pengumumanState.pengumuman.findUnique.data.id}/edit`);
+                    }
+                   }}
+                    disabled={!pengumumanState.pengumuman.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 DetailPengumuman;

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

@@ -0,0 +1,110 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Prisma } from '@prisma/client';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import stateDesaPengumuman from '../../../_state/desa/pengumuman';
+
+function CreatePengumuman() {
+  const pengumumanState = useProxy(stateDesaPengumuman)
+  const router = useRouter();
+
+  const handleSubmit = async () => {
+    await pengumumanState.pengumuman.create.create()
+    resetForm()
+    router.push("/admin/desa/pengumuman")
+  }
+
+  const resetForm = () => {
+    pengumumanState.pengumuman.create.form = {
+      judul: "",
+      deskripsi: "",
+      content: "",
+      categoryPengumumanId: "",
+    };
+  };
+  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 Pengumuman</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            placeholder='Masukkan judul'
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.judul = val.target.value
+            }}
+          />
+          <SelectCategory
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.categoryPengumumanId = val.id;
+            }}
+          />
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
+            placeholder='Masukkan deskripsi singkat'
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.deskripsi = val.target.value
+            }}
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <CreateEditor
+              value={pengumumanState.pengumuman.create.form.content}
+              onChange={(htmlContent) => {
+                pengumumanState.pengumuman.create.form.content = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+function SelectCategory({
+  onChange,
+}: {
+  onChange: (value: Prisma.CategoryPengumumanGetPayload<{ select: { name: true; id: true; } }>) => void;
+}) {
+  const categoryState = useProxy(stateDesaPengumuman.category);
+
+  useShallowEffect(() => {
+    categoryState.findMany.load();
+  }, []);
+
+  return (
+    <Select
+      label={<Text fw={"bold"} fz={"sm"}>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 CreatePengumuman;

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

@@ -1,102 +1,111 @@
 'use client'
-import { Box, Group, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import stateDesaPengumuman from '../../_state/desa/pengumuman';
-import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
-import { BeritaEditor } from '../berita/_com/BeritaEditor';
 import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
+import stateDesaPengumuman from '../../_state/desa/pengumuman';
+import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+import { useState } from 'react';
+
 
 function Page() {
   return (
     <Box>
-      <Title order={3}>Pengumuman</Title>
-      <SimpleGrid cols={{
-        base: 1, md: 2
-      }}>
-        <PengumumanCreate />
-        <PengumumanList />
-      </SimpleGrid>
+      <HeaderSearch
+        title='Pengumuman'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <PengumumanList />
     </Box>
   );
 }
 
-function PengumumanCreate() {
-  const pengumumanState = useProxy(stateDesaPengumuman)
-
-
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <SelectCategory onChange={(val) => {
-            pengumumanState.pengumuman.create.form.categoryPengumumanId = val.id
-          }} />
-          <TextInput onChange={(val) => {
-            pengumumanState.pengumuman.create.form.judul = val.target.value
-          }} label={<Text fz={"sm"} fw={"bold"}>Judul</Text>} placeholder='masukkan judul' />
-          <TextInput onChange={(val) => {
-            pengumumanState.pengumuman.create.form.deskripsi = val.target.value
-          }} label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>} placeholder='masukkan deskripsi' />
-          <BeritaEditor onSubmit={(val) => {
-            pengumumanState.pengumuman.create.form.content = val
-            pengumumanState.pengumuman.create.create()
-          }} />
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
 function PengumumanList() {
   const pengumumanState = useProxy(stateDesaPengumuman)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
   useShallowEffect(() => {
     pengumumanState.pengumuman.findMany.load()
   }, [])
 
-  if (!pengumumanState.pengumuman.findMany.data) return <Stack py={10}>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
+  const router = useRouter()
+
+  const handleHapus = () => {
+    if (selectedId) {
+      pengumumanState.pengumuman.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+
+  if (!pengumumanState.pengumuman.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Text fz={"xl"} fw={"bold"}>List Pengumuman</Text>
-          {pengumumanState.pengumuman.findMany.data?.map((item) => (
-            <Text key={item.id}>{item.judul}</Text>
-          ))}
+        <Stack>
+          <Grid>
+            <GridCol span={{ base: 12, md: 11 }}>
+              <Text fz={"xl"} fw={"bold"}>List Pengumuman</Text>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 1 }}>
+              <Button onClick={() => router.push("/admin/desa/pengumuman/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={200}>Detail</TableTh>
+
+                </TableTr>
+              </TableThead>
+              <TableTbody >
+                {pengumumanState.pengumuman.findMany.data?.map((item) => (
+                  <TableTr key={item.id}>
+                  <TableTd >
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>{item.judul}</Text>
+                    </Box>  
+                  </TableTd>
+                  <TableTd >{item.CategoryPengumuman?.name}</TableTd>
+                  <TableTd>
+                    <Button bg={"green"} onClick={() => router.push(`/admin/desa/pengumuman/detail`)}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
         </Stack>
       </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus berita ini?'
+      />
     </Box>
   )
 }
 
-function SelectCategory({ onChange }: {
-  onChange: (value: Prisma.CategoryPengumumanGetPayload<{
-    select: {
-      name: true,
-      id: true
-    }
-  }>) => void
-}) {
-  const pengumumanState = useProxy(stateDesaPengumuman)
-  useShallowEffect(() => {
-    pengumumanState.category.findMany.load()
-  }, [])
-
-  if (!pengumumanState.category.findMany.data) return <Skeleton h={40} />
-  return <Group>
-    {/* {JSON.stringify(pengumumanState.category.findMany.data)} */}
-    <Select placeholder='pilih kategori' label={<Text fz={"sm"} fw={"bold"}>Pilih Kategori</Text>} data={pengumumanState.category.findMany.data.map((item) => ({
-      value: item.id,
-      label: item.name
-    }))} onChange={(v) => {
-      const data = pengumumanState.category.findMany.data?.find((item) => item.id === v)
-      if (!data) return
-      onChange(data)
-    }}
-    />
-  </Group>
-}
 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/demografi-pekerjaan/create/page.tsx

@@ -0,0 +1,42 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function CreateDemografiPekerjaan() {
+  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 Demografi Pekerjaan</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pekerjaan</Text>}
+          placeholder='Masukkan pekerjaan'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Laki - Laki</Text>}
+          placeholder='Masukkan jumlah pekerja laki - laki'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Perempuan</Text>}
+          placeholder='Masukkan jumlah pekerja perempuan'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateDemografiPekerjaan;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/detail/page.tsx

@@ -0,0 +1,62 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailDemografiPekerjaan() {
+  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 Demografi Pekerjaan</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fw={"bold"}>Pekerjaan</Text>
+                <Text>Karyawan</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Jumlah Pekerja Laki - Laki</Text>
+                <Text>200</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Jumlah Pekerja Perempuan</Text>
+                <Text>100</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/demografi-pekerjaan/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 DetailDemografiPekerjaan;
+

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/edit/page.tsx

@@ -0,0 +1,42 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function EditDemografiPekerjaan() {
+  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 Demografi Pekerjaan</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pekerjaan</Text>}
+          placeholder='Masukkan pekerjaan'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Laki - Laki</Text>}
+          placeholder='Masukkan jumlah pekerja laki - laki'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Perempuan</Text>}
+          placeholder='Masukkan jumlah pekerja perempuan'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditDemografiPekerjaan;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx

@@ -1,11 +1,58 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function DemografiPekerjaan() {
   return (
-    <div>
-      demografi-pekerjaan
-    </div>
+    <Box>
+      <HeaderSearch
+        title='Demografi Pekerjaan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListDemografiPekerjaan/>
+    </Box>
   );
 }
 
-export default Page;
+function ListDemografiPekerjaan() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Demografi Pekerjaan'
+          href='/admin/ekonomi/demografi-pekerjaan/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Pekerjaan</TableTh>
+              <TableTh>Jumlah Pekerja Laki - Laki</TableTh>
+              <TableTh>Jumlah Pekerja Perempuan</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Karyawan</TableTd>
+              <TableTd>200</TableTd>
+              <TableTd>100</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/demografi-pekerjaan/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default DemografiPekerjaan;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/create/page.tsx

@@ -0,0 +1,38 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function CreateJumlahPendudukMiskin() {
+  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 Jumlah Penduduk Miskin</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tahun</Text>}
+          placeholder='Masukkan tahun'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Penduduk Miskin</Text>}
+          placeholder='Masukkan jumlah penduduk miskin'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateJumlahPendudukMiskin;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/detail/page.tsx

@@ -0,0 +1,58 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailJumlahPendudukMiskin() {
+  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 Jumlah Penduduk Miskin</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fw={"bold"}>Tahun</Text>
+                <Text>2024</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Jumlah Penduduk Miskin</Text>
+                <Text>100</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-miskin-2024-2025/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 DetailJumlahPendudukMiskin;
+

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/edit/page.tsx

@@ -0,0 +1,38 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function EditJumlahPendudukMiskin() {
+  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 Jumlah Penduduk Miskin</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tahun</Text>}
+          placeholder='Masukkan tahun'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Penduduk Miskin</Text>}
+          placeholder='Masukkan jumlah penduduk miskin'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditJumlahPendudukMiskin;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/page.tsx

@@ -1,11 +1,56 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function JumlahPendudukMiskin() {
   return (
-    <div>
-      jumlah-penduduk-miskin-2024-2025
-    </div>
+    <Box>
+      <HeaderSearch
+        title='Jumlah Penduduk Miskin'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListJumlahPendudukMiskin/>
+    </Box>
   );
 }
 
-export default Page;
+function ListJumlahPendudukMiskin() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Jumlah Penduduk Miskin'
+          href='/admin/ekonomi/jumlah-penduduk-miskin-2024-2025/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Tahun</TableTh>
+              <TableTh>Jumlah Penduduk Miskin</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>2024</TableTd>
+              <TableTd>100</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-miskin-2024-2025/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default JumlahPendudukMiskin;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/page.tsx

@@ -1,11 +1,31 @@
-import React from 'react';
+import colors from "@/con/colors";
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from "@mantine/core";
+import PengangguranBerdasarkanUsia from "./pengangguran_berdasarkan_usia/page";
+import PengangguranBerdasarkanPendidikan from "./pengangguran_berdasarkan_pendidikan/page";
 
-function Page() {
+export default function Page() {
   return (
-    <div>
-      jumlah-penduduk-usia-kerja-yang-menganggur
-    </div>
-  );
-}
+    <Box>
+      <Stack gap={"xs"}>
+        <Title order={3}>Jumlah Penduduk Usia Kerja yang Menganggur</Title>
+        <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Pengangguran Berdasarkan Usia"}>
+          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+            <TabsTab value={"Pengangguran Berdasarkan Usia"}>
+              Pengangguran Berdasarkan Usia
+            </TabsTab>
+            <TabsTab value={"Pengangguran Berdasarkan Pendidikan"}>
+              Pengangguran Berdasarkan Pendidikan
+            </TabsTab>
+          </TabsList>
 
-export default Page;
+          <TabsPanel value={"Pengangguran Berdasarkan Usia"}>
+            <PengangguranBerdasarkanUsia />
+          </TabsPanel>
+          <TabsPanel value={"Pengangguran Berdasarkan Pendidikan"}>
+            <PengangguranBerdasarkanPendidikan/>
+          </TabsPanel>
+        </Tabs>
+      </Stack>
+    </Box>
+  );
+}

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function CreatePengangguranBerdasarkanPendidikan() {
+  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 Pengangguran Berdasarkan Pendidikan</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SD</Text>}
+          placeholder='Masukkan pendidikan sd'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMP</Text>}
+          placeholder='Masukkan pendidikan smp'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMA</Text>}
+          placeholder='Masukkan pendidikan sma'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S1</Text>}
+          placeholder='Masukkan pendidikan s1'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S2</Text>}
+          placeholder='Masukkan pendidikan s2'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S3</Text>}
+          placeholder='Masukkan pendidikan s3'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreatePengangguranBerdasarkanPendidikan;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/detail/page.tsx

@@ -0,0 +1,74 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPengangguranBerdasarkanPendidikan() {
+  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 Pengangguran Berdasarkan Pendidikan</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+             <Box>
+             <Text fw={"bold"}>Pendidikan SD</Text>
+             <Text>50</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Pendidikan SMP</Text>
+             <Text>60</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Pendidikan SMA</Text>
+             <Text>80</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Pendidikan S1</Text>
+             <Text>40</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Pendidikan S2</Text>
+             <Text>20</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Pendidikan S3</Text>
+             <Text>10</Text>
+             </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/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 DetailPengangguranBerdasarkanPendidikan;
+

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/edit/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function EditPengangguranBerdasarkanPendidikan() {
+  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 Pengangguran Berdasarkan Pendidikan</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SD</Text>}
+          placeholder='Masukkan pendidikan sd'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMP</Text>}
+          placeholder='Masukkan pendidikan smp'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMA</Text>}
+          placeholder='Masukkan pendidikan sma'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S1</Text>}
+          placeholder='Masukkan pendidikan s1'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S2</Text>}
+          placeholder='Masukkan pendidikan s2'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S3</Text>}
+          placeholder='Masukkan pendidikan s3'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditPengangguranBerdasarkanPendidikan;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/page.tsx

@@ -0,0 +1,49 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import JudulListTab from '../../../_com/jusulListTab';
+
+function PengangguranBerdasarkanPendidikan() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+       <Stack gap={"xs"}>
+       <JudulListTab
+          title='Pengangguran Berdasarkan Pendidikan'
+          href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={20} />}
+        />
+        <Title order={4}>List Pengangguran Berdasarkan Pendidikan</Title>
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Pendidikan SD</TableTh>
+              <TableTh>Pendidikan SMP</TableTh>
+              <TableTh>Pendidikan SMA</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>80</TableTd>
+              <TableTd>40</TableTd>
+              <TableTd>20</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+       </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default PengangguranBerdasarkanPendidikan;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/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 } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+function CreatePengangguranBerdasarkanUsia() {
+  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 Pengangguran Berdasarkan Usia</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 18 - 25</Text>}
+          placeholder='Masukkan usia'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 26 - 35</Text>}
+          placeholder='Masukkan usia'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 36 - 45</Text>}
+          placeholder='Masukkan usia'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 46 +</Text>}
+          placeholder='Masukkan usia'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreatePengangguranBerdasarkanUsia;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/detail/page.tsx

@@ -0,0 +1,70 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPengangguranBerdasarkanUsia() {
+  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 Pengangguran Berdasarkan Usia</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fw={"bold"}>Usia 18 - 25</Text>
+                <Text>80</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Usia 26 - 35</Text>
+                <Text>40</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Usia 36 - 45</Text>
+                <Text>20</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Usia 46 +</Text>
+                <Text>10</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Total</Text>
+                <Text>150</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/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 DetailPengangguranBerdasarkanUsia;
+

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/edit/page.tsx

@@ -0,0 +1,47 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function EditPengangguranBerdasarkanUsia() {
+  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 Pengangguran Berdasarkan Usia</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 18 - 25</Text>}
+          placeholder='Masukkan usia'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 26 - 35</Text>}
+          placeholder='Masukkan usia'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 36 - 45</Text>}
+          placeholder='Masukkan usia'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 46 +</Text>}
+          placeholder='Masukkan usia'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditPengangguranBerdasarkanUsia;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/page.tsx

@@ -0,0 +1,49 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import JudulListTab from '../../../_com/jusulListTab';
+
+function PengangguranBerdasarkanUsia() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+       <Stack gap={"xs"}>
+       <JudulListTab
+          title='Pengangguran Berdasarkan Usia'
+          href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={20} />}
+        />
+        <Title order={4}>List Pengangguran Berdasarkan Usia</Title>
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Usia 18 - 25</TableTh>
+              <TableTh>Usia 26 - 35</TableTh>
+              <TableTh>Usia 36 - 45</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>80</TableTd>
+              <TableTd>40</TableTd>
+              <TableTd>20</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+       </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default PengangguranBerdasarkanUsia;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/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 } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+function CreateJumlahPengangguran() {
+  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 Jumlah Pengangguran</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pengangguran Terdidik</Text>}
+          placeholder='Masukkan pengangguran terdidik'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia Produktif</Text>}
+          placeholder='Masukkan usia produktif'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Sedang Mencari Kerja</Text>}
+          placeholder='Masukkan sedang mencari kerja'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pengangguran Tidak Terdidik</Text>}
+          placeholder='Masukkan pengangguran tidak terdidik'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateJumlahPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/detail/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailJumlahPengangguran() {
+  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 Jumlah Pengangguran</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+             <Box>
+             <Text fw={"bold"}>Pengangguran Terdidik</Text>
+             <Text>100</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Usia Produktif</Text>
+             <Text>200</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Sedang Mencari Kerja</Text>
+             <Text>300</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Pengangguran Tidak Terdidik</Text>
+             <Text>30</Text>
+             </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/jumlah-pengangguran-2024-2025/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 DetailJumlahPengangguran;
+

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/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 } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+function EditJumlahPengangguran() {
+  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 Jumlah Pengangguran</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pengangguran Terdidik</Text>}
+          placeholder='Masukkan pengangguran terdidik'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia Produktif</Text>}
+          placeholder='Masukkan usia produktif'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Sedang Mencari Kerja</Text>}
+          placeholder='Masukkan sedang mencari kerja'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pengangguran Tidak Terdidik</Text>}
+          placeholder='Masukkan pengangguran tidak terdidik'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditJumlahPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/page.tsx

@@ -1,11 +1,58 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function JumlahPengangguran() {
   return (
-    <div>
-      jumlah-pengangguran-2024-2025
-    </div>
+    <Box>
+      <HeaderSearch
+        title='Jumlah Pengangguran 2024-2025'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListJumlahPengangguran/>
+    </Box>
   );
 }
 
-export default Page;
+function ListJumlahPengangguran() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Jumlah Pengangguran 2024-2025'
+          href='/admin/ekonomi/jumlah-pengangguran-2024-2025/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Pengangguran Terdidik</TableTh>
+              <TableTh>Usia Produktif</TableTh>
+              <TableTh>Sedang Mencari Kerja</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>100</TableTd>
+              <TableTd>200</TableTd>
+              <TableTd>300</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/jumlah-pengangguran-2024-2025/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default JumlahPengangguran;

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/create/page.tsx

@@ -0,0 +1,57 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+
+function CreateLowonganKerja() {
+  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 Lowongan Kerja Lokal</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pekerjaan</Text>}
+          placeholder='Masukkan pekerjaan'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Usaha</Text>}
+          placeholder='Masukkan nama usaha'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Alamat Usaha</Text>}
+          placeholder='Masukkan alamat usaha'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon</Text>}
+          placeholder='Masukkan nomor telepon'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Gaji selama 1 bulan</Text>}
+          placeholder='Masukkan gaji'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Lowongan Kerja</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateLowonganKerja;