Fix Responsive

Reviewed-on: #78

.gitignore

@@ -31,6 +31,9 @@ yarn-error.log*
 # env 
 .env*
 
+# QC
+QC
+
 # vercel
 .vercel
 

AUDIT_REPORT.md

@@ -0,0 +1,73 @@
+# Engineering Audit Report: Desa Darmasaba
+**Status:** Production Readiness Review (Critical)
+**Auditor:** Staff Technical Architect
+
+---
+
+## 📊 Executive Summary & Scores
+
+| Category | Score | Status |
+| :--- | :---: | :--- |
+| **Project Architecture** | 3/10 | 🔴 Critical Failure |
+| **Code Quality** | 4/10 | 🟠 Poor |
+| **Performance** | 5/10 | 🟡 Mediocre |
+| **Security** | 5/10 | 🟠 Risk Detected |
+| **Production Readiness** | 2/10 | 🔴 Not Ready |
+
+---
+
+## 🏗️ 1. Project Architecture
+The project suffers from a **"Frankenstein Architecture"**. It attempts to run a full Elysia.js instance inside a Next.js Catch-All route.
+- **Fractured Backend:** Logic is split between standard Next.js routes (`/api/auth`) and embedded Elysia modules.
+- **Stateful Dependency:** Reliance on local filesystem (`WIBU_UPLOAD_DIR`) makes the application impossible to deploy on modern serverless platforms like Vercel.
+- **Polluted Namespace:** Routing tree contains "test/coba" folders (`src/app/coba`, `src/app/percobaan`) that would be accessible in production.
+
+## ⚛️ 2. Frontend Engineering (React / Next.js)
+- **State Management Chaos:** Simultaneous use of `Valtio`, `Jotai`, `React Context`, and `localStorage`.
+- **Tight Coupling:** Public pages (`/darmasaba`) import state directly from Admin internal states (`/admin/(dashboard)/_state`).
+- **Heavy Client-Side Logic:** Logic that belongs in Server Actions or Hooks is embedded in presentational components (e.g., `Footer.tsx`).
+
+## 📡 3. Backend / API Design
+- **Framework Overhead:** Running Elysia inside Next.js adds unnecessary cold-boot overhead and complexity.
+- **Weak Validation:** Widespread use of `as Type` casting in API handlers instead of runtime validation (Zod/Schema).
+- **Service Integration:** OTP codes are sent via external `GET` requests with sensitive data in the query string—a major logging risk.
+
+## 🗄️ 4. Database & Data Modeling (Prisma)
+- **Schema Over-Normalization:** ~2000 lines of schema. Every minor content type (e.g., `LambangDesa`) is a separate table instead of a unified CMS model.
+- **Polymorphic Monolith:** `FileStorage` is a "god table" with optional relations to ~40 other tables, creating a massive bottleneck and data integrity risk.
+- **Connection Mismanagement:** Manual `prisma.$disconnect()` in API routes kills connection pooling performance.
+
+## 🚀 5. Performance Engineering
+- **Bypassing Optimization:** Custom `/api/utils/img` endpoint bypasses `next/image` optimization, serving uncompressed assets.
+- **Aggressive Polling:** Client-side 30s polling for notifications is battery-draining and inefficient compared to SSE or SWR.
+
+## 🔒 6. Security Audit
+- **Insecure OTP Delivery:** Credentials passed as URL parameters to the WhatsApp service.
+- **File Upload Risks:** Potential for Arbitrary File Upload due to direct local filesystem writes without rigorous sanitization.
+
+## 🧹 7. Code Quality
+- **Inconsistency:** Mixed English/Indonesian naming (e.g., `nomor` vs `createdAt`).
+- **Artifacts:** Root directory is littered with scratch files: `xcoba.ts`, `xx.ts`, `test.txt`.
+
+---
+
+## 🚩 Top 10 Critical Problems
+1. **Architectural Fracture:** Embedding Elysia inside Next.js creates a "split-brain" system.
+2. **Serverless Incompatibility:** Dependency on local disk storage for uploads.
+3. **Database Bloat:** Over-complicated schema with a fragile `FileStorage` monolith.
+4. **State Fragmentation:** Mixed usage of Jotai and Valtio without a clear standard.
+5. **Credential Leakage:** OTP codes sent via GET query parameters.
+6. **Poor Cleanup:** Trial/Test folders and files committed to the production source.
+7. **Asset Performance:** Bypassing Next.js image optimization.
+8. **Coupling:** High dependency between public UI and internal Admin state.
+9. **Type Safety:** Manual casting in APIs instead of runtime validation.
+10. **Connection Pooling:** Inefficient Prisma connection management.
+
+---
+
+## 🛠️ Tech Lead Refactoring Priorities
+1. **Unify the API:** Decommission the Elysia wrapper. Port all logic to standard Next.js Route Handlers with Zod validation.
+2. **Stateless Storage:** Implement an S3-compatible adapter for all file uploads. Remove `fs` usage.
+3. **Schema Consolidation:** Refactor the schema to use generic content models where possible.
+4. **Standardize State:** Choose one global state manager and migrate all components.
+5. **Project Sanitization:** Delete all `coba`, `percobaan`, and scratch files (`xcoba.ts`, etc.).

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.

next.config.ts

@@ -19,7 +19,6 @@ const nextConfig: NextConfig = {
       },
     ];
   },
-
 };
 
 export default nextConfig;

package.json

@@ -33,7 +33,7 @@
     "@mantine/modals": "^8.3.6",
     "@mantine/tiptap": "^7.17.4",
     "@paljs/types": "^8.1.0",
-    "@prisma/client": "^6.3.1",
+    "@prisma/client": "6.3.1",
     "@tabler/icons-react": "^3.30.0",
     "@tiptap/extension-highlight": "^2.11.7",
     "@tiptap/extension-link": "^2.11.7",
@@ -62,6 +62,7 @@
     "colors": "^1.4.0",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
+    "dompurify": "^3.3.1",
     "dotenv": "^17.2.3",
     "elysia": "^1.3.5",
     "embla-carousel": "^8.6.0",
@@ -88,7 +89,7 @@
     "p-limit": "^6.2.0",
     "primeicons": "^7.0.0",
     "primereact": "^10.9.6",
-    "prisma": "^6.3.1",
+    "prisma": "6.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-exif-orientation-img": "^0.1.5",
@@ -112,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",

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");

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;

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"

prisma/schema.prisma

@@ -60,8 +60,9 @@ model FileStorage {
   deletedAt                      DateTime?
   isActive                       Boolean                    @default(true)
   link                           String
-  category                       String // "image" / "document" / "other"
-  Berita                         Berita[]
+  category                       String // "image" / "document" / "audio" / "other"
+  Berita                         Berita[]                 @relation("BeritaFeaturedImage")
+  BeritaImages                   Berita[]                 @relation("BeritaImages")
   PotensiDesa                    PotensiDesa[]
   Posyandu                       Posyandu[]
   StrukturPPID                   StrukturPPID[]
@@ -102,6 +103,9 @@ model FileStorage {
 
   ArtikelKesehatan ArtikelKesehatan[]
   StrukturBumDes   StrukturBumDes[]
+  
+  MusikDesaAudio   MusikDesa[] @relation("MusikAudioFile")
+  MusikDesaCover   MusikDesa[] @relation("MusikCoverImage")
 }
 
 //========================================= MENU LANDING PAGE ========================================= //
@@ -205,16 +209,22 @@ model APBDesItem {
   kode       String // contoh: "4", "4.1", "4.1.2"
   uraian     String // nama item, contoh: "Pendapatan Asli Desa", "Hasil Usaha"
   anggaran   Float // dalam satuan Rupiah (bisa DECIMAL di DB, tapi Float umum di TS/JS)
-  realisasi  Float
-  selisih    Float // realisasi - anggaran
-  persentase Float
-  tipe       String? // (realisasi / anggaran) * 100
+  tipe       String? // "pendapatan" | "belanja" | "pembiayaan" | null
   level      Int // 1 = kelompok utama, 2 = sub-kelompok, 3 = detail
   parentId   String? // untuk relasi hierarki
   parent     APBDesItem?  @relation("APBDesItemParent", fields: [parentId], references: [id])
   children   APBDesItem[] @relation("APBDesItemParent")
   apbdesId   String
   apbdes     APBDes       @relation(fields: [apbdesId], references: [id])
+  
+  // Field kalkulasi (auto-calculated dari realisasi items)
+  totalRealisasi Float      @default(0) // Sum dari semua realisasi
+  selisih        Float      @default(0) // totalRealisasi - anggaran
+  persentase     Float      @default(0) // (totalRealisasi / anggaran) * 100
+  
+  // Relasi ke realisasi items
+  realisasiItems RealisasiItem[]
+  
   createdAt  DateTime     @default(now())
   updatedAt  DateTime     @updatedAt
   deletedAt  DateTime?
@@ -225,6 +235,28 @@ model APBDesItem {
   @@index([apbdesId])
 }
 
+// Model baru untuk multiple realisasi per item
+model RealisasiItem {
+  id           String     @id @default(cuid())
+  kode         String?     // Kode realisasi, mirip dengan APBDesItem
+  apbdesItemId String
+  apbdesItem   APBDesItem @relation(fields: [apbdesItemId], references: [id], onDelete: Cascade)
+
+  jumlah       Float      // Jumlah realisasi dalam Rupiah
+  tanggal      DateTime   @db.Date // Tanggal realisasi
+  keterangan   String?    @db.Text // Keterangan tambahan (opsional)
+  buktiFileId  String?    // FileStorage ID untuk bukti/foto (opsional)
+
+  createdAt    DateTime   @default(now())
+  updatedAt    DateTime   @updatedAt
+  deletedAt    DateTime?
+  isActive     Boolean    @default(true)
+
+  @@index([kode])
+  @@index([apbdesItemId])
+  @@index([tanggal])
+}
+
 //========================================= PRESTASI DESA ========================================= //
 model PrestasiDesa {
   id         String               @id @default(cuid())
@@ -236,7 +268,7 @@ model PrestasiDesa {
   imageId    String?
   createdAt  DateTime             @default(now())
   updatedAt  DateTime             @updatedAt
-  deletedAt  DateTime             @default(now())
+  deletedAt  DateTime?
   isActive   Boolean              @default(true)
 }
 
@@ -245,7 +277,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 +295,7 @@ model Responden {
   kelompokUmurId String
   createdAt      DateTime               @default(now())
   updatedAt      DateTime               @updatedAt
-  deletedAt      DateTime               @default(now())
+  deletedAt  DateTime?
   isActive       Boolean                @default(true)
 }
 
@@ -272,7 +304,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 +314,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 +324,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 +358,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 +378,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 +404,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 +415,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 +432,7 @@ model ProfilePPID {
   imageId    String?
   createdAt  DateTime     @default(now())
   updatedAt  DateTime     @updatedAt
-  deletedAt  DateTime     @default(now())
+  deletedAt  DateTime?
   isActive   Boolean      @default(true)
 }
 
@@ -410,7 +444,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 +465,7 @@ model PermohonanInformasiPublik {
   caraMemperolehSalinanInformasiId String?
   createdAt                        DateTime                        @default(now())
   updatedAt                        DateTime                        @updatedAt
-  deletedAt                        DateTime                        @default(now())
+  deletedAt                        DateTime?
   isActive                         Boolean                         @default(true)
 }
 
@@ -440,7 +474,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 +484,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 +494,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 +508,7 @@ model FormulirPermohonanKeberatan {
   alasan    String
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime?
   isActive  Boolean  @default(true)
 }
 
@@ -531,7 +565,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 +575,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 +585,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 +596,7 @@ model MaskotDesa {
   images    ProfileDesaImage[]
   createdAt DateTime           @default(now())
   updatedAt DateTime           @updatedAt
-  deletedAt DateTime           @default(now())
+  deletedAt DateTime?
   isActive  Boolean            @default(true)
 }
 
@@ -607,15 +641,19 @@ model Berita {
   id               String          @id @default(cuid())
   judul            String
   deskripsi        String
-  image            FileStorage?    @relation(fields: [imageId], references: [id])
+  image            FileStorage?    @relation("BeritaFeaturedImage", fields: [imageId], references: [id])
   imageId          String?
+  images           FileStorage[]   @relation("BeritaImages")
   content          String          @db.Text
+  linkVideo        String?         @db.VarChar(500)
   createdAt        DateTime        @default(now())
   updatedAt        DateTime        @updatedAt
   deletedAt        DateTime        @default(now())
   isActive         Boolean         @default(true)
   kategoriBerita   KategoriBerita? @relation(fields: [kategoriBeritaId], references: [id])
   kategoriBeritaId String?
+
+  @@index([kategoriBeritaId])
 }
 
 model KategoriBerita {
@@ -631,25 +669,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 +2299,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])
+}

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>

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>

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>

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

@@ -12,6 +12,8 @@ const templateForm = z.object({
   content: z.string().min(3, "Content minimal 3 karakter"),
   kategoriBeritaId: z.string().nonempty(),
   imageId: z.string().nonempty(),
+  imageIds: z.array(z.string()),
+  linkVideo: z.string().optional(),
 });
 
 // 2. Default value form berita (hindari uncontrolled input)
@@ -21,6 +23,8 @@ const defaultForm = {
   imageId: "",
   content: "",
   kategoriBeritaId: "",
+  imageIds: [] as string[],
+  linkVideo: "",
 };
 
 // 4. Berita proxy
@@ -62,14 +66,7 @@ const berita = proxy({
   // State untuk berita utama (hanya 1)
 
   findMany: {
-    data: null as
-      | Prisma.BeritaGetPayload<{
-          include: {
-            image: true;
-            kategoriBerita: true;
-          };
-        }>[]
-      | null,
+    data: null as any[] | null,
     page: 1,
     totalPages: 1,
     loading: false,
@@ -79,14 +76,14 @@ const berita = proxy({
       berita.findMany.loading = true;
       berita.findMany.page = page;
       berita.findMany.search = search;
-    
+
       try {
         const query: any = { page, limit };
         if (search) query.search = search;
         if (kategori) query.kategori = kategori;
-    
+
         const res = await ApiFetch.api.desa.berita["find-many"].get({ query });
-    
+
         if (res.status === 200 && res.data?.success) {
           berita.findMany.data = res.data.data ?? [];
           berita.findMany.totalPages = res.data.totalPages ?? 1;
@@ -103,18 +100,19 @@ const berita = proxy({
         const elapsed = Date.now() - startTime;
         const minDelay = 300;
         const delay = elapsed < minDelay ? minDelay - elapsed : 0;
-    
+
         setTimeout(() => {
           berita.findMany.loading = false;
         }, delay);
       }
-    },    
+    },
   },
 
   findUnique: {
     data: null as Prisma.BeritaGetPayload<{
       include: {
         image: true;
+        images: true;
         kategoriBerita: true;
       };
     }> | null,
@@ -199,6 +197,8 @@ const berita = proxy({
             content: data.content,
             kategoriBeritaId: data.kategoriBeritaId || "",
             imageId: data.imageId || "",
+            imageIds: data.images?.map((img: any) => img.id) || [],
+            linkVideo: data.linkVideo || "",
           };
           return data; // Return the loaded data
         } else {
@@ -237,6 +237,8 @@ const berita = proxy({
             content: this.form.content,
             kategoriBeritaId: this.form.kategoriBeritaId || null,
             imageId: this.form.imageId,
+            imageIds: this.form.imageIds,
+            linkVideo: this.form.linkVideo,
           }),
         });
 

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;

src/app/admin/(dashboard)/_state/landing-page/apbdes.ts

@@ -5,55 +5,52 @@ import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";
 
-// --- Zod Schema ---
+// --- Zod Schema untuk APBDes Item (dengan field kalkulasi) ---
 const ApbdesItemSchema = z.object({
   kode: z.string().min(1, "Kode wajib diisi"),
   uraian: z.string().min(1, "Uraian wajib diisi"),
-  anggaran: z.number().min(0),
-  realisasi: z.number().min(0),
-  selisih: z.number(),
-  persentase: z.number(),
+  anggaran: z.number().min(0, "Anggaran tidak boleh negatif"),
   level: z.number().int().min(1).max(3),
   tipe: z.enum(['pendapatan', 'belanja', 'pembiayaan']).nullable().optional(),
+  // Field kalkulasi dari realisasiItems (auto-calculated di backend)
+  realisasi: z.number().min(0).default(0),
+  selisih: z.number().default(0),
+  persentase: z.number().default(0),
 });
 
 const ApbdesFormSchema = z.object({
   tahun: z.number().int().min(2000, "Tahun tidak valid"),
-  imageId: z.string().min(1, "Gambar wajib diunggah"),
-  fileId: z.string().min(1, "File wajib diunggah"),
+  name: z.string().optional(),
+  deskripsi: z.string().optional(),
+  jumlah: z.string().optional(),
+  // Image dan file opsional (bisa kosong)
+  imageId: z.string().optional(),
+  fileId: z.string().optional(),
   items: z.array(ApbdesItemSchema).min(1, "Minimal ada 1 item"),
 });
 
 // --- Default Form ---
 const defaultApbdesForm = {
   tahun: new Date().getFullYear(),
+  name: "",
+  deskripsi: "",
+  jumlah: "",
   imageId: "",
   fileId: "",
   items: [] as z.infer<typeof ApbdesItemSchema>[],
 };
 
-// --- Helper: hitung selisih & persentase otomatis (opsional di frontend) ---
-// --- Helper: hitung selisih & persentase otomatis (opsional di frontend) ---
+// --- Helper: Normalize item (dengan field kalkulasi) ---
 function normalizeItem(item: Partial<z.infer<typeof ApbdesItemSchema>>): z.infer<typeof ApbdesItemSchema> {
-  const anggaran = item.anggaran ?? 0;
-  const realisasi = item.realisasi ?? 0;
-
-  
-
-  
-  // ✅ Formula yang benar
-  const selisih = anggaran - realisasi; // positif = sisa anggaran, negatif = over budget
-  const persentase = anggaran > 0 ? (realisasi / anggaran) * 100 : 0; // persentase realisasi terhadap anggaran
-
   return {
     kode: item.kode || "",
     uraian: item.uraian || "",
-    anggaran,
-    realisasi,
-    selisih,
-    persentase,
+    anggaran: item.anggaran ?? 0,
     level: item.level || 1,
-    tipe: item.tipe, // biarkan null jika memang null
+    tipe: item.tipe ?? null,
+    realisasi: item.realisasi ?? 0,
+    selisih: item.selisih ?? 0,
+    persentase: item.persentase ?? 0,
   };
 }
 
@@ -115,7 +112,7 @@ const apbdes = proxy({
   findMany: {
     data: null as
       | Prisma.APBDesGetPayload<{
-          include: { image: true; file: true; items: true };
+          include: { image: true; file: true; items: { include: { realisasiItems: true } } };
         }>[]
       | null,
     page: 1,
@@ -160,33 +157,37 @@ const apbdes = proxy({
   findUnique: {
     data: null as
       | Prisma.APBDesGetPayload<{
-          include: { image: true; file: true; items: true };
+          include: { image: true; file: true; items: { include: { realisasiItems: true } } };
         }>
       | null,
     loading: false,
     error: null as string | null,
-  
+
     async load(id: string) {
       if (!id || id.trim() === '') {
         this.data = null;
         this.error = "ID tidak valid";
         return;
       }
-  
+
+      // Prevent multiple simultaneous loads
+      if (this.loading) {
+        console.log("⚠️ Already loading, skipping...");
+        return;
+      }
+
       this.loading = true;
       this.error = null;
-  
+
       try {
-        // Pastikan URL-nya benar
         const url = `/api/landingpage/apbdes/${id}`;
         console.log("🌐 Fetching:", url);
-  
-        // Gunakan fetch biasa atau ApiFetch dengan cara yang benar
+
         const response = await fetch(url);
         const res = await response.json();
-  
+
         console.log("📦 Response:", res);
-  
+
         if (res.success && res.data) {
           this.data = res.data;
         } else {
@@ -246,15 +247,18 @@ const apbdes = proxy({
           this.id = data.id;
           this.form = {
             tahun: data.tahun || new Date().getFullYear(),
+            name: data.name || "",
+            deskripsi: data.deskripsi || "",
+            jumlah: data.jumlah || "",
             imageId: data.imageId || "",
             fileId: data.fileId || "",
             items: (data.items || []).map((item: any) => ({
               kode: item.kode,
               uraian: item.uraian,
               anggaran: item.anggaran,
-              realisasi: item.realisasi,
-              selisih: item.selisih,
-              persentase: item.persentase,
+              realisasi: item.totalRealisasi || 0,
+              selisih: item.selisih || 0,
+              persentase: item.persentase || 0,
               level: item.level,
               tipe: item.tipe || 'pendapatan',
             })),
@@ -282,11 +286,24 @@ const apbdes = proxy({
       try {
         this.loading = true;
         // Include the ID in the request body
+        // Omit realisasi, selisih, persentase karena itu calculated fields di backend
         const requestData = {
-          ...parsed.data,
-          id: this.id, // Add the ID to the request body
+          tahun: parsed.data.tahun,
+          name: parsed.data.name,
+          deskripsi: parsed.data.deskripsi,
+          jumlah: parsed.data.jumlah,
+          imageId: parsed.data.imageId,
+          fileId: parsed.data.fileId,
+          id: this.id,
+          items: parsed.data.items.map(item => ({
+            kode: item.kode,
+            uraian: item.uraian,
+            anggaran: item.anggaran,
+            level: item.level,
+            tipe: item.tipe ?? null,
+          })),
         };
-        
+
         const res = await (ApiFetch.api.landingpage.apbdes as any)[this.id].put(requestData);
 
         if (res.data?.success) {
@@ -319,6 +336,82 @@ const apbdes = proxy({
       this.form = { ...defaultApbdesForm };
     },
   },
+
+  // =========================================
+  // REALISASI STATE MANAGEMENT
+  // =========================================
+  realisasi: {
+    // Create realisasi
+    async create(itemId: string, data: { kode: string; jumlah: number; tanggal: string; keterangan?: string; buktiFileId?: string }) {
+      try {
+        const res = await (ApiFetch.api.landingpage.apbdes as any)[itemId].realisasi.post(data);
+
+        if (res.data?.success) {
+          toast.success("Realisasi berhasil ditambahkan");
+          // Reload findUnique untuk update data
+          const currentId = apbdes.findUnique.data?.id;
+          if (currentId) {
+            await apbdes.findUnique.load(currentId);
+          }
+          return true;
+        } else {
+          toast.error(res.data?.message || "Gagal menambahkan realisasi");
+          return false;
+        }
+      } catch (error: any) {
+        console.error("Create realisasi error:", error);
+        toast.error(error?.message || "Terjadi kesalahan saat menambahkan realisasi");
+        return false;
+      }
+    },
+
+    // Update realisasi
+    async update(realisasiId: string, data: { kode?: string; jumlah?: number; tanggal?: string; keterangan?: string; buktiFileId?: string }) {
+      try {
+        const res = await (ApiFetch.api.landingpage.apbdes as any).realisasi[realisasiId].put(data);
+
+        if (res.data?.success) {
+          toast.success("Realisasi berhasil diperbarui");
+          // Reload findUnique untuk update data
+          const currentId = apbdes.findUnique.data?.id;
+          if (currentId) {
+            await apbdes.findUnique.load(currentId);
+          }
+          return true;
+        } else {
+          toast.error(res.data?.message || "Gagal memperbarui realisasi");
+          return false;
+        }
+      } catch (error: any) {
+        console.error("Update realisasi error:", error);
+        toast.error(error?.message || "Terjadi kesalahan saat memperbarui realisasi");
+        return false;
+      }
+    },
+
+    // Delete realisasi
+    async delete(realisasiId: string) {
+      try {
+        const res = await (ApiFetch.api.landingpage.apbdes as any).realisasi[realisasiId].delete();
+
+        if (res.data?.success) {
+          toast.success("Realisasi berhasil dihapus");
+          // Reload findUnique untuk update data
+          if (apbdes.findUnique.data) {
+            await apbdes.findUnique.load(apbdes.findUnique.data.id);
+          }
+          return true;
+        } else {
+          toast.error(res.data?.message || "Gagal menghapus realisasi");
+          return false;
+        }
+      } catch (error: any) {
+        console.error("Delete realisasi error:", error);
+        toast.error(error?.message || "Terjadi kesalahan saat menghapus realisasi");
+        return false;
+      }
+    },
+  },
 });
 
 export default apbdes;

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

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

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

@@ -9,6 +9,8 @@ import {
   ActionIcon,
   Box,
   Button,
+  Card,
+  Grid,
   Group,
   Image,
   Paper,
@@ -17,7 +19,7 @@ import {
   Text,
   TextInput,
   Title,
-  Loader
+  Loader,
 } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import {
@@ -25,19 +27,51 @@ import {
   IconPhoto,
   IconUpload,
   IconX,
+  IconVideo,
+  IconTrash,
 } from "@tabler/icons-react";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useProxy } from "valtio/utils";
+import { convertYoutubeUrlToEmbed } from '@/app/admin/(dashboard)/desa/gallery/lib/youtube-utils';
+
+interface ExistingImage {
+  id: string;
+  link: string;
+  name: string;
+}
+
+interface BeritaData {
+  id: string;
+  judul: string;
+  deskripsi: string;
+  content: string;
+  kategoriBeritaId: string | null;
+  imageId: string | null;
+  image?: { link: string } | null;
+  images?: ExistingImage[];
+  linkVideo?: string | null;
+}
 
 function EditBerita() {
   const beritaState = useProxy(stateDashboardBerita);
   const router = useRouter();
   const params = useParams();
 
+  // Featured image state
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
+  
+  // Gallery images state
+  const [existingGalleryImages, setExistingGalleryImages] = useState<ExistingImage[]>([]);
+  const [galleryFiles, setGalleryFiles] = useState<File[]>([]);
+  const [galleryPreviews, setGalleryPreviews] = useState<string[]>([]);
+  
+  // YouTube link state
+  const [youtubeLink, setYoutubeLink] = useState('');
+  const [originalYoutubeLink, setOriginalYoutubeLink] = useState('');
+
   const [formData, setFormData] = useState({
     judul: "",
     deskripsi: "",
@@ -48,9 +82,17 @@ function EditBerita() {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  const [originalData, setOriginalData] = useState({
+    judul: "",
+    deskripsi: "",
+    kategoriBeritaId: "",
+    content: "",
+    imageId: "",
+    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 === '';
   };
@@ -61,21 +103,12 @@ function EditBerita() {
       formData.judul?.trim() !== '' &&
       formData.kategoriBeritaId !== '' &&
       !isHtmlEmpty(formData.deskripsi) &&
-      (file !== null || originalData.imageId !== '') && // Either a new file is selected or an existing image exists
+      (file !== null || originalData.imageId !== '') &&
       !isHtmlEmpty(formData.content)
     );
   };
 
-  const [originalData, setOriginalData] = useState({
-    judul: "",
-    deskripsi: "",
-    kategoriBeritaId: "",
-    content: "",
-    imageId: "",
-    imageUrl: ""
-  });
-
-  // Load kategori + berita
+  // Load data
   useEffect(() => {
     beritaState.kategoriBerita.findMany.load();
 
@@ -84,7 +117,7 @@ function EditBerita() {
       if (!id) return;
 
       try {
-        const data = await stateDashboardBerita.berita.edit.load(id);
+        const data = await stateDashboardBerita.berita.edit.load(id) as BeritaData | null;
         if (data) {
           setFormData({
             judul: data.judul || "",
@@ -106,6 +139,17 @@ function EditBerita() {
           if (data?.image?.link) {
             setPreviewImage(data.image.link);
           }
+
+          // Load gallery images
+          if (data?.images && data.images.length > 0) {
+            setExistingGalleryImages(data.images);
+          }
+
+          // Load YouTube link
+          if (data?.linkVideo) {
+            setYoutubeLink(data.linkVideo);
+            setOriginalYoutubeLink(data.linkVideo);
+          }
         }
       } catch (error) {
         console.error("Error loading berita:", error);
@@ -120,27 +164,59 @@ function EditBerita() {
     setFormData((prev) => ({ ...prev, [field]: value }));
   };
 
+  const handleGalleryDrop = (files: File[]) => {
+    const maxImages = 10;
+    const currentCount = existingGalleryImages.length + galleryFiles.length;
+    const availableSlots = maxImages - currentCount;
+    
+    if (availableSlots <= 0) {
+      toast.warn('Maksimal 10 gambar untuk galeri');
+      return;
+    }
+
+    const newFiles = files.slice(0, availableSlots);
+    
+    if (newFiles.length === 0) {
+      toast.warn('Tidak ada slot tersisa untuk gambar galeri');
+      return;
+    }
+
+    setGalleryFiles([...galleryFiles, ...newFiles]);
+    
+    const newPreviews = newFiles.map((f) => URL.createObjectURL(f));
+    setGalleryPreviews([...galleryPreviews, ...newPreviews]);
+  };
+
+  const removeGalleryImage = (index: number, isExisting: boolean = false) => {
+    if (isExisting) {
+      setExistingGalleryImages(existingGalleryImages.filter((_, i) => i !== index));
+    } else {
+      setGalleryFiles(galleryFiles.filter((_, i) => i !== index));
+      setGalleryPreviews(galleryPreviews.filter((_, i) => i !== index));
+    }
+  };
+
   const handleSubmit = async () => {
     if (!formData.judul?.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
-    
+
     if (!formData.kategoriBeritaId) {
       toast.error('Kategori wajib dipilih');
       return;
     }
-    
+
     if (isHtmlEmpty(formData.deskripsi)) {
       toast.error('Deskripsi singkat wajib diisi');
       return;
     }
-    
+
     if (!file && !originalData.imageId) {
-      toast.error('Gambar wajib dipilih');
+      toast.error('Gambar utama wajib dipilih');
       return;
     }
-    
+
     if (isHtmlEmpty(formData.content)) {
       toast.error('Konten wajib diisi');
       return;
@@ -148,12 +224,14 @@ function EditBerita() {
 
     try {
       setIsSubmitting(true);
-      // Update global state hanya sekali di sini
+
+      // Update global state
       beritaState.berita.edit.form = {
         ...beritaState.berita.edit.form,
         ...formData,
       };
 
+      // Upload new featured image if changed
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({
           file,
@@ -162,12 +240,33 @@ function EditBerita() {
         const uploaded = res.data?.data;
 
         if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
+          return toast.error("Gagal upload gambar utama");
         }
 
         beritaState.berita.edit.form.imageId = uploaded.id;
       }
 
+      // Upload new gallery images
+      const newGalleryIds: string[] = [];
+      for (const galleryFile of galleryFiles) {
+        const galleryRes = await ApiFetch.api.fileStorage.create.post({
+          file: galleryFile,
+          name: galleryFile.name,
+        });
+        const galleryUploaded = galleryRes.data?.data;
+        if (galleryUploaded?.id) {
+          newGalleryIds.push(galleryUploaded.id);
+        }
+      }
+
+      // Combine existing (not removed) and new gallery images
+      const remainingExistingIds = existingGalleryImages.map(img => img.id);
+      beritaState.berita.edit.form.imageIds = [...remainingExistingIds, ...newGalleryIds];
+
+      // Set YouTube link
+      const embedLink = convertYoutubeUrlToEmbed(youtubeLink);
+      beritaState.berita.edit.form.linkVideo = embedLink || '';
+
       await beritaState.berita.edit.update();
       toast.success("Berita berhasil diperbarui!");
       router.push("/admin/desa/berita/list-berita");
@@ -189,9 +288,12 @@ function EditBerita() {
     });
     setPreviewImage(originalData.imageUrl || null);
     setFile(null);
+    setYoutubeLink(originalYoutubeLink);
     toast.info("Form dikembalikan ke data awal");
   };
 
+  const embedLink = convertYoutubeUrlToEmbed(youtubeLink);
+
   return (
     <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
@@ -219,6 +321,7 @@ function EditBerita() {
         style={{ border: "1px solid #e0e0e0" }}
       >
         <Stack gap="md">
+          {/* Judul */}
           <TextInput
             label="Judul"
             placeholder="Masukkan judul"
@@ -227,6 +330,7 @@ function EditBerita() {
             required
           />
 
+          {/* Kategori */}
           <Select
             value={formData.kategoriBeritaId}
             onChange={(val) => handleChange("kategoriBeritaId", val || "")}
@@ -241,9 +345,9 @@ function EditBerita() {
             clearable
             searchable
             required
-            error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
           />
 
+          {/* Deskripsi */}
           <Box>
             <Text fz="sm" fw="bold">
               Deskripsi Singkat
@@ -256,11 +360,10 @@ function EditBerita() {
             />
           </Box>
 
-
-          {/* Upload Gambar */}
+          {/* Featured Image */}
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar Berita
+              Gambar Utama (Featured)
             </Text>
             <Dropzone
               onDrop={(files) => {
@@ -274,17 +377,13 @@ function EditBerita() {
                 toast.error("File tidak valid, gunakan format gambar")
               }
               maxSize={5 * 1024 ** 2}
-              accept={{ "image/*": [] }}
+              accept={{ "image/*": ['.jpeg', '.jpg', '.png', '.webp'] }}
               radius="md"
               p="xl"
             >
               <Group justify="center" gap="xl" mih={180}>
                 <Dropzone.Accept>
-                  <IconUpload
-                    size={48}
-                    color={colors["blue-button"]}
-                    stroke={1.5}
-                  />
+                  <IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
                 </Dropzone.Accept>
                 <Dropzone.Reject>
                   <IconX size={48} color="red" stroke={1.5} />
@@ -292,14 +391,6 @@ function EditBerita() {
                 <Dropzone.Idle>
                   <IconPhoto size={48} color="#868e96" stroke={1.5} />
                 </Dropzone.Idle>
-                <Stack gap="xs" align="center">
-                  <Text size="md" fw={500}>
-                    Seret gambar atau klik untuk memilih file
-                  </Text>
-                  <Text size="sm" c="dimmed">
-                    Maksimal 5MB, format gambar .png, .jpg, .jpeg, webp
-                  </Text>
-                </Stack>
               </Group>
             </Dropzone>
 
@@ -328,9 +419,7 @@ function EditBerita() {
                     setPreviewImage(null);
                     setFile(null);
                   }}
-                  style={{
-                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
-                  }}
+                  style={{ boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
                 >
                   <IconX size={14} />
                 </ActionIcon>
@@ -338,6 +427,138 @@ function EditBerita() {
             )}
           </Box>
 
+          {/* Gallery Images */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Galeri Gambar (Opsional - Maksimal 10)
+            </Text>
+            <Dropzone
+              onDrop={handleGalleryDrop}
+              onReject={() => toast.error("File tidak valid, gunakan format gambar")}
+              maxSize={5 * 1024 ** 2}
+              accept={{ "image/*": ['.jpeg', '.jpg', '.png', '.webp'] }}
+              radius="md"
+              p="md"
+              multiple
+            >
+              <Group justify="center" gap="xl" mih={120}>
+                <Dropzone.Accept>
+                  <IconUpload size={40} color={colors["blue-button"]} stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={40} color="red" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={40} color="#868e96" stroke={1.5} />
+                </Dropzone.Idle>
+              </Group>
+              <Text ta="center" mt="sm" size="xs" color="dimmed">
+                Seret gambar untuk menambahkan ke galeri
+              </Text>
+            </Dropzone>
+
+            {/* Existing Gallery Images */}
+            {existingGalleryImages.length > 0 && (
+              <Box mt="sm">
+                <Text fz="xs" fw="bold" mb={6} c="dimmed">
+                  Gambar Existing ({existingGalleryImages.length})
+                </Text>
+                <Grid gutter="sm">
+                  {existingGalleryImages.map((img, index) => (
+                    <Grid.Col span={4} key={img.id}>
+                      <Card p="xs" radius="md" withBorder>
+                        <Image src={img.link} alt={img.name} radius="sm" height={100} fit="cover" />
+                        <ActionIcon
+                          variant="filled"
+                          color="red"
+                          radius="xl"
+                          size="sm"
+                          pos="absolute"
+                          top={5}
+                          right={5}
+                          onClick={() => removeGalleryImage(index, true)}
+                          style={{ boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
+                        >
+                          <IconTrash size={14} />
+                        </ActionIcon>
+                      </Card>
+                    </Grid.Col>
+                  ))}
+                </Grid>
+              </Box>
+            )}
+
+            {/* New Gallery Images */}
+            {galleryPreviews.length > 0 && (
+              <Box mt="sm">
+                <Text fz="xs" fw="bold" mb={6} c="dimmed">
+                  Gambar Baru ({galleryPreviews.length})
+                </Text>
+                <Grid gutter="sm">
+                  {galleryPreviews.map((preview, index) => (
+                    <Grid.Col span={4} key={index}>
+                      <Card p="xs" radius="md" withBorder>
+                        <Image src={preview} alt={`New ${index}`} radius="sm" height={100} fit="cover" />
+                        <ActionIcon
+                          variant="filled"
+                          color="red"
+                          radius="xl"
+                          size="sm"
+                          pos="absolute"
+                          top={5}
+                          right={5}
+                          onClick={() => removeGalleryImage(index, false)}
+                          style={{ boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
+                        >
+                          <IconTrash size={14} />
+                        </ActionIcon>
+                      </Card>
+                    </Grid.Col>
+                  ))}
+                </Grid>
+              </Box>
+            )}
+          </Box>
+
+          {/* YouTube Video */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Link Video YouTube (Opsional)
+            </Text>
+            <TextInput
+              placeholder="https://www.youtube.com/watch?v=..."
+              value={youtubeLink}
+              onChange={(e) => setYoutubeLink(e.currentTarget.value)}
+              leftSection={<IconVideo size={18} />}
+              rightSection={
+                youtubeLink && (
+                  <ActionIcon
+                    variant="subtle"
+                    color="gray"
+                    onClick={() => setYoutubeLink('')}
+                  >
+                    <IconX size={18} />
+                  </ActionIcon>
+                )
+              }
+            />
+            {embedLink && (
+              <Box mt="sm" pos="relative">
+                <iframe
+                  style={{
+                    borderRadius: 10,
+                    width: '100%',
+                    height: 250,
+                    border: '1px solid #ddd',
+                  }}
+                  src={embedLink}
+                  title="Preview Video"
+                  allowFullScreen
+                />
+              </Box>
+            )}
+          </Box>
+
           {/* Konten */}
           <Box>
             <Text fz="sm" fw="bold">
@@ -351,9 +572,8 @@ function EditBerita() {
             />
           </Box>
 
-          {/* Action */}
+          {/* Action Buttons */}
           <Group justify="right">
-            {/* Tombol Batal */}
             <Button
               variant="outline"
               color="gray"
@@ -363,8 +583,6 @@ function EditBerita() {
             >
               Batal
             </Button>
-
-            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"

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

@@ -1,7 +1,7 @@
 'use client'
-import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Card, Grid, Group, Image, Paper, Skeleton, Stack, Text, Badge, AspectRatio } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash, IconVideo } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -10,6 +10,23 @@ import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirma
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import colors from '@/con/colors';
 
+interface ExistingImage {
+  id: string;
+  link: string;
+  name: string;
+}
+
+interface BeritaDetail {
+  id: string;
+  judul: string;
+  deskripsi: string;
+  content: string;
+  image?: { link: string } | null;
+  images?: ExistingImage[];
+  linkVideo?: string | null;
+  kategoriBerita?: { name: string } | null;
+}
+
 function DetailBerita() {
   const beritaState = useProxy(stateDashboardBerita);
   const [modalHapus, setModalHapus] = useState(false);
@@ -38,7 +55,7 @@ function DetailBerita() {
     );
   }
 
-  const data = beritaState.berita.findUnique.data;
+  const data = beritaState.berita.findUnique.data as unknown as BeritaDetail;
 
   return (
     <Box px={{ base: 0, md: 'xs' }} py="xs">
@@ -68,71 +85,131 @@ function DetailBerita() {
 
           <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
             <Stack gap="sm">
+              {/* Kategori */}
               <Box>
                 <Text fz="lg" fw="bold">Kategori</Text>
                 <Text fz="md" c="dimmed">{data.kategoriBerita?.name || '-'}</Text>
               </Box>
 
+              {/* Judul */}
               <Box>
                 <Text fz="lg" fw="bold">Judul</Text>
                 <Text fz="md" c="dimmed">{data.judul || '-'}</Text>
               </Box>
 
+              {/* Deskripsi */}
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
+                <Text 
+                  fz="md" 
+                  c="dimmed" 
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }} 
+                  dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} 
+                />
               </Box>
 
+              {/* Gambar Utama (Featured) */}
               <Box>
-                <Text fz="lg" fw="bold">Gambar</Text>
+                <Text fz="lg" fw="bold">Gambar Utama</Text>
                 {data.image?.link ? (
                   <Image
                     src={data.image.link}
                     alt={data.judul || 'Gambar Berita'}
-                    w={200}
-                    h={200}
+                    w={{ base: '100%', md: 400 }}
+                    h={300}
                     radius="md"
                     fit="cover"
-                    loading='lazy'
+                    loading="lazy"
                   />
                 ) : (
-                  <Text fz="sm" c="dimmed">Tidak ada gambar</Text>
+                  <Text fz="sm" c="dimmed">Tidak ada gambar utama</Text>
                 )}
               </Box>
 
+              {/* Gallery Images */}
+              {data.images && data.images.length > 0 && (
+                <Box>
+                  <Group gap="xs" mb="sm">
+                    <Text fz="lg" fw="bold">Galeri Gambar</Text>
+                    <Badge color="blue" variant="light">
+                      {data.images.length}
+                    </Badge>
+                  </Group>
+                  <Grid gutter="md">
+                    {data.images.map((img, index) => (
+                      <Grid.Col span={{ base: 6, md: 4 }} key={img.id}>
+                        <Card p="xs" radius="md" withBorder>
+                          <Image
+                            src={img.link}
+                            alt={img.name || `Gallery ${index + 1}`}
+                            h={150}
+                            radius="sm"
+                            fit="cover"
+                            loading="lazy"
+                          />
+                        </Card>
+                      </Grid.Col>
+                    ))}
+                  </Grid>
+                </Box>
+              )}
+
+              {/* YouTube Video */}
+              {data.linkVideo && (
+                <Box>
+                  <Group gap="xs" mb="sm">
+                    <Text fz="lg" fw="bold">Video YouTube</Text>
+                    <IconVideo size={20} color={colors['blue-button']} />
+                  </Group>
+                  <AspectRatio ratio={16 / 9} mah={400}>
+                    <iframe
+                      src={data.linkVideo}
+                      title="YouTube Video"
+                      allowFullScreen
+                      style={{ borderRadius: 10, border: '1px solid #ddd' }}
+                    />
+                  </AspectRatio>
+                </Box>
+              )}
+
+              {/* Konten */}
               <Box>
                 <Text fz="lg" fw="bold">Konten</Text>
-                <Text
-                  fz="md"
-                  c="dimmed"
-                  dangerouslySetInnerHTML={{ __html: data.content || '-' }}
-                />
+                <Paper bg="white" p="md" radius="md" mt="xs">
+                  <Text
+                    fz="md"
+                    c="dimmed"
+                    dangerouslySetInnerHTML={{ __html: data.content || '-' }}
+                  />
+                </Paper>
               </Box>
 
-              {/* Action Button */}
-              <Group gap="sm">
-                  <Button
-                    color="red"
-                    onClick={() => {
-                      setSelectedId(data.id);
-                      setModalHapus(true);
-                    }}
-                    variant="light"
-                    radius="md"
-                    size="md"
-                  >
-                    <IconTrash size={20} />
-                  </Button>
+              {/* Action Buttons */}
+              <Group gap="sm" mt="md">
+                <Button
+                  color="red"
+                  onClick={() => {
+                    setSelectedId(data.id);
+                    setModalHapus(true);
+                  }}
+                  variant="light"
+                  radius="md"
+                  size="md"
+                  leftSection={<IconTrash size={20} />}
+                >
+                  Hapus
+                </Button>
 
-                  <Button
-                    color="green"
-                    onClick={() => router.push(`/admin/desa/berita/list-berita/${data.id}/edit`)}
-                    variant="light"
-                    radius="md"
-                    size="md"
-                  >
-                    <IconEdit size={20} />
-                  </Button>
+                <Button
+                  color="green"
+                  onClick={() => router.push(`/admin/desa/berita/list-berita/${data.id}/edit`)}
+                  variant="light"
+                  radius="md"
+                  size="md"
+                  leftSection={<IconEdit size={20} />}
+                >
+                  Edit
+                </Button>
               </Group>
             </Stack>
           </Paper>

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

@@ -15,26 +15,38 @@ import {
   TextInput,
   Title,
   Loader,
-  ActionIcon
+  ActionIcon,
+  Grid,
+  Card,
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconPhoto, IconUpload, IconX, IconVideo, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
+import { convertYoutubeUrlToEmbed } from '@/app/admin/(dashboard)/desa/gallery/lib/youtube-utils';
 
 export default function CreateBerita() {
   const beritaState = useProxy(stateDashboardBerita);
+  const router = useRouter();
+  
+  // Featured image state
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
-  const router = useRouter();
+  
+  // Gallery images state
+  const [galleryFiles, setGalleryFiles] = useState<File[]>([]);
+  const [galleryPreviews, setGalleryPreviews] = useState<string[]>([]);
+  
+  // YouTube link state
+  const [youtubeLink, setYoutubeLink] = useState('');
+  
   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 === '';
   };
@@ -61,9 +73,35 @@ export default function CreateBerita() {
       kategoriBeritaId: '',
       imageId: '',
       content: '',
+      imageIds: [],
+      linkVideo: '',
     };
     setPreviewImage(null);
     setFile(null);
+    setGalleryFiles([]);
+    setGalleryPreviews([]);
+    setYoutubeLink('');
+  };
+
+  const handleGalleryDrop = (files: File[]) => {
+    const newFiles = files.filter(
+      (_, index) => galleryFiles.length + index < 10 // Max 10 images
+    );
+    
+    if (newFiles.length === 0) {
+      toast.warn('Maksimal 10 gambar untuk galeri');
+      return;
+    }
+
+    setGalleryFiles([...galleryFiles, ...newFiles]);
+    
+    const newPreviews = newFiles.map((f) => URL.createObjectURL(f));
+    setGalleryPreviews([...galleryPreviews, ...newPreviews]);
+  };
+
+  const removeGalleryImage = (index: number) => {
+    setGalleryFiles(galleryFiles.filter((_, i) => i !== index));
+    setGalleryPreviews(galleryPreviews.filter((_, i) => i !== index));
   };
 
   const handleSubmit = async () => {
@@ -71,22 +109,22 @@ export default function CreateBerita() {
       toast.error('Judul wajib diisi');
       return;
     }
-    
+
     if (!beritaState.berita.create.form.kategoriBeritaId) {
       toast.error('Kategori wajib dipilih');
       return;
     }
-    
+
     if (isHtmlEmpty(beritaState.berita.create.form.deskripsi)) {
       toast.error('Deskripsi singkat wajib diisi');
       return;
     }
-    
+
     if (!file) {
-      toast.error('Gambar wajib dipilih');
+      toast.error('Gambar utama wajib dipilih');
       return;
     }
-    
+
     if (isHtmlEmpty(beritaState.berita.create.form.content)) {
       toast.error('Konten wajib diisi');
       return;
@@ -94,21 +132,37 @@ export default function CreateBerita() {
 
     try {
       setIsSubmitting(true);
-      if (!file) {
-        return toast.warn('Silakan pilih file gambar terlebih dahulu');
-      }
 
-      const res = await ApiFetch.api.fileStorage.create.post({
+      // Upload featured image
+      const featuredRes = await ApiFetch.api.fileStorage.create.post({
         file,
         name: file.name,
       });
-
-      const uploaded = res.data?.data;
-      if (!uploaded?.id) {
-        return toast.error('Gagal mengunggah gambar, silakan coba lagi');
+      const featuredUploaded = featuredRes.data?.data;
+      if (!featuredUploaded?.id) {
+        return toast.error('Gagal mengunggah gambar utama');
       }
+      beritaState.berita.create.form.imageId = featuredUploaded.id;
 
-      beritaState.berita.create.form.imageId = uploaded.id;
+      // Upload gallery images
+      const galleryIds: string[] = [];
+      for (const galleryFile of galleryFiles) {
+        const galleryRes = await ApiFetch.api.fileStorage.create.post({
+          file: galleryFile,
+          name: galleryFile.name,
+        });
+        const galleryUploaded = galleryRes.data?.data;
+        if (galleryUploaded?.id) {
+          galleryIds.push(galleryUploaded.id);
+        }
+      }
+      beritaState.berita.create.form.imageIds = galleryIds;
+
+      // Set YouTube link if provided
+      const embedLink = convertYoutubeUrlToEmbed(youtubeLink);
+      if (embedLink) {
+        beritaState.berita.create.form.linkVideo = embedLink;
+      }
 
       await beritaState.berita.create.create();
 
@@ -122,16 +176,13 @@ export default function CreateBerita() {
     }
   };
 
+  const embedLink = convertYoutubeUrlToEmbed(youtubeLink);
+
   return (
     <Box px={{ base: 0, md: 'lg' }} py="xs">
-      {/* Header dengan tombol kembali */}
+      {/* Header */}
       <Group mb="md">
-        <Button
-          variant="subtle"
-          onClick={() => router.back()}
-          p="xs"
-          radius="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">
@@ -148,6 +199,7 @@ export default function CreateBerita() {
         style={{ border: '1px solid #e0e0e0' }}
       >
         <Stack gap="md">
+          {/* Judul */}
           <TextInput
             label="Judul"
             placeholder="Masukkan judul berita"
@@ -156,6 +208,7 @@ export default function CreateBerita() {
             required
           />
 
+          {/* Kategori */}
           <Select
             label="Kategori"
             placeholder="Pilih kategori"
@@ -182,6 +235,7 @@ export default function CreateBerita() {
             required
           />
 
+          {/* Deskripsi */}
           <Box>
             <Text fz="sm" fw="bold" mb={6}>
               Deskripsi Singkat
@@ -194,9 +248,10 @@ export default function CreateBerita() {
             />
           </Box>
 
+          {/* Featured Image */}
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar Berita
+              Gambar Utama (Featured)
             </Text>
             <Dropzone
               onDrop={(files) => {
@@ -232,17 +287,11 @@ export default function CreateBerita() {
               <Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
                 <Image
                   src={previewImage}
-                  alt="Preview Gambar"
+                  alt="Preview Gambar Utama"
                   radius="md"
-                  style={{
-                    maxHeight: 200,
-                    objectFit: 'contain',
-                    border: '1px solid #ddd',
-                  }}
+                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
                   loading="lazy"
                 />
-
-                {/* Tombol hapus (pojok kanan atas) */}
                 <ActionIcon
                   variant="filled"
                   color="red"
@@ -255,9 +304,7 @@ export default function CreateBerita() {
                     setPreviewImage(null);
                     setFile(null);
                   }}
-                  style={{
-                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
-                  }}
+                  style={{ boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
                 >
                   <IconX size={14} />
                 </ActionIcon>
@@ -265,6 +312,102 @@ export default function CreateBerita() {
             )}
           </Box>
 
+          {/* Gallery Images */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Galeri Gambar (Opsional - Maksimal 10)
+            </Text>
+            <Dropzone
+              onDrop={handleGalleryDrop}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
+              radius="md"
+              p="md"
+              multiple
+            >
+              <Group justify="center" gap="xl" mih={120}>
+                <Dropzone.Accept>
+                  <IconUpload size={40} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={40} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={40} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+              </Group>
+              <Text ta="center" mt="sm" size="xs" color="dimmed">
+                Seret gambar atau klik untuk menambahkan ke galeri
+              </Text>
+            </Dropzone>
+
+            {galleryPreviews.length > 0 && (
+              <Grid mt="sm" gutter="sm">
+                {galleryPreviews.map((preview, index) => (
+                  <Grid.Col span={4} key={index}>
+                    <Card p="xs" radius="md" withBorder>
+                      <Image src={preview} alt={`Gallery ${index}`} radius="sm" height={100} fit="cover" />
+                      <ActionIcon
+                        variant="filled"
+                        color="red"
+                        radius="xl"
+                        size="sm"
+                        pos="absolute"
+                        top={5}
+                        right={5}
+                        onClick={() => removeGalleryImage(index)}
+                        style={{ boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
+                      >
+                        <IconTrash size={14} />
+                      </ActionIcon>
+                    </Card>
+                  </Grid.Col>
+                ))}
+              </Grid>
+            )}
+          </Box>
+
+          {/* YouTube Video */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Link Video YouTube (Opsional)
+            </Text>
+            <TextInput
+              placeholder="https://www.youtube.com/watch?v=..."
+              value={youtubeLink}
+              onChange={(e) => setYoutubeLink(e.currentTarget.value)}
+              leftSection={<IconVideo size={18} />}
+              rightSection={
+                youtubeLink && (
+                  <ActionIcon
+                    variant="subtle"
+                    color="gray"
+                    onClick={() => setYoutubeLink('')}
+                  >
+                    <IconX size={18} />
+                  </ActionIcon>
+                )
+              }
+            />
+            {embedLink && (
+              <Box mt="sm" pos="relative">
+                <iframe
+                  style={{
+                    borderRadius: 10,
+                    width: '100%',
+                    height: 250,
+                    border: '1px solid #ddd',
+                  }}
+                  src={embedLink}
+                  title="Preview Video"
+                  allowFullScreen
+                />
+              </Box>
+            )}
+          </Box>
+
+          {/* Konten */}
           <Box>
             <Text fz="sm" fw="bold" mb={6}>
               Konten
@@ -277,6 +420,7 @@ export default function CreateBerita() {
             />
           </Box>
 
+          {/* Buttons */}
           <Group justify="right">
             <Button
               variant="outline"
@@ -287,8 +431,6 @@ export default function CreateBerita() {
             >
               Reset
             </Button>
-
-            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"

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}

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>

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>

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

src/app/admin/(dashboard)/landing-page/apbdes/[id]/RealisasiManager.tsx

@@ -0,0 +1,429 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { useProxy } from 'valtio/utils';
+import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  NumberInput,
+  Title,
+  Table,
+  TableThead,
+  TableTbody,
+  TableTr,
+  TableTh,
+  TableTd,
+  ActionIcon,
+  Badge,
+  Modal,
+  Divider,
+  Center,
+} from '@mantine/core';
+import {
+  IconPlus,
+  IconEdit,
+  IconTrash,
+  IconCalendar,
+  IconCoin,
+} from '@tabler/icons-react';
+
+interface RealisasiManagerProps {
+  itemId: string;
+  itemKode: string;
+  itemUraian: string;
+  itemAnggaran: number;
+  itemTotalRealisasi: number;
+  itemPersentase: number;
+  realisasiItems: any[];
+}
+
+export default function RealisasiManager({
+  itemId,
+  itemKode,
+  itemUraian,
+  itemAnggaran,
+  itemTotalRealisasi,
+  itemPersentase,
+  realisasiItems,
+}: RealisasiManagerProps) {
+  const state = useProxy(apbdes);
+  const [modalOpened, setModalOpened] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Form state
+  const [formData, setFormData] = useState({
+    kode: '',
+    jumlah: 0,
+    tanggal: new Date().toISOString().split('T')[0], // YYYY-MM-DD format for input
+    keterangan: '',
+  });
+
+  const resetForm = () => {
+    setFormData({
+      kode: '',
+      jumlah: 0,
+      tanggal: new Date().toISOString().split('T')[0],
+      keterangan: '',
+    });
+    setEditingId(null);
+  };
+
+  const handleOpenCreate = () => {
+    resetForm();
+    setModalOpened(true);
+  };
+
+  const handleOpenEdit = (realisasi: any) => {
+    const tanggal = new Date(realisasi.tanggal);
+    const tanggalStr = tanggal.toISOString().split('T')[0]; // YYYY-MM-DD
+
+    setFormData({
+      kode: realisasi.kode || '',
+      jumlah: realisasi.jumlah,
+      tanggal: tanggalStr,
+      keterangan: realisasi.keterangan || '',
+    });
+    setEditingId(realisasi.id);
+    setModalOpened(true);
+  };
+
+  const handleSubmit = async () => {
+    if (formData.jumlah <= 0) {
+      return toast.warn('Jumlah realisasi harus lebih dari 0');
+    }
+
+    if (!formData.kode || formData.kode.trim() === '') {
+      return toast.warn('Kode realisasi wajib diisi');
+    }
+
+    try {
+      setLoading(true);
+
+      if (editingId) {
+        // Update existing realisasi
+        const success = await state.realisasi.update(editingId, {
+          kode: formData.kode,
+          jumlah: formData.jumlah,
+          tanggal: new Date(formData.tanggal).toISOString(),
+          keterangan: formData.keterangan,
+        });
+
+        if (success) {
+          toast.success('Realisasi berhasil diperbarui');
+        }
+      } else {
+        // Create new realisasi
+        const success = await state.realisasi.create(itemId, {
+          kode: formData.kode,
+          jumlah: formData.jumlah,
+          tanggal: new Date(formData.tanggal).toISOString(),
+          keterangan: formData.keterangan,
+        });
+
+        if (success) {
+          toast.success('Realisasi berhasil ditambahkan');
+        }
+      }
+
+      setModalOpened(false);
+      resetForm();
+    } catch (error: any) {
+      console.error('Error saving realisasi:', error);
+      toast.error(error?.message || 'Gagal menyimpan realisasi');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (realisasiId: string) => {
+    if (!confirm('Apakah Anda yakin ingin menghapus realisasi ini?')) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const success = await state.realisasi.delete(realisasiId);
+
+      if (success) {
+        toast.success('Realisasi berhasil dihapus');
+      }
+    } catch (error: any) {
+      console.error('Error deleting realisasi:', error);
+      toast.error(error?.message || 'Gagal menghapus realisasi');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatRupiah = (amount: number) => {
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(amount);
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('id-ID', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  const getSisaAnggaran = () => {
+    return itemAnggaran - itemTotalRealisasi;
+  };
+
+  const getPersentaseColor = (persen: number) => {
+    if (persen >= 100) return 'teal';
+    if (persen >= 80) return 'blue';
+    if (persen >= 60) return 'yellow';
+    return 'red';
+  };
+
+  return (
+    <Paper withBorder p="md" radius="md" mt="md">
+      {/* Header */}
+      <Group justify="space-between" mb="md">
+        <Stack gap="xs">
+          <Title order={6}>
+            {itemKode} - {itemUraian}
+          </Title>
+          <Text fz="sm" c="dimmed">
+            Kelola realisasi untuk item ini
+          </Text>
+        </Stack>
+        <Button
+          leftSection={<IconPlus size={18} />}
+          onClick={handleOpenCreate}
+          color="blue"
+          variant="light"
+          radius="md"
+        >
+          Tambah Realisasi
+        </Button>
+      </Group>
+
+      {/* Summary Cards */}
+      <Group grow mb="md">
+        <Paper withBorder p="md" radius="md" bg="blue.0">
+          <Text fz="xs" c="blue.9" fw={600}>
+            ANGGARAN
+          </Text>
+          <Text fz="lg" c="blue.9" fw={700}>
+            {formatRupiah(itemAnggaran)}
+          </Text>
+        </Paper>
+
+        <Paper withBorder p="md" radius="md" bg="teal.0">
+          <Text fz="xs" c="teal.9" fw={600}>
+            TOTAL REALISASI
+          </Text>
+          <Text fz="lg" c="teal.9" fw={700}>
+            {formatRupiah(itemTotalRealisasi)}
+          </Text>
+        </Paper>
+
+        <Paper withBorder p="md" radius="md" bg={getSisaAnggaran() >= 0 ? 'green.0' : 'red.0'}>
+          <Text fz="xs" c={getSisaAnggaran() >= 0 ? 'green.9' : 'red.9'} fw={600}>
+            SISA ANGGARAN
+          </Text>
+          <Text fz="lg" c={getSisaAnggaran() >= 0 ? 'green.9' : 'red.9'} fw={700}>
+            {formatRupiah(getSisaAnggaran())}
+          </Text>
+        </Paper>
+
+        <Paper withBorder p="md" radius="md" bg={getPersentaseColor(itemPersentase) + '.0'}>
+          <Text fz="xs" c={getPersentaseColor(itemPersentase) + '.9'} fw={600}>
+            PERSENTASE
+          </Text>
+          <Text fz="lg" c={getPersentaseColor(itemPersentase) + '.9'} fw={700}>
+            {itemPersentase.toFixed(2)}%
+          </Text>
+        </Paper>
+      </Group>
+
+      {/* Realisasi List */}
+      {realisasiItems && realisasiItems.length > 0 ? (
+        <Box>
+          <Text fz="sm" fw={600} mb="xs">
+            Daftar Realisasi ({realisasiItems.length})
+          </Text>
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped highlightOnHover fz="sm">
+              <TableThead>
+                <TableTr>
+                  <TableTh>Kode</TableTh>
+                  <TableTh>Tanggal</TableTh>
+                  <TableTh>Uraian</TableTh>
+                  <TableTh ta="right">Jumlah</TableTh>
+                  <TableTh ta="center">Aksi</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {realisasiItems.map((realisasi) => (
+                  <TableTr key={realisasi.id}>
+                    <TableTd>
+                      <Badge variant="light" color="blue" size="sm">
+                        {realisasi.kode || '-'}
+                      </Badge>
+                    </TableTd>
+                    <TableTd>
+                      <Group gap="xs">
+                        <IconCalendar size={16} />
+                        <Text fz="sm">{formatDate(realisasi.tanggal)}</Text>
+                      </Group>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm">{realisasi.keterangan || '-'}</Text>
+                    </TableTd>
+                    <TableTd ta="right">
+                      <Text fz="sm" fw={600} c="blue">
+                        {formatRupiah(realisasi.jumlah)}
+                      </Text>
+                    </TableTd>
+                    <TableTd ta="center">
+                      <Group gap="xs" justify="center">
+                        <ActionIcon
+                          variant="light"
+                          color="blue"
+                          size="sm"
+                          onClick={() => handleOpenEdit(realisasi)}
+                        >
+                          <IconEdit size={16} />
+                        </ActionIcon>
+                        <ActionIcon
+                          variant="light"
+                          color="red"
+                          size="sm"
+                          onClick={() => handleDelete(realisasi.id)}
+                          disabled={loading}
+                        >
+                          <IconTrash size={16} />
+                        </ActionIcon>
+                      </Group>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Box>
+      ) : (
+        <Center py="xl">
+          <Stack align="center" gap="xs">
+            <Text fz="sm" c="dimmed">
+              Belum ada realisasi untuk item ini
+            </Text>
+            <Text fz="xs" c="dimmed">
+              Klik tombol &quot;Tambah Realisasi&quot; untuk menambahkan
+            </Text>
+          </Stack>
+        </Center>
+      )}
+
+      {/* Modal Create/Edit */}
+      <Modal
+        opened={modalOpened}
+        onClose={() => {
+          setModalOpened(false);
+          resetForm();
+        }}
+        title={
+          <Text fz="lg" fw={600}>
+            {editingId ? 'Edit Realisasi' : 'Tambah Realisasi Baru'}
+          </Text>
+        }
+        size="md"
+        centered
+      >
+        <Stack gap="md">
+          {/* Info Item */}
+          <Paper p="sm" bg="gray.0" radius="md">
+            <Text fz="xs" c="dimmed">
+              Item: {itemKode} - {itemUraian}
+            </Text>
+            <Text fz="xs" c="dimmed">
+              Anggaran: {formatRupiah(itemAnggaran)}
+            </Text>
+            <Text fz="xs" c="dimmed">
+              Sudah terealisasi: {formatRupiah(itemTotalRealisasi)}
+            </Text>
+          </Paper>
+
+          <TextInput
+            label="Kode Realisasi"
+            placeholder="Contoh: 4.1.1-R1"
+            value={formData.kode}
+            onChange={(e) => setFormData({ ...formData, kode: e.target.value })}
+            description="Kode unik untuk realisasi ini"
+            required
+          />
+
+          <NumberInput
+            label="Jumlah Realisasi (Rp)"
+            value={formData.jumlah}
+            onChange={(val) => setFormData({ ...formData, jumlah: Number(val) || 0 })}
+            leftSection={<IconCoin size={16} />}
+            thousandSeparator
+            min={0}
+            step={100000}
+            required
+          />
+
+          <TextInput
+            label="Tanggal Realisasi"
+            type="date"
+            value={formData.tanggal}
+            onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
+            leftSection={<IconCalendar size={18} />}
+            required
+          />
+
+          <TextInput
+            label="Keterangan / Uraian"
+            placeholder="Contoh: Penyaluran BLT Tahap 1"
+            value={formData.keterangan}
+            onChange={(e) => setFormData({ ...formData, keterangan: e.target.value })}
+            description="Deskripsi singkat tentang realisasi ini"
+          />
+
+          <Divider my="xs" />
+
+          <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              onClick={() => {
+                setModalOpened(false);
+                resetForm();
+              }}
+              disabled={loading}
+            >
+              Batal
+            </Button>
+            <Button
+              onClick={handleSubmit}
+              loading={loading}
+              color="blue"
+              leftSection={editingId ? <IconEdit size={16} /> : <IconPlus size={16} />}
+            >
+              {editingId ? 'Perbarui' : 'Tambah'} Realisasi
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Paper>
+  );
+}

src/app/admin/(dashboard)/landing-page/apbdes/[id]/edit/page.tsx

@@ -42,9 +42,11 @@ type ItemForm = {
   kode: string;
   uraian: string;
   anggaran: number;
-  realisasi: number;
   level: number;
   tipe: 'pendapatan' | 'belanja' | 'pembiayaan';
+  realisasi?: number;
+  selisih?: number;
+  persentase?: number;
 };
 
 function EditAPBDes() {
@@ -53,7 +55,7 @@ function EditAPBDes() {
   const params = useParams();
 
   const [isSubmitting, setIsSubmitting] = useState(false);
-  
+
   // Check if form is valid
   const isFormValid = () => {
     return (
@@ -71,38 +73,78 @@ function EditAPBDes() {
     kode: '',
     uraian: '',
     anggaran: 0,
-    realisasi: 0,
     level: 1,
     tipe: 'pendapatan',
+    realisasi: 0,
+    selisih: 0,
+    persentase: 0,
   });
 
-  // Type for the API response
-  interface APBDesResponse {
-    id: string;
-    image?: {
-      link: string;
-      id: string;
-    };
-    file?: {
-      link: string;
-      id: string;
-    };
-    // Add other properties as needed
-  }
+  // Simpan data original untuk reset form
+  const [originalData, setOriginalData] = useState({
+    tahun: 0,
+    name: '',
+    deskripsi: '',
+    jumlah: '',
+    imageId: '',
+    fileId: '',
+    imageUrl: '',
+    fileUrl: '',
+  });
 
   // Load data saat pertama kali
   useEffect(() => {
     const id = params?.id as string;
-    if (id) {
-      apbdesState.edit.load(id).then((response) => {
-        const data = response as unknown as APBDesResponse;
-        if (data) {
-          // ✅ Ambil link langsung dari response
-          setPreviewImage(data.image?.link || null);
-          setPreviewDoc(data.file?.link || null);
-        }
-      });
-    }
+    if (!id) return;
+
+    const loadData = async () => {
+      try {
+        const data = await apbdesState.edit.load(id);
+
+        if (!data) return;
+
+        // Set preview dari data lama
+        setPreviewImage(data.image?.link || null);
+        setPreviewDoc(data.file?.link || null);
+
+        // Simpan data original untuk reset
+        setOriginalData({
+          tahun: data.tahun || new Date().getFullYear(),
+          name: data.name || '',
+          deskripsi: data.deskripsi || '',
+          jumlah: data.jumlah || '',
+          imageId: data.imageId || '',
+          fileId: data.fileId || '',
+          imageUrl: data.image?.link || '',
+          fileUrl: data.file?.link || '',
+        });
+
+        // Set form dengan data lama (termasuk imageId dan fileId)
+        apbdesState.edit.form = {
+          tahun: data.tahun || new Date().getFullYear(),
+          name: data.name || '',
+          deskripsi: data.deskripsi || '',
+          jumlah: data.jumlah || '',
+          imageId: data.imageId || '',
+          fileId: data.fileId || '',
+          items: (data.items || []).map((item: any) => ({
+            kode: item.kode,
+            uraian: item.uraian,
+            anggaran: item.anggaran,
+            realisasi: item.totalRealisasi || 0,
+            selisih: item.selisih || 0,
+            persentase: item.persentase || 0,
+            level: item.level,
+            tipe: item.tipe || 'pendapatan',
+          })),
+        };
+      } catch (error) {
+        console.error('Error loading APBDes:', error);
+        toast.error('Gagal memuat data APBDes');
+      }
+    };
+
+    loadData();
   }, [params?.id]);
 
   const handleDrop = (fileType: 'image' | 'doc') => (files: File[]) => {
@@ -119,34 +161,33 @@ function EditAPBDes() {
   };
 
   const handleAddItem = () => {
-    const { kode, uraian, anggaran, realisasi, level, tipe } = newItem;
+    const { kode, uraian, anggaran, level, tipe, realisasi, selisih, persentase } = newItem;
     if (!kode || !uraian) {
       return toast.warn('Kode dan uraian wajib diisi');
     }
 
     const finalTipe = level === 1 ? null : tipe;
-    const selisih = realisasi - anggaran;
-    const persentase = anggaran > 0 ? (realisasi / anggaran) * 100 : 0;
 
     apbdesState.edit.addItem({
       kode,
       uraian,
       anggaran,
-      realisasi,
-      selisih,
-      persentase,
+      realisasi: realisasi || 0,
+      selisih: selisih || 0,
+      persentase: persentase || 0,
       level,
-      tipe: finalTipe, // ✅ Tidak akan undefined
+      tipe: finalTipe,
     });
 
-
     setNewItem({
       kode: '',
       uraian: '',
       anggaran: 0,
-      realisasi: 0,
       level: 1,
       tipe: 'pendapatan',
+      realisasi: 0,
+      selisih: 0,
+      persentase: 0,
     });
   };
 
@@ -162,14 +203,16 @@ function EditAPBDes() {
     try {
       setIsSubmitting(true);
 
-      // Upload file baru jika ada
+      // Upload file baru jika ada perubahan
       if (imageFile) {
         const res = await ApiFetch.api.fileStorage.create.post({
           file: imageFile,
           name: imageFile.name,
         });
         const imageId = res.data?.data?.id;
-        if (imageId) apbdesState.edit.form.imageId = imageId;
+        if (imageId) {
+          apbdesState.edit.form.imageId = imageId;
+        }
       }
 
       if (docFile) {
@@ -178,9 +221,12 @@ function EditAPBDes() {
           name: docFile.name,
         });
         const fileId = res.data?.data?.id;
-        if (fileId) apbdesState.edit.form.fileId = fileId;
+        if (fileId) {
+          apbdesState.edit.form.fileId = fileId;
+        }
       }
 
+      // Image dan file sekarang opsional, tidak perlu validasi
       const success = await apbdesState.edit.update();
       if (success) {
         router.push('/admin/landing-page/apbdes');
@@ -194,21 +240,38 @@ function EditAPBDes() {
   };
 
   const handleReset = () => {
-    const id = params?.id as string;
-    if (id) {
-      apbdesState.edit.load(id);
-      setImageFile(null);
-      setDocFile(null);
-      setNewItem({
-        kode: '',
-        uraian: '',
-        anggaran: 0,
-        realisasi: 0,
-        level: 1,
-        tipe: 'pendapatan',
-      });
-      toast.info('Form dikembalikan ke data awal');
-    }
+    // Reset ke data original (tahun, name, deskripsi, jumlah, imageId, fileId)
+    apbdesState.edit.form = {
+      tahun: originalData.tahun,
+      name: originalData.name,
+      deskripsi: originalData.deskripsi,
+      jumlah: originalData.jumlah,
+      imageId: originalData.imageId,
+      fileId: originalData.fileId,
+      items: [...apbdesState.edit.form.items], // keep existing items
+    };
+
+    // Reset preview ke data original
+    setPreviewImage(originalData.imageUrl || null);
+    setPreviewDoc(originalData.fileUrl || null);
+
+    // Reset file uploads
+    setImageFile(null);
+    setDocFile(null);
+
+    // Reset new item form
+    setNewItem({
+      kode: '',
+      uraian: '',
+      anggaran: 0,
+      level: 1,
+      tipe: 'pendapatan',
+      realisasi: 0,
+      selisih: 0,
+      persentase: 0,
+    });
+
+    toast.info('Form dikembalikan ke data awal');
   };
 
   return (
@@ -232,6 +295,33 @@ function EditAPBDes() {
       >
         <Stack gap="md">
           {/* Header Form */}
+          <TextInput
+            label="Nama APBDes"
+            placeholder="Contoh: APBDes Tahun 2025"
+            value={apbdesState.edit.form.name}
+            onChange={(e) =>
+              (apbdesState.edit.form.name = e.target.value)
+            }
+            description="Opsional - akan diisi otomatis jika kosong"
+          />
+          <TextInput
+            label="Deskripsi"
+            placeholder="Deskripsi APBDes (opsional)"
+            value={apbdesState.edit.form.deskripsi}
+            onChange={(e) =>
+              (apbdesState.edit.form.deskripsi = e.target.value)
+            }
+            description="Opsional"
+          />
+          <TextInput
+            label="Jumlah Total"
+            placeholder="Contoh: Rp 1.000.000.000"
+            value={apbdesState.edit.form.jumlah}
+            onChange={(e) =>
+              (apbdesState.edit.form.jumlah = e.target.value)
+            }
+            description="Opsional - total keseluruhan anggaran"
+          />
           <NumberInput
             label="Tahun"
             value={apbdesState.edit.form.tahun || new Date().getFullYear()}
@@ -243,11 +333,11 @@ function EditAPBDes() {
             required
           />
 
-          {/* Gambar & Dokumen */}
+          {/* Gambar & Dokumen (Opsional) */}
           <Stack gap="xs">
             <Box>
               <Text fw="bold" fz="sm" mb={6}>
-                Gambar APBDes
+                Gambar APBDes (Opsional)
               </Text>
               <Dropzone
                 onDrop={handleDrop('image')}
@@ -287,6 +377,7 @@ function EditAPBDes() {
                     onClick={() => {
                       setPreviewImage(null);
                       setImageFile(null);
+                      apbdesState.edit.form.imageId = ''; // Clear imageId from form
                     }}
                   >
                     <IconX size={14} />
@@ -297,7 +388,7 @@ function EditAPBDes() {
 
             <Box>
               <Text fw="bold" fz="sm" mb={6}>
-                Dokumen APBDes
+                Dokumen APBDes (Opsional)
               </Text>
               <Dropzone
                 onDrop={handleDrop('doc')}
@@ -346,6 +437,7 @@ function EditAPBDes() {
                     onClick={() => {
                       setPreviewDoc(null);
                       setDocFile(null);
+                      apbdesState.edit.form.fileId = ''; // Clear fileId from form
                     }}
                   >
                     <IconX size={14} />
@@ -419,13 +511,6 @@ function EditAPBDes() {
                   thousandSeparator
                   min={0}
                 />
-                <NumberInput
-                  label="Realisasi (Rp)"
-                  value={newItem.realisasi}
-                  onChange={(val) => setNewItem({ ...newItem, realisasi: Number(val) || 0 })}
-                  thousandSeparator
-                  min={0}
-                />
               </Group>
               <Button
                 leftSection={<IconPlus size={16} />}
@@ -450,6 +535,8 @@ function EditAPBDes() {
                     <th>Uraian</th>
                     <th>Anggaran</th>
                     <th>Realisasi</th>
+                    <th>Selisih</th>
+                    <th>%</th>
                     <th>Level</th>
                     <th>Tipe</th>
                     <th style={{ width: '50px' }}>Aksi</th>
@@ -465,7 +552,11 @@ function EditAPBDes() {
                       </td>
                       <td>{item.uraian}</td>
                       <td>{item.anggaran.toLocaleString('id-ID')}</td>
-                      <td>{item.realisasi.toLocaleString('id-ID')}</td>
+                      <td>{item.realisasi?.toLocaleString('id-ID') || '0'}</td>
+                      <td style={{ color: item.selisih && item.selisih > 0 ? 'red' : 'green' }}>
+                        {item.selisih?.toLocaleString('id-ID') || '0'}
+                      </td>
+                      <td>{item.persentase?.toFixed(2) || '0'}%</td>
                       <td>
                         <Badge size="sm" color={item.level === 1 ? 'blue' : item.level === 2 ? 'green' : 'grape'}>
                           L{item.level}
@@ -477,7 +568,7 @@ function EditAPBDes() {
                             {item.tipe}
                           </Badge>
                         ) : (
-                          '-'
+                          <Text size="sm" c="dimmed">-</Text>
                         )}
                       </td>
                       <td>

src/app/admin/(dashboard)/landing-page/apbdes/[id]/page.tsx

@@ -25,6 +25,7 @@ import { useEffect, useState } from 'react';
 import colors from '@/con/colors';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import apbdes from '../../../_state/landing-page/apbdes';
+import RealisasiManager from './RealisasiManager';
 
 
 
@@ -94,7 +95,7 @@ function DetailAPBDes() {
               <Box>
                 <Text fz="lg" fw="bold">Nama APBDes</Text>
                 <Text fz="md" c="dimmed">
-                  {data.name || '-'}
+                  {data.name || `APBDes Tahun ${data.tahun}`}
                 </Text>
               </Box>
 
@@ -105,6 +106,24 @@ function DetailAPBDes() {
                 </Text>
               </Box>
 
+              {data.deskripsi && (
+                <Box>
+                  <Text fz="lg" fw="bold">Deskripsi</Text>
+                  <Text fz="md" c="dimmed">
+                    {data.deskripsi}
+                  </Text>
+                </Box>
+              )}
+
+              {data.jumlah && (
+                <Box>
+                  <Text fz="lg" fw="bold">Jumlah Total</Text>
+                  <Text fz="md" c="dimmed">
+                    {data.jumlah}
+                  </Text>
+                </Box>
+              )}
+
               <Box>
                 <Text fz="lg" fw="bold">Gambar</Text>
                 {data.image?.link ? (
@@ -173,48 +192,60 @@ function DetailAPBDes() {
 
           {/* Tabel Items */}
           {data.items && data.items.length > 0 ? (
-            <Paper withBorder p="md" radius="md">
-              <Text fz="lg" fw="bold" mb="sm">
+            <Stack gap="md">
+              <Text fz="lg" fw="bold">
                 Rincian Pendapatan & Belanja ({data.items.length} item)
               </Text>
-              <Box style={{ overflowX: 'auto' }}>
-                <Table striped highlightOnHover>
-                  <TableThead>
-                    <TableTr>
-                      <TableTh>Uraian</TableTh>
-                      <TableTh>Anggaran (Rp)</TableTh>
-                      <TableTh>Realisasi (Rp)</TableTh>
-                      <TableTh>Selisih (Rp)</TableTh>
-                      <TableTh>Persentase (%)</TableTh>
-                    </TableTr>
-                  </TableThead>
-                  <TableTbody>
-                    {[...data.items] // Create a new array before sorting
-                      .sort((a, b) => a.kode.localeCompare(b.kode))
-                      .map((item) => (
-                        <TableTr key={item.id}>
-                          <TableTd style={getIndent(item.level)}>
-                            <Group>
-                              <Text fw={item.level === 1 ? 'bold' : 'normal'}>{item.kode}</Text>
-                              <Text fz="sm" c="dimmed">{item.uraian}</Text>
-                            </Group>
-                          </TableTd>
-                          <TableTd>{item.anggaran.toLocaleString('id-ID')}</TableTd>
-                          <TableTd>{item.realisasi.toLocaleString('id-ID')}</TableTd>
-                          <TableTd>
-                            <Text c={item.selisih >= 0 ? 'green' : 'red'}>
-                              {item.selisih.toLocaleString('id-ID')}
-                            </Text>
-                          </TableTd>
-                          <TableTd>
-                            <Text fw={500}>{item.persentase.toFixed(2)}%</Text>
-                          </TableTd>
-                        </TableTr>
-                      ))}
-                  </TableTbody>
-                </Table>
-              </Box>
-            </Paper>
+              <Table striped highlightOnHover>
+                <TableThead>
+                  <TableTr>
+                    <TableTh>Uraian</TableTh>
+                    <TableTh>Anggaran (Rp)</TableTh>
+                    <TableTh>Realisasi (Rp)</TableTh>
+                    <TableTh>Selisih (Rp)</TableTh>
+                    <TableTh>Persentase (%)</TableTh>
+                  </TableTr>
+                </TableThead>
+                <TableTbody>
+                  {[...data.items]
+                    .sort((a, b) => a.kode.localeCompare(b.kode))
+                    .map((item) => (
+                      <TableTr key={item.id}>
+                        <TableTd style={getIndent(item.level)}>
+                          <Group>
+                            <Text fw={item.level === 1 ? 'bold' : 'normal'}>{item.kode}</Text>
+                            <Text fz="sm" c="dimmed">{item.uraian}</Text>
+                          </Group>
+                        </TableTd>
+                        <TableTd>{item.anggaran.toLocaleString('id-ID')}</TableTd>
+                        <TableTd>{item.totalRealisasi.toLocaleString('id-ID')}</TableTd>
+                        <TableTd>
+                          <Text c={item.selisih >= 0 ? 'green' : 'red'}>
+                            {item.selisih.toLocaleString('id-ID')}
+                          </Text>
+                        </TableTd>
+                        <TableTd>
+                          <Text fw={500}>{item.persentase.toFixed(2)}%</Text>
+                        </TableTd>
+                      </TableTr>
+                    ))}
+                </TableTbody>
+              </Table>
+
+              {/* Realisasi Manager untuk setiap item */}
+              {data.items.map((item) => (
+                <RealisasiManager
+                  key={item.id}
+                  itemId={item.id}
+                  itemKode={item.kode}
+                  itemUraian={item.uraian}
+                  itemAnggaran={item.anggaran}
+                  itemTotalRealisasi={item.totalRealisasi}
+                  itemPersentase={item.persentase}
+                  realisasiItems={item.realisasiItems || []}
+                />
+              ))}
+            </Stack>
           ) : (
             <Text>Belum ada data item</Text>
           )}

src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx

@@ -33,7 +33,6 @@ type ItemForm = {
   kode: string;
   uraian: string;
   anggaran: number;
-  realisasi: number;
   level: number;
   tipe: 'pendapatan' | 'belanja' | 'pembiayaan';
 };
@@ -47,13 +46,9 @@ function CreateAPBDes() {
   const [docFile, setDocFile] = useState<File | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // Check if form is valid
+  // Check if form is valid - hanya cek items, gambar dan file opsional
   const isFormValid = () => {
-    return (
-      imageFile !== null &&
-      docFile !== null &&
-      stateAPBDes.create.form.items.length > 0
-    );
+    return stateAPBDes.create.form.items.length > 0;
   };
 
   // Form sementara untuk input item baru
@@ -61,7 +56,6 @@ function CreateAPBDes() {
     kode: '',
     uraian: '',
     anggaran: 0,
-    realisasi: 0,
     level: 1,
     tipe: 'pendapatan',
   });
@@ -80,35 +74,40 @@ function CreateAPBDes() {
       kode: '',
       uraian: '',
       anggaran: 0,
-      realisasi: 0,
       level: 1,
       tipe: 'pendapatan',
     });
   };
 
   const handleSubmit = async () => {
-    if (!imageFile || !docFile) {
-      return toast.warn("Pilih gambar dan dokumen terlebih dahulu");
-    }
     if (stateAPBDes.create.form.items.length === 0) {
       return toast.warn("Minimal tambahkan 1 item APBDes");
     }
 
     try {
       setIsSubmitting(true);
-      const [uploadImageRes, uploadDocRes] = await Promise.all([
-        ApiFetch.api.fileStorage.create.post({ file: imageFile, name: imageFile.name }),
-        ApiFetch.api.fileStorage.create.post({ file: docFile, name: docFile.name }),
-      ]);
 
-      const imageId = uploadImageRes?.data?.data?.id;
-      const fileId = uploadDocRes?.data?.data?.id;
+      // Upload files hanya jika ada file yang dipilih
+      let imageId = '';
+      let fileId = '';
 
-      if (!imageId || !fileId) {
-        return toast.error("Gagal mengupload file");
+      if (imageFile) {
+        const uploadImageRes = await ApiFetch.api.fileStorage.create.post({
+          file: imageFile,
+          name: imageFile.name,
+        });
+        imageId = uploadImageRes?.data?.data?.id || '';
       }
 
-      // Update form dengan ID file
+      if (docFile) {
+        const uploadDocRes = await ApiFetch.api.fileStorage.create.post({
+          file: docFile,
+          name: docFile.name,
+        });
+        fileId = uploadDocRes?.data?.data?.id || '';
+      }
+
+      // Update form dengan ID file (bisa kosong)
       stateAPBDes.create.form.imageId = imageId;
       stateAPBDes.create.form.fileId = fileId;
 
@@ -117,9 +116,9 @@ function CreateAPBDes() {
       toast.success("Berhasil menambahkan APBDes");
       resetForm();
       router.push("/admin/landing-page/apbdes");
-    } catch (error) {
+    } catch (error: any) {
       console.error("Gagal submit:", error);
-      toast.error("Gagal menyimpan data");
+      toast.error(error?.message || "Gagal menyimpan data");
     } finally {
       setIsSubmitting(false);
     }
@@ -127,22 +126,17 @@ function CreateAPBDes() {
 
   // Tambahkan item ke state
   const handleAddItem = () => {
-    const { kode, uraian, anggaran, realisasi, level, tipe } = newItem;
+    const { kode, uraian, anggaran, level, tipe } = newItem;
     if (!kode || !uraian) {
       return toast.warn("Kode dan uraian wajib diisi");
     }
 
     const finalTipe = level === 1 ? null : tipe;
-    const selisih = realisasi - anggaran;
-    const persentase = anggaran > 0 ? (realisasi / anggaran) * 100 : 0;
 
     stateAPBDes.create.addItem({
       kode,
       uraian,
       anggaran,
-      realisasi,
-      selisih,
-      persentase,
       level,
       tipe: finalTipe,
     });
@@ -152,7 +146,6 @@ function CreateAPBDes() {
       kode: '',
       uraian: '',
       anggaran: 0,
-      realisasi: 0,
       level: 1,
       tipe: 'pendapatan',
     });
@@ -183,12 +176,16 @@ function CreateAPBDes() {
         style={{ border: '1px solid #e0e0e0' }}
       >
         <Stack gap="md">
-          {/* Gambar & Dokumen (dipendekkan untuk fokus pada items) */}
+          {/* Info: File opsional */}
+          <Text fz="sm" c="dimmed" mb="xs">
+            * Upload gambar dan dokumen bersifat opsional. Bisa dikosongkan jika belum ada.
+          </Text>
+
           <Stack gap={"xs"}>
             {/* Gambar APBDes */}
             <Box>
               <Text fw="bold" fz="sm" mb={6}>
-                Gambar APBDes
+                Gambar APBDes (Opsional)
               </Text>
               <Dropzone
                 onDrop={(files) => {
@@ -258,10 +255,10 @@ function CreateAPBDes() {
               )}
             </Box>
 
-            {/* Dokumen APBDes */}
+            {/* Dokumen APBDes (Opsional) */}
             <Box>
               <Text fw="bold" fz="sm" mb={6}>
-                Dokumen APBDes
+                Dokumen APBDes (Opsional)
               </Text>
               <Dropzone
                 onDrop={(files) => {
@@ -334,6 +331,27 @@ function CreateAPBDes() {
           </Stack>
 
           {/* Form Header */}
+          <TextInput
+            label="Nama APBDes"
+            placeholder="Contoh: APBDes Tahun 2025"
+            value={stateAPBDes.create.form.name}
+            onChange={(e) => (stateAPBDes.create.form.name = e.target.value)}
+            description="Opsional - akan diisi otomatis jika kosong"
+          />
+          <TextInput
+            label="Deskripsi"
+            placeholder="Deskripsi APBDes (opsional)"
+            value={stateAPBDes.create.form.deskripsi}
+            onChange={(e) => (stateAPBDes.create.form.deskripsi = e.target.value)}
+            description="Opsional"
+          />
+          <TextInput
+            label="Jumlah Total"
+            placeholder="Contoh: Rp 1.000.000.000"
+            value={stateAPBDes.create.form.jumlah}
+            onChange={(e) => (stateAPBDes.create.form.jumlah = e.target.value)}
+            description="Opsional - total keseluruhan anggaran"
+          />
           <NumberInput
             label="Tahun"
             value={stateAPBDes.create.form.tahun || new Date().getFullYear()}
@@ -406,13 +424,6 @@ function CreateAPBDes() {
                   thousandSeparator
                   min={0}
                 />
-                <NumberInput
-                  label="Realisasi (Rp)"
-                  value={newItem.realisasi}
-                  onChange={(val) => setNewItem({ ...newItem, realisasi: Number(val) || 0 })}
-                  thousandSeparator
-                  min={0}
-                />
               </Group>
               <Button
                 leftSection={<IconPlus size={16} />}
@@ -434,28 +445,30 @@ function CreateAPBDes() {
                     <th>Kode</th>
                     <th>Uraian</th>
                     <th>Anggaran</th>
-                    <th>Realisasi</th>
                     <th>Level</th>
                     <th>Tipe</th>
                     <th style={{ width: 50 }}>Aksi</th>
                   </tr>
                 </thead>
                 <tbody>
-                  {stateAPBDes.create.form.items.map((item, idx) => (
+                  {stateAPBDes.create.form.items.map((item: any, idx) => (
                     <tr key={idx}>
                       <td><Text size="sm" fw={500}>{item.kode}</Text></td>
                       <td>{item.uraian}</td>
                       <td>{item.anggaran.toLocaleString('id-ID')}</td>
-                      <td>{item.realisasi.toLocaleString('id-ID')}</td>
                       <td>
                         <Badge size="sm" color={item.level === 1 ? 'blue' : item.level === 2 ? 'green' : 'grape'}>
                           L{item.level}
                         </Badge>
                       </td>
                       <td>
-                        <Badge size="sm" color={item.tipe === 'pendapatan' ? 'teal' : 'red'}>
-                          {item.tipe}
-                        </Badge>
+                        {item.tipe ? (
+                          <Badge size="sm" color={item.tipe === 'pendapatan' ? 'teal' : 'red'}>
+                            {item.tipe}
+                          </Badge>
+                        ) : (
+                          <Text size="sm" c="dimmed">-</Text>
+                        )}
                       </td>
                       <td>
                         <ActionIcon color="red" onClick={() => handleRemoveItem(idx)}>

src/app/admin/(dashboard)/landing-page/apbdes/page.tsx

@@ -45,7 +45,7 @@ function APBDes() {
 function ListAPBDes({ search }: { search: string }) {
   const listState = useProxy(apbdes);
   const router = useRouter();
-    const [debouncedSearch] = useDebouncedValue(search, 1000);
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const { data, page, totalPages, loading, load } = listState.findMany;
 

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>
 

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 */}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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

@@ -0,0 +1,428 @@
+'use client'
+import CreateEditor from '../../../_com/createEditor';
+import stateDashboardMusik from '../../../_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 [isExtractingDuration, setIsExtractingDuration] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Fungsi untuk mendapatkan durasi dari file audio
+  const getAudioDuration = (file: File): Promise<string> => {
+    return new Promise((resolve) => {
+      const audio = new Audio();
+      const url = URL.createObjectURL(file);
+      
+      audio.addEventListener('loadedmetadata', () => {
+        const duration = audio.duration;
+        const minutes = Math.floor(duration / 60);
+        const seconds = Math.floor(duration % 60);
+        const formatted = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+        URL.revokeObjectURL(url);
+        resolve(formatted);
+      });
+      
+      audio.addEventListener('error', () => {
+        URL.revokeObjectURL(url);
+        resolve('0:00');
+      });
+      
+      audio.src = url;
+    });
+  };
+
+  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/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={async (files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setAudioFile(selectedFile);
+                  setPreviewAudio(selectedFile.name);
+                  
+                  // Extract durasi otomatis dari audio
+                  setIsExtractingDuration(true);
+                  try {
+                    const duration = await getAudioDuration(selectedFile);
+                    musikState.musik.edit.form.durasi = duration;
+                    toast.success(`Durasi audio terdeteksi: ${duration}`);
+                  } catch (error) {
+                    console.error('Error extracting audio duration:', error);
+                    toast.error('Gagal mendeteksi durasi audio, silakan isi manual');
+                  } finally {
+                    setIsExtractingDuration(false);
+                  }
+                }
+              }}
+              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>
+                    {isExtractingDuration && (
+                      <Text fz="xs" c="blue">
+                        Mendeteksi durasi...
+                      </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>
+  );
+}

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

@@ -0,0 +1,271 @@
+'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/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/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={{
+                width: '100%',
+                maxWidth: 400,
+                margin: '0 auto',
+              }}
+            >
+              <Image
+                src={data.coverImage.link}
+                alt={data.judul}
+                radius="md"
+                style={{
+                  width: '100%',
+                  aspectRatio: '1/1',
+                  objectFit: 'cover',
+                  display: 'block',
+                }}
+              />
+            </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/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>
+  );
+}

src/app/admin/(dashboard)/musik/create/page.tsx

@@ -0,0 +1,426 @@
+'use client'
+import CreateEditor from '../../_com/createEditor';
+import stateDashboardMusik from '../../_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 [isExtractingDuration, setIsExtractingDuration] = useState(false);
+  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Fungsi untuk mendapatkan durasi dari file audio
+  const getAudioDuration = (file: File): Promise<string> => {
+    return new Promise((resolve) => {
+      const audio = new Audio();
+      const url = URL.createObjectURL(file);
+      
+      audio.addEventListener('loadedmetadata', () => {
+        const duration = audio.duration;
+        const minutes = Math.floor(duration / 60);
+        const seconds = Math.floor(duration % 60);
+        const formatted = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+        URL.revokeObjectURL(url);
+        resolve(formatted);
+      });
+      
+      audio.addEventListener('error', () => {
+        URL.revokeObjectURL(url);
+        resolve('0:00');
+      });
+      
+      audio.src = url;
+    });
+  };
+
+  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/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={async (files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setAudioFile(selectedFile);
+                  setPreviewAudio(selectedFile.name);
+                  
+                  // Extract durasi otomatis dari audio
+                  setIsExtractingDuration(true);
+                  try {
+                    const duration = await getAudioDuration(selectedFile);
+                    musikState.musik.create.form.durasi = duration;
+                    toast.success(`Durasi audio terdeteksi: ${duration}`);
+                  } catch (error) {
+                    console.error('Error extracting audio duration:', error);
+                    toast.error('Gagal mendeteksi durasi audio, silakan isi manual');
+                  } finally {
+                    setIsExtractingDuration(false);
+                  }
+                }
+              }}
+              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>
+                    {isExtractingDuration && (
+                      <Text fz="xs" c="blue">
+                        Mendeteksi durasi...
+                      </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>
+  );
+}

src/app/admin/(dashboard)/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/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/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/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;

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)',
               }}

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)',
               }}

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)',
                 }}

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)',
                 }}

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)',
                 }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
                 }}

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)',
                 }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
               }}

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)',
                 }}

src/app/admin/(dashboard)/ppid/daftar-informasi-publik/[id]/edit/page.tsx

@@ -82,17 +82,17 @@ function EditDaftarInformasiPublik() {
       await daftarInformasi.edit.update();
       router.push('/admin/ppid/daftar-informasi-publik');
     } catch (error) {
-      console.error('Error updating berita:', error);
-      toast.error('Terjadi kesalahan saat memperbarui berita');
+      console.error('Error updating daftar informasi:', error);
+      toast.error('Terjadi kesalahan saat memperbarui daftar informasi');
     }
   };
 
   return (
-        <Box px={{ base: 0, md: 'lg' }} py="xs">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <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 Daftar Informasi Publik
         </Title>

src/app/admin/(dashboard)/ppid/dasar-hukum/page.tsx

@@ -6,6 +6,7 @@ import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import stateDasarHukumPPID from '../../_state/ppid/dasar_hukum/dasarHukum';
+import DOMPurify from 'dompurify';
 
 function Page() {
   const router = useRouter();
@@ -68,7 +69,7 @@ function Page() {
                   lh={{ base: 1.15, md: 1.1 }}
                   fw="bold"
                   c={colors['blue-button']}
-                  dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.judul }}
+                  dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(listDasarHukum.findById.data.judul) }}
                   style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
                 />
               </GridCol>
@@ -77,7 +78,7 @@ function Page() {
             <Divider my="xl" color={colors['blue-button']} />
 
             <Text
-              dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.content }}
+              dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(listDasarHukum.findById.data.content) }}
               style={{
                 wordBreak: 'break-word',
                 whiteSpace: 'normal',

src/app/admin/(dashboard)/ppid/profil-ppid/page.tsx

@@ -6,6 +6,7 @@ import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import stateProfilePPID from '../../_state/ppid/profile_ppid/profile_PPID';
+import DOMPurify from 'dompurify';
 
 function Page() {
   const router = useRouter();
@@ -114,7 +115,7 @@ function Page() {
                   c={colors['blue-button']}
                   lh={1.5}
                   style={{ wordBreak: "break-word", whiteSpace: "normal" }}
-                  dangerouslySetInnerHTML={{ __html: item.biodata }}
+                  dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.biodata) }}
                 />
               </Box>
 
@@ -129,7 +130,7 @@ function Page() {
                     c={colors['blue-button']}
                     lh={1.5}
                     style={{ wordBreak: "break-word", whiteSpace: "normal" }}
-                    dangerouslySetInnerHTML={{ __html: item.riwayat }}
+                    dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.riwayat) }}
                   />
                 </Box>
               </Box>
@@ -145,7 +146,7 @@ function Page() {
                     c={colors['blue-button']}
                     lh={1.5}
                     style={{ wordBreak: "break-word", whiteSpace: "normal" }}
-                    dangerouslySetInnerHTML={{ __html: item.pengalaman }}
+                    dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.pengalaman) }}
                   />
                 </Box>
               </Box>
@@ -161,7 +162,7 @@ function Page() {
                     c={colors['blue-button']}
                     lh={1.5}
                     style={{ wordBreak: "break-word", whiteSpace: "normal" }}
-                    dangerouslySetInnerHTML={{ __html: item.unggulan }}
+                    dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.unggulan) }}
                   />
                 </Box>
               </Box>

src/app/admin/(dashboard)/ppid/struktur-ppid/posisi-organisasi/page.tsx

@@ -9,6 +9,7 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import stateStrukturPPID from '../../../_state/ppid/struktur_ppid/struktur_PPID';
+import DOMPurify from 'dompurify';
 
 function PosisiOrganisasiPPID() {
   const [search, setSearch] = useState("");
@@ -100,7 +101,7 @@ function ListPosisiOrganisasiPPID({ search }: { search: string }) {
                       <Text fz="md" fw={600} lh={1.5} truncate="end" lineClamp={1}>{item.nama}</Text>
                     </TableTd>
                     <TableTd w={200}>
-                      <Text fz="sm" lh={1.5} c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }} />
+                      <Text fz="sm" lh={1.5} c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.deskripsi || '-') }} />
                     </TableTd>
                     <TableTd>
                       <Text fz="md" lh={1.5}>{item.hierarki || '-'}</Text>

src/app/admin/(dashboard)/ppid/visi-misi-ppid/page.tsx

@@ -6,6 +6,7 @@ import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import stateVisiMisiPPID from '../../_state/ppid/visi_misi_ppid/visimisiPPID';
+import DOMPurify from 'dompurify'
 
 function VisiMisiPPIDList() {
   const router = useRouter();
@@ -96,7 +97,7 @@ function VisiMisiPPIDList() {
               </Title>
               <Text
                 ta={{ base: "center", md: "justify" }}
-                dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.visi }}
+                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(listVisiMisi.findById.data.visi) }}
                 style={{
                   wordBreak: 'break-word',
                   whiteSpace: 'normal',
@@ -121,7 +122,7 @@ function VisiMisiPPIDList() {
               </Title>
               <Text
                 ta={"justify"}
-                dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.misi }}
+                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(listVisiMisi.findById.data.misi) }}
                 style={{
                   wordBreak: 'break-word',
                   whiteSpace: 'normal',

src/app/admin/(dashboard)/user&role/_com/getMenuIdByRole.ts

@@ -0,0 +1,25 @@
+// src/app/admin/_com/getMenuIdsByRoleId.ts
+import { navBar, role1, role2, role3 } from '@/app/admin/_com/list_PageAdmin';
+
+/**
+ * Mengembalikan daftar ID menu (string[]) berdasarkan roleId
+ */
+export function getMenuIdsByRoleId(roleId: string | number): string[] {
+  const id = typeof roleId === 'string' ? parseInt(roleId, 10) : roleId;
+
+  switch (id) {
+    case 0:
+      // Asumsikan devBar ada dan punya struktur sama
+      return []; // atau sesuaikan jika ada devBar
+    case 1:
+      return navBar.map(section => section.id);
+    case 2:
+      return role1.map(section => section.id);
+    case 3:
+      return role2.map(section => section.id);
+    case 4:
+      return role3.map(section => section.id);
+    default:
+      return [];
+  }
+}

src/app/admin/_com/list_PageAdmin.tsx

@@ -330,7 +330,7 @@ export const devBar = [
         path: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana"
       }
     ]
-  }, 
+  },
   {
     id: "Pendidikan",
     name: "Pendidikan",
@@ -373,6 +373,11 @@ export const devBar = [
       }
     ]
   },
+  {
+    id: "Musik",
+    name: "Musik",
+    path: "/admin/musik"
+  },
   {
     id: "User & Role",
     name: "User & Role",
@@ -729,7 +734,7 @@ export const navBar = [
         path: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana"
       }
     ]
-  }, 
+  },
   {
     id: "Pendidikan",
     name: "Pendidikan",
@@ -772,6 +777,11 @@ export const navBar = [
       }
     ]
   },
+  {
+    id: "Musik",
+    name: "Musik",
+    path: "/admin/musik"
+  },
   {
     id: "User & Role",
     name: "User & Role",
@@ -1051,7 +1061,7 @@ export const role1 = [
       }
 
     ]
-  }, 
+  },
   {
     id: "Lingkungan",
     name: "Lingkungan",
@@ -1088,6 +1098,11 @@ export const role1 = [
         path: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana"
       }
     ]
+  },
+  {
+    id: "Musik",
+    name: "Musik",
+    path: "/admin/musik"
   }
 ]
 
@@ -1133,6 +1148,11 @@ export const role2 = [
         path: "/admin/kesehatan/info-wabah-penyakit"
       }
     ]
+  },
+  {
+    id: "Musik",
+    name: "Musik",
+    path: "/admin/musik"
   }
 ]
 
@@ -1178,5 +1198,10 @@ export const role3 = [
         path: "/admin/pendidikan/data-pendidikan"
       }
     ]
+  },
+  {
+    id: "Musik",
+    name: "Musik",
+    path: "/admin/musik"
   }
 ]

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,110 @@ 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}
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (v.path) handleNavClick(v.path);
+                }}
+                href={v.path || undefined}
               >
-                {v.children.map((child, key) => {
+                {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 +378,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 +386,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>

src/app/api/[[...slugs]]/_lib/desa/berita/create.ts

@@ -1,26 +1,33 @@
 import prisma from "@/lib/prisma";
-import { Prisma } from "@prisma/client";
 import { Context } from "elysia";
 
-type FormCreate = Prisma.BeritaGetPayload<{
-  select: {
-    judul: true;
-    deskripsi: true;
-    content: true;
-    kategoriBeritaId: true;
-    imageId: true;
-  };
-}>;
+type FormCreate = {
+  judul: string;
+  deskripsi: string;
+  content: string;
+  kategoriBeritaId: string;
+  imageId: string; // Featured image
+  imageIds?: string[]; // Multiple images for gallery
+  linkVideo?: string; // YouTube link
+};
+
 async function beritaCreate(context: Context) {
   const body = context.body as FormCreate;
 
   await prisma.berita.create({
-  data: {
+    data: {
       content: body.content,
       deskripsi: body.deskripsi,
       imageId: body.imageId,
       judul: body.judul,
       kategoriBeritaId: body.kategoriBeritaId,
+      // Connect multiple images if provided
+      linkVideo: body.linkVideo,
+      images: body.imageIds && body.imageIds.length > 0
+      ? {
+        connect: body.imageIds.map((id) => ({ id })),
+      }
+      : undefined,
     },
   });
 

src/app/api/[[...slugs]]/_lib/desa/berita/find-by-id.ts

@@ -28,6 +28,7 @@ export default async function handler(
       where: { id },
       include: {
         image: true,
+        images: true,
         kategoriBerita: true,
       },
     });

src/app/api/[[...slugs]]/_lib/desa/berita/index.ts

@@ -21,6 +21,8 @@ const Berita = new Elysia({ prefix: "/berita", tags: ["Desa/Berita"] })
       imageId: t.String(),
       content: t.String(),
       kategoriBeritaId: t.Union([t.String(), t.Null()]),
+      imageIds: t.Array(t.String()),
+      linkVideo: t.Optional(t.String()),
     }),
   })
   .get("/find-first", beritaFindFirst)
@@ -39,6 +41,8 @@ const Berita = new Elysia({ prefix: "/berita", tags: ["Desa/Berita"] })
         imageId: t.String(),
         content: t.String(),
         kategoriBeritaId: t.Union([t.String(), t.Null()]),
+        imageIds: t.Array(t.String()),
+        linkVideo: t.Optional(t.String()),
       }),
     }
   );