add menu musik

Fix Login KodeOtp WA
Fix CORS config for staging environment
2026-02-26 21:32:33 +08:00 · 2026-02-26 14:12:54 +08:00 · 2026-02-25 22:55:36 +08:00 · 2026-02-25 21:24:39 +08:00 · 2026-02-25 21:19:56 +08:00 · 2026-02-25 21:18:26 +08:00
113 changed files with 5877 additions and 456 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/darkMode.md
+++ b/darkMode.md
@@ -0,0 +1,169 @@
+# 🌙 Dark Mode Design Specification
+## Admin Darmasaba – Dashboard & CMS
+
+Dokumen ini mendefinisikan standar **Dark Mode UI** agar:
+- nyaman di mata
+- konsisten
+- tidak flat
+- tetap profesional untuk aplikasi pemerintahan
+
+---
+
+## 🎨 Color Palette (Dark Mode)
+
+### Background Layers
+| Layer | Token | Warna | Fungsi |
+|------|------|------|------|
+| Base | `--bg-base` | `#0B1220` | Background utama aplikasi |
+| App | `--bg-app` | `#0F172A` | Area kerja utama |
+| Card | `--bg-card` | `#162235` | Card / container |
+| Surface | `--bg-surface` | `#1E2A3D` | Table header, tab, input |
+
+---
+
+### Border & Divider
+| Token | Warna | Catatan |
+|-----|------|--------|
+| `--border-default` | `#2A3A52` | Border utama |
+| `--border-soft` | `#22314A` | Divider halus |
+
+> ❗ Hindari border terlalu tipis (`opacity < 20%`)
+
+---
+
+### Text Colors
+| Jenis | Token | Warna |
+|-----|------|------|
+| Primary | `--text-primary` | `#E5E7EB` |
+| Secondary | `--text-secondary` | `#9CA3AF` |
+| Muted | `--text-muted` | `#6B7280` |
+| Inverse | `--text-inverse` | `#020617` |
+
+---
+
+### Accent & Action
+| Fungsi | Warna |
+|------|------|
+| Primary Action | `#3B82F6` |
+| Hover | `#2563EB` |
+| Active | `#1D4ED8` |
+| Link | `#60A5FA` |
+
+---
+
+### Status Colors
+| Status | Warna |
+|------|------|
+| Success | `#22C55E` |
+| Warning | `#FACC15` |
+| Error | `#EF4444` |
+| Info | `#38BDF8` |
+
+---
+
+## 🧱 Layout Rules
+
+### Sidebar
+- Background: `--bg-app`
+- Active menu:
+  - Background: `rgba(59,130,246,0.15)`
+  - Text: Primary
+  - Indicator: kiri (2–3px accent bar)
+- Hover:
+  - Background: `rgba(255,255,255,0.04)`
+
+---
+
+### Header / Topbar
+- Background: `linear-gradient(#0F172A → #0B1220)`
+- Border bawah wajib (`--border-soft`)
+- Icon:
+  - Default: muted
+  - Hover: primary
+
+---
+
+## 📦 Card & Section
+
+### Card
+- Background: `--bg-card`
+- Border: `--border-default`
+- Radius: 12–16px
+- Jangan pakai shadow hitam
+
+### Section Header
+- Font weight lebih besar
+- Text: primary
+- Spacing jelas dari konten
+
+---
+
+## 📊 Table (Dark Mode Friendly)
+
+### Table Header
+- Background: `--bg-surface`
+- Text: secondary
+- Font weight: medium
+
+### Table Row
+- Default: transparent
+- Hover:
+  - Background: `rgba(255,255,255,0.03)`
+- Divider antar row wajib terlihat
+
+### Link di Table
+- Warna link **lebih terang dari text**
+- Hover underline
+
+---
+
+## 🔘 Button Rules
+
+### Primary Button
+- Background: Primary Action
+- Text: Inverse
+- Hover: darker shade
+
+### Secondary Button
+- Background: transparent
+- Border: `--border-default`
+- Text: primary
+
+### Icon Button
+- Default: muted
+- Hover: primary + bg soft
+
+---
+
+## 🧭 Tab Navigation
+
+- Inactive:
+  - Text: muted
+- Active:
+  - Background: `rgba(59,130,246,0.15)`
+  - Text: primary
+  - Icon ikut berubah
+
+---
+
+## 🌗 Dark vs Light Mode Rule
+- Layout, spacing, typography **HARUS SAMA**
+- Yang boleh beda:
+  - warna
+  - border intensity
+  - background layer
+
+> ❌ Jangan ganti struktur UI antara dark & light
+
+---
+
+## ✅ Dark Mode Checklist
+- [ ] Kontras teks terbaca
+- [ ] Active state jelas
+- [ ] Hover terasa hidup
+- [ ] Tidak flat
+- [ ] Tidak silau
+
+---
+
+Dokumen ini adalah **single source of truth** untuk Dark Mode.
--- a/package.json
+++ b/package.json
@@ -113,6 +113,7 @@
    "@playwright/test": "^1.58.2",
    "@testing-library/jest-dom": "^6.9.1",
    "@types/cli-progress": "^3.11.6",
+    "@types/dompurify": "^3.2.0",
    "@types/jsonwebtoken": "^9.0.10",
    "@types/node": "^20",
    "@types/react": "^19",
--- a/prisma/_seeder_list/desa/berita/seed_berita.ts
+++ b/prisma/_seeder_list/desa/berita/seed_berita.ts
@@ -26,7 +26,24 @@ export async function seedBerita() {

  console.log("🔄 Seeding Berita...");

+  // Build a map of valid kategori IDs
+  const validKategoriIds = new Set<string>();
+  const kategoriList = await prisma.kategoriBerita.findMany({
+    select: { id: true, name: true },
+  });
+  kategoriList.forEach((k) => validKategoriIds.add(k.id));
+
+  console.log(`📋 Found ${validKategoriIds.size} valid kategori IDs in database`);
+
  for (const b of beritaJson) {
+    // Validate kategoriBeritaId exists
+    if (!b.kategoriBeritaId || !validKategoriIds.has(b.kategoriBeritaId)) {
+      console.warn(
+        `⚠️ Skipping berita "${b.judul}": Invalid kategoriBeritaId "${b.kategoriBeritaId}"`,
+      );
+      continue;
+    }
+
    let imageId: string | null = null;

    if (b.imageName) {
@@ -44,26 +61,32 @@ export async function seedBerita() {
      }
    }

-    await prisma.berita.upsert({
-      where: { id: b.id },
-      update: {
-        judul: b.judul,
-        deskripsi: b.deskripsi,
-        content: b.content,
-        kategoriBeritaId: b.kategoriBeritaId,
-        imageId,
-      },
-      create: {
-        id: b.id,
-        judul: b.judul,
-        deskripsi: b.deskripsi,
-        content: b.content,
-        kategoriBeritaId: b.kategoriBeritaId,
-        imageId,
-      },
-    });
+    try {
+      await prisma.berita.upsert({
+        where: { id: b.id },
+        update: {
+          judul: b.judul,
+          deskripsi: b.deskripsi,
+          content: b.content,
+          kategoriBeritaId: b.kategoriBeritaId,
+          imageId,
+        },
+        create: {
+          id: b.id,
+          judul: b.judul,
+          deskripsi: b.deskripsi,
+          content: b.content,
+          kategoriBeritaId: b.kategoriBeritaId,
+          imageId,
+        },
+      });

-    console.log(`✅ Berita seeded: ${b.judul}`);
+      console.log(`✅ Berita seeded: ${b.judul}`);
+    } catch (error: any) {
+      console.error(
+        `❌ Failed to seed berita "${b.judul}": ${error.message}`,
+      );
+    }
  }

  console.log("🎉 Berita seed selesai");
--- a/prisma/migrations/20260225082505_deploy/migration.sql
+++ b/prisma/migrations/20260225082505_deploy/migration.sql
@@ -0,0 +1,170 @@
+/*
+  Warnings:
+
+  - You are about to alter the column `nama` on the `KategoriPotensi` table. The data in that column could be lost. The data in that column will be cast from `Text` to `VarChar(100)`.
+  - You are about to alter the column `name` on the `PotensiDesa` table. The data in that column could be lost. The data in that column will be cast from `Text` to `VarChar(255)`.
+  - You are about to alter the column `kategoriId` on the `PotensiDesa` table. The data in that column could be lost. The data in that column will be cast from `Text` to `VarChar(36)`.
+  - A unique constraint covering the columns `[nama]` on the table `KategoriPotensi` will be added. If there are existing duplicate values, this will fail.
+  - A unique constraint covering the columns `[name]` on the table `PotensiDesa` will be added. If there are existing duplicate values, this will fail.
+  - Made the column `kategoriId` on table `PotensiDesa` required. This step will fail if there are existing NULL values in that column.
+
+*/
+-- DropForeignKey
+ALTER TABLE "DataPerpustakaan" DROP CONSTRAINT "DataPerpustakaan_imageId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "DesaDigital" DROP CONSTRAINT "DesaDigital_imageId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "InfoTekno" DROP CONSTRAINT "InfoTekno_imageId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "KegiatanDesa" DROP CONSTRAINT "KegiatanDesa_imageId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "PengaduanMasyarakat" DROP CONSTRAINT "PengaduanMasyarakat_imageId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "PotensiDesa" DROP CONSTRAINT "PotensiDesa_kategoriId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "ProfileDesaImage" DROP CONSTRAINT "ProfileDesaImage_imageId_fkey";
+
+-- AlterTable
+ALTER TABLE "CaraMemperolehInformasi" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "CaraMemperolehSalinanInformasi" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "DaftarInformasiPublik" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "DasarHukumPPID" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "DataPerpustakaan" ALTER COLUMN "imageId" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "DesaDigital" ALTER COLUMN "imageId" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "FormulirPermohonanKeberatan" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "InfoTekno" ALTER COLUMN "imageId" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "JenisInformasiDiminta" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "JenisKelaminResponden" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "KategoriPotensi" ALTER COLUMN "nama" SET DATA TYPE VARCHAR(100),
+ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "KategoriPrestasiDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "KegiatanDesa" ALTER COLUMN "imageId" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "LambangDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "MaskotDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "PegawaiPPID" ADD COLUMN     "deletedAt" TIMESTAMP(3);
+
+-- AlterTable
+ALTER TABLE "PengaduanMasyarakat" ALTER COLUMN "imageId" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "PermohonanInformasiPublik" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "PilihanRatingResponden" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "PosisiOrganisasiPPID" ADD COLUMN     "deletedAt" TIMESTAMP(3);
+
+-- AlterTable
+ALTER TABLE "PotensiDesa" ALTER COLUMN "name" SET DATA TYPE VARCHAR(255),
+ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT,
+ALTER COLUMN "kategoriId" SET NOT NULL,
+ALTER COLUMN "kategoriId" SET DATA TYPE VARCHAR(36);
+
+-- AlterTable
+ALTER TABLE "PrestasiDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "ProfileDesaImage" ALTER COLUMN "imageId" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "ProfilePPID" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "Responden" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "SejarahDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "UmurResponden" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "VisiMisiDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "VisiMisiPPID" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "KategoriPotensi_nama_key" ON "KategoriPotensi"("nama");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PotensiDesa_name_key" ON "PotensiDesa"("name");
+
+-- AddForeignKey
+ALTER TABLE "ProfileDesaImage" ADD CONSTRAINT "ProfileDesaImage_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PotensiDesa" ADD CONSTRAINT "PotensiDesa_kategoriId_fkey" FOREIGN KEY ("kategoriId") REFERENCES "KategoriPotensi"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "DesaDigital" ADD CONSTRAINT "DesaDigital_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "InfoTekno" ADD CONSTRAINT "InfoTekno_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PengaduanMasyarakat" ADD CONSTRAINT "PengaduanMasyarakat_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "KegiatanDesa" ADD CONSTRAINT "KegiatanDesa_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "DataPerpustakaan" ADD CONSTRAINT "DataPerpustakaan_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
--- a/prisma/migrations/migration_lock.toml
+++ b/prisma/migrations/migration_lock.toml
@@ -1,3 +1,3 @@
 # Please do not edit this file manually
 # It should be added in your version-control system (e.g., Git)
-provider = "postgresql"
+provider = "postgresql"
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -102,6 +102,9 @@ model FileStorage {

  ArtikelKesehatan ArtikelKesehatan[]
  StrukturBumDes   StrukturBumDes[]
+  
+  MusikDesaAudio   MusikDesa[] @relation("MusikAudioFile")
+  MusikDesaCover   MusikDesa[] @relation("MusikCoverImage")
 }

 //========================================= MENU LANDING PAGE ========================================= //
@@ -236,7 +239,7 @@ model PrestasiDesa {
  imageId    String?
  createdAt  DateTime             @default(now())
  updatedAt  DateTime             @updatedAt
-  deletedAt  DateTime             @default(now())
+  deletedAt  DateTime?
  isActive   Boolean              @default(true)
 }

@@ -245,7 +248,7 @@ model KategoriPrestasiDesa {
  name         String         @unique
  createdAt    DateTime       @default(now())
  updatedAt    DateTime       @updatedAt
-  deletedAt    DateTime       @default(now())
+  deletedAt    DateTime?
  isActive     Boolean        @default(true)
  PrestasiDesa PrestasiDesa[]
 }
@@ -263,7 +266,7 @@ model Responden {
  kelompokUmurId String
  createdAt      DateTime               @default(now())
  updatedAt      DateTime               @updatedAt
-  deletedAt      DateTime               @default(now())
+  deletedAt  DateTime?
  isActive       Boolean                @default(true)
 }

@@ -272,7 +275,7 @@ model JenisKelaminResponden {
  name      String      @unique
  createdAt DateTime    @default(now())
  updatedAt DateTime    @updatedAt
-  deletedAt DateTime    @default(now())
+  deletedAt  DateTime?
  isActive  Boolean     @default(true)
  Responden Responden[]
 }
@@ -282,7 +285,7 @@ model PilihanRatingResponden {
  name      String      @unique
  createdAt DateTime    @default(now())
  updatedAt DateTime    @updatedAt
-  deletedAt DateTime    @default(now())
+  deletedAt  DateTime?
  isActive  Boolean     @default(true)
  Responden Responden[]
 }
@@ -292,7 +295,7 @@ model UmurResponden {
  name      String      @unique
  createdAt DateTime    @default(now())
  updatedAt DateTime    @updatedAt
-  deletedAt DateTime    @default(now())
+  deletedAt  DateTime?
  isActive  Boolean     @default(true)
  Responden Responden[]
 }
@@ -326,6 +329,7 @@ model PosisiOrganisasiPPID {
  isActive               Boolean                  @default(true)
  createdAt              DateTime                 @default(now())
  updatedAt              DateTime                 @updatedAt
+  deletedAt              DateTime?
  parent                 PosisiOrganisasiPPID?    @relation("Parent", fields: [parentId], references: [id])
  children               PosisiOrganisasiPPID[]   @relation("Parent")
  StrukturOrganisasiPPID StrukturOrganisasiPPID[]
@@ -345,6 +349,7 @@ model PegawaiPPID {
  isActive               Boolean                  @default(true)
  createdAt              DateTime                 @default(now())
  updatedAt              DateTime                 @updatedAt
+  deletedAt              DateTime?
  posisi                 PosisiOrganisasiPPID     @relation(fields: [posisiId], references: [id])
  strukturOrganisasi     StrukturPPID[] // Relasi balik
  StrukturOrganisasiPPID StrukturOrganisasiPPID[]
@@ -370,7 +375,7 @@ model VisiMisiPPID {
  misi      String   @db.Text
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime?
  isActive  Boolean  @default(true)
 }

@@ -381,7 +386,7 @@ model DasarHukumPPID {
  content   String   @db.Text
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime?
  isActive  Boolean  @default(true)
 }

@@ -398,7 +403,7 @@ model ProfilePPID {
  imageId    String?
  createdAt  DateTime     @default(now())
  updatedAt  DateTime     @updatedAt
-  deletedAt  DateTime     @default(now())
+  deletedAt  DateTime?
  isActive   Boolean      @default(true)
 }

@@ -410,7 +415,7 @@ model DaftarInformasiPublik {
  tanggal        DateTime @db.Date
  createdAt      DateTime @default(now())
  updatedAt      DateTime @updatedAt
-  deletedAt      DateTime @default(now())
+  deletedAt      DateTime?
  isActive       Boolean  @default(true)
 }

@@ -431,7 +436,7 @@ model PermohonanInformasiPublik {
  caraMemperolehSalinanInformasiId String?
  createdAt                        DateTime                        @default(now())
  updatedAt                        DateTime                        @updatedAt
-  deletedAt                        DateTime                        @default(now())
+  deletedAt                        DateTime?
  isActive                         Boolean                         @default(true)
 }

@@ -440,7 +445,7 @@ model JenisInformasiDiminta {
  name                      String                      @unique
  createdAt                 DateTime                    @default(now())
  updatedAt                 DateTime                    @updatedAt
-  deletedAt                 DateTime                    @default(now())
+  deletedAt                 DateTime?
  isActive                  Boolean                     @default(true)
  PermohonanInformasiPublik PermohonanInformasiPublik[]
 }
@@ -450,7 +455,7 @@ model CaraMemperolehInformasi {
  name                      String                      @unique
  createdAt                 DateTime                    @default(now())
  updatedAt                 DateTime                    @updatedAt
-  deletedAt                 DateTime                    @default(now())
+  deletedAt                 DateTime?
  isActive                  Boolean                     @default(true)
  PermohonanInformasiPublik PermohonanInformasiPublik[]
 }
@@ -460,7 +465,7 @@ model CaraMemperolehSalinanInformasi {
  name                      String                      @unique
  createdAt                 DateTime                    @default(now())
  updatedAt                 DateTime                    @updatedAt
-  deletedAt                 DateTime                    @default(now())
+  deletedAt                 DateTime?
  isActive                  Boolean                     @default(true)
  PermohonanInformasiPublik PermohonanInformasiPublik[]
 }
@@ -474,7 +479,7 @@ model FormulirPermohonanKeberatan {
  alasan    String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime?
  isActive  Boolean  @default(true)
 }

@@ -531,7 +536,7 @@ model SejarahDesa {
  deskripsi String   @db.Text
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime?
  isActive  Boolean  @default(true)
 }

@@ -541,7 +546,7 @@ model VisiMisiDesa {
  misi      String   @db.Text
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime?
  isActive  Boolean  @default(true)
 }

@@ -551,7 +556,7 @@ model LambangDesa {
  deskripsi String   @db.Text
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime?
  isActive  Boolean  @default(true)
 }

@@ -562,7 +567,7 @@ model MaskotDesa {
  images    ProfileDesaImage[]
  createdAt DateTime           @default(now())
  updatedAt DateTime           @updatedAt
-  deletedAt DateTime           @default(now())
+  deletedAt DateTime?
  isActive  Boolean            @default(true)
 }

@@ -631,25 +636,25 @@ model KategoriBerita {
 // ========================================= POTENSI DESA ========================================= //
 model PotensiDesa {
  id         String           @id @default(cuid())
-  name       String
-  deskripsi  String
+  name       String           @unique @db.VarChar(255)
+  deskripsi  String           @db.Text
  kategori   KategoriPotensi? @relation(fields: [kategoriId], references: [id])
-  kategoriId String?
+  kategoriId String           @db.VarChar(36)
  image      FileStorage?     @relation(fields: [imageId], references: [id])
  imageId    String?
  content    String           @db.Text
  createdAt  DateTime         @default(now())
  updatedAt  DateTime         @updatedAt
-  deletedAt  DateTime         @default(now())
+  deletedAt  DateTime?
  isActive   Boolean          @default(true)
 }

 model KategoriPotensi {
  id          String        @id @default(cuid())
-  nama        String
+  nama        String        @unique @db.VarChar(100)
  createdAt   DateTime      @default(now())
  updatedAt   DateTime      @updatedAt
-  deletedAt   DateTime      @default(now())
+  deletedAt   DateTime?
  isActive    Boolean       @default(true)
  PotensiDesa PotensiDesa[]
 }
@@ -2261,3 +2266,25 @@ model UserMenuAccess {

  @@unique([userId, menuId]) // Satu user tidak bisa punya akses menu yang sama dua kali
 }
+
+// ========================================= MUSIK DESA ========================================= //
+model MusikDesa {
+  id          String       @id @default(cuid())
+  judul       String       @db.VarChar(255)
+  artis       String       @db.VarChar(255)
+  deskripsi   String?      @db.Text
+  durasi      String       @db.VarChar(20) // format: "MM:SS"
+  audioFile   FileStorage? @relation("MusikAudioFile", fields: [audioFileId], references: [id])
+  audioFileId String?
+  coverImage  FileStorage? @relation("MusikCoverImage", fields: [coverImageId], references: [id])
+  coverImageId String?
+  genre       String?      @db.VarChar(100)
+  tahunRilis  Int?
+  createdAt   DateTime     @default(now())
+  updatedAt   DateTime     @updatedAt
+  deletedAt   DateTime?
+  isActive    Boolean      @default(true)
+
+  @@index([judul])
+  @@index([artis])
+}
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -69,8 +69,8 @@ import { seedProfilPpd } from "./_seeder_list/ppid/profil-ppid/seed_profil_ppd";

 (async () => {
  // Always run seedAssets to handle new images without duplication
-  // console.log("📂 Checking for new assets to seed...");
-  // await seedAssets();
+  console.log("📂 Checking for new assets to seed...");
+  await seedAssets();

  // // =========== FILE STORAGE ===========

--- a/src/app/admin/(dashboard)/_com/header.tsx
+++ b/src/app/admin/(dashboard)/_com/header.tsx
@@ -1,7 +1,11 @@
+'use client';
+
 import React from 'react';
-import { Grid, GridCol, Paper, TextInput, Title } from '@mantine/core';
+import { Grid, GridCol, Paper, TextInput } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
-import colors from '@/con/colors';
+import { useDarkMode } from '@/state/darkModeStore';
+import { themeTokens } from '@/utils/themeTokens';
+import { UnifiedTitle } from '@/components/admin/UnifiedTypography';

 type HeaderSearchProps = {
  title: string;
@@ -18,13 +22,16 @@ const HeaderSearch = ({
  value,
  onChange,
 }: HeaderSearchProps) => {
+  const { isDark } = useDarkMode();
+  const tokens = themeTokens(isDark);
+
  return (
    <Grid mb={10}>
      <GridCol span={{ base: 12, md: 9 }}>
-        <Title order={3}>{title}</Title>
+        <UnifiedTitle order={3}>{title}</UnifiedTitle>
      </GridCol>
      <GridCol span={{ base: 12, md: 3 }}>
-        <Paper radius="lg" bg={colors['white-1']}>
+        <Paper radius="lg" bg={tokens.colors.bg.surface}>
          <TextInput
            radius="lg"
            placeholder={placeholder}
@@ -32,6 +39,16 @@ const HeaderSearch = ({
            w="100%"
            value={value}
            onChange={onChange}
+            style={{
+              input: {
+                backgroundColor: tokens.colors.bg.surface,
+                color: tokens.colors.text.primary,
+                borderColor: tokens.colors.border.default,
+                '::placeholder': {
+                  color: tokens.colors.text.muted,
+                },
+              },
+            }}
          />
        </Paper>
      </GridCol>
--- a/src/app/admin/(dashboard)/_com/judulList.tsx
+++ b/src/app/admin/(dashboard)/_com/judulList.tsx
@@ -1,12 +1,16 @@

 'use client'
-import colors from '@/con/colors';
-import { Grid, GridCol, Button, Text } from '@mantine/core';
+import { Grid, GridCol, Button } from '@mantine/core';
 import { IconCircleDashedPlus } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React from 'react';
+import { useDarkMode } from '@/state/darkModeStore';
+import { themeTokens } from '@/utils/themeTokens';
+import { UnifiedText } from '@/components/admin/UnifiedTypography';

 const JudulList = ({ title = "", href = "#" }) => {
+  const { isDark } = useDarkMode();
+  const tokens = themeTokens(isDark);
  const router = useRouter();

  const handleNavigate = () => {
@@ -16,10 +20,18 @@ const JudulList = ({ title = "", href = "#" }) => {
  return (
    <Grid align="center" mb={10}>
      <GridCol span={{ base: 12, md: 11 }}>
-        <Text fz={"xl"} fw={"bold"}>{title}</Text>
+        <UnifiedText size="body" weight="bold" color="primary">{title}</UnifiedText>
      </GridCol>
      <GridCol span={{ base: 12, md: 1 }} ta="right">
-        <Button onClick={handleNavigate} bg={colors['blue-button']}>
+        <Button 
+          onClick={handleNavigate} 
+          bg={tokens.colors.primary}
+          style={{
+            background: `linear-gradient(135deg, ${tokens.colors.primary}, ${isDark ? '#60A5FA' : '#4facfe'})`,
+            color: tokens.colors.text.inverse,
+            boxShadow: isDark ? 'none' : `0 4px 15px rgba(79, 172, 254, 0.4)`,
+          }}
+        >
          <IconCircleDashedPlus size={25} />
        </Button>
      </GridCol>
--- a/src/app/admin/(dashboard)/_com/judulListTab.tsx
+++ b/src/app/admin/(dashboard)/_com/judulListTab.tsx
@@ -1,9 +1,11 @@
 'use client'
-import colors from '@/con/colors';
-import { Grid, GridCol, Button, Text, Paper, TextInput } from '@mantine/core';
+import { Grid, GridCol, Button, Paper, TextInput } from '@mantine/core';
 import { IconCircleDashedPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React from 'react';
+import { useDarkMode } from '@/state/darkModeStore';
+import { themeTokens } from '@/utils/themeTokens';
+import { UnifiedText } from '@/components/admin/UnifiedTypography';

 type JudulListTabProps = {
  title: string;
@@ -14,17 +16,16 @@ type JudulListTabProps = {
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }

-
-
-
 const JudulListTab = ({
  title = "",
  href = "#",
  placeholder = "pencarian",
  searchIcon = <IconSearch size={20} />,
  value,
-  onChange 
+  onChange
 }: JudulListTabProps) => {
+  const { isDark } = useDarkMode();
+  const tokens = themeTokens(isDark);
  const router = useRouter();

  const handleNavigate = () => {
@@ -34,10 +35,17 @@ const JudulListTab = ({
  return (
    <Grid mb={10}>
      <GridCol span={{ base: 12, md: 8 }}>
-        <Text fz={{ base: "md", md: "xl" }} fw={"bold"}>{title}</Text>
+        <UnifiedText 
+          size="body" 
+          weight="bold"
+          color="primary"
+          style={{ fontSize: 'clamp(1rem, 2vw, 1.25rem)' }}
+        >
+          {title}
+        </UnifiedText>
      </GridCol>
      <GridCol span={{ base: 9, md: 3 }} ta="right">
-        <Paper radius={"lg"} bg={colors['white-1']}>
+        <Paper radius={"lg"} bg={tokens.colors.bg.surface}>
          <TextInput
            radius="lg"
            placeholder={placeholder}
@@ -45,11 +53,29 @@ const JudulListTab = ({
            w="100%"
            value={value}
            onChange={onChange}
+            style={{
+              input: {
+                backgroundColor: tokens.colors.bg.surface,
+                color: tokens.colors.text.primary,
+                borderColor: tokens.colors.border.default,
+                '::placeholder': {
+                  color: tokens.colors.text.muted,
+                },
+              },
+            }}
          />
        </Paper>
      </GridCol>
      <GridCol span={{ base: 3, md: 1 }} ta="right">
-        <Button onClick={handleNavigate} bg={colors['blue-button']}>
+        <Button 
+          onClick={handleNavigate} 
+          bg={tokens.colors.primary}
+          style={{
+            background: `linear-gradient(135deg, ${tokens.colors.primary}, ${isDark ? '#60A5FA' : '#4facfe'})`,
+            color: tokens.colors.text.inverse,
+            boxShadow: isDark ? 'none' : `0 4px 15px rgba(79, 172, 254, 0.4)`,
+          }}
+        >
          <IconCircleDashedPlus size={25} />
        </Button>
      </GridCol>
--- a/src/app/admin/(dashboard)/_state/desa/musik.ts
+++ b/src/app/admin/(dashboard)/_state/desa/musik.ts
@@ -0,0 +1,297 @@
+/* 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"),
+  artis: z.string().min(3, "Artis minimal 3 karakter"),
+  deskripsi: z.string().optional(),
+  durasi: z.string().min(3, "Durasi minimal 3 karakter"),
+  audioFileId: z.string().nonempty(),
+  coverImageId: z.string().nonempty(),
+  genre: z.string().optional(),
+  tahunRilis: z.number().optional().or(z.literal(undefined)),
+});
+
+// 2. Default value form musik
+const defaultForm = {
+  judul: "",
+  artis: "",
+  deskripsi: "",
+  durasi: "",
+  audioFileId: "",
+  coverImageId: "",
+  genre: "",
+  tahunRilis: undefined as number | undefined,
+};
+
+// 3. Musik proxy
+const musik = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(musik.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        musik.create.loading = true;
+        const res = await ApiFetch.api.desa.musik["create"].post(
+          musik.create.form
+        );
+        if (res.status === 200) {
+          musik.findMany.load();
+          return toast.success("Musik berhasil disimpan!");
+        }
+
+        return toast.error("Gagal menyimpan musik");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        musik.create.loading = false;
+      }
+    },
+    resetForm() {
+      musik.create.form = { ...defaultForm };
+    },
+  },
+
+  findMany: {
+    data: null as
+      | Prisma.MusikDesaGetPayload<{
+          include: {
+            audioFile: true;
+            coverImage: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "", genre = "") => {
+      const startTime = Date.now();
+      musik.findMany.loading = true;
+      musik.findMany.page = page;
+      musik.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (genre) query.genre = genre;
+
+        const res = await ApiFetch.api.desa.musik["find-many"].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          musik.findMany.data = res.data.data ?? [];
+          musik.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          musik.findMany.data = [];
+          musik.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch musik paginated:", err);
+        musik.findMany.data = [];
+        musik.findMany.totalPages = 1;
+      } finally {
+        const elapsed = Date.now() - startTime;
+        const minDelay = 300;
+        const delay = elapsed < minDelay ? minDelay - elapsed : 0;
+
+        setTimeout(() => {
+          musik.findMany.loading = false;
+        }, delay);
+      }
+    },
+  },
+
+  findUnique: {
+    data: null as Prisma.MusikDesaGetPayload<{
+      include: {
+        audioFile: true;
+        coverImage: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        musik.findUnique.loading = true;
+        const res = await fetch(`/api/desa/musik/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          musik.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch musik:", res.statusText);
+          musik.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching musik:", error);
+        musik.findUnique.data = null;
+      } finally {
+        musik.findUnique.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        musik.delete.loading = true;
+
+        const response = await fetch(`/api/desa/musik/delete/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Musik berhasil dihapus");
+          await musik.findMany.load();
+        } else {
+          toast.error(result?.message || "Gagal menghapus musik");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus musik");
+      } finally {
+        musik.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/musik/${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,
+            artis: data.artis,
+            deskripsi: data.deskripsi || "",
+            durasi: data.durasi,
+            audioFileId: data.audioFileId || "",
+            coverImageId: data.coverImageId || "",
+            genre: data.genre || "",
+            tahunRilis: data.tahunRilis || undefined,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading musik:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateForm.safeParse(musik.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        musik.edit.loading = true;
+
+        const response = await fetch(`/api/desa/musik/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            judul: this.form.judul,
+            artis: this.form.artis,
+            deskripsi: this.form.deskripsi,
+            durasi: this.form.durasi,
+            audioFileId: this.form.audioFileId,
+            coverImageId: this.form.coverImageId,
+            genre: this.form.genre,
+            tahunRilis: this.form.tahunRilis,
+          }),
+        });
+
+        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("Musik berhasil diupdate");
+          await musik.findMany.load();
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update musik");
+        }
+      } catch (error) {
+        console.error("Error updating musik:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update musik"
+        );
+        return false;
+      } finally {
+        musik.edit.loading = false;
+      }
+    },
+
+    reset() {
+      musik.edit.id = "";
+      musik.edit.form = { ...defaultForm };
+    },
+  },
+});
+
+// 4. State global
+const stateDashboardMusik = proxy({
+  musik,
+});
+
+export default stateDashboardMusik;
--- a/src/app/admin/(dashboard)/_state/landing-page/profile.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/profile.ts
@@ -55,10 +55,15 @@ const programInovasi = proxy({
          programInovasi.findMany.load();
          return toast.success("Sukses menambahkan");
        }
-        console.log(res);
+        if (process.env.NODE_ENV === 'development') {
+          console.log(res);
+        }
        return toast.error("failed create");
      } catch (error) {
-        console.log((error as Error).message);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Create error:", error);
+        }
+        toast.error("Gagal menambahkan data");
      } finally {
        programInovasi.create.loading = false;
      }
@@ -91,13 +96,17 @@ const programInovasi = proxy({
          programInovasi.findMany.total = res.data.total || 0;
          programInovasi.findMany.totalPages = res.data.totalPages || 1;
        } else {
-          console.error("Failed to load pegawai:", res.data?.message);
+          if (process.env.NODE_ENV === 'development') {
+            console.error("Failed to load pegawai:", res.data?.message);
+          }
          programInovasi.findMany.data = [];
          programInovasi.findMany.total = 0;
          programInovasi.findMany.totalPages = 1;
        }
      } catch (error) {
-        console.error("Error loading pegawai:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error loading pegawai:", error);
+        }
        programInovasi.findMany.data = [];
        programInovasi.findMany.total = 0;
        programInovasi.findMany.totalPages = 1;
@@ -112,19 +121,25 @@ const programInovasi = proxy({
        image: true;
      };
    }> | null,
+    loading: false,
    async load(id: string) {
      try {
-        const res = await fetch(`/api/landingpage/programinovasi/${id}`);
-        if (res.ok) {
-          const data = await res.json();
-          programInovasi.findUnique.data = data.data ?? null;
+        programInovasi.findUnique.loading = true;
+        const res = await (ApiFetch.api.landingpage.programinovasi as any)[id].get();
+        if (res.data?.success) {
+          programInovasi.findUnique.data = res.data.data ?? null;
+          return res.data.data;
        } else {
-          console.error("Failed to fetch program inovasi:", res.statusText);
+          toast.error(res.data?.message || "Gagal memuat data program inovasi");
          programInovasi.findUnique.data = null;
+          return null;
        }
      } catch (error) {
        console.error("Error fetching program inovasi:", error);
        programInovasi.findUnique.data = null;
+        return null;
+      } finally {
+        programInovasi.findUnique.loading = false;
      }
    },
  },
@@ -135,27 +150,18 @@ const programInovasi = proxy({

      try {
        programInovasi.delete.loading = true;
+        const res = await (ApiFetch.api.landingpage.programinovasi as any)["del"][id].delete();

-        const response = await fetch(
-          `/api/landingpage/programinovasi/del/${id}`,
-          {
-            method: "DELETE",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
-
-        const result = await response.json();
-
-        if (response.ok && result?.success) {
-          toast.success(result.message || "Program inovasi berhasil dihapus");
-          await programInovasi.findMany.load(); // refresh list
+        if (res.data?.success) {
+          toast.success(res.data.message || "Program inovasi berhasil dihapus");
+          await programInovasi.findMany.load();
        } else {
-          toast.error(result?.message || "Gagal menghapus program inovasi");
+          toast.error(res.data?.message || "Gagal menghapus program inovasi");
        }
      } catch (error) {
-        console.error("Gagal delete:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Gagal delete:", error);
+        }
        toast.error("Terjadi kesalahan saat menghapus program inovasi");
      } finally {
        programInovasi.delete.loading = false;
@@ -174,20 +180,11 @@ const programInovasi = proxy({
      }

      try {
-        const response = await fetch(`/api/landingpage/programinovasi/${id}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
+        programInovasi.update.loading = true;
+        const res = await (ApiFetch.api.landingpage.programinovasi as any)[id].get();

-        const result = await response.json();
-
-        if (result?.success) {
-          const data = result.data;
+        if (res.data?.success) {
+          const data = res.data.data;
          this.id = data.id;
          this.form = {
            name: data.name,
@@ -197,13 +194,15 @@ const programInovasi = proxy({
          };
          return data;
        } else {
-          throw new Error(
-            result?.message || "Gagal mengambil data program inovasi"
-          );
+          toast.error(res.data?.message || "Gagal mengambil data program inovasi");
+          return null;
        }
      } catch (error) {
-        console.error((error as Error).message);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error loading program inovasi:", error);
+        }
        toast.error("Terjadi kesalahan saat mengambil data program inovasi");
+        return null;
      } finally {
        programInovasi.update.loading = false;
      }
@@ -221,41 +220,25 @@ const programInovasi = proxy({

      try {
        programInovasi.update.loading = true;
+        const res = await (ApiFetch.api.landingpage.programinovasi as any)[this.id].put({
+          name: this.form.name,
+          description: this.form.description,
+          imageId: this.form.imageId,
+          link: this.form.link,
+        });

-        const response = await fetch(
-          `/api/landingpage/programinovasi/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              name: this.form.name,
-              description: this.form.description,
-              imageId: this.form.imageId,
-              link: this.form.link,
-            }),
-          }
-        );
-
-        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) {
+        if (res.data?.success) {
          toast.success("Berhasil update program inovasi");
-          await programInovasi.findMany.load(); // refresh list
+          await programInovasi.findMany.load();
          return true;
        } else {
-          throw new Error(result.message || "Gagal update program inovasi");
+          toast.error(res.data?.message || "Gagal update program inovasi");
+          return false;
        }
      } catch (error) {
-        console.error("Error updating program inovasi:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error updating program inovasi:", error);
+        }
        toast.error(
          error instanceof Error
            ? error.message
@@ -443,7 +426,7 @@ const pejabatDesa = proxy({
 const templateMediaSosial = z.object({
  name: z.string().min(3, "Nama minimal 3 karakter"),
  imageId: z.string().nullable().optional(),
-  iconUrl: z.string().min(3, "Icon URL minimal 3 karakter"),
+  iconUrl: z.string().optional(), // ✅ Optional - tidak selalu required
  icon: z.string().nullable().optional(),
 });

@@ -484,10 +467,15 @@ const mediaSosial = proxy({
          mediaSosial.findMany.load();
          return toast.success("Sukses menambahkan");
        }
-        console.log(res);
+        if (process.env.NODE_ENV === 'development') {
+          console.log(res);
+        }
        return toast.error("failed create");
      } catch (error) {
-        console.log((error as Error).message);
+        if (process.env.NODE_ENV === 'development') {
+          console.log((error as Error).message);
+        }
+        toast.error("Gagal menambahkan data");
      } finally {
        mediaSosial.create.loading = false;
      }
@@ -518,13 +506,17 @@ const mediaSosial = proxy({
          mediaSosial.findMany.total = res.data.total || 0;
          mediaSosial.findMany.totalPages = res.data.totalPages || 1;
        } else {
-          console.error("Failed to load media sosial:", res.data?.message);
+          if (process.env.NODE_ENV === 'development') {
+            console.error("Failed to load media sosial:", res.data?.message);
+          }
          mediaSosial.findMany.data = [];
          mediaSosial.findMany.total = 0;
          mediaSosial.findMany.totalPages = 1;
        }
      } catch (error) {
-        console.error("Error loading media sosial:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error loading media sosial:", error);
+        }
        mediaSosial.findMany.data = [];
        mediaSosial.findMany.total = 0;
        mediaSosial.findMany.totalPages = 1;
@@ -539,25 +531,32 @@ const mediaSosial = proxy({
        image: true;
      };
    }> | null,
+    loading: false,
    async load(id: string) {
      if (!id) {
        toast.warn("ID tidak valid");
        return null;
      }

-      mediaSosial.update.loading = true;
+      mediaSosial.findUnique.loading = true;
      try {
-        const res = await fetch(`/api/landingpage/mediasosial/${id}`);
-        if (res.ok) {
-          const data = await res.json();
-          mediaSosial.findUnique.data = data.data ?? null;
+        const res = await (ApiFetch.api.landingpage.mediasosial as any)[id].get();
+        if (res.data?.success) {
+          mediaSosial.findUnique.data = res.data.data ?? null;
+          return res.data.data;
        } else {
-          console.error("Failed to fetch media sosial:", res.statusText);
+          toast.error(res.data?.message || "Gagal memuat data media sosial");
          mediaSosial.findUnique.data = null;
+          return null;
        }
      } catch (error) {
-        console.error("Error fetching media sosial:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error fetching media sosial:", error);
+        }
        mediaSosial.findUnique.data = null;
+        return null;
+      } finally {
+        mediaSosial.findUnique.loading = false;
      }
    },
  },
@@ -568,24 +567,18 @@ const mediaSosial = proxy({

      try {
        mediaSosial.delete.loading = true;
+        const res = await (ApiFetch.api.landingpage.mediasosial as any)["del"][id].delete();

-        const response = await fetch(`/api/landingpage/mediasosial/del/${id}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-
-        const result = await response.json();
-
-        if (response.ok && result?.success) {
-          toast.success(result.message || "Media Sosial berhasil dihapus");
-          await mediaSosial.findMany.load(); // refresh list
+        if (res.data?.success) {
+          toast.success(res.data.message || "Media Sosial berhasil dihapus");
+          await mediaSosial.findMany.load();
        } else {
-          toast.error(result?.message || "Gagal menghapus media sosial");
+          toast.error(res.data?.message || "Gagal menghapus media sosial");
        }
      } catch (error) {
-        console.error("Gagal delete:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Gagal delete:", error);
+        }
        toast.error("Terjadi kesalahan saat menghapus media sosial");
      } finally {
        mediaSosial.delete.loading = false;
@@ -603,43 +596,32 @@ const mediaSosial = proxy({
        return null;
      }

-      mediaSosial.update.loading = true; // ✅ Tambahkan ini di awal
-
+      mediaSosial.update.loading = true;
      try {
-        const response = await fetch(`/api/landingpage/mediasosial/${id}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const res = await (ApiFetch.api.landingpage.mediasosial as any)[id].get();

-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        const result = await response.json();
-
-        if (result?.success) {
-          const data = result.data;
+        if (res.data?.success) {
+          const data = res.data.data;
          this.id = data.id;
          this.form = {
            name: data.name || "",
            imageId: data.imageId || null,
            iconUrl: data.iconUrl || "",
            icon: data.icon || null,
-            
          };
          return data;
        } else {
-          throw new Error(
-            result?.message || "Gagal mengambil data media sosial"
-          );
+          toast.error(res.data?.message || "Gagal mengambil data media sosial");
+          return null;
        }
      } catch (error) {
-        console.error((error as Error).message);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error loading media sosial:", error);
+        }
        toast.error("Terjadi kesalahan saat mengambil data media sosial");
+        return null;
      } finally {
-        mediaSosial.update.loading = false; // ✅ Supaya berhenti loading walau error
+        mediaSosial.update.loading = false;
      }
    },

@@ -655,41 +637,25 @@ const mediaSosial = proxy({

      try {
        mediaSosial.update.loading = true;
+        const res = await (ApiFetch.api.landingpage.mediasosial as any)[this.id].put({
+          name: this.form.name,
+          imageId: this.form.imageId,
+          iconUrl: this.form.iconUrl,
+          icon: this.form.icon,
+        });

-        const response = await fetch(
-          `/api/landingpage/mediasosial/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              name: this.form.name,
-              imageId: this.form.imageId,
-              iconUrl: this.form.iconUrl,
-              icon: this.form.icon,
-            }),
-          }
-        );
-
-        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) {
+        if (res.data?.success) {
          toast.success("Berhasil update media sosial");
-          await mediaSosial.findMany.load(); // refresh list
+          await mediaSosial.findMany.load();
          return true;
        } else {
-          throw new Error(result.message || "Gagal update media sosial");
+          toast.error(res.data?.message || "Gagal update media sosial");
+          return false;
        }
      } catch (error) {
-        console.error("Error updating media sosial:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error updating media sosial:", error);
+        }
        toast.error(
          error instanceof Error
            ? error.message
--- a/src/app/admin/(dashboard)/desa/berita/kategori-berita/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/kategori-berita/page.tsx
@@ -160,7 +160,7 @@ function ListKategoriBerita({ search }: { search: string }) {
                ))
              ) : (
                <TableTr>
-                  <TableTd colSpan={4}>
+                  <TableTd colSpan={3}>  {/* ✅ Match column count (3 columns) */}
                    <Center py={24}>
                      <Text c="dimmed" fz="sm" lh={1.4}>
                        Tidak ada data kategori berita yang cocok
--- a/src/app/admin/(dashboard)/desa/berita/list-berita/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/list-berita/page.tsx
@@ -187,7 +187,7 @@ function ListBerita({ search }: { search: string }) {
        <Pagination
          value={page}
          onChange={(newPage) => {
-            load(newPage, 10);
+            load(newPage, 10, debouncedSearch);  // ✅ Include search parameter
            window.scrollTo({ top: 0, behavior: 'smooth' });
          }}
          total={totalPages}
--- a/src/app/admin/(dashboard)/desa/musik/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/musik/[id]/edit/page.tsx
@@ -0,0 +1,385 @@
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import stateDashboardMusik from '@/app/admin/(dashboard)/_state/desa/musik';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import {
+  Box,
+  Button,
+  Card,
+  Center,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Loader,
+  ActionIcon,
+  NumberInput
+} from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconPhoto, IconUpload, IconX, IconMusic } from '@tabler/icons-react';
+import { useRouter, useParams } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+export default function EditMusik() {
+  const musikState = useProxy(stateDashboardMusik);
+  const router = useRouter();
+  const params = useParams();
+  const id = params.id as string;
+
+  const [previewCover, setPreviewCover] = useState<string | null>(null);
+  const [coverFile, setCoverFile] = useState<File | null>(null);
+  const [previewAudio, setPreviewAudio] = useState<string | null>(null);
+  const [audioFile, setAudioFile] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useShallowEffect(() => {
+    if (id) {
+      musikState.musik.edit.load(id).then(() => setIsLoading(false));
+    }
+  }, [id]);
+
+  const isFormValid = () => {
+    return (
+      musikState.musik.edit.form.judul?.trim() !== '' &&
+      musikState.musik.edit.form.artis?.trim() !== '' &&
+      musikState.musik.edit.form.durasi?.trim() !== '' &&
+      (coverFile !== null || musikState.musik.edit.form.coverImageId !== '') &&
+      (audioFile !== null || musikState.musik.edit.form.audioFileId !== '')
+    );
+  };
+
+  const resetForm = () => {
+    musikState.musik.edit.reset();
+    setPreviewCover(null);
+    setCoverFile(null);
+    setPreviewAudio(null);
+    setAudioFile(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!musikState.musik.edit.form.judul?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+
+    if (!musikState.musik.edit.form.artis?.trim()) {
+      toast.error('Artis wajib diisi');
+      return;
+    }
+
+    if (!musikState.musik.edit.form.durasi?.trim()) {
+      toast.error('Durasi wajib diisi');
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+
+      // Upload cover image if new file selected
+      if (coverFile) {
+        const res = await ApiFetch.api.fileStorage.create.post({
+          file: coverFile,
+          name: coverFile.name,
+        });
+
+        const uploaded = res.data?.data;
+        if (!uploaded?.id) {
+          return toast.error('Gagal mengunggah cover, silakan coba lagi');
+        }
+
+        musikState.musik.edit.form.coverImageId = uploaded.id;
+      }
+
+      // Upload audio file if new file selected
+      if (audioFile) {
+        const res = await ApiFetch.api.fileStorage.create.post({
+          file: audioFile,
+          name: audioFile.name,
+        });
+
+        const uploaded = res.data?.data;
+        if (!uploaded?.id) {
+          return toast.error('Gagal mengunggah audio, silakan coba lagi');
+        }
+
+        musikState.musik.edit.form.audioFileId = uploaded.id;
+      }
+
+      await musikState.musik.edit.update();
+
+      resetForm();
+      router.push('/admin/desa/musik');
+    } catch (error) {
+      console.error('Error updating musik:', error);
+      toast.error('Terjadi kesalahan saat mengupdate musik');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Box px={{ base: 0, md: 'lg' }} py="xl">
+        <Center>
+          <Loader />
+        </Center>
+      </Box>
+    );
+  }
+
+  return (
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
+      {/* Header dengan tombol kembali */}
+      <Group mb="md">
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
+        <Title order={4} ml="sm" c="dark">
+          Edit Musik
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Judul"
+            placeholder="Masukkan judul lagu"
+            value={musikState.musik.edit.form.judul}
+            onChange={(e) => (musikState.musik.edit.form.judul = e.target.value)}
+            required
+          />
+
+          <TextInput
+            label="Artis"
+            placeholder="Masukkan nama artis"
+            value={musikState.musik.edit.form.artis}
+            onChange={(e) => (musikState.musik.edit.form.artis = e.target.value)}
+            required
+          />
+
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi
+            </Text>
+            <CreateEditor
+              value={musikState.musik.edit.form.deskripsi}
+              onChange={(htmlContent) => {
+                musikState.musik.edit.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Group gap="md">
+            <TextInput
+              label="Durasi"
+              placeholder="Contoh: 3:45"
+              value={musikState.musik.edit.form.durasi}
+              onChange={(e) => (musikState.musik.edit.form.durasi = e.target.value)}
+              required
+              style={{ flex: 1 }}
+            />
+
+            <TextInput
+              label="Genre"
+              placeholder="Contoh: Pop, Rock, Jazz"
+              value={musikState.musik.edit.form.genre}
+              onChange={(e) => (musikState.musik.edit.form.genre = e.target.value)}
+              style={{ flex: 1 }}
+            />
+          </Group>
+
+          <NumberInput
+            label="Tahun Rilis"
+            placeholder="Contoh: 2024"
+            value={musikState.musik.edit.form.tahunRilis}
+            onChange={(val) => (musikState.musik.edit.form.tahunRilis = val as number | undefined)}
+            min={1900}
+            max={new Date().getFullYear() + 1}
+          />
+
+          {/* Cover Image */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Cover Image
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setCoverFile(selectedFile);
+                  setPreviewCover(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+              </Group>
+              <Text ta="center" mt="sm" size="sm" color="dimmed">
+                Seret gambar atau klik untuk memilih file (maks 5MB)
+              </Text>
+            </Dropzone>
+
+            {(previewCover || musikState.musik.edit.form.coverImageId) && (
+              <Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
+                <Image
+                  src={previewCover || '/api/placeholder/200/200'}
+                  alt="Preview Cover"
+                  radius="md"
+                  style={{
+                    maxHeight: 200,
+                    objectFit: 'contain',
+                    border: '1px solid #ddd',
+                  }}
+                  loading="lazy"
+                />
+
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewCover(null);
+                    setCoverFile(null);
+                    musikState.musik.edit.form.coverImageId = '';
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
+              </Box>
+            )}
+          </Box>
+
+          {/* Audio File */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              File Audio
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setAudioFile(selectedFile);
+                  setPreviewAudio(selectedFile.name);
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format audio (MP3, WAV, OGG)')}
+              maxSize={50 * 1024 ** 2}
+              accept={{ 'audio/*': ['.mp3', '.wav', '.ogg', '.m4a'] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconMusic size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+              </Group>
+              <Text ta="center" mt="sm" size="sm" color="dimmed">
+                Seret file audio atau klik untuk memilih file (maks 50MB)
+              </Text>
+            </Dropzone>
+
+            {(previewAudio || musikState.musik.edit.form.audioFileId) && (
+              <Box mt="sm">
+                <Card p="sm" withBorder>
+                  <Group gap="sm">
+                    <IconMusic size={20} color={colors['blue-button']} />
+                    <Text fz="sm" truncate style={{ flex: 1 }}>
+                      {previewAudio || 'File audio tersimpan'}
+                    </Text>
+                    <ActionIcon
+                      variant="filled"
+                      color="red"
+                      radius="xl"
+                      size="sm"
+                      onClick={() => {
+                        setPreviewAudio(null);
+                        setAudioFile(null);
+                        musikState.musik.edit.form.audioFileId = '';
+                      }}
+                    >
+                      <IconX size={14} />
+                    </ActionIcon>
+                  </Group>
+                </Card>
+              </Box>
+            )}
+          </Box>
+
+          <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              disabled={!isFormValid() || isSubmitting}
+              style={{
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Update'}
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
--- a/src/app/admin/(dashboard)/desa/musik/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/musik/[id]/page.tsx
@@ -0,0 +1,264 @@
+'use client'
+import colors from '@/con/colors';
+import {
+  Box,
+  Button,
+  Card,
+  Center,
+  Group,
+  Image,
+  Modal,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Title
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import stateDashboardMusik from '../../../_state/desa/musik';
+
+export default function DetailMusik() {
+  const musikState = useProxy(stateDashboardMusik);
+  const router = useRouter();
+  const params = useParams();
+  const id = params.id as string;
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const { data, loading, load } = musikState.musik.findUnique;
+
+  useShallowEffect(() => {
+    if (id) {
+      load(id);
+    }
+  }, [id]);
+
+  if (loading || !data) {
+    return (
+      <Box px={{ base: 0, md: 'lg' }} py="xs">
+        <Stack>
+          <Skeleton height={50} radius="md" />
+          <Skeleton height={400} radius="md" />
+        </Stack>
+      </Box>
+    );
+  }
+
+  if (!data) {
+    return (
+      <Box px={{ base: 0, md: 'lg' }} py="xl">
+        <Center>
+          <Text c="dimmed">Musik tidak ditemukan</Text>
+        </Center>
+      </Box>
+    );
+  }
+
+  const handleDelete = async () => {
+    try {
+      setIsDeleting(true);
+      await musikState.musik.delete.byId(id);
+      setShowDeleteModal(false);
+      router.push('/admin/desa/musik');
+    } catch (error) {
+      console.error('Error deleting musik:', error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
+      {/* Header dengan tombol kembali */}
+      <Group mb="md">
+        <Button
+          variant="subtle"
+          onClick={() => router.push('/admin/desa/musik')}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
+        <Title order={4} ml="sm" c="dark">
+          Detail Musik
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Cover Image */}
+          {data.coverImage && (
+            <Box style={{ textAlign: 'center' }}>
+              <Image
+                src={data.coverImage.link}
+                alt={data.judul}
+                radius="md"
+                style={{
+                  maxHeight: 300,
+                  objectFit: 'cover',
+                  margin: '0 auto',
+                }}
+              />
+            </Box>
+          )}
+
+          {/* Info Section */}
+          <Stack gap="sm">
+            <Box>
+              <Text fz="sm" fw={600} c="dimmed">
+                Judul
+              </Text>
+              <Text fz="md" fw={600}>
+                {data.judul}
+              </Text>
+            </Box>
+
+            <Box>
+              <Text fz="sm" fw={600} c="dimmed">
+                Artis
+              </Text>
+              <Text fz="md" fw={500}>
+                {data.artis}
+              </Text>
+            </Box>
+
+            {data.deskripsi && (
+              <Box>
+                <Text fz="sm" fw={600} c="dimmed">
+                  Deskripsi
+                </Text>
+                <Text fz="sm" fw={500} dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
+              </Box>
+            )}
+
+            <Group gap="xl">
+              <Box>
+                <Text fz="sm" fw={600} c="dimmed">
+                  Durasi
+                </Text>
+                <Text fz="md" fw={500}>
+                  {data.durasi}
+                </Text>
+              </Box>
+
+              {data.genre && (
+                <Box>
+                  <Text fz="sm" fw={600} c="dimmed">
+                    Genre
+                  </Text>
+                  <Text fz="md" fw={500}>
+                    {data.genre}
+                  </Text>
+                </Box>
+              )}
+
+              {data.tahunRilis && (
+                <Box>
+                  <Text fz="sm" fw={600} c="dimmed">
+                    Tahun Rilis
+                  </Text>
+                  <Text fz="md" fw={500}>
+                    {data.tahunRilis}
+                  </Text>
+                </Box>
+              )}
+            </Group>
+
+            {/* Audio File */}
+            {data.audioFile && (
+              <Box>
+                <Text fz="sm" fw={600} c="dimmed">
+                  File Audio
+                </Text>
+                <Card mt="xs" p="sm" withBorder>
+                  <Group gap="sm">
+                    <Text fz="sm" truncate style={{ flex: 1 }}>
+                      {data.audioFile.realName}
+                    </Text>
+                    <Button
+                      component="a"
+                      href={data.audioFile.link}
+                      target="_blank"
+                      variant="light"
+                      size="sm"
+                    >
+                      Putar
+                    </Button>
+                  </Group>
+                </Card>
+              </Box>
+            )}
+          </Stack>
+
+          {/* Action Buttons */}
+          <Group justify="right" mt="md">
+            <Button
+              variant="outline"
+              color="red"
+              radius="md"
+              size="md"
+              leftSection={<IconTrash size={18} />}
+              onClick={() => setShowDeleteModal(true)}
+            >
+              Hapus
+            </Button>
+            <Button
+              variant="filled"
+              color="blue"
+              radius="md"
+              size="md"
+              leftSection={<IconEdit size={18} />}
+              onClick={() => router.push(`/admin/desa/musik/${id}/edit`)}
+            >
+              Edit
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+
+      {/* Delete Confirmation Modal */}
+      <Modal
+        opened={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+        title="Konfirmasi Hapus"
+        centered
+      >
+        <Stack gap="md">
+          <Text>
+            Apakah Anda yakin ingin menghapus musik &quot;{data.judul}&quot;?
+          </Text>
+          <Text c="red" fz="sm">
+            Tindakan ini tidak dapat dibatalkan.
+          </Text>
+          <Group justify="right" mt="md">
+            <Button
+              variant="outline"
+              color="gray"
+              onClick={() => setShowDeleteModal(false)}
+            >
+              Batal
+            </Button>
+            <Button
+              color="red"
+              onClick={handleDelete}
+              loading={isDeleting}
+            >
+              Hapus
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Box>
+  );
+}
--- a/src/app/admin/(dashboard)/desa/musik/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/musik/create/page.tsx
@@ -0,0 +1,383 @@
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import stateDashboardMusik from '@/app/admin/(dashboard)/_state/desa/musik';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import {
+  Box,
+  Button,
+  Card,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Loader,
+  ActionIcon,
+  NumberInput
+} from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconPhoto, IconUpload, IconX, IconMusic } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+export default function CreateMusik() {
+  const musikState = useProxy(stateDashboardMusik);
+  const [previewCover, setPreviewCover] = useState<string | null>(null);
+  const [coverFile, setCoverFile] = useState<File | null>(null);
+  const [previewAudio, setPreviewAudio] = useState<string | null>(null);
+  const [audioFile, setAudioFile] = useState<File | null>(null);
+  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const isFormValid = () => {
+    return (
+      musikState.musik.create.form.judul?.trim() !== '' &&
+      musikState.musik.create.form.artis?.trim() !== '' &&
+      musikState.musik.create.form.durasi?.trim() !== '' &&
+      audioFile !== null &&
+      coverFile !== null
+    );
+  };
+
+  useShallowEffect(() => {
+    return () => {
+      musikState.musik.create.resetForm();
+    };
+  }, []);
+
+  const resetForm = () => {
+    musikState.musik.create.form = {
+      judul: '',
+      artis: '',
+      deskripsi: '',
+      durasi: '',
+      audioFileId: '',
+      coverImageId: '',
+      genre: '',
+      tahunRilis: undefined,
+    };
+    setPreviewCover(null);
+    setCoverFile(null);
+    setPreviewAudio(null);
+    setAudioFile(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!musikState.musik.create.form.judul?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+
+    if (!musikState.musik.create.form.artis?.trim()) {
+      toast.error('Artis wajib diisi');
+      return;
+    }
+
+    if (!musikState.musik.create.form.durasi?.trim()) {
+      toast.error('Durasi wajib diisi');
+      return;
+    }
+
+    if (!coverFile) {
+      toast.error('Cover image wajib dipilih');
+      return;
+    }
+
+    if (!audioFile) {
+      toast.error('File audio wajib dipilih');
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+
+      // Upload cover image
+      const coverRes = await ApiFetch.api.fileStorage.create.post({
+        file: coverFile,
+        name: coverFile.name,
+      });
+
+      const coverUploaded = coverRes.data?.data;
+      if (!coverUploaded?.id) {
+        return toast.error('Gagal mengunggah cover, silakan coba lagi');
+      }
+
+      musikState.musik.create.form.coverImageId = coverUploaded.id;
+
+      // Upload audio file
+      const audioRes = await ApiFetch.api.fileStorage.create.post({
+        file: audioFile,
+        name: audioFile.name,
+      });
+
+      const audioUploaded = audioRes.data?.data;
+      if (!audioUploaded?.id) {
+        return toast.error('Gagal mengunggah audio, silakan coba lagi');
+      }
+
+      musikState.musik.create.form.audioFileId = audioUploaded.id;
+
+      await musikState.musik.create.create();
+
+      resetForm();
+      router.push('/admin/desa/musik');
+    } catch (error) {
+      console.error('Error creating musik:', error);
+      toast.error('Terjadi kesalahan saat membuat musik');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
+      {/* Header dengan tombol kembali */}
+      <Group mb="md">
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Musik
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Judul"
+            placeholder="Masukkan judul lagu"
+            value={musikState.musik.create.form.judul}
+            onChange={(e) => (musikState.musik.create.form.judul = e.target.value)}
+            required
+          />
+
+          <TextInput
+            label="Artis"
+            placeholder="Masukkan nama artis"
+            value={musikState.musik.create.form.artis}
+            onChange={(e) => (musikState.musik.create.form.artis = e.target.value)}
+            required
+          />
+
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi
+            </Text>
+            <CreateEditor
+              value={musikState.musik.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                musikState.musik.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Group gap="md">
+            <TextInput
+              label="Durasi"
+              placeholder="Contoh: 3:45"
+              value={musikState.musik.create.form.durasi}
+              onChange={(e) => (musikState.musik.create.form.durasi = e.target.value)}
+              required
+              style={{ flex: 1 }}
+            />
+
+            <TextInput
+              label="Genre"
+              placeholder="Contoh: Pop, Rock, Jazz"
+              value={musikState.musik.create.form.genre}
+              onChange={(e) => (musikState.musik.create.form.genre = e.target.value)}
+              style={{ flex: 1 }}
+            />
+          </Group>
+
+          <NumberInput
+            label="Tahun Rilis"
+            placeholder="Contoh: 2024"
+            value={musikState.musik.create.form.tahunRilis}
+            onChange={(val) => (musikState.musik.create.form.tahunRilis = val as number | undefined)}
+            min={1900}
+            max={new Date().getFullYear() + 1}
+          />
+
+          {/* Cover Image */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Cover Image
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setCoverFile(selectedFile);
+                  setPreviewCover(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+              </Group>
+              <Text ta="center" mt="sm" size="sm" color="dimmed">
+                Seret gambar atau klik untuk memilih file (maks 5MB)
+              </Text>
+            </Dropzone>
+
+            {previewCover && (
+              <Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
+                <Image
+                  src={previewCover}
+                  alt="Preview Cover"
+                  radius="md"
+                  style={{
+                    maxHeight: 200,
+                    objectFit: 'contain',
+                    border: '1px solid #ddd',
+                  }}
+                  loading="lazy"
+                />
+
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewCover(null);
+                    setCoverFile(null);
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
+              </Box>
+            )}
+          </Box>
+
+          {/* Audio File */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              File Audio
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setAudioFile(selectedFile);
+                  setPreviewAudio(selectedFile.name);
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format audio (MP3, WAV, OGG)')}
+              maxSize={50 * 1024 ** 2}
+              accept={{ 'audio/*': ['.mp3', '.wav', '.ogg', '.m4a'] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconMusic size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+              </Group>
+              <Text ta="center" mt="sm" size="sm" color="dimmed">
+                Seret file audio atau klik untuk memilih file (maks 50MB)
+              </Text>
+            </Dropzone>
+
+            {previewAudio && (
+              <Box mt="sm">
+                <Card p="sm" withBorder>
+                  <Group gap="sm">
+                    <IconMusic size={20} color={colors['blue-button']} />
+                    <Text fz="sm" truncate style={{ flex: 1 }}>
+                      {previewAudio}
+                    </Text>
+                    <ActionIcon
+                      variant="filled"
+                      color="red"
+                      radius="xl"
+                      size="sm"
+                      onClick={() => {
+                        setPreviewAudio(null);
+                        setAudioFile(null);
+                      }}
+                    >
+                      <IconX size={14} />
+                    </ActionIcon>
+                  </Group>
+                </Card>
+              </Box>
+            )}
+          </Box>
+
+          <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              disabled={!isFormValid() || isSubmitting}
+              style={{
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
--- a/src/app/admin/(dashboard)/desa/musik/page.tsx
+++ b/src/app/admin/(dashboard)/desa/musik/page.tsx
@@ -0,0 +1,231 @@
+'use client'
+import colors from '@/con/colors';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title
+} from '@mantine/core';
+import { useDebouncedValue, 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 HeaderSearch from '../../_com/header';
+import stateDashboardMusik from '../../_state/desa/musik';
+
+
+function Musik() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title="Musik Desa"
+        placeholder="Cari judul, artis, atau genre..."
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListMusik search={search} />
+    </Box>
+  );
+}
+
+function ListMusik({ search }: { search: string }) {
+  const musikState = useProxy(stateDashboardMusik);
+  const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
+
+  const { data, page, totalPages, loading, load } = musikState.musik.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
+
+  if (loading || !data) {
+    return (
+      <Stack py="md">
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
+  }
+
+  const filteredData = data || [];
+
+  return (
+    <Box py="md">
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Musik</Title>
+          <Button
+            leftSection={<IconCircleDashedPlus size={18} />}
+            color="blue"
+            variant="light"
+            onClick={() => router.push('/admin/desa/musik/create')}
+          >
+            Tambah Baru
+          </Button>
+        </Group>
+
+        {/* Desktop Table */}
+        <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover
+            layout="fixed"
+            withColumnBorders={false} miw={0}>
+            <TableThead>
+              <TableTr>
+                <TableTh w="30%">Judul</TableTh>
+                <TableTh w="20%">Artis</TableTh>
+                <TableTh w="15%">Durasi</TableTh>
+                <TableTh w="15%">Genre</TableTh>
+                <TableTh w="20%">Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fz="md" fw={600} lh={1.45} truncate="end">
+                        {item.judul}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm" c="dimmed" lh={1.45}>
+                        {item.artis}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm" c="dimmed" lh={1.45}>
+                        {item.durasi}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm" c="dimmed" lh={1.45}>
+                        {item.genre || '-'}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(`/admin/desa/musik/${item.id}`)
+                        }
+                        fz="sm"
+                        px="sm"
+                        h={36}
+                      >
+                        <IconDeviceImacCog size={18} />
+                        <Text ml="xs">Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={5}>
+                    <Center py="xl">
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data musik yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
+
+        {/* Mobile Cards */}
+        <Stack hiddenFrom="md" gap="sm" mt="sm">
+          {filteredData.length > 0 ? (
+            filteredData.map((item) => (
+              <Paper key={item.id} withBorder p="md" radius="md">
+                <Stack gap={"xs"}>
+                  <Text fz="sm" fw={600} lh={1.4} c="dimmed">
+                    Judul
+                  </Text>
+                  <Text fz="sm" fw={500} lh={1.45}>
+                    {item.judul}
+                  </Text>
+
+                  <Text fz="sm" fw={600} lh={1.4} c="dimmed" mt="xs">
+                    Artis
+                  </Text>
+                  <Text fz="sm" lh={1.45} fw={500}>
+                    {item.artis}
+                  </Text>
+
+                  <Text fz="sm" fw={600} lh={1.4} c="dimmed" mt="xs">
+                    Durasi
+                  </Text>
+                  <Text fz="sm" lh={1.45} fw={500}>
+                    {item.durasi}
+                  </Text>
+
+                  <Text fz="sm" fw={600} lh={1.4} c="dimmed" mt="xs">
+                    Genre
+                  </Text>
+                  <Text fz="sm" lh={1.45} fw={500}>
+                    {item.genre || '-'}
+                  </Text>
+
+                  <Button
+                    variant="light"
+                    color="blue"
+                    fullWidth
+                    mt="sm"
+                    onClick={() =>
+                      router.push(`/admin/desa/musik/${item.id}`)
+                    }
+                    fz="sm"
+                    h={36}
+                  >
+                    <IconDeviceImacCog size={18} />
+                    <Text ml="xs">Detail</Text>
+                  </Button>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py="xl">
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data musik yang cocok
+              </Text>
+            </Center>
+          )}
+        </Stack>
+      </Paper>
+
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10, debouncedSearch);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
+    </Box>
+  );
+}
+
+export default Musik;
--- a/src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/page.tsx
@@ -8,6 +8,7 @@ import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import DOMPurify from 'dompurify';

 export default function DetailPotensi() {
  const router = useRouter();
@@ -77,7 +78,17 @@ export default function DetailPotensi() {

              <Box>
                <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}></Text>
+                <Text 
+                  fz="md" 
+                  c="dimmed" 
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }} 
+                  dangerouslySetInnerHTML={{ 
+                    __html: DOMPurify.sanitize(data.deskripsi || '-', {
+                      ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
+                      ALLOWED_ATTR: []
+                    })
+                  }}
+                ></Text>
              </Box>

              <Box>
@@ -102,7 +113,12 @@ export default function DetailPotensi() {
                <Text
                  fz="md"
                  c="dimmed"
-                  dangerouslySetInnerHTML={{ __html: data.content || '-' }}
+                  dangerouslySetInnerHTML={{
+                    __html: DOMPurify.sanitize(data.content || '-', {
+                      ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
+                      ALLOWED_ATTR: []
+                    })
+                  }}
                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                />
              </Box>
--- a/src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx
@@ -27,6 +27,7 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import potensiDesaState from '../../../_state/desa/potensi';
 import { useDebouncedValue } from '@mantine/hooks';
+import DOMPurify from 'dompurify';

 function Potensi() {
  const [search, setSearch] = useState("");
@@ -137,7 +138,12 @@ function ListPotensi({ search }: { search: string }) {
                        fz="sm"
                        lh={1.5}
                        lineClamp={2}
-                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                        dangerouslySetInnerHTML={{
+                          __html: DOMPurify.sanitize(item.deskripsi, {
+                            ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
+                            ALLOWED_ATTR: []
+                          })
+                        }}
                        style={{ wordBreak: 'break-word' }}
                      />
                    </TableTd>
@@ -199,7 +205,12 @@ function ListPotensi({ search }: { search: string }) {
                    <Text
                      fz="sm"
                      lh={1.5}
-                      dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                      dangerouslySetInnerHTML={{
+                        __html: DOMPurify.sanitize(item.deskripsi, {
+                          ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
+                          ALLOWED_ATTR: []
+                        })
+                      }}
                      style={{ wordBreak: 'break-word' }}
                    />
                  </Box>
--- a/src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/edit/page.tsx
@@ -44,6 +44,21 @@ function EditDigitalSmartVillage() {
    imageUrl: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  useEffect(() => {
    const loadData = async () => {
      const id = params?.id as string;
@@ -248,8 +263,11 @@ function EditDigitalSmartVillage() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/create/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/create/page.tsx
@@ -30,6 +30,22 @@ export default function CreateDesaDigital() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateDesaDigital.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(stateDesaDigital.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
  const resetForm = () => {
    stateDesaDigital.create.form = {
      name: '',
@@ -227,8 +243,11 @@ export default function CreateDesaDigital() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/[id]/edit/page.tsx
@@ -44,6 +44,21 @@ function EditInfoTeknologiTepatGuna() {
    imageUrl: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // Load data pertama kali
  useEffect(() => {
    const id = params?.id as string;
@@ -260,8 +275,11 @@ function EditInfoTeknologiTepatGuna() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/create/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/create/page.tsx
@@ -30,6 +30,22 @@ function CreateInfoTeknologiTepatGuna() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateInfoTekno.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(stateInfoTekno.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
  const resetForm = () => {
    stateInfoTekno.create.form = {
      name: '',
@@ -202,8 +218,11 @@ function CreateInfoTeknologiTepatGuna() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/[id]/edit/page.tsx
@@ -44,6 +44,23 @@ function EditKolaborasiInovasi() {
    kolaborator: "",
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.slug?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.kolaborator?.trim() !== ''
+    );
+  };
+
  // Load data awal dari server
  useEffect(() => {
    const loadKolaborasi = async () => {
@@ -199,8 +216,11 @@ function EditKolaborasiInovasi() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/create/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/create/page.tsx
@@ -16,6 +16,22 @@ function CreateProgramKreatifDesa() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateCreate.create.form.name?.trim() !== '' &&
+      stateCreate.create.form.slug?.trim() !== '' &&
+      !isHtmlEmpty(stateCreate.create.form.deskripsi)
+    );
+  };
+
  const resetForm = () => {
    stateCreate.create.form = {
      name: "",
@@ -135,8 +151,11 @@ function CreateProgramKreatifDesa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/[id]/page.tsx
@@ -51,6 +51,11 @@ function EditMitraKolaborasi() {
    imageUrl: '',
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return formData.name?.trim() !== '';
+  };
+
  // Load data ke state lokal sekali saja
  useEffect(() => {
    const loadData = async () => {
@@ -263,8 +268,11 @@ function EditMitraKolaborasi() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create/page.tsx
@@ -29,6 +29,14 @@ function CreateMitraKolaborasi() {
  const [file, setFile] = useState<File | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      state.create.form.name?.trim() !== '' &&
+      file !== null
+    );
+  };
+
  const resetForm = () => {
    state.create.form = {
      name: '',
@@ -181,8 +189,11 @@ function CreateMitraKolaborasi() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/[id]/edit/page.tsx
@@ -51,6 +51,23 @@ function EditProgramKreatifDesa() {

  const [isDataChanged, setIsDataChanged] = useState(false);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.slug?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.icon?.trim() !== ''
+    );
+  };
+
  // Load data hanya sekali berdasarkan params.id
  useEffect(() => {
    const loadProgramKreatif = async () => {
@@ -236,8 +253,11 @@ function EditProgramKreatifDesa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx
@@ -25,6 +25,23 @@ function CreateProgramKreatifDesa() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateCreate.create.form.name?.trim() !== '' &&
+      stateCreate.create.form.icon?.trim() !== '' &&
+      stateCreate.create.form.slug?.trim() !== '' &&
+      !isHtmlEmpty(stateCreate.create.form.deskripsi)
+    );
+  };
+
  const resetForm = () => {
    stateCreate.create.form = {
      name: "",
@@ -127,8 +144,11 @@ function CreateProgramKreatifDesa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/landing-page/profil/program-inovasi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/profil/program-inovasi/[id]/page.tsx
@@ -8,6 +8,7 @@ import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import DOMPurify from 'dompurify';

 function DetailProgramInovasi() {
  const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi)
@@ -85,7 +86,7 @@ function DetailProgramInovasi() {
              <Box>
                <Text fz="lg" fw="bold">Deskripsi</Text>
               <Box pl={5}>
-                 <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.description || '-' }}></Text>
+                 <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data.description || '-') }}></Text>
               </Box>
              </Box>

--- a/src/app/admin/(dashboard)/landing-page/profil/program-inovasi/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/profil/program-inovasi/page.tsx
@@ -6,6 +6,7 @@ import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import DOMPurify from 'dompurify';
 import HeaderSearch from '../../../_com/header';
 import profileLandingPageState from '../../../_state/landing-page/profile';

@@ -90,7 +91,7 @@ function ListProgramInovasi({ search }: { search: string }) {
                      <Text fw={500}>{item.name}</Text>
                    </TableTd>
                    <TableTd style={{ maxWidth: 250 }}>
-                      <Text fz="sm" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.description || '-' }}></Text>
+                      <Text fz="sm" lineClamp={1} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.description || '-') }}></Text>
                    </TableTd>
                    <TableTd style={{ maxWidth: 250 }}>
                      <Tooltip label="Buka tautan program" position="top" withArrow>
@@ -144,7 +145,7 @@ function ListProgramInovasi({ search }: { search: string }) {
                  {/* Description */}
                  <Box>
                    <Text fz="sm" fw={600} lh={1.4}>Deskripsi</Text>
-                    <Text dangerouslySetInnerHTML={{ __html: item.description || '-' }} fz="sm" c="gray.7" lineClamp={2} />
+                    <Text dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.description || '-') }} fz="sm" c="gray.7" lineClamp={2} />
                  </Box>

                  {/* Link */}
--- a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/edit/page.tsx
@@ -67,6 +67,23 @@ export default function EditDataLingkunganDesa() {
    icon: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.jumlah?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.icon?.trim() !== ''
+    );
+  };
+
  // Load data saat komponen mount
  useEffect(() => {
    const loadData = async () => {
@@ -211,8 +228,11 @@ export default function EditDataLingkunganDesa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx
@@ -25,6 +25,23 @@ function CreateDataLingkunganDesa() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateCreate.create.form.name?.trim() !== '' &&
+      stateCreate.create.form.icon?.trim() !== '' &&
+      stateCreate.create.form.jumlah?.trim() !== '' &&
+      !isHtmlEmpty(stateCreate.create.form.deskripsi)
+    );
+  };
+
  const resetForm = () => {
    stateCreate.create.form = {
      name: '',
@@ -129,8 +146,11 @@ function CreateDataLingkunganDesa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit/page.tsx
@@ -38,6 +38,21 @@ export default function EditContohKegiatanDesaDarmasaba() {
    deskripsi: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      !isHtmlEmpty(formData.judul) &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // load data awal
  useShallowEffect(() => {
    if (!contohEdukasiState.findById.data) {
@@ -156,8 +171,11 @@ export default function EditContohKegiatanDesaDarmasaba() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit/page.tsx
@@ -27,6 +27,21 @@ export default function EditMateriEdukasiYangDiberikan() {
    content: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      !isHtmlEmpty(formData.judul) &&
+      !isHtmlEmpty(formData.content)
+    );
+  };
+
  // Initialize data kalau belum ada
  useShallowEffect(() => {
    if (!materiEdukasiState.findById.data) {
@@ -139,8 +154,11 @@ export default function EditMateriEdukasiYangDiberikan() {
              onClick={submit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit/page.tsx
@@ -28,6 +28,21 @@ export default function EditTujuanEdukasiLingkungan() {
    deskripsi: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      !isHtmlEmpty(formData.judul) &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // Initialize global state
  useShallowEffect(() => {
    if (!tujuanEdukasiState.findById.data) {
@@ -147,8 +162,11 @@ export default function EditTujuanEdukasiLingkungan() {
              onClick={submit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/[id]/page.tsx
@@ -21,6 +21,11 @@ function EditKategoriKegiatan() {
  const [originalData, setOriginalData] = useState({ nama: '' });
  const [loading, setLoading] = useState(true);

+  // Check if form is valid
+  const isFormValid = () => {
+    return formData.nama?.trim() !== '';
+  };
+
  // Load data once
  useEffect(() => {
    if (!id) return;
@@ -126,8 +131,11 @@ function EditKategoriKegiatan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/create/page.tsx
@@ -14,6 +14,11 @@ function CreateKategoriKegiatan() {
  const stateKategori = useProxy(gotongRoyongState.kategoriKegiatan)
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return stateKategori.create.form.nama?.trim() !== '';
+  };
+
  useEffect(() => {
    stateKategori.findMany.load();
  }, []);
@@ -84,8 +89,11 @@ function CreateKategoriKegiatan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/edit/page.tsx
@@ -67,6 +67,27 @@ export default function EditKegiatanDesa() {
  const [file, setFile] = useState<File | null>(null);
  const [previewImage, setPreviewImage] = useState<string | null>(null);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsiSingkat) &&
+      !isHtmlEmpty(formData.deskripsiLengkap) &&
+      formData.tanggal?.trim() !== '' &&
+      formData.lokasi?.trim() !== '' &&
+      formData.partisipan !== null &&
+      formData.partisipan >= 0 &&
+      formData.kategoriKegiatanId?.trim() !== ''
+    );
+  };
+
  const formatDateForInput = (dateString: string) => {
    if (!dateString) return '';
    return new Date(dateString).toISOString().split('T')[0];
@@ -312,8 +333,11 @@ export default function EditKegiatanDesa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/create/page.tsx
@@ -38,6 +38,28 @@ function CreateKegiatanDesa() {

  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateKegiatanDesa.create.form.judul?.trim() !== '' &&
+      !isHtmlEmpty(stateKegiatanDesa.create.form.deskripsiSingkat) &&
+      stateKegiatanDesa.create.form.partisipan !== null &&
+      stateKegiatanDesa.create.form.partisipan >= 0 &&
+      stateKegiatanDesa.create.form.tanggal !== null &&
+      stateKegiatanDesa.create.form.lokasi?.trim() !== '' &&
+      !isHtmlEmpty(stateKegiatanDesa.create.form.deskripsiLengkap) &&
+      stateKegiatanDesa.create.form.kategoriKegiatanId?.trim() !== '' &&
+      file !== null
+    );
+  };
+
  const resetForm = () => {
    stateKegiatanDesa.create.form = {
      judul: '',
@@ -273,8 +295,11 @@ function CreateKegiatanDesa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit/page.tsx
@@ -27,6 +27,21 @@ function EditBentukKonservasiBerdasarkanAdat() {
    deskripsi: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      !isHtmlEmpty(formData.judul) &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // Initialize data dari global state
  useShallowEffect(() => {
    if (!bentukKonservasiState.findById.data) {
@@ -137,8 +152,11 @@ function EditBentukKonservasiBerdasarkanAdat() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit/page.tsx
@@ -31,6 +31,21 @@ function EditFilosofiTriHitaKarana() {
    content: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      !isHtmlEmpty(formData.judul) &&
+      !isHtmlEmpty(formData.content)
+    );
+  };
+
  // Load data dari global state kalau belum ada
  useShallowEffect(() => {
    if (!filosofiTriHitaState.findById.data) {
@@ -142,8 +157,11 @@ function EditFilosofiTriHitaKarana() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit/page.tsx
@@ -24,6 +24,21 @@ function EditNilaiKonservasiAdat() {
  const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
  const [originalData, setOriginalData] = useState({ judul: '', deskripsi: '' });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      !isHtmlEmpty(formData.judul) &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // load data awal
  useShallowEffect(() => {
    if (!nilaiKonservasiState.findById.data) {
@@ -136,8 +151,11 @@ function EditNilaiKonservasiAdat() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/edit/page.tsx
@@ -35,6 +35,16 @@ function EditKeteranganBankSampahTerdekat() {
    lng: 0,
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.alamat?.trim() !== '' &&
+      formData.namaTempatMaps?.trim() !== '' &&
+      markerPosition !== null
+    );
+  };
+
  // Load data ketika component mount
  useEffect(() => {
    const loadKeterangan = async () => {
@@ -197,8 +207,11 @@ function EditKeteranganBankSampahTerdekat() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create/page.tsx
@@ -19,6 +19,16 @@ function CreateKeteranganBankSampahTerdekat() {
  const [markerPosition, setMarkerPosition] = useState<{ lat: number; lng: number } | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      keteranganState.create.form.name?.trim() !== '' &&
+      keteranganState.create.form.alamat?.trim() !== '' &&
+      keteranganState.create.form.namaTempatMaps?.trim() !== '' &&
+      markerPosition !== null
+    );
+  };
+
  const resetForm = () => {
    keteranganState.create.form = {
      name: "",
@@ -135,8 +145,11 @@ function CreateKeteranganBankSampahTerdekat() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/[id]/page.tsx
@@ -34,6 +34,14 @@ function EditProgramKreatifDesa() {
    icon: '',
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.icon?.trim() !== ''
+    );
+  };
+
  useEffect(() => {
    const loadProgramKreatif = async () => {
      const id = params?.id as string;
@@ -143,8 +151,11 @@ function EditProgramKreatifDesa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create/page.tsx
@@ -13,6 +13,14 @@ function CreatePengelolaanSampahBankSampah() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateCreate.create.form.name?.trim() !== '' &&
+      stateCreate.create.form.icon?.trim() !== ''
+    );
+  };
+
  const resetForm = () => {
    stateCreate.create.form = {
      name: "",
@@ -91,8 +99,11 @@ function CreatePengelolaanSampahBankSampah() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/edit/page.tsx
@@ -64,6 +64,23 @@ function EditProgramPenghijauan() {
    icon: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.icon?.trim() !== ''
+    );
+  };
+
  // Load data program penghijauan
  useEffect(() => {
    const loadProgram = async () => {
@@ -216,8 +233,11 @@ function EditProgramPenghijauan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx
@@ -25,6 +25,23 @@ function CreateProgramPenghijauan() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateCreate.create.form.name?.trim() !== '' &&
+      stateCreate.create.form.icon?.trim() !== '' &&
+      stateCreate.create.form.judul?.trim() !== '' &&
+      !isHtmlEmpty(stateCreate.create.form.deskripsi)
+    );
+  };
+
  const resetForm = () => {
    stateCreate.create.form = {
      name: '',
@@ -128,8 +145,11 @@ function CreateProgramPenghijauan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/[id]/page.tsx
@@ -24,6 +24,21 @@ function EditProgramKreatifDesa() {
    deskripsi: '',
  })

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  useEffect(() => {
    const loadProgramKreatif = async () => {
      const id = params?.id as string;
@@ -160,8 +175,11 @@ function EditProgramKreatifDesa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/create/page.tsx
@@ -16,6 +16,21 @@ function CreateKeunggulanProgram() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateCreate.create.form.judul?.trim() !== '' &&
+      !isHtmlEmpty(stateCreate.create.form.deskripsi)
+    );
+  };
+
  const resetForm = () => {
    stateCreate.create.form = {
      judul: "",
@@ -97,8 +112,11 @@ function CreateKeunggulanProgram() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx
@@ -42,6 +42,21 @@ function EditFasilitasYangDisediakan() {
    deskripsi: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // Load data pertama kali
  useShallowEffect(() => {
    if (!editState.findById.data) {
@@ -76,11 +91,6 @@ function EditFasilitasYangDisediakan() {
  };

  const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
    setIsSubmitting(true);
    try {
      if (editState.findById.data) {
@@ -180,8 +190,11 @@ function EditFasilitasYangDisediakan() {
                onClick={handleSubmit}
                radius="md"
                size="md"
+                disabled={!isFormValid() || isSubmitting}
                style={{
-                  background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                  background: !isFormValid() || isSubmitting
+                    ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                    : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                  color: '#fff',
                  boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
                }}
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx
@@ -39,6 +39,21 @@ function EditLokasiDanJadwal() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [originalData, setOriginalData] = useState({ judul: '', deskripsi: '' });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // Load data sekali
  useShallowEffect(() => {
    if (!editState.findById.data) {
@@ -73,11 +88,6 @@ function EditLokasiDanJadwal() {
  };

  const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
    setIsSubmitting(true);
    try {
      if (editState.findById.data) {
@@ -178,8 +188,11 @@ function EditLokasiDanJadwal() {
                onClick={handleSubmit}
                radius="md"
                size="md"
+                disabled={!isFormValid() || isSubmitting}
                style={{
-                  background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                  background: !isFormValid() || isSubmitting
+                    ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                    : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                  color: '#fff',
                  boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
                }}
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx
@@ -39,6 +39,21 @@ function EditTujuanProgram() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [originalData, setOriginalData] = useState({ judul: '', deskripsi: '' });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // load data sekali
  useShallowEffect(() => {
    if (!editState.findById.data) editState.findById.initialize();
@@ -71,11 +86,6 @@ function EditTujuanProgram() {
  };

  const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
    setIsSubmitting(true);
    try {
      if (editState.findById.data) {
@@ -170,8 +180,11 @@ function EditTujuanProgram() {
                onClick={handleSubmit}
                radius="md"
                size="md"
+                disabled={!isFormValid() || isSubmitting}
                style={{
-                  background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                  background: !isFormValid() || isSubmitting
+                    ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                    : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                  color: '#fff',
                  boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
                }}
--- a/src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx
@@ -28,6 +28,14 @@ export default function EditDataPendidikan() {
    jumlah: '',
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.jumlah?.trim() !== ''
+    );
+  };
+
  // Load data saat mount
  useEffect(() => {
    if (id) {
@@ -127,8 +135,11 @@ export default function EditDataPendidikan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/data-pendidikan/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/data-pendidikan/create/page.tsx
@@ -15,6 +15,14 @@ export default function CreateDataPendidikan() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateDPM.create.form.name?.trim() !== '' &&
+      stateDPM.create.form.jumlah?.trim() !== ''
+    );
+  };
+
  const resetForm = () => {
    stateDPM.create.form = { name: '', jumlah: '' };
  };
@@ -90,8 +98,11 @@ export default function CreateDataPendidikan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx
@@ -31,6 +31,11 @@ function EditJenjangPendidikan() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [loading, setLoading] = useState(true);

+  // Check if form is valid
+  const isFormValid = () => {
+    return formData.nama?.trim() !== '';
+  };
+
  // Load data sekali saat component mount
  useEffect(() => {
    if (!id) return;
@@ -136,8 +141,11 @@ function EditJenjangPendidikan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/create/page.tsx
@@ -23,6 +23,11 @@ function CreateJenjangPendidikan() {
  const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan);
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return stateJenjang.create.form.nama?.trim() !== '';
+  };
+
  useEffect(() => {
    stateJenjang.findMany.load();
  }, []);
@@ -101,8 +106,11 @@ function CreateJenjangPendidikan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx
@@ -37,6 +37,14 @@ export default function EditLembaga() {
    jenjangId: '',
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      form.nama?.trim() !== '' &&
+      form.jenjangId?.trim() !== ''
+    );
+  };
+
  // Load jenjang pendidikan dan data lembaga
  useEffect(() => {
    infoSekolahPaud.jenjangPendidikan.findMany.load();
@@ -161,8 +169,11 @@ export default function EditLembaga() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx
@@ -25,6 +25,14 @@ function CreateLembaga() {
  const stateLembaga = useProxy(infoSekolahPaud.lembagaPendidikan);
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateLembaga.create.form.nama?.trim() !== '' &&
+      stateLembaga.create.form.jenjangId?.trim() !== ''
+    );
+  };
+
  useEffect(() => {
    stateLembaga.findMany.load();
    infoSekolahPaud.jenjangPendidikan.findMany.load();
@@ -116,8 +124,11 @@ function CreateLembaga() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx
@@ -40,6 +40,14 @@ function EditPengajar() {
    lembagaId: ''
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.lembagaId?.trim() !== ''
+    );
+  };
+
  useEffect(() => {
    const loadData = async () => {
      const id = params?.id as string;
@@ -157,8 +165,11 @@ function EditPengajar() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/create/page.tsx
@@ -25,6 +25,14 @@ function CreatePengajar() {
  const stateCreate = useProxy(infoSekolahPaud.pengajar);
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateCreate.create.form.nama?.trim() !== '' &&
+      stateCreate.create.form.lembagaId?.trim() !== ''
+    );
+  };
+
  useEffect(() => {
    stateCreate.findMany.load();
    infoSekolahPaud.lembagaPendidikan.findMany.load();
@@ -116,8 +124,11 @@ function CreatePengajar() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx
@@ -42,6 +42,14 @@ function EditSiswa() {
    lembagaId: '',
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.lembagaId?.trim() !== ''
+    );
+  };
+
  // Load data siswa
  useEffect(() => {
    const loadSiswa = async () => {
@@ -166,8 +174,11 @@ function EditSiswa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/create/page.tsx
@@ -25,6 +25,14 @@ function CreateSiswa() {
  const stateCreate = useProxy(infoSekolahPaud.siswa);
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateCreate.create.form.nama?.trim() !== '' &&
+      stateCreate.create.form.lembagaId?.trim() !== ''
+    );
+  };
+
  useEffect(() => {
    stateCreate.findMany.load();
    infoSekolahPaud.lembagaPendidikan.findMany.load();
@@ -115,8 +123,11 @@ function CreateSiswa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx
@@ -37,6 +37,21 @@ function EditJenisProgramYangDiselenggarakan() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [originalData, setOriginalData] = useState({ judul: '', content: '' });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.content)
+    );
+  };
+
  // Load data pertama kali
  useShallowEffect(() => {
    if (!editState.findById.data) {
@@ -71,11 +86,6 @@ function EditJenisProgramYangDiselenggarakan() {
  };

  const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
    setIsSubmitting(true);
    try {
      if (editState.findById.data) {
@@ -168,8 +178,11 @@ function EditJenisProgramYangDiselenggarakan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx
@@ -45,6 +45,21 @@ function EditTempatKegiatan() {
    deskripsi: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // load data pertama kali
  useShallowEffect(() => {
    if (!editState.findById.data) {
@@ -79,11 +94,6 @@ function EditTempatKegiatan() {
  };

  const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
    setIsSubmitting(true);
    try {
      if (editState.findById.data) {
@@ -177,8 +187,11 @@ function EditTempatKegiatan() {
                onClick={handleSubmit}
                radius="md"
                size="md"
+                disabled={!isFormValid() || isSubmitting}
                style={{
-                  background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                  background: !isFormValid() || isSubmitting
+                    ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                    : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                  color: '#fff',
                  boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
                }}
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx
@@ -38,6 +38,21 @@ function EditTujuanProgram() {
    deskripsi: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // Load data pertama kali
  useShallowEffect(() => {
    if (!editState.findById.data) {
@@ -72,11 +87,6 @@ function EditTujuanProgram() {
  };

  const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
    if (!editState.findById.data) return;

    setIsSubmitting(true);
@@ -163,8 +173,11 @@ function EditTujuanProgram() {
                onClick={handleSubmit}
                radius="md"
                size="md"
+                disabled={!isFormValid() || isSubmitting}
                style={{
-                  background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                  background: !isFormValid() || isSubmitting
+                    ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                    : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                  color: '#fff',
                  boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
                }}
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx
@@ -38,6 +38,22 @@ function EditPerpustakaanDigital() {
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.kategoriId?.trim() !== ''
+    );
+  };
+
  // Load kategori & data awal
  useEffect(() => {
    perpustakaanDigitalState.kategoriBuku.findManyAll.load();
@@ -254,8 +270,11 @@ function EditPerpustakaanDigital() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/create/page.tsx
@@ -18,6 +18,23 @@ function CreateDataPerpustakaan() {
  const [file, setFile] = useState<File | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      createState.create.form.judul?.trim() !== '' &&
+      !isHtmlEmpty(createState.create.form.deskripsi) &&
+      createState.create.form.kategoriId?.trim() !== '' &&
+      file !== null
+    );
+  };
+
  useEffect(() => {
    perpustakaanDigitalState.kategoriBuku.findManyAll.load();
  }, []);
@@ -196,8 +213,11 @@ function CreateDataPerpustakaan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx
@@ -23,6 +23,11 @@ function EditKategoriBuku() {
  const [formData, setFormData] = useState({ name: '' });
  const [loading, setLoading] = useState(true);

+  // Check if form is valid
+  const isFormValid = () => {
+    return formData.name?.trim() !== '';
+  };
+
  useEffect(() => {
    const loadKategori = async () => {
      const id = params?.id as string;
@@ -120,8 +125,11 @@ function EditKategoriBuku() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/create/page.tsx
@@ -13,6 +13,11 @@ function CreateKategoriBuku() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return createState.create.form.name?.trim() !== '';
+  };
+
  const resetForm = () => {
    createState.create.form = {
      name: "",
@@ -81,8 +86,11 @@ function CreateKategoriBuku() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/peminjam/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/peminjam/[id]/edit/page.tsx
@@ -70,6 +70,26 @@ function EditPeminjam() {
    catatan: "",
  })

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.noTelp?.trim() !== '' &&
+      formData.alamat?.trim() !== '' &&
+      formData.bukuId?.trim() !== '' &&
+      formData.tanggalPinjam?.trim() !== '' &&
+      formData.status?.trim() !== '' &&
+      !isHtmlEmpty(formData.catatan)
+    );
+  };
+
  useShallowEffect(() => {
    perpustakaanDigitalState.dataPerpustakaan.findManyAll.load()
  })
@@ -296,8 +316,11 @@ function EditPeminjam() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx
@@ -50,6 +50,21 @@ function EditTujuanProgram() {
  });
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // load data once
  useShallowEffect(() => {
    if (!editState.findById.data) editState.findById.initialize();
@@ -85,11 +100,6 @@ function EditTujuanProgram() {
    };

  const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
    setIsSubmitting(true);
    try {
      if (editState.findById.data) {
@@ -186,8 +196,11 @@ function EditTujuanProgram() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/edit/page.tsx
@@ -38,6 +38,21 @@ function EditTujuanProgram() {
    deskripsi: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // Load data pertama kali
  useShallowEffect(() => {
    if (!editState.findById.data) {
@@ -72,11 +87,6 @@ function EditTujuanProgram() {
  };

  const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
    setIsSubmitting(true);
    try {
      if (editState.findById.data) {
@@ -166,8 +176,11 @@ function EditTujuanProgram() {
                onClick={handleSubmit}
                radius="md"
                size="md"
+                disabled={!isFormValid() || isSubmitting}
                style={{
-                  background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                  background: !isFormValid() || isSubmitting
+                    ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                    : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                  color: '#fff',
                  boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
                }}
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -1,7 +1,9 @@
 'use client'

-import colors from "@/con/colors";
+import { DarkModeToggle } from "@/components/admin/DarkModeToggle";
+import { useDarkMode } from "@/state/darkModeStore";
 import { authStore } from "@/store/authStore";
+import { themeTokens } from "@/utils/themeTokens";
 import {
  ActionIcon,
  AppShell,
@@ -33,13 +35,21 @@ import { useEffect, useState } from "react";
 import { getNavbar } from "./(dashboard)/user&role/_com/dynamicNavbar";

 export default function Layout({ children }: { children: React.ReactNode }) {
-  const [opened, { toggle, close }] = useDisclosure(); // ✅ Tambahkan 'close'
+  const { isDark } = useDarkMode();
+  const tokens = themeTokens(isDark);
+  
+  const [mounted, setMounted] = useState(false);
+  const [opened, { toggle, close }] = useDisclosure();
  const [loading, setLoading] = useState(true);
  const [isLoggingOut, setIsLoggingOut] = useState(false);
  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
  const router = useRouter();
  const segments = useSelectedLayoutSegments().map((s) => _.lowerCase(s));
-  
+
+  // Ensure component is mounted on client side
+  useEffect(() => {
+    setMounted(true);
+  }, []);

  useEffect(() => {
    const fetchUser = async () => {
@@ -74,7 +84,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
          });

          const currentPath = window.location.pathname;
-          
+
          if (currentPath === '/admin') {
            const expectedPath = getRedirectPath(Number(data.user.roleId));
            console.log('🔄 Redirecting from /admin to:', expectedPath);
@@ -112,11 +122,11 @@ export default function Layout({ children }: { children: React.ReactNode }) {
    }
  };

-  if (loading) {
+  if (loading || !mounted) {
    return (
      <AppShell>
        <AppShellMain>
-          <Center h="100vh">
+          <Center h="100vh" bg="#f6f9fc">
            <Loader />
          </Center>
        </AppShellMain>
@@ -132,7 +142,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
    try {
      setIsLoggingOut(true);

-      const response = await fetch('/api/auth/logout', { 
+      const response = await fetch('/api/auth/logout', {
        method: 'POST',
        credentials: 'include'
      });
@@ -158,10 +168,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
    }
  };

-  // ✅ Handler untuk menutup mobile menu saat navigasi
  const handleNavClick = (path: string) => {
    router.push(path);
-    close(); // Tutup mobile menu
+    close();
  };

  return (
@@ -178,11 +187,16 @@ export default function Layout({ children }: { children: React.ReactNode }) {
      }}
      padding="md"
    >
+      {/*
+        HEADER / TOPBAR
+        Spec: Background gradient, border bawah wajib
+      */}
      <AppShellHeader
        style={{
-          background: "linear-gradient(90deg, #ffffff, #f9fbff)",
-          borderBottom: `1px solid ${colors["blue-button"]}20`,
+          background: mounted ? tokens.colors.bg.header : 'linear-gradient(90deg, #ffffff, #f9fbff)',
+          borderBottom: `1px solid ${mounted ? tokens.colors.border.soft : '#e9ecef'}`,
          padding: '0 16px',
+          transition: 'background 0.3s ease, border-color 0.3s ease',
        }}
        px={{ base: 'sm', sm: 'md' }}
        py={{ base: 'xs', sm: 'sm' }}
@@ -198,30 +212,49 @@ export default function Layout({ children }: { children: React.ReactNode }) {
              loading="lazy"
              style={{ minWidth: '32px', height: 'auto' }}
            />
-            <Text fw={700} c={colors["blue-button"]} fz={{ base: 'md', sm: 'xl' }}>
+            <Text fw={700} c={mounted ? tokens.colors.text.brand : '#0A4E78'} fz={{ base: 'md', sm: 'xl' }}>
              Admin Darmasaba
            </Text>
          </Flex>

          <Group gap="xs">
+            {/* Dark Mode Toggle */}
+            <DarkModeToggle variant="light" size="lg" showTooltip tooltipPosition="bottom" />
+
            {!desktopOpened && (
              <Tooltip label="Buka Navigasi" position="bottom" withArrow>
-                <ActionIcon variant="light" radius="xl" size="lg" onClick={toggleDesktop} color={colors["blue-button"]}>
+                <ActionIcon variant="light" radius="xl" size="lg" onClick={toggleDesktop} color={mounted ? tokens.colors.primary : '#3B82F6'}>
                  <IconChevronRight />
                </ActionIcon>
              </Tooltip>
            )}

-            <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="md" color={colors["blue-button"]} mr="xs" />
+            <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="md" color={mounted ? tokens.colors.text.brand : '#0A4E78'} mr="xs" />

            <Tooltip label="Kembali ke Website Desa" position="bottom" withArrow>
-              <ActionIcon onClick={() => router.push("/darmasaba")} color={colors["blue-button"]} radius="xl" size="lg" variant="gradient" gradient={{ from: colors["blue-button"], to: "#228be6" }}>
+              <ActionIcon
+                onClick={() => router.push("/darmasaba")}
+                color={mounted ? tokens.colors.primary : '#3B82F6'}
+                radius="xl"
+                size="lg"
+                variant="gradient"
+                gradient={mounted ? tokens.colors.gradient : { from: '#3B82F6', to: '#60A5FA' }}
+              >
                <Image src="/assets/images/darmasaba-icon.png" alt="Logo Darmasaba" w={20} h={20} radius="md" loading="lazy" style={{ minWidth: '20px', height: 'auto' }} />
              </ActionIcon>
            </Tooltip>

            <Tooltip label="Keluar" position="bottom" withArrow>
-              <ActionIcon onClick={handleLogout} color={colors["blue-button"]} radius="xl" size="lg" variant="gradient" gradient={{ from: colors["blue-button"], to: "#228be6" }} loading={isLoggingOut} disabled={isLoggingOut}>
+              <ActionIcon
+                onClick={handleLogout}
+                color={mounted ? tokens.colors.primary : '#3B82F6'}
+                radius="xl"
+                size="lg"
+                variant="gradient"
+                gradient={mounted ? tokens.colors.gradient : { from: '#3B82F6', to: '#60A5FA' }}
+                loading={isLoggingOut}
+                disabled={isLoggingOut}
+              >
                <IconLogout2 size={22} />
              </ActionIcon>
            </Tooltip>
@@ -229,47 +262,105 @@ export default function Layout({ children }: { children: React.ReactNode }) {
        </Group>
      </AppShellHeader>

-      <AppShellNavbar component={ScrollArea} style={{ background: "#ffffff", borderRight: `1px solid ${colors["blue-button"]}20` }} p={{ base: 'xs', sm: 'sm' }}>
+      {/*
+        SIDEBAR / NAVBAR
+        Spec: Background --bg-app, active state dengan accent bar
+      */}
+      <AppShellNavbar
+        component={ScrollArea}
+        style={{
+          background: mounted ? tokens.colors.bg.app : '#ffffff',
+          borderRight: `1px solid ${mounted ? tokens.colors.border.soft : '#e9ecef'}`,
+          transition: 'background 0.3s ease, border-color 0.3s ease',
+        }}
+        p={{ base: 'xs', sm: 'sm' }}
+      >
        <AppShell.Section p="sm">
          {currentNav.map((v, k) => {
            const isParentActive = segments.includes(_.lowerCase(v.name));
            return (
-              <NavLink 
-                key={k} 
-                defaultOpened={isParentActive} 
-                c={isParentActive ? colors["blue-button"] : "gray"} 
-                label={<Text fw={isParentActive ? 600 : 400} fz="sm">{v.name}</Text>} 
-                style={{ borderRadius: rem(10), marginBottom: rem(4), transition: "background 150ms ease" }} 
-                styles={{ root: { '&:hover': { backgroundColor: 'rgba(25, 113, 194, 0.05)' } } }} 
-                variant="light" 
+              <NavLink
+                key={k}
+                defaultOpened={isParentActive}
+                c={mounted && isParentActive ? tokens.colors.primary : mounted && isDark ? '#E5E7EB' : tokens.colors.text.secondary}
+                label={
+                  <Text
+                    fw={isParentActive ? 600 : 400}
+                    fz="sm"
+                    style={{
+                      color: mounted && isDark ? '#E5E7EB' : 'inherit',
+                      transition: 'color 150ms ease',
+                    }}
+                  >
+                    {v.name}
+                  </Text>
+                }
+                style={{
+                  borderRadius: rem(10),
+                  marginBottom: rem(4),
+                  transition: "background 150ms ease",
+                  ...(mounted && isParentActive && !isDark && {
+                    borderLeft: `3px solid ${tokens.colors.primary}`,
+                  }),
+                }}
+                styles={{
+                  root: {
+                    '&:hover': {
+                      backgroundColor: mounted && isDark ? '#1E293B' : tokens.colors.bg.hover,
+                    },
+                    ...(mounted && isParentActive && isDark && {
+                      backgroundColor: 'rgba(59,130,246,0.25)',
+                      borderLeft: `3px solid ${tokens.colors.primary}`,
+                    }),
+                  }
+                }}
+                variant="light"
                active={isParentActive}
              >
                {v.children.map((child, key) => {
                  const isChildActive = segments.includes(_.lowerCase(child.name));
                  return (
-                    <NavLink 
-                      key={key} 
-                      // ✅ PERBAIKAN: Gunakan onClick untuk handle navigasi dan close menu
+                    <NavLink
+                      key={key}
                      onClick={(e) => {
                        e.preventDefault();
                        handleNavClick(child.path);
                      }}
                      href={child.path}
-                      c={isChildActive ? colors["blue-button"] : "gray"} 
-                      label={<Text fw={isChildActive ? 600 : 400} fz="sm">{child.name}</Text>} 
-                      styles={{ 
-                        root: { 
-                          borderRadius: rem(8), 
-                          marginBottom: rem(2), 
-                          transition: 'background 150ms ease', 
-                          padding: '6px 12px', 
-                          '&:hover': { 
-                            backgroundColor: isChildActive ? 'rgba(25, 113, 194, 0.15)' : 'rgba(25, 113, 194, 0.05)' 
-                          }, 
-                          ...(isChildActive && { backgroundColor: 'rgba(25, 113, 194, 0.1)' }) 
-                        } 
-                      }} 
-                      active={isChildActive} 
+                      c={mounted && isChildActive ? tokens.colors.primary : mounted && isDark ? '#E5E7EB' : tokens.colors.text.secondary}
+                      label={
+                        <Text
+                          fw={isChildActive ? 600 : 400}
+                          fz="sm"
+                          style={{
+                            color: mounted && isDark ? '#E5E7EB' : 'inherit',
+                            transition: 'color 150ms ease',
+                          }}
+                        >
+                          {child.name}
+                        </Text>
+                      }
+                      styles={{
+                        root: {
+                          borderRadius: rem(8),
+                          marginBottom: rem(2),
+                          transition: 'background 150ms ease',
+                          padding: '6px 12px',
+                          '&:hover': {
+                            backgroundColor: mounted && isDark ? 'rgba(255, 255, 255, 0.05)' : tokens.colors.bg.hover,
+                          },
+                          ...(mounted && isChildActive && isDark && {
+                            backgroundColor: 'rgba(59,130,246,0.15)',
+                            borderLeft: `2px solid ${tokens.colors.primary}`,
+                          }),
+                          ...(mounted && isChildActive && !isDark && {
+                            backgroundColor: 'rgba(25, 113, 194, 0.1)',
+                            borderLeft: `2px solid ${tokens.colors.primary}`,
+                          }),
+                        }
+                      }}
+                      active={isChildActive}
+                      variant="subtle"
                      component={Link}
                    />
                  );
@@ -282,7 +373,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
        <AppShell.Section py="md">
          <Group justify="end" pr="sm">
            <Tooltip label={desktopOpened ? "Tutup Navigasi" : "Buka Navigasi"} position="top" withArrow>
-              <ActionIcon variant="light" radius="xl" size="lg" onClick={toggleDesktop} color={colors["blue-button"]}>
+              <ActionIcon variant="light" radius="xl" size="lg" onClick={toggleDesktop} color={mounted ? tokens.colors.primary : '#3B82F6'}>
                <IconChevronLeft />
              </ActionIcon>
            </Tooltip>
@@ -290,7 +381,17 @@ export default function Layout({ children }: { children: React.ReactNode }) {
        </AppShell.Section>
      </AppShellNavbar>

-      <AppShellMain style={{ background: "linear-gradient(180deg, #fdfdfd, #f6f9fc)", minHeight: "100vh" }}>
+      {/*
+        MAIN CONTENT
+        Spec: Background --bg-base
+      */}
+      <AppShellMain
+        style={{
+          background: mounted ? tokens.colors.bg.base : '#f6f9fc',
+          minHeight: "100vh",
+          transition: 'background 0.3s ease',
+        }}
+      >
        {children}
      </AppShellMain>
    </AppShell>
--- a/src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/del.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/del.ts
@@ -2,15 +2,49 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";

 export default async function kategoriBeritaDelete(context: Context) {
-    const id = context.params.id as string;
+    try {
+        const id = context.params?.id as string;

-    await prisma.kategoriBerita.delete({
-        where: { id },
-    });
+        if (!id) {
+            return Response.json({
+                success: false,
+                message: "ID tidak boleh kosong",
+            }, { status: 400 });
+        }

-    return {
-        status: 200,
-        success: true,
-        message: "Sukses Menghapus kategori berita",
-    };
+        // ✅ Cek apakah kategori masih digunakan oleh berita
+        const beritaCount = await prisma.berita.count({
+            where: {
+                kategoriBeritaId: id,
+                isActive: true,
+            },
+        });
+
+        if (beritaCount > 0) {
+            return Response.json({
+                success: false,
+                message: `Kategori tidak dapat dihapus karena masih digunakan oleh ${beritaCount} berita`,
+            }, { status: 400 });
+        }
+
+        // ✅ Soft delete (bukan hard delete)
+        await prisma.kategoriBerita.update({
+            where: { id },
+            data: {
+                deletedAt: new Date(),
+                isActive: false,
+            },
+        });
+
+        return {
+            success: true,
+            message: "Kategori berita berhasil dihapus",
+        };
+    } catch (error) {
+        console.error("Delete kategori error:", error);
+        return Response.json({
+            success: false,
+            message: "Gagal menghapus kategori: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }, { status: 500 });
+    }
 }
--- a/src/app/api/[[...slugs]]/_lib/desa/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/index.ts
@@ -2,7 +2,7 @@ import Elysia from "elysia";
 import Berita from "./berita";
 import Pengumuman from "./pengumuman";
 import ProfileDesa from "./profile/profile_desa";
-import PotensiDesa from "./potensi"; 
+import PotensiDesa from "./potensi";
 import GalleryFoto from "./gallery/foto";
 import GalleryVideo from "./gallery/video";
 import LayananDesa from "./layanan";
@@ -12,6 +12,7 @@ import KategoriBerita from "./berita/kategori-berita";
 import KategoriPengumuman from "./pengumuman/kategori-pengumuman";
 import MantanPerbekel from "./profile/profile-mantan-perbekel";
 import AjukanPermohonan from "./layanan/ajukan_permohonan";
+import Musik from "./musik";


 const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
@@ -28,6 +29,7 @@ const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
  .use(KategoriBerita)
  .use(KategoriPengumuman)
  .use(AjukanPermohonan)
-  
+  .use(Musik)
+

 export default Desa;
--- a/src/app/api/[[...slugs]]/_lib/desa/musik/create.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/musik/create.ts
@@ -0,0 +1,37 @@
+import { Context } from "elysia";
+import prisma from "@/lib/prisma";
+
+type FormCreate = {
+  judul: string;
+  artis: string;
+  deskripsi?: string;
+  durasi: string;
+  audioFileId: string;
+  coverImageId: string;
+  genre?: string;
+  tahunRilis?: number | null;
+};
+
+async function musikCreate(context: Context) {
+  const body = context.body as FormCreate;
+
+  await prisma.musikDesa.create({
+    data: {
+      judul: body.judul,
+      artis: body.artis,
+      deskripsi: body.deskripsi,
+      durasi: body.durasi,
+      audioFileId: body.audioFileId,
+      coverImageId: body.coverImageId,
+      genre: body.genre,
+      tahunRilis: body.tahunRilis,
+    },
+  });
+
+  return {
+    success: true,
+    message: "Sukses menambahkan musik",
+  };
+}
+
+export default musikCreate;
--- a/src/app/api/[[...slugs]]/_lib/desa/musik/del.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/musik/del.ts
@@ -0,0 +1,54 @@
+import { Context } from "elysia";
+import prisma from "@/lib/prisma";
+import path from "path";
+
+const musikDelete = async (context: Context) => {
+  const { id } = context.params as { id: string };
+
+  const musik = await prisma.musikDesa.findUnique({
+    where: { id },
+    include: { audioFile: true, coverImage: true },
+  });
+
+  if (!musik) return { status: 404, body: "Musik tidak ditemukan" };
+
+  // 1. HAPUS MUSIK DULU
+  await prisma.musikDesa.delete({ where: { id } });
+
+  // 2. HAPUS FILE AUDIO (jika ada)
+  if (musik.audioFile) {
+    try {
+      const fs = await import("fs/promises");
+      const filePath = path.join(musik.audioFile.path, musik.audioFile.name);
+      await fs.unlink(filePath);
+
+      await prisma.fileStorage.delete({
+        where: { id: musik.audioFile.id },
+      });
+    } catch (error) {
+      console.error("Error deleting audio file:", error);
+    }
+  }
+
+  // 3. HAPUS FILE COVER (jika ada)
+  if (musik.coverImage) {
+    try {
+      const fs = await import("fs/promises");
+      const filePath = path.join(musik.coverImage.path, musik.coverImage.name);
+      await fs.unlink(filePath);
+
+      await prisma.fileStorage.delete({
+        where: { id: musik.coverImage.id },
+      });
+    } catch (error) {
+      console.error("Error deleting cover image:", error);
+    }
+  }
+
+  return {
+    success: true,
+    message: "Musik dan file terkait berhasil dihapus",
+  };
+};
+
+export default musikDelete;
--- a/src/app/api/[[...slugs]]/_lib/desa/musik/find-by-id.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/musik/find-by-id.ts
@@ -0,0 +1,66 @@
+import prisma from "@/lib/prisma";
+
+export default async function findMusikById(request: Request) {
+  try {
+    const url = new URL(request.url);
+    const id = url.pathname.split("/").pop();
+
+    if (!id) {
+      return new Response(
+        JSON.stringify({
+          success: false,
+          message: "ID tidak valid",
+        }),
+        {
+          status: 400,
+          headers: { "Content-Type": "application/json" },
+        }
+      );
+    }
+
+    const data = await prisma.musikDesa.findUnique({
+      where: { id },
+      include: {
+        audioFile: true,
+        coverImage: true,
+      },
+    });
+
+    if (!data) {
+      return new Response(
+        JSON.stringify({
+          success: false,
+          message: "Musik tidak ditemukan",
+        }),
+        {
+          status: 404,
+          headers: { "Content-Type": "application/json" },
+        }
+      );
+    }
+
+    return new Response(
+      JSON.stringify({
+        success: true,
+        message: "Success fetch musik by ID",
+        data,
+      }),
+      {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  } catch (e) {
+    console.error("Error fetching musik by ID:", e);
+    return new Response(
+      JSON.stringify({
+        success: false,
+        message: "Gagal mengambil musik: " + (e instanceof Error ? e.message : 'Unknown error'),
+      }),
+      {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+}
--- a/src/app/api/[[...slugs]]/_lib/desa/musik/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/musik/find-many.ts
@@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/desa/musik/find-many.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function musikFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const genre = (context.query.genre as string) || '';
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Filter berdasarkan genre (jika ada)
+  if (genre) {
+    where.genre = {
+      equals: genre,
+      mode: 'insensitive'
+    };
+  }
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { judul: { contains: search, mode: 'insensitive' } },
+      { artis: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+      { genre: { contains: search, mode: 'insensitive' } }
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.musikDesa.findMany({
+        where,
+        include: {
+          audioFile: true,
+          coverImage: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.musikDesa.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil data musik dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data musik",
+    };
+  }
+}
+
+export default musikFindMany;
--- a/src/app/api/[[...slugs]]/_lib/desa/musik/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/musik/index.ts
@@ -0,0 +1,47 @@
+import Elysia, { t } from "elysia";
+import musikFindMany from "./find-many";
+import musikCreate from "./create";
+import musikDelete from "./del";
+import musikUpdate from "./updt";
+import findMusikById from "./find-by-id";
+
+const Musik = new Elysia({ prefix: "/musik", tags: ["Desa/Musik"] })
+  .get("/find-many", musikFindMany)
+  .get("/:id", async (context) => {
+    const response = await findMusikById(new Request(context.request));
+    return response;
+  })
+  .post("/create", musikCreate, {
+    body: t.Object({
+      judul: t.String(),
+      artis: t.String(),
+      deskripsi: t.Optional(t.String()),
+      durasi: t.String(),
+      audioFileId: t.String(),
+      coverImageId: t.String(),
+      genre: t.Optional(t.String()),
+      tahunRilis: t.Optional(t.Number()),
+    }),
+  })
+  .delete("/delete/:id", musikDelete)
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await musikUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        judul: t.String(),
+        artis: t.String(),
+        deskripsi: t.Optional(t.String()),
+        durasi: t.String(),
+        audioFileId: t.String(),
+        coverImageId: t.String(),
+        genre: t.Optional(t.String()),
+        tahunRilis: t.Optional(t.Number()),
+      }),
+    }
+  );
+
+export default Musik;
--- a/src/app/api/[[...slugs]]/_lib/desa/musik/updt.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/musik/updt.ts
@@ -0,0 +1,65 @@
+import { Context } from "elysia";
+import prisma from "@/lib/prisma";
+
+type FormUpdate = {
+  judul: string;
+  artis: string;
+  deskripsi?: string;
+  durasi: string;
+  audioFileId: string;
+  coverImageId: string;
+  genre?: string;
+  tahunRilis?: number | null;
+};
+
+async function musikUpdate(context: Context) {
+  const { id } = context.params as { id: string };
+  const body = context.body as FormUpdate;
+
+  try {
+    const existing = await prisma.musikDesa.findUnique({
+      where: { id },
+    });
+
+    if (!existing) {
+      return {
+        status: 404,
+        body: {
+          success: false,
+          message: "Musik tidak ditemukan",
+        },
+      };
+    }
+
+    const updated = await prisma.musikDesa.update({
+      where: { id },
+      data: {
+        judul: body.judul,
+        artis: body.artis,
+        deskripsi: body.deskripsi,
+        durasi: body.durasi,
+        audioFileId: body.audioFileId,
+        coverImageId: body.coverImageId,
+        genre: body.genre,
+        tahunRilis: body.tahunRilis,
+      },
+    });
+
+    return {
+      success: true,
+      message: "Musik berhasil diupdate",
+      data: updated,
+    };
+  } catch (error) {
+    console.error("Error updating musik:", error);
+    return {
+      status: 500,
+      body: {
+        success: false,
+        message: "Terjadi kesalahan saat mengupdate musik",
+      },
+    };
+  }
+}
+
+export default musikUpdate;
--- a/src/app/api/[[...slugs]]/_lib/desa/potensi/find-unique.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/potensi/find-unique.ts
@@ -21,8 +21,12 @@ export default async function findUnique(
            }, { status: 400 });
        }

-        const data = await prisma.potensiDesa.findUnique({
-            where: { id },
+        // ✅ Filter by isActive and deletedAt
+        const data = await prisma.potensiDesa.findFirst({
+            where: {
+                id,
+                isActive: true,
+            },
            include: {
                image: true,
                kategori: true
@@ -48,5 +52,5 @@ export default async function findUnique(
            message: "Gagal mengambil potensi desa: " + (error instanceof Error ? error.message : 'Unknown error'),
        }, { status: 500 });
    }
-    
+
 }
--- a/src/app/api/[[...slugs]]/_lib/desa/potensi/kategori-potensi/del.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/potensi/kategori-potensi/del.ts
@@ -2,15 +2,49 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";

 export default async function kategoriPotensiDelete(context: Context) {
-    const id = context.params.id as string;
+    try {
+        const id = context.params?.id as string;

-    await prisma.kategoriPotensi.delete({
-        where: { id },
-    });
+        if (!id) {
+            return Response.json({
+                success: false,
+                message: "ID tidak boleh kosong",
+            }, { status: 400 });
+        }

-    return {
-        status: 200,
-        success: true,
-        message: "Sukses Menghapus kategori potensi",
-    };
+        // ✅ Cek apakah kategori masih digunakan oleh potensi desa
+        const existingPotensi = await prisma.potensiDesa.findFirst({
+            where: {
+                kategoriId: id,
+                isActive: true,
+            },
+        });
+
+        if (existingPotensi) {
+            return Response.json({
+                success: false,
+                message: "Kategori masih digunakan oleh potensi desa. Tidak dapat dihapus.",
+            }, { status: 400 });
+        }
+
+        // Soft delete
+        await prisma.kategoriPotensi.update({
+            where: { id },
+            data: {
+                deletedAt: new Date(),
+                isActive: false,
+            },
+        });
+
+        return {
+            success: true,
+            message: "Kategori potensi berhasil dihapus",
+        };
+    } catch (error) {
+        console.error("Delete kategori error:", error);
+        return Response.json({
+            success: false,
+            message: "Gagal menghapus kategori: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }, { status: 500 });
+    }
 }
--- a/src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/find-first.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/find-first.ts
@@ -0,0 +1,38 @@
+import prisma from "@/lib/prisma";
+import { requireAuth } from "@/lib/api-auth";
+
+export default async function sejarahDesaFindFirst() {
+    // ✅ Authentication check
+    const authResult = await requireAuth();
+    if (!authResult.authenticated) {
+        return authResult.response;
+    }
+
+    try {
+      // Get the first active record
+      const data = await prisma.sejarahDesa.findFirst({
+        where: {
+          isActive: true,
+        },
+        orderBy: { createdAt: 'asc' } // Get the oldest one first
+      });
+
+      if (!data) {
+        return Response.json({
+          success: false,
+          message: "Data tidak ditemukan",
+        }, {status: 404})
+      }
+
+      return Response.json({
+        success: true,
+        data,
+      }, {status: 200})
+    } catch (error) {
+      console.error("Gagal mengambil data sejarah desa:", error)
+      return Response.json({
+        success: false,
+        message: "Terjadi kesalahan saat mengambil data",
+      }, {status: 500})
+    }
+}
--- a/src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/index.ts
@@ -1,11 +1,16 @@
 import Elysia, { t } from "elysia";
 import sejarahDesaFindById from "./find-by-id";
 import sejarahDesaUpdate from "./update";
+import sejarahDesaFindFirst from "./find-first";

 const SejarahDesa = new Elysia({
  prefix: "/sejarah",
  tags: ["Desa/Profile"],
 })
+  .get("/first", async () => {
+    const response = await sejarahDesaFindFirst();
+    return response;
+  })
  .get("/:id", async (context) => {
    const response = await sejarahDesaFindById(new Request(context.request));
    return response;
--- a/src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/update.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/update.ts
@@ -1,7 +1,14 @@
 import prisma from "@/lib/prisma";
+import { requireAuth } from "@/lib/api-auth";
 import { Context } from "elysia";

 export default async function sejarahDesaUpdate(context: Context) {
+    // ✅ Authentication check
+    const authResult = await requireAuth();
+    if (!authResult.authenticated) {
+        return authResult.response;
+    }
+
    try {
        const id = context.params?.id as string;
        const body = await context.body as {
--- a/src/app/api/[[...slugs]]/route.ts
+++ b/src/app/api/[[...slugs]]/route.ts
@@ -46,11 +46,17 @@ fs.mkdir(UPLOAD_DIR_IMAGE, {
 }).catch(() => {});

 const corsConfig = {
-  origin: "*",
-  methods: ["GET", "POST", "PATCH", "DELETE", "PUT"] as HTTPMethod[],
-  allowedHeaders: "*",
+  origin: [
+    "http://localhost:3000",
+    "http://localhost:3001",
+    "https://cld-dkr-desa-darmasaba-stg.wibudev.com",
+    "https://cld-dkr-staging-desa-darmasaba.wibudev.com",
+    "*", // Allow all origins in development
+  ],
+  methods: ["GET", "POST", "PATCH", "DELETE", "PUT", "OPTIONS"] as HTTPMethod[],
+  allowedHeaders: ["Content-Type", "Authorization", "*"],
  exposedHeaders: "*",
-  maxAge: 5,
+  maxAge: 86400, // 24 hours
  credentials: true,
 };

--- a/src/app/api/auth/login/route.ts
+++ b/src/app/api/auth/login/route.ts
@@ -33,37 +33,34 @@ export async function POST(req: Request) {
      const codeOtp = randomOTP();
      const otpNumber = Number(codeOtp);

-      // ✅ PERBAIKAN: Gunakan format pesan yang lebih sederhana
-      // Hapus karakter khusus yang bisa bikin masalah
-      // const waMessage = `Website Desa Darmasaba\nKode verifikasi Anda ${codeOtp}`;
+      const waMessage = `Website Desa Darmasaba - Kode ini bersifat RAHASIA dan JANGAN DI BAGIKAN KEPADA SIAPAPUN, termasuk anggota ataupun Admin lainnya.\n\n>> Kode OTP anda: ${codeOtp}.`;
+      const waUrl = `https://wa.wibudev.com/code?nom=${encodeURIComponent(nomor)}&text=${encodeURIComponent(waMessage)}`;
      
-      // // ✅ OPSI 1: Tanpa encoding (coba dulu ini)
-      // const waUrl = `https://wa.wibudev.com/code?nom=${nomor}&text=${waMessage}`;
+      console.log("🔍 Debug WA URL:", waUrl); 
      
-      // ✅ OPSI 2: Dengan encoding (kalau opsi 1 gagal)
-      // const waUrl = `https://wa.wibudev.com/code?nom=${nomor}&text=${encodeURIComponent(waMessage)}`;
-      
-      // ✅ OPSI 3: Encoding manual untuk URL-safe (alternatif terakhir)
-      // const encodedMessage = waMessage.replace(/\n/g, '%0A').replace(/ /g, '%20');
-      // const waUrl = `https://wa.wibudev.com/code?nom=${nomor}&text=${encodedMessage}`;
+      try {
+        const res = await fetch(waUrl);
+        const sendWa = await res.json();
+        console.log("📱 WA Response:", sendWa);

-      // console.log("🔍 Debug WA URL:", waUrl); // Untuk debugging
-      
-      // const res = await fetch(waUrl);
-      // const sendWa = await res.json();
-
-      // console.log("📱 WA Response:", sendWa); // Debug response
-
-      // if (sendWa.status !== "success") {
-      //   return NextResponse.json(
-      //     { 
-      //       success: false, 
-      //       message: "Gagal mengirim OTP via WhatsApp",
-      //       debug: sendWa // Tampilkan error detail
-      //     },
-      //     { status: 400 }
-      //   );
-      // }
+        if (sendWa.status !== "success") {
+          console.error("❌ WA Service Error:", sendWa);
+          return NextResponse.json(
+            { 
+              success: false, 
+              message: "Gagal mengirim OTP via WhatsApp",
+              debug: sendWa 
+            },
+            { status: 400 }
+          );
+        }
+      } catch (waError) {
+        console.error("❌ Fetch WA Error:", waError);
+        return NextResponse.json(
+          { success: false, message: "Terjadi kesalahan saat mengirim WA" },
+          { status: 500 }
+        );
+      }

      const createOtpId = await prisma.kodeOtp.create({
        data: { nomor, otp: otpNumber, isActive: true },
--- a/src/app/api/auth/resend/route.ts
+++ b/src/app/api/auth/resend/route.ts
@@ -19,7 +19,7 @@ export async function POST(req: Request) {
    const otpNumber = Number(codeOtp);

    // Kirim OTP via WhatsApp
-    const waMessage = `Kode verifikasi Anda: ${codeOtp}`;
+    const waMessage = `Website Desa Darmasaba - Kode ini bersifat RAHASIA dan JANGAN DI BAGIKAN KEPADA SIAPAPUN, termasuk anggota ataupun Admin lainnya.\n\n>> Kode OTP anda: ${codeOtp}.`;
    const waUrl = `https://wa.wibudev.com/code?nom=${encodeURIComponent(nomor)}&text=${encodeURIComponent(waMessage)}`;
    const waRes = await fetch(waUrl);
    const waData = await waRes.json();
--- a/src/app/darmasaba/(pages)/inovasi/ajukan-ide-inovatif/page.tsx
+++ b/src/app/darmasaba/(pages)/inovasi/ajukan-ide-inovatif/page.tsx
@@ -12,6 +12,25 @@ function Page() {
  const [opened, { open, close }] = useDisclosure(false);
  const ideInovatif = useProxy(ajukanIdeInovatifState);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      ideInovatif.create.form.name?.trim() !== '' &&
+      ideInovatif.create.form.alamat?.trim() !== '' &&
+      ideInovatif.create.form.namaIde?.trim() !== '' &&
+      !isHtmlEmpty(ideInovatif.create.form.deskripsi) &&
+      ideInovatif.create.form.masalah?.trim() !== '' &&
+      ideInovatif.create.form.benefit?.trim() !== ''
+    );
+  };
+
  const resetForm = () => {
    ideInovatif.create.form = {
      name: "",
@@ -168,7 +187,11 @@ function Page() {
                ideInovatif.create.form.benefit = val.target.value;
              }}
            />
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>
+            <Button 
+              bg={colors['blue-button']} 
+              onClick={handleSubmit}
+              disabled={!isFormValid()}
+            >
              Simpan
            </Button>
          </Stack>
--- a/src/app/darmasaba/(pages)/inovasi/layanan-online-desa/administrasi-online/page.tsx
+++ b/src/app/darmasaba/(pages)/inovasi/layanan-online-desa/administrasi-online/page.tsx
@@ -24,6 +24,16 @@ function AdministrasiOnline() {
  const [opened, { open, close }] = useDisclosure(false);
  const state = useProxy(layananonlineDesa);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      state.administrasiOnline.create.form.name?.trim() !== '' &&
+      state.administrasiOnline.create.form.alamat?.trim() !== '' &&
+      state.administrasiOnline.create.form.nomorTelepon?.trim() !== '' &&
+      state.administrasiOnline.create.form.jenisLayananId?.trim() !== ''
+    );
+  };
+
  useEffect(() => {
    // ✅ Panggil load data jenis layanan dari backend
    if (!state.jenisLayanan.findMany.data) {
@@ -104,7 +114,11 @@ function AdministrasiOnline() {
              }
            />

-            <Button bg={colors['blue-button']} onClick={handleSubmit}>
+            <Button 
+              bg={colors['blue-button']} 
+              onClick={handleSubmit}
+              disabled={!isFormValid()}
+            >
              Simpan
            </Button>
          </Stack>
--- a/src/app/darmasaba/(pages)/inovasi/layanan-online-desa/pengaduan-masyarakat/page.tsx
+++ b/src/app/darmasaba/(pages)/inovasi/layanan-online-desa/pengaduan-masyarakat/page.tsx
@@ -19,6 +19,28 @@ function PengaduanMasyarakat() {
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      state.pengaduanMasyarakat.create.form.name?.trim() !== '' &&
+      state.pengaduanMasyarakat.create.form.email?.trim() !== '' &&
+      state.pengaduanMasyarakat.create.form.nomorTelepon?.trim() !== '' &&
+      state.pengaduanMasyarakat.create.form.nik?.trim() !== '' &&
+      state.pengaduanMasyarakat.create.form.judulPengaduan?.trim() !== '' &&
+      state.pengaduanMasyarakat.create.form.lokasiKejadian?.trim() !== '' &&
+      !isHtmlEmpty(state.pengaduanMasyarakat.create.form.deskripsiPengaduan) &&
+      state.pengaduanMasyarakat.create.form.jenisPengaduanId?.trim() !== '' &&
+      file !== null
+    );
+  };
+
  useEffect(() => {
    // ✅ Panggil load data jenis layanan dari backend
    if (!state.jenisPengaduan.findMany.data) {
@@ -207,7 +229,11 @@ function PengaduanMasyarakat() {
              </Box>
            </Box>

-            <Button bg={colors['blue-button']} onClick={handleSubmit}>
+            <Button 
+              bg={colors['blue-button']} 
+              onClick={handleSubmit}
+              disabled={!isFormValid()}
+            >
              Simpan
            </Button>
          </Stack>
--- a/src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/page.tsx
@@ -37,6 +37,24 @@ function Page() {
    };
  };

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      beasiswaDesa.create.form.namaLengkap?.trim() !== '' &&
+      beasiswaDesa.create.form.nis?.trim() !== '' &&
+      beasiswaDesa.create.form.kelas?.trim() !== '' &&
+      beasiswaDesa.create.form.jenisKelamin?.trim() !== '' &&
+      beasiswaDesa.create.form.alamatDomisili?.trim() !== '' &&
+      beasiswaDesa.create.form.tempatLahir?.trim() !== '' &&
+      beasiswaDesa.create.form.tanggalLahir?.trim() !== '' &&
+      beasiswaDesa.create.form.namaOrtu?.trim() !== '' &&
+      beasiswaDesa.create.form.nik?.trim() !== '' &&
+      beasiswaDesa.create.form.pekerjaanOrtu?.trim() !== '' &&
+      beasiswaDesa.create.form.penghasilan?.trim() !== '' &&
+      beasiswaDesa.create.form.noHp?.trim() !== ''
+    );
+  };
+
  const { data, page, totalPages, loading, load } = ungggulanDesa.findMany;

  useShallowEffect(() => {
@@ -238,7 +256,7 @@ function Page() {
              onChange={(val) => { beasiswaDesa.create.form.noHp = val.target.value }} />
            <Group justify="flex-end" mt="md">
              <Button variant="default" radius="xl" onClick={close}>Batal</Button>
-              <Button radius="xl" bg={colors['blue-button']} onClick={handleSubmit}>Kirim</Button>
+              <Button radius="xl" bg={colors['blue-button']} onClick={handleSubmit} disabled={!isFormValid()}>Kirim</Button>
            </Group>
          </Stack>
        </Paper>
--- a/src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/pelajari-lebih-lanjut/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/pelajari-lebih-lanjut/page.tsx
@@ -46,6 +46,24 @@ export default function BeasiswaPage() {
    };
  };

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      beasiswaDesa.create.form.namaLengkap?.trim() !== '' &&
+      beasiswaDesa.create.form.nis?.trim() !== '' &&
+      beasiswaDesa.create.form.kelas?.trim() !== '' &&
+      beasiswaDesa.create.form.jenisKelamin?.trim() !== '' &&
+      beasiswaDesa.create.form.alamatDomisili?.trim() !== '' &&
+      beasiswaDesa.create.form.tempatLahir?.trim() !== '' &&
+      beasiswaDesa.create.form.tanggalLahir?.trim() !== '' &&
+      beasiswaDesa.create.form.namaOrtu?.trim() !== '' &&
+      beasiswaDesa.create.form.nik?.trim() !== '' &&
+      beasiswaDesa.create.form.pekerjaanOrtu?.trim() !== '' &&
+      beasiswaDesa.create.form.penghasilan?.trim() !== '' &&
+      beasiswaDesa.create.form.noHp?.trim() !== ''
+    );
+  };
+
  const handleSubmit = async () => {
    await beasiswaDesa.create.create();
    resetForm();
@@ -391,6 +409,7 @@ export default function BeasiswaPage() {
                radius="xl"
                bg={colors['blue-button']}
                onClick={handleSubmit}
+                disabled={!isFormValid()}
                style={{ fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 }}
              >
                Kirim
--- a/src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/_lib/modalPeminjaman.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/_lib/modalPeminjaman.tsx
@@ -42,6 +42,24 @@ export default function ModalPeminjaman({

  const BATAS_HARI_PINJAM = 4;

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      snap.create.form.nama?.trim() !== '' &&
+      snap.create.form.noTelp?.trim() !== '' &&
+      snap.create.form.alamat?.trim() !== '' &&
+      snap.create.form.tanggalPinjam?.trim() !== '' &&
+      !isHtmlEmpty(snap.create.form.catatan)
+    );
+  };
+
  // Reset form setiap modal dibuka
  useEffect(() => {
    if (opened && buku) {
@@ -222,13 +240,13 @@ export default function ModalPeminjaman({
          <Button
            onClick={handleSubmit}
            loading={snap.create.loading}
-            disabled={
-              !snap.create.form.nama || !snap.create.form.tanggalPinjam
-            }
+            disabled={!isFormValid() || snap.create.loading}
            rightSection={<IconArrowRight size={16} />}
            radius="xl"
            style={{
-              background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+              background: !isFormValid() || snap.create.loading
+                ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
              color: '#fff',
              boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
            }}
--- a/src/app/darmasaba/_com/NavbarMainMenu.tsx
+++ b/src/app/darmasaba/_com/NavbarMainMenu.tsx
@@ -13,7 +13,7 @@ import { NavbarSubMenu } from "./NavbarSubMenu"
 import { authStore } from "@/store/authStore";

 // contoh state auth (dummy aja dulu, bisa diganti sesuai sistem auth kamu)
-const isAdmin = authStore.user?.roleId === 0 || authStore.user?.roleId === 1 || authStore.user?.roleId === 2 || authStore.user?.roleId === 3 || authStore.user?.roleId === 4; 
+const isAdmin = authStore.user?.roleId === 0 || authStore.user?.roleId === 1 || authStore.user?.roleId === 2 || authStore.user?.roleId === 3 || authStore.user?.roleId === 4;

 export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
  const { item, isSearch } = useSnapshot(stateNav)
@@ -46,11 +46,11 @@ export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
          </Tooltip>

          {listNavbar.map((item, k) => (
-            <MenuItemCom 
-            key={k} 
-            item={item}
-            isActive={item.href && pathname.startsWith(item.href) || 
-              (item.children?.some(child => child.href && pathname.startsWith(child.href)))}
+            <MenuItemCom
+              key={k}
+              item={item}
+              isActive={item.href && pathname.startsWith(item.href) ||
+                (item.children?.some(child => child.href && pathname.startsWith(child.href)))}
            />
          ))}

@@ -73,7 +73,7 @@ export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
            <Tooltip label="Kembali ke Admin" position="bottom" withArrow>
              <ActionIcon
                onClick={() => {
-                  next.push("/admin/landing-page/profil/program-inovasi")
+                  next.push("/admin/landing-page/profile/program-inovasi")
                }}
                color={colors["blue-button"]}
                radius="xl"
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
nico	55ea3c473a	add menu musik	2026-02-26 21:32:33 +08:00
nico	a152eaf984	Fix Login KodeOtp WA	2026-02-26 14:12:54 +08:00
nico	223b85a714	Fix CORS config for staging environment Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-02-25 22:55:36 +08:00
nico	f1729151b3	Fix themeTokens light mode status colors Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-02-25 21:24:39 +08:00
nico	8e8c133eea	Fix eror build	2026-02-25 21:19:56 +08:00
nico	1e7acac193	Fix eror build	2026-02-25 21:18:26 +08:00
nico	42dcbcfb22	fix-admin-menu-desa-berita	2026-02-25 16:25:59 +08:00
nico	22de1aa1f3	fix-admin-menu-desa-potensi	2026-02-25 15:41:01 +08:00
nico	b1d28a8322	fix-admin-menu-desa-profile	2026-02-25 15:25:51 +08:00
nico	b86a3a85c3	fix: force default light mode for public pages and admin - Set defaultColorScheme='light' in root MantineProvider - Change darkModeStore default from system preference to false (light) - Add MantineProvider with light theme to darmasaba/layout.tsx - Remove dark mode dependency from ModuleView component - Prevent system color scheme from affecting initial page load This ensures consistent light mode on first visit for both public pages and admin panel, regardless of OS settings. Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-02-25 10:45:27 +08:00
nico	fd63bb0fd4	feat: implement dark mode support & fix Prisma schema validation - Add dark mode toggle component in admin header - Integrate dark mode store across admin layout and components - Add unified typography and surface components for consistent theming - Implement smooth transitions for dark/light mode switching - Fix Prisma schema: remove @default(null) from DateTime? fields - Update form validation for inovasi, lingkungan, and pendidikan modules - Add form validation and improve UX across multiple admin pages Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-02-25 10:41:48 +08:00
nico	f2c9a922a6	fix(profil-module): QC improvements based on QC-PROFIL-MODULE.md - Fix fetch method inconsistency (convert to ApiFetch) - programInovasi: findUnique, delete, update methods - mediaSosial: findUnique, delete, update methods - Add loading state to findUnique operations - Fix iconUrl validation (make optional instead of required) - Add DOMPurify for HTML sanitization (XSS protection) - program-inovasi page.tsx (list & detail) - Remove console.log in production (use dev-only logging) - Install dompurify and @types/dompurify Security: Prevent XSS attacks by sanitizing HTML content Consistency: Use ApiFetch for all API operations UX: Proper loading states for better user feedback Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-02-23 15:11:00 +08:00
nico	f0558aa0d0	feat: implement dark mode support for admin layout and components - Add dark mode toggle component in admin header - Integrate dark mode store across admin layout and child components - Update header, judulList, and judulListTab components with theme tokens - Add unified typography components for consistent theming - Implement smooth transitions for dark/light mode switching - Add mounted state to prevent hydration mismatches - Style navbar with dark mode aware colors and hover states - Update button styles with gradient effects for both themes Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-02-23 10:48:00 +08:00
nico	8132609ccb	feat: add form validation for inovasi, lingkungan, and pendidikan modules - Added isFormValid() and isHtmlEmpty() helper functions for form validation - Disabled submit buttons when required fields are empty across multiple admin and public pages - Applied consistent validation pattern for creating and editing records - Commented out WhatsApp OTP sending in login route for debugging/testing - Fixed path in NavbarMainMenu tooltip action	2026-02-20 15:08:41 +08:00