Ganti ke settingan awal Docker

- Added .dockerignore to prevent build poisoning from local artifacts.
- Updated Dockerfile with stable Bun version, memory limits, and missing config files.
- Refined prisma.ts signal handlers to avoid process termination during Next.js build phases.
- Synchronized eslint-config-next with Next.js version.

.dockerignore

@@ -0,0 +1,47 @@
+node_modules
+.next
+.git
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+bun-debug.log*
+
+# Docker files
+Dockerfile
+.dockerignore
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Markdown/Documentation
+README.md
+GEMINI.md
+AGENTS.md
+AUDIT_REPORT.md
+QWEN.md
+NOTE.md
+task-project-apbdes.md
+MUSIK_CREATE_ANALYSIS.md
+darkMode.md
+/test-results
+/playwright-report
+/tmp_assets
+/foldergambar
+/googleapi
+/xx
+/xx.ts
+/xx.txt
+/test.txt
+/x.json
+/x.sh
+/xcoba.ts
+/xcoba2.ts
+/gambar.ttx
+/test-berita-state.ts

.env

@@ -0,0 +1,19 @@
+DATABASE_URL="postgresql://bip:Production_123@localhost:5433/desa-darmasaba-v0.0.1?schema=public"
+# Seafile
+SEAFILE_TOKEN=20a19f4a04032215d50ce53292e6abdd38b9f806
+SEAFILE_REPO_ID=f0e9ee4a-fd13-49a2-81c0-f253951d063a
+SEAFILE_URL=https://cld-dkr-makuro-seafile.wibudev.com
+SEAFILE_PUBLIC_SHARE_TOKEN=3a9a9ecb5e244f4da8ae
+
+# Upload
+WIBU_UPLOAD_DIR=uploads
+WIBU_DOWNLOAD_DIR="./download"
+NEXT_PUBLIC_BASE_URL="http://localhost:3000"
+EMAIL_USER=nicoarya20@gmail.com
+EMAIL_PASS=hymmfpcaqzqkfgbh
+BASE_SESSION_KEY=kp9sGx91as0Kj2Ls81nAsl2Kdj13KsxP
+BASE_TOKEN_KEY=Qm82JsA92lMnKw0291mxKaaP02KjslaA
+
+# BOT-TELE
+BOT_TOKEN=8479423145:AAE9ArrOgTD3DyVxYSVs3IXN40u_sL6c9sw
+CHAT_ID=-1003368982298

.env.example

@@ -0,0 +1,41 @@
+# Database Configuration
+DATABASE_URL="postgresql://username:password@localhost:5432/desa-darmasaba?schema=public"
+
+# Seafile Configuration (File Storage)
+SEAFILE_TOKEN=your_seafile_token
+SEAFILE_REPO_ID=your_seafile_repo_id
+SEAFILE_URL=https://your-seafile-instance.com
+SEAFILE_PUBLIC_SHARE_TOKEN=your_seafile_public_share_token
+
+# Upload Configuration
+WIBU_UPLOAD_DIR=uploads
+WIBU_DOWNLOAD_DIR=./download
+
+# Application Configuration
+# IMPORTANT: For staging/production, set this to your actual domain
+# Local development: NEXT_PUBLIC_BASE_URL=http://localhost:3000
+# Staging: NEXT_PUBLIC_BASE_URL=https://desa-darmasaba-stg.wibudev.com
+# Production: NEXT_PUBLIC_BASE_URL=https://your-production-domain.com
+# Or use relative URL '/' for automatic protocol/domain detection (recommended)
+NEXT_PUBLIC_BASE_URL=/
+
+# Email Configuration (for notifications/subscriptions)
+EMAIL_USER=your_email@gmail.com
+EMAIL_PASS=your_email_app_password
+
+# Session Configuration
+BASE_SESSION_KEY=your_session_key_generate_secure_random_string
+BASE_TOKEN_KEY=your_jwt_secret_key_generate_secure_random_string
+
+# Telegram Bot Configuration (for notifications)
+BOT_TOKEN=your_telegram_bot_token
+CHAT_ID=your_telegram_chat_id
+
+# Session Password (for iron-session)
+SESSION_PASSWORD="your_session_password_min_32_characters_long_secure"
+
+# ElevenLabs API Key (for TTS features - optional)
+ELEVENLABS_API_KEY=your_elevenlabs_api_key
+
+# Environment (optional, defaults to development)
+# NODE_ENV=development

.gemini/hooks/telegram-notify.ts

@@ -1,43 +1,52 @@
 #!/usr/bin/env bun
-import { readFileSync } from "node:fs";
+import { readFileSync, existsSync } from "node:fs";
+import { join } from "node:path";
 
-// Fungsi untuk mencari string terpanjang dalam objek (biasanya balasan AI)
-function findLongestString(obj: any): string {
-	let longest = "";
-	const search = (item: any) => {
-		if (typeof item === "string") {
-			if (item.length > longest.length) longest = item;
-		} else if (Array.isArray(item)) {
-			item.forEach(search);
-		} else if (item && typeof item === "object") {
-			Object.values(item).forEach(search);
+// Function to manually load .env from project root if process.env is missing keys
+function loadEnv() {
+	const envPath = join(process.cwd(), ".env");
+	if (existsSync(envPath)) {
+		const envContent = readFileSync(envPath, "utf-8");
+		const lines = envContent.split("\n");
+		for (const line of lines) {
+			if (line && !line.startsWith("#")) {
+				const [key, ...valueParts] = line.split("=");
+				if (key && valueParts.length > 0) {
+					const value = valueParts.join("=").trim().replace(/^["']|["']$/g, "");
+					process.env[key.trim()] = value;
+				}
+			}
 		}
-	};
-	search(obj);
-	return longest;
+	}
 }
 
 async function run() {
 	try {
+		// Ensure environment variables are loaded
+		loadEnv();
+
 		const inputRaw = readFileSync(0, "utf-8");
 		if (!inputRaw) return;
-		const input = JSON.parse(inputRaw);
 
-		// DEBUG: Lihat struktur asli di console terminal (stderr)
-		console.error("DEBUG KEYS:", Object.keys(input));
+		let finalText = "";
+		let sessionId = "web-desa-darmasaba";
+
+		try {
+			// Try parsing as JSON first
+			const input = JSON.parse(inputRaw);
+			sessionId = input.session_id || "web-desa-darmasaba";
+			finalText = typeof input === "string" ? input : (input.response || input.text || JSON.stringify(input));
+		} catch {
+			// If not JSON, use raw text
+			finalText = inputRaw;
+		}
 
 		const BOT_TOKEN = process.env.BOT_TOKEN;
 		const CHAT_ID = process.env.CHAT_ID;
 
-		const sessionId = input.session_id || "unknown";
-
-		// Cari teks secara otomatis di seluruh objek JSON
-		let finalText = findLongestString(input.response || input);
-
-		if (!finalText || finalText.length < 5) {
-			finalText =
-				"Teks masih gagal diekstraksi. Struktur: " +
-				Object.keys(input).join(", ");
+		if (!BOT_TOKEN || !CHAT_ID) {
+			console.error("Missing BOT_TOKEN or CHAT_ID in environment variables");
+			return;
 		}
 
 		const message =
@@ -45,7 +54,7 @@ async function run() {
 			`🆔 Session: \`${sessionId}\` \n\n` +
 			`🧠 Output:\n${finalText.substring(0, 3500)}`;
 
-		await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
+		const res = await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
 			body: JSON.stringify({
@@ -55,6 +64,13 @@ async function run() {
 			}),
 		});
 
+		if (!res.ok) {
+			const errorData = await res.json();
+			console.error("Telegram API Error:", errorData);
+		} else {
+			console.log("Notification sent successfully!");
+		}
+
 		process.stdout.write(JSON.stringify({ status: "continue" }));
 	} catch (err) {
 		console.error("Hook Error:", err);

.gitignore

@@ -29,7 +29,12 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env 
-.env*
+# env local files (keep .env.example)
+.env.local
+.env*.local
+.env.production
+.env.development
+!.env.example
 
 # QC
 QC
@@ -52,7 +57,5 @@ next-env.d.ts
 
 .github/
 
-.env.*
-
 *.tar.gz
 

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.).

Dockerfile

@@ -0,0 +1,136 @@
+# # Stage 1: Build
+# FROM oven/bun:1.1 AS build
+
+# # Install build dependencies for native modules
+# RUN apt-get update && apt-get install -y \
+#     python3 \
+#     make \
+#     g++ \
+#     && rm -rf /var/lib/apt/lists/*
+
+# # Set the working directory
+# WORKDIR /app
+
+# # Disable telemetry and set build-time environment
+# ENV NEXT_TELEMETRY_DISABLED=1
+# ENV NODE_ENV=production
+# ENV NODE_OPTIONS="--max-old-space-size=4096"
+# # Critical ENV for API route evaluation during build
+# ENV WIBU_UPLOAD_DIR=uploads
+# ENV DATABASE_URL="postgresql://bip:Production_123@pgbouncer:5432/desa-darmasaba-staging?pgbouncer=true"
+
+# # Copy package files
+# COPY package.json bun.lock* ./
+
+# # Install dependencies with frozen lockfile
+# RUN bun install --frozen-lockfile
+
+# # Copy the rest of the application code
+# COPY . .
+
+# # Use .env.example as default env for build
+# RUN cp .env.example .env
+
+# # Generate Prisma client
+# RUN bun x prisma generate
+
+# # Build the application frontend
+# RUN bun run build
+
+# # Stage 2: Runtime
+# FROM oven/bun:1.1-slim AS runtime
+
+# # Set environment variables
+# ENV NODE_ENV=production
+# ENV NEXT_TELEMETRY_DISABLED=1
+# # Ensure runtime also has critical envs if they are checked at startup
+# ENV WIBU_UPLOAD_DIR=uploads
+
+# # Install runtime dependencies
+# RUN apt-get update && apt-get install -y \
+#     postgresql-client \
+#     && rm -rf /var/lib/apt/lists/*
+
+# # Set the working directory
+# WORKDIR /app
+
+# # Copy necessary files from build stage
+# COPY --from=build /app/package.json ./
+# COPY --from=build /app/bun.lock* ./
+# COPY --from=build /app/next.config.ts ./
+# COPY --from=build /app/postcss.config.cjs ./
+# COPY --from=build /app/tsconfig.json ./
+# COPY --from=build /app/.next ./.next
+# COPY --from=build /app/public ./public
+# COPY --from=build /app/node_modules ./node_modules
+# COPY --from=build /app/prisma ./prisma
+
+# # Expose the port
+# EXPOSE 3000
+
+# # Start the application
+# CMD ["bun", "start"]
+
+
+# Stage 1: Build
+FROM oven/bun:1.3 AS build
+
+# Install build dependencies for native modules
+RUN apt-get update && apt-get install -y \
+    python3 \
+    make \
+    g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package files
+COPY package.json bun.lock* ./
+
+# Install dependencies
+RUN bun install --frozen-lockfile
+
+# Copy the rest of the application code
+COPY . .
+
+# Use .env.example as default env for build
+RUN cp .env.example .env
+
+# Generate Prisma client
+RUN bun x prisma generate
+
+# Generate API types
+RUN bun run gen:api
+
+# Build the application frontend
+RUN bun run build
+
+# Stage 2: Runtime
+FROM oven/bun:1.3-slim AS runtime
+
+# Set environment variables
+ENV NODE_ENV=production
+
+# Install runtime dependencies
+RUN apt-get update && apt-get install -y \
+    postgresql-client \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set the working directory
+WORKDIR /app
+
+# Copy necessary files from build stage
+COPY --from=build /app/package.json ./
+COPY --from=build /app/tsconfig.json ./
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/generated ./generated
+COPY --from=build /app/src ./src
+COPY --from=build /app/node_modules ./node_modules
+COPY --from=build /app/prisma ./prisma
+
+# Expose the port
+EXPOSE 3000
+
+# Start the application
+CMD ["bun", "start"]

MUSIK_CREATE_ANALYSIS.md

@@ -0,0 +1,173 @@
+# Musik Desa - Create Feature Analysis
+
+## Error Summary
+**Error**: `ERR_BLOCKED_BY_CLIENT` saat create musik di staging environment
+
+## Root Cause Analysis
+
+### 1. **CORS Configuration Issue** (Primary)
+File: `src/app/api/[[...slugs]]/route.ts`
+
+The CORS configuration has specific origins listed:
+```typescript
+const corsConfig = {
+  origin: [
+    "http://localhost:3000",
+    "http://localhost:3001",
+    "https://cld-dkr-desa-darmasaba-stg.wibudev.com",
+    "https://cld-dkr-staging-desa-darmasaba.wibudev.com",
+    "*",
+  ],
+  // ...
+}
+```
+
+**Problem**: The wildcard `*` is at the end, but some browsers don't respect it when `credentials: true` is set.
+
+### 2. **API Fetch Base URL** (Secondary)
+File: `src/lib/api-fetch.ts`
+
+```typescript
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'
+```
+
+**Problem**: 
+- In staging, this might still default to `http://localhost:3000`
+- Mixed content (HTTPS frontend → HTTP API) gets blocked by browsers
+- The `NEXT_PUBLIC_BASE_URL` environment variable might not be set in staging
+
+### 3. **File Storage Upload Path** (Tertiary)
+File: `src/app/api/[[...slugs]]/_lib/fileStorage/_lib/create.ts`
+
+```typescript
+const UPLOAD_DIR = process.env.WIBU_UPLOAD_DIR;
+```
+
+**Problem**: If `WIBU_UPLOAD_DIR` is not set or points to a non-writable location, uploads will fail silently.
+
+## Solution
+
+### Fix 1: Update CORS Configuration
+**File**: `src/app/api/[[...slugs]]/route.ts`
+
+```typescript
+// Move wildcard to first position and ensure it works with credentials
+const corsConfig = {
+  origin: [
+    "*", // Allow all origins (for staging flexibility)
+    "http://localhost:3000",
+    "http://localhost:3001",
+    "https://cld-dkr-desa-darmasaba-stg.wibudev.com",
+    "https://cld-dkr-staging-desa-darmasaba.wibudev.com",
+    "https://desa-darmasaba-stg.wibudev.com"
+  ],
+  methods: ["GET", "POST", "PATCH", "DELETE", "PUT", "OPTIONS"] as HTTPMethod[],
+  allowedHeaders: ["Content-Type", "Authorization", "Accept"],
+  exposedHeaders: ["Content-Range", "X-Content-Range"],
+  maxAge: 86400, // 24 hours
+  credentials: true,
+};
+```
+
+### Fix 2: Add Environment Variable Validation
+**File**: `.env.example` (update)
+
+```bash
+# Application Configuration
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+
+# For staging/production, set this to your actual domain
+# NEXT_PUBLIC_BASE_URL=https://cld-dkr-desa-darmasaba-stg.wibudev.com
+```
+
+### Fix 3: Update API Fetch to Handle Relative URLs
+**File**: `src/lib/api-fetch.ts`
+
+```typescript
+import { AppServer } from '@/app/api/[[...slugs]]/route'
+import { treaty } from '@elysiajs/eden'
+
+// Use relative URL for better deployment flexibility
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || '/'
+
+const ApiFetch = treaty<AppServer>(BASE_URL)
+
+export default ApiFetch
+```
+
+### Fix 4: Add Error Handling in Create Page
+**File**: `src/app/admin/(dashboard)/musik/create/page.tsx`
+
+Add better error logging to diagnose issues:
+
+```typescript
+const handleSubmit = async () => {
+  // ... validation ...
+
+  try {
+    setIsSubmitting(true);
+
+    // Upload cover image
+    const coverRes = await ApiFetch.api.fileStorage.create.post({
+      file: coverFile,
+      name: coverFile.name,
+    });
+
+    if (!coverRes.data?.data?.id) {
+      console.error('Cover upload failed:', coverRes);
+      return toast.error('Gagal mengunggah cover, silakan coba lagi');
+    }
+
+    // ... rest of the code ...
+
+  } catch (error) {
+    console.error('Error creating musik:', {
+      error,
+      message: error instanceof Error ? error.message : 'Unknown error',
+      stack: error instanceof Error ? error.stack : undefined,
+    });
+    toast.error('Terjadi kesalahan saat membuat musik');
+  } finally {
+    setIsSubmitting(false);
+  }
+};
+```
+
+## Testing Checklist
+
+### Local Development
+- [ ] Test create musik with cover image and audio file
+- [ ] Verify CORS headers in browser DevTools Network tab
+- [ ] Check that file uploads are saved to correct directory
+
+### Staging Environment
+- [ ] Set `NEXT_PUBLIC_BASE_URL` to staging domain
+- [ ] Verify HTTPS is used for all API calls
+- [ ] Check browser console for mixed content warnings
+- [ ] Verify `WIBU_UPLOAD_DIR` is set and writable
+- [ ] Test create musik end-to-end
+
+## Additional Notes
+
+### ERR_BLOCKED_BY_CLIENT Common Causes:
+1. **CORS policy blocking** - Most likely cause
+2. **Ad blockers** - Can block certain API endpoints
+3. **Mixed content** - HTTPS page making HTTP requests
+4. **Content Security Policy (CSP)** - Restrictive CSP headers
+5. **Browser extensions** - Privacy/security extensions blocking requests
+
+### Debugging Steps:
+1. Open browser DevTools → Network tab
+2. Try to create musik
+3. Look for failed requests (red status)
+4. Check the "Headers" tab for:
+   - Request URL (should be correct domain)
+   - Response headers (should have `Access-Control-Allow-Origin`)
+   - Status code (4xx/5xx indicates server-side issue)
+5. Check browser console for CORS errors
+
+## Recommended Next Steps
+
+1. **Immediate**: Update CORS configuration to allow staging domain
+2. **Short-term**: Add proper environment variable validation
+3. **Long-term**: Implement proper error boundaries and logging

next.config.ts

@@ -1,6 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  serverExternalPackages: ['@elysiajs/static', 'elysia'],
   experimental: {},
   allowedDevOrigins: [
     "http://192.168.1.82:3000", // buat akses dari HP/device lain
@@ -19,7 +20,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",
@@ -70,7 +70,7 @@
     "embla-carousel-react": "^8.6.0",
     "extract-zip": "^2.0.1",
     "form-data": "^4.0.2",
-    "framer-motion": "^12.23.5",
+    "framer-motion": "^12.38.0",
     "get-port": "^7.1.0",
     "iron-session": "^8.0.4",
     "jose": "^6.1.0",
@@ -89,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",
@@ -100,7 +100,7 @@
     "react-transition-group": "^4.4.5",
     "react-zoom-pan-pinch": "^3.7.0",
     "readdirp": "^4.1.1",
-    "recharts": "^2.15.3",
+    "recharts": "^3.8.0",
     "sharp": "^0.34.3",
     "swr": "^2.3.2",
     "uuid": "^11.1.0",
@@ -120,7 +120,7 @@
     "@types/react-dom": "^19",
     "@vitest/ui": "^4.0.18",
     "eslint": "^9",
-    "eslint-config-next": "15.1.6",
+    "eslint-config-next": "15.5.12",
     "jsdom": "^28.0.0",
     "msw": "^2.12.9",
     "parcel": "^2.6.2",

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/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())
@@ -609,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 {
@@ -2263,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)/_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,53 +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 = realisasi - anggaran; // 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,
   };
 }
 
@@ -113,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,
@@ -158,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 {
@@ -244,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',
             })),
@@ -280,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) {
@@ -317,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)/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/profil/profil-perbekel/page.tsx

@@ -95,7 +95,7 @@ function Page() {
                 fz={{ base: 'md', md: 'lg' }}
                 lh={{ base: 1.4, md: 1.4 }}
               >
-                {perbekel.nama || "I.B. Surya Prabhawa Manuaba, S.H., M.H."}
+                I.B. Surya Prabhawa Manuaba, S.H., M.H.
               </Text>
             </Paper>
           </Stack>

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() {
@@ -71,14 +73,19 @@ function EditAPBDes() {
     kode: '',
     uraian: '',
     anggaran: 0,
-    realisasi: 0,
     level: 1,
     tipe: 'pendapatan',
+    realisasi: 0,
+    selisih: 0,
+    persentase: 0,
   });
 
   // Simpan data original untuk reset form
   const [originalData, setOriginalData] = useState({
     tahun: 0,
+    name: '',
+    deskripsi: '',
+    jumlah: '',
     imageId: '',
     fileId: '',
     imageUrl: '',
@@ -103,6 +110,9 @@ function EditAPBDes() {
         // 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 || '',
@@ -112,15 +122,18 @@ function EditAPBDes() {
         // 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.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',
           })),
@@ -148,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,
     });
   };
 
@@ -193,7 +205,6 @@ function EditAPBDes() {
 
       // Upload file baru jika ada perubahan
       if (imageFile) {
-        // Hapus file lama dari form jika ada file baru
         const res = await ApiFetch.api.fileStorage.create.post({
           file: imageFile,
           name: imageFile.name,
@@ -205,7 +216,6 @@ function EditAPBDes() {
       }
 
       if (docFile) {
-        // Hapus file lama dari form jika ada file baru
         const res = await ApiFetch.api.fileStorage.create.post({
           file: docFile,
           name: docFile.name,
@@ -216,15 +226,7 @@ function EditAPBDes() {
         }
       }
 
-      // Jika tidak ada file baru, gunakan ID lama (sudah ada di form)
-      // Pastikan imageId dan fileId tetap ada
-      if (!apbdesState.edit.form.imageId) {
-        return toast.warn('Gambar wajib diunggah');
-      }
-      if (!apbdesState.edit.form.fileId) {
-        return toast.warn('Dokumen wajib diunggah');
-      }
-
+      // Image dan file sekarang opsional, tidak perlu validasi
       const success = await apbdesState.edit.update();
       if (success) {
         router.push('/admin/landing-page/apbdes');
@@ -238,9 +240,12 @@ function EditAPBDes() {
   };
 
   const handleReset = () => {
-    // Reset ke data original (tahun, imageId, fileId)
+    // 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
@@ -249,21 +254,23 @@ function EditAPBDes() {
     // 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,
-      realisasi: 0,
       level: 1,
       tipe: 'pendapatan',
+      realisasi: 0,
+      selisih: 0,
+      persentase: 0,
     });
-    
+
     toast.info('Form dikembalikan ke data awal');
   };
 
@@ -288,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()}
@@ -299,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')}
@@ -343,6 +377,7 @@ function EditAPBDes() {
                     onClick={() => {
                       setPreviewImage(null);
                       setImageFile(null);
+                      apbdesState.edit.form.imageId = ''; // Clear imageId from form
                     }}
                   >
                     <IconX size={14} />
@@ -353,7 +388,7 @@ function EditAPBDes() {
 
             <Box>
               <Text fw="bold" fz="sm" mb={6}>
-                Dokumen APBDes
+                Dokumen APBDes (Opsional)
               </Text>
               <Dropzone
                 onDrop={handleDrop('doc')}
@@ -402,6 +437,7 @@ function EditAPBDes() {
                     onClick={() => {
                       setPreviewDoc(null);
                       setDocFile(null);
+                      apbdesState.edit.form.fileId = ''; // Clear fileId from form
                     }}
                   >
                     <IconX size={14} />
@@ -475,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} />}
@@ -506,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>
@@ -521,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}
@@ -533,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/prestasi-desa/kategori-prestasi-desa/page.tsx

@@ -211,6 +211,9 @@ function ListKategoriPrestasi({ search }: { search: string }) {
           </Stack>
         </Box>
 
+
+        
+
         {/* Modal Konfirmasi Hapus */}
         <ModalKonfirmasiHapus
           opened={modalHapus}

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,440 @@
+'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
+      console.log('Uploading cover image:', coverFile.name);
+      const coverRes = await ApiFetch.api.fileStorage.create.post({
+        file: coverFile,
+        name: coverFile.name,
+      });
+
+      console.log('Cover upload response:', coverRes);
+      const coverUploaded = coverRes.data?.data;
+      if (!coverUploaded?.id) {
+        console.error('Cover upload failed:', coverRes);
+        toast.error('Gagal mengunggah cover, silakan coba lagi');
+        return;
+      }
+
+      musikState.musik.create.form.coverImageId = coverUploaded.id;
+
+      // Upload audio file
+      console.log('Uploading audio file:', audioFile.name);
+      const audioRes = await ApiFetch.api.fileStorage.create.post({
+        file: audioFile,
+        name: audioFile.name,
+      });
+
+      console.log('Audio upload response:', audioRes);
+      const audioUploaded = audioRes.data?.data;
+      if (!audioUploaded?.id) {
+        console.error('Audio upload failed:', audioRes);
+        toast.error('Gagal mengunggah audio, silakan coba lagi');
+        return;
+      }
+
+      musikState.musik.create.form.audioFileId = audioUploaded.id;
+
+      // Create musik entry
+      console.log('Creating musik entry with form:', musikState.musik.create.form);
+      await musikState.musik.create.create();
+
+      resetForm();
+      router.push('/admin/musik');
+    } catch (error) {
+      console.error('Error creating musik:', {
+        error,
+        message: error instanceof Error ? error.message : 'Unknown error',
+        stack: error instanceof Error ? error.stack : undefined,
+      });
+      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)/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,9 +1,9 @@
 'use client'
 
-import { authStore } from "@/store/authStore";
-import { useDarkMode } from "@/state/darkModeStore";
-import { themeTokens, getActiveStateStyles } from "@/utils/themeTokens";
 import { DarkModeToggle } from "@/components/admin/DarkModeToggle";
+import { useDarkMode } from "@/state/darkModeStore";
+import { authStore } from "@/store/authStore";
+import { themeTokens } from "@/utils/themeTokens";
 import {
   ActionIcon,
   AppShell,
@@ -316,8 +316,13 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                 }}
                 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

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()),
       }),
     }
   );

src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/del.ts

@@ -17,7 +17,6 @@ export default async function kategoriBeritaDelete(context: Context) {
             where: {
                 kategoriBeritaId: id,
                 isActive: true,
-                deletedAt: null,
             },
         });
 

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

@@ -4,52 +4,48 @@ import { Prisma } from "@prisma/client";
 import fs from "fs/promises";
 import path from "path";
 
-type FormUpdate = Prisma.BeritaGetPayload<{
-  select: {
-    id: true;
-    judul: true;
-    deskripsi: true;
-    content: true;
-    kategoriBeritaId: true;
-    imageId: true;
-  };
-}>;
+type FormUpdate = {
+  id: string;
+  judul: string;
+  deskripsi: string;
+  content: string;
+  kategoriBeritaId: string;
+  imageId: string; // Featured image
+  imageIds?: string[]; // Multiple images for gallery
+  linkVideo?: string; // YouTube link
+};
 
 async function beritaUpdate(context: Context) {
   try {
-    const id = context.params?.id as string; // ambil dari URL
+    const id = context.params?.id as string;
     const body = (await context.body) as Omit<FormUpdate, "id">;
-  
-    const {
-      judul,
-      deskripsi,
-      content,
-      kategoriBeritaId,
-      imageId,
-    } = body;
-  
+
+    const { judul, deskripsi, content, kategoriBeritaId, imageId, imageIds, linkVideo } = body;
+
     if (!id) {
       return new Response(
         JSON.stringify({ success: false, message: "ID tidak boleh kosong" }),
-        { status: 400, headers: { 'Content-Type': 'application/json' } }
+        { status: 400, headers: { "Content-Type": "application/json" } },
       );
     }
-  
+
     const existing = await prisma.berita.findUnique({
       where: { id },
       include: {
         image: true,
+        images: true, // Include gallery images
         kategoriBerita: true,
       },
     });
-  
+
     if (!existing) {
       return new Response(
         JSON.stringify({ success: false, message: "Berita tidak ditemukan" }),
-        { status: 404, headers: { 'Content-Type': 'application/json' } }
+        { status: 404, headers: { "Content-Type": "application/json" } },
       );
     }
-  
+
+    // Delete old featured image if changed
     if (existing.imageId && existing.imageId !== imageId) {
       const oldImage = existing.image;
       if (oldImage) {
@@ -64,35 +60,60 @@ async function beritaUpdate(context: Context) {
         }
       }
     }
-  
+
+    // Build update data
+    const updateData: Prisma.BeritaUpdateInput = {
+      judul,
+      deskripsi,
+      content,
+      kategoriBerita: kategoriBeritaId ? { connect: { id: kategoriBeritaId } } : { disconnect: true },
+      image: imageId ? { connect: { id: imageId } } : { disconnect: true },
+      linkVideo,
+    };
+
+    // Handle multiple images update
+    if (imageIds !== undefined) {
+      // Disconnect all existing images first
+      updateData.images = {
+        set: [],
+      };
+      
+      // Connect new images if provided
+      if (imageIds.length > 0) {
+        updateData.images = {
+          ...updateData.images,
+          connect: imageIds.map((id) => ({ id })),
+        };
+      }
+    }
+
     const updated = await prisma.berita.update({
       where: { id },
-      data: {
-        judul,
-        deskripsi,
-        content,
-        kategoriBeritaId: kategoriBeritaId || null,
-        imageId,
+      data: updateData,
+      include: {
+        image: true,
+        images: true,
+        kategoriBerita: true,
       },
     });
-  
+
     return new Response(
       JSON.stringify({
         success: true,
         message: "Berita berhasil diupdate",
         data: updated,
       }),
-      { status: 200, headers: { 'Content-Type': 'application/json' } }
+      { status: 200, headers: { "Content-Type": "application/json" } },
     );
   } catch (error) {
-    console.error("Error updating berita:", error); 
+    console.error("Error updating berita:", error);
     return new Response(
       JSON.stringify({
         success: false,
         message: "Terjadi kesalahan saat mengupdate berita",
       }),
-      { status: 500, headers: { 'Content-Type': 'application/json' } }
+      { status: 500, headers: { "Content-Type": "application/json" } },
     );
   }
 }
-  export default beritaUpdate;
+export default beritaUpdate;

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

@@ -2,7 +2,7 @@ import Elysia from "elysia";
 import Berita from "./berita";
 import Pengumuman from "./pengumuman";
 import ProfileDesa from "./profile/profile_desa";
-import PotensiDesa from "./potensi"; 
+import PotensiDesa from "./potensi";
 import GalleryFoto from "./gallery/foto";
 import GalleryVideo from "./gallery/video";
 import LayananDesa from "./layanan";
@@ -12,9 +12,10 @@ import KategoriBerita from "./berita/kategori-berita";
 import KategoriPengumuman from "./pengumuman/kategori-pengumuman";
 import MantanPerbekel from "./profile/profile-mantan-perbekel";
 import AjukanPermohonan from "./layanan/ajukan_permohonan";
+import Musik from "./musik";
 
 
-const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
+const Desa = new Elysia({ prefix: "/desa", tags: ["Desa"] })
   .use(Berita)
   .use(Pengumuman)
   .use(ProfileDesa)
@@ -28,6 +29,7 @@ const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
   .use(KategoriBerita)
   .use(KategoriPengumuman)
   .use(AjukanPermohonan)
-  
+  .use(Musik)
+
 
 export default Desa;

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

@@ -0,0 +1,37 @@
+import { Context } from "elysia";
+import prisma from "@/lib/prisma";
+
+type FormCreate = {
+  judul: string;
+  artis: string;
+  deskripsi?: string;
+  durasi: string;
+  audioFileId: string;
+  coverImageId: string;
+  genre?: string;
+  tahunRilis?: number | null;
+};
+
+async function musikCreate(context: Context) {
+  const body = context.body as FormCreate;
+
+  await prisma.musikDesa.create({
+    data: {
+      judul: body.judul,
+      artis: body.artis,
+      deskripsi: body.deskripsi,
+      durasi: body.durasi,
+      audioFileId: body.audioFileId,
+      coverImageId: body.coverImageId,
+      genre: body.genre,
+      tahunRilis: body.tahunRilis,
+    },
+  });
+
+  return {
+    success: true,
+    message: "Sukses menambahkan musik",
+  };
+}
+
+export default musikCreate;

src/app/api/[[...slugs]]/_lib/desa/musik/del.ts

@@ -0,0 +1,54 @@
+import { Context } from "elysia";
+import prisma from "@/lib/prisma";
+import path from "path";
+
+const musikDelete = async (context: Context) => {
+  const { id } = context.params as { id: string };
+
+  const musik = await prisma.musikDesa.findUnique({
+    where: { id },
+    include: { audioFile: true, coverImage: true },
+  });
+
+  if (!musik) return { status: 404, body: "Musik tidak ditemukan" };
+
+  // 1. HAPUS MUSIK DULU
+  await prisma.musikDesa.delete({ where: { id } });
+
+  // 2. HAPUS FILE AUDIO (jika ada)
+  if (musik.audioFile) {
+    try {
+      const fs = await import("fs/promises");
+      const filePath = path.join(musik.audioFile.path, musik.audioFile.name);
+      await fs.unlink(filePath);
+
+      await prisma.fileStorage.delete({
+        where: { id: musik.audioFile.id },
+      });
+    } catch (error) {
+      console.error("Error deleting audio file:", error);
+    }
+  }
+
+  // 3. HAPUS FILE COVER (jika ada)
+  if (musik.coverImage) {
+    try {
+      const fs = await import("fs/promises");
+      const filePath = path.join(musik.coverImage.path, musik.coverImage.name);
+      await fs.unlink(filePath);
+
+      await prisma.fileStorage.delete({
+        where: { id: musik.coverImage.id },
+      });
+    } catch (error) {
+      console.error("Error deleting cover image:", error);
+    }
+  }
+
+  return {
+    success: true,
+    message: "Musik dan file terkait berhasil dihapus",
+  };
+};
+
+export default musikDelete;

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

@@ -0,0 +1,66 @@
+import prisma from "@/lib/prisma";
+
+export default async function findMusikById(request: Request) {
+  try {
+    const url = new URL(request.url);
+    const id = url.pathname.split("/").pop();
+
+    if (!id) {
+      return new Response(
+        JSON.stringify({
+          success: false,
+          message: "ID tidak valid",
+        }),
+        {
+          status: 400,
+          headers: { "Content-Type": "application/json" },
+        }
+      );
+    }
+
+    const data = await prisma.musikDesa.findUnique({
+      where: { id },
+      include: {
+        audioFile: true,
+        coverImage: true,
+      },
+    });
+
+    if (!data) {
+      return new Response(
+        JSON.stringify({
+          success: false,
+          message: "Musik tidak ditemukan",
+        }),
+        {
+          status: 404,
+          headers: { "Content-Type": "application/json" },
+        }
+      );
+    }
+
+    return new Response(
+      JSON.stringify({
+        success: true,
+        message: "Success fetch musik by ID",
+        data,
+      }),
+      {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  } catch (e) {
+    console.error("Error fetching musik by ID:", e);
+    return new Response(
+      JSON.stringify({
+        success: false,
+        message: "Gagal mengambil musik: " + (e instanceof Error ? e.message : 'Unknown error'),
+      }),
+      {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+}

src/app/api/[[...slugs]]/_lib/desa/musik/find-many.ts

@@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/desa/musik/find-many.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function musikFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const genre = (context.query.genre as string) || '';
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Filter berdasarkan genre (jika ada)
+  if (genre) {
+    where.genre = {
+      equals: genre,
+      mode: 'insensitive'
+    };
+  }
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { judul: { contains: search, mode: 'insensitive' } },
+      { artis: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+      { genre: { contains: search, mode: 'insensitive' } }
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.musikDesa.findMany({
+        where,
+        include: {
+          audioFile: true,
+          coverImage: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.musikDesa.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil data musik dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data musik",
+    };
+  }
+}
+
+export default musikFindMany;

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

@@ -0,0 +1,47 @@
+import Elysia, { t } from "elysia";
+import musikFindMany from "./find-many";
+import musikCreate from "./create";
+import musikDelete from "./del";
+import musikUpdate from "./updt";
+import findMusikById from "./find-by-id";
+
+const Musik = new Elysia({ prefix: "/musik", tags: ["Desa/Musik"] })
+  .get("/find-many", musikFindMany)
+  .get("/:id", async (context) => {
+    const response = await findMusikById(new Request(context.request));
+    return response;
+  })
+  .post("/create", musikCreate, {
+    body: t.Object({
+      judul: t.String(),
+      artis: t.String(),
+      deskripsi: t.Optional(t.String()),
+      durasi: t.String(),
+      audioFileId: t.String(),
+      coverImageId: t.String(),
+      genre: t.Optional(t.String()),
+      tahunRilis: t.Optional(t.Number()),
+    }),
+  })
+  .delete("/delete/:id", musikDelete)
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await musikUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        judul: t.String(),
+        artis: t.String(),
+        deskripsi: t.Optional(t.String()),
+        durasi: t.String(),
+        audioFileId: t.String(),
+        coverImageId: t.String(),
+        genre: t.Optional(t.String()),
+        tahunRilis: t.Optional(t.Number()),
+      }),
+    }
+  );
+
+export default Musik;

src/app/api/[[...slugs]]/_lib/desa/musik/updt.ts

@@ -0,0 +1,65 @@
+import { Context } from "elysia";
+import prisma from "@/lib/prisma";
+
+type FormUpdate = {
+  judul: string;
+  artis: string;
+  deskripsi?: string;
+  durasi: string;
+  audioFileId: string;
+  coverImageId: string;
+  genre?: string;
+  tahunRilis?: number | null;
+};
+
+async function musikUpdate(context: Context) {
+  const { id } = context.params as { id: string };
+  const body = context.body as FormUpdate;
+
+  try {
+    const existing = await prisma.musikDesa.findUnique({
+      where: { id },
+    });
+
+    if (!existing) {
+      return {
+        status: 404,
+        body: {
+          success: false,
+          message: "Musik tidak ditemukan",
+        },
+      };
+    }
+
+    const updated = await prisma.musikDesa.update({
+      where: { id },
+      data: {
+        judul: body.judul,
+        artis: body.artis,
+        deskripsi: body.deskripsi,
+        durasi: body.durasi,
+        audioFileId: body.audioFileId,
+        coverImageId: body.coverImageId,
+        genre: body.genre,
+        tahunRilis: body.tahunRilis,
+      },
+    });
+
+    return {
+      success: true,
+      message: "Musik berhasil diupdate",
+      data: updated,
+    };
+  } catch (error) {
+    console.error("Error updating musik:", error);
+    return {
+      status: 500,
+      body: {
+        success: false,
+        message: "Terjadi kesalahan saat mengupdate musik",
+      },
+    };
+  }
+}
+
+export default musikUpdate;

src/app/api/[[...slugs]]/_lib/desa/potensi/find-unique.ts

@@ -23,10 +23,9 @@ export default async function findUnique(
 
         // ✅ Filter by isActive and deletedAt
         const data = await prisma.potensiDesa.findFirst({
-            where: { 
+            where: {
                 id,
                 isActive: true,
-                deletedAt: null,
             },
             include: {
                 image: true,

src/app/api/[[...slugs]]/_lib/desa/potensi/kategori-potensi/del.ts

@@ -17,7 +17,6 @@ export default async function kategoriPotensiDelete(context: Context) {
             where: {
                 kategoriId: id,
                 isActive: true,
-                deletedAt: null,
             },
         });
 

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/find-first.ts

@@ -1,10 +1,9 @@
 import prisma from "@/lib/prisma";
 import { requireAuth } from "@/lib/api-auth";
 
-export default async function sejarahDesaFindFirst(request: Request) {
+export default async function sejarahDesaFindFirst() {
     // ✅ Authentication check
-    const headers = new Headers(request.url);
-    const authResult = await requireAuth({ headers });
+    const authResult = await requireAuth();
     if (!authResult.authenticated) {
         return authResult.response;
     }
@@ -12,9 +11,8 @@ export default async function sejarahDesaFindFirst(request: Request) {
     try {
       // Get the first active record
       const data = await prisma.sejarahDesa.findFirst({
-        where: { 
+        where: {
           isActive: true,
-          deletedAt: null 
         },
         orderBy: { createdAt: 'asc' } // Get the oldest one first
       });

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/index.ts

@@ -7,8 +7,8 @@ const SejarahDesa = new Elysia({
   prefix: "/sejarah",
   tags: ["Desa/Profile"],
 })
-  .get("/first", async (context) => {
-    const response = await sejarahDesaFindFirst(new Request(context.request));
+  .get("/first", async () => {
+    const response = await sejarahDesaFindFirst();
     return response;
   })
   .get("/:id", async (context) => {

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/update.ts

@@ -4,7 +4,7 @@ import { Context } from "elysia";
 
 export default async function sejarahDesaUpdate(context: Context) {
     // ✅ Authentication check
-    const authResult = await requireAuth(context);
+    const authResult = await requireAuth();
     if (!authResult.authenticated) {
         return authResult.response;
     }

src/app/api/[[...slugs]]/_lib/ekonomi/index.ts

@@ -13,7 +13,7 @@ import PendapatanAsliDesa from "./pendapatan-asli-desa";
 import StrukturOrganisasi from "./struktur-bumdes";
 
 const Ekonomi = new Elysia({
-  prefix: "/api/ekonomi",
+  prefix: "/ekonomi",
   tags: ["Ekonomi"],
 })
 .use(PasarDesa)

src/app/api/[[...slugs]]/_lib/fileStorage/_lib/create.ts

@@ -22,9 +22,10 @@ const fileStorageCreate = async (context: Context) => {
   if (!UPLOAD_DIR) return { status: 500, body: "UPLOAD_DIR is not defined" };
 
   const isImage = file.type.startsWith("image/");
-  const category = isImage ? "image" : "document";
+  const isAudio = file.type.startsWith("audio/");
+  const category = isImage ? "image" : isAudio ? "audio" : "document";
 
-  const pathName = category === "image" ? "images" : "documents";
+  const pathName = category === "image" ? "images" : category === "audio" ? "audio" : "documents";
   const rootPath = path.join(UPLOAD_DIR, pathName);
   await fs.mkdir(rootPath, { recursive: true });
 
@@ -54,6 +55,11 @@ const fileStorageCreate = async (context: Context) => {
     // Simpan metadata untuk versi desktop sebagai default
     finalName = desktopName;
     finalMimeType = "image/webp";
+  } else if (isAudio) {
+    // Simpan file audio tanpa kompresi
+    const ext = file.name.split(".").pop() || "mp3";
+    finalName = `${finalName}.${ext}`;
+    await fs.writeFile(path.join(rootPath, finalName), buffer);
   } else {
     // Jika file adalah PDF, simpan tanpa kompresi
     if (file.type === "application/pdf") {

src/app/api/[[...slugs]]/_lib/fileStorage/index.ts

@@ -5,7 +5,7 @@ import { fileStorageFindMany } from "./_lib/findMany";
 import fileStorageDelete from "./_lib/del";
 
 const FileStorage = new Elysia({
-  prefix: "/api/fileStorage",
+  prefix: "/fileStorage",
   tags: ["FileStorage"],
 })
   .post("/create", fileStorageCreate, {

src/app/api/[[...slugs]]/_lib/inovasi/index.ts

@@ -8,7 +8,7 @@ import LayananOnlineDesa from "./layanan-online-desa";
 import MitraKolaborasi from "./kolaborasi-inovasi/mitra-kolaborasi";
 
 const Inovasi = new Elysia({
-  prefix: "/api/inovasi",
+  prefix: "/inovasi",
   tags: ["Inovasi"],
 })
   .use(DesaDigital)

src/app/api/[[...slugs]]/_lib/keamanan/index.ts

@@ -9,7 +9,7 @@ import KontakDaruratKeamanan from "./kontak-darurat-keamanan";
 import KontakItem from "./kontak-darurat-keamanan/kontak-item";
 import LayananPolsek from "./polsek-terdekat/layanan-polsek";
 
-const Keamanan = new Elysia({ prefix: "/api/keamanan", tags: ["Keamanan"] })
+const Keamanan = new Elysia({ prefix: "/keamanan", tags: ["Keamanan"] })
 .use(KeamananLingkungan)
 .use(PolsekTerdekat)
 .use(PencegahanKriminalitas)

src/app/api/[[...slugs]]/_lib/kesehatan/index.ts

@@ -24,7 +24,7 @@ import TarifLayanan from "./data_kesehatan_warga/fasilitas_kesehatan/tarif-layan
 
 
 const Kesehatan = new Elysia({
-  prefix: "/api/kesehatan",
+  prefix: "/kesehatan",
   tags: ["Kesehatan"],
 })
 .use(PersentaseKelahiranKematian)

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/create.ts

@@ -8,24 +8,23 @@ type APBDesItemInput = {
   kode: string;
   uraian: string;
   anggaran: number;
-  realisasi: number;
-  selisih: number;
-  persentase: number;
   level: number;
   tipe?: string | null;
 };
 
 type FormCreate = {
   tahun: number;
-  imageId: string;
-  fileId: string;
+  name?: string;
+  deskripsi?: string;
+  jumlah?: string;
+  imageId?: string | null; // Opsional
+  fileId?: string | null; // Opsional
   items: APBDesItemInput[];
 };
 
 export default async function apbdesCreate(context: Context) {
   const body = context.body as FormCreate;
-  
-  // Log the incoming request for debugging
+
   console.log('Incoming request body:', JSON.stringify(body, null, 2));
 
   try {
@@ -33,43 +32,44 @@ export default async function apbdesCreate(context: Context) {
     if (!body.tahun) {
       throw new Error('Tahun is required');
     }
-    if (!body.imageId) {
-      throw new Error('Image ID is required');
-    }
-    if (!body.fileId) {
-      throw new Error('File ID is required');
-    }
+    // Image dan file sekarang opsional
     if (!body.items || body.items.length === 0) {
       throw new Error('At least one item is required');
     }
 
-    // 1. Buat APBDes + items (tanpa parentId dulu)
+    // 1. Buat APBDes + items dengan auto-calculate fields
     const created = await prisma.$transaction(async (prisma) => {
       const apbdes = await prisma.aPBDes.create({
         data: {
           tahun: body.tahun,
-          name: `APBDes Tahun ${body.tahun}`,
-          imageId: body.imageId,
-          fileId: body.fileId,
+          name: body.name || `APBDes Tahun ${body.tahun}`,
+          deskripsi: body.deskripsi,
+          jumlah: body.jumlah,
+          imageId: body.imageId || null, // null jika tidak ada
+          fileId: body.fileId || null, // null jika tidak ada
         },
       });
 
-      // Create items in a batch
+      // Create items dengan auto-calculate totalRealisasi=0, selisih, persentase
       const items = await Promise.all(
-        body.items.map(item => {
-          // Create a new object with only the fields that exist in the APBDesItem model
+        body.items.map(async item => {
+          const anggaran = item.anggaran;
+          const totalRealisasi = 0; // Belum ada realisasi saat create
+          const selisih = anggaran - totalRealisasi; // Sisa anggaran (positif = belum digunakan)
+          const persentase = anggaran > 0 ? (totalRealisasi / anggaran) * 100 : 0;
+
           const itemData = {
             kode: item.kode,
             uraian: item.uraian,
-            anggaran: item.anggaran,
-            realisasi: item.realisasi,
-            selisih: item.selisih,
-            persentase: item.persentase,
+            anggaran: anggaran,
             level: item.level,
-            tipe: item.tipe, // ✅ sertakan, biar null
+            tipe: item.tipe || null,
+            totalRealisasi,
+            selisih,
+            persentase,
             apbdesId: apbdes.id,
           };
-          
+
           return prisma.aPBDesItem.create({
             data: itemData,
             select: { id: true, kode: true },
@@ -84,20 +84,27 @@ export default async function apbdesCreate(context: Context) {
       // 2. Isi parentId berdasarkan kode
       await assignParentIdsToApbdesItems(created.items);
 
-      // 3. Ambil ulang data lengkap untuk response
+      // 3. Ambil ulang data lengkap untuk response (include realisasiItems)
       const result = await prisma.aPBDes.findUnique({
         where: { id: created.id },
         include: {
           image: true,
           file: true,
           items: {
+            where: { isActive: true },
             orderBy: { kode: 'asc' },
+            include: {
+              realisasiItems: {
+                where: { isActive: true },
+                orderBy: { tanggal: 'asc' },
+              },
+            },
           },
         },
       });
 
       console.log('APBDes created successfully:', JSON.stringify(result, null, 2));
-      
+
       return {
         success: true,
         message: "Berhasil membuat APBDes",
@@ -105,7 +112,6 @@ export default async function apbdesCreate(context: Context) {
       };
     } catch (innerError) {
       console.error('Error in post-creation steps:', innerError);
-      // Even if post-creation steps fail, we still return success since the main record was created
       return {
         success: true,
         message: "APBDes berhasil dibuat, tetapi ada masalah dengan pemrosesan tambahan",
@@ -115,13 +121,12 @@ export default async function apbdesCreate(context: Context) {
     }
   } catch (error: any) {
     console.error("Error creating APBDes:", error);
-    
-    // Log the full error for debugging
+
     if (error.code) console.error('Prisma error code:', error.code);
     if (error.meta) console.error('Prisma error meta:', error.meta);
-    
+
     const errorMessage = error.message || 'Unknown error';
-    
+
     context.set.status = 500;
     return {
       success: false,

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/findMany.ts

@@ -21,7 +21,7 @@ export default async function apbdesFindMany(context: Context) {
 
   try {
     const where: any = { isActive: true };
-    
+
     if (search) {
       where.OR = [
         { name: { contains: search, mode: "insensitive" } },
@@ -47,7 +47,16 @@ export default async function apbdesFindMany(context: Context) {
         include: {
           image: true,
           file: true,
-          items: true,
+          items: {
+            where: { isActive: true },
+            orderBy: { kode: "asc" },
+            include: {
+              realisasiItems: {
+                where: { isActive: true },
+                orderBy: { tanggal: 'asc' },
+              },
+            },
+          },
         },
       }),
       prisma.aPBDes.count({ where }),

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/findUnique.ts

@@ -2,15 +2,9 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 export default async function apbdesFindUnique(context: Context) {
-  // ✅ Parse URL secara manual
   const url = new URL(context.request.url);
   const pathSegments = url.pathname.split('/').filter(Boolean);
-  
-  console.log("🔍 DEBUG INFO:");
-  console.log("- Full URL:", context.request.url);
-  console.log("- Pathname:", url.pathname);
-  console.log("- Path segments:", pathSegments);
-  
+
   // Expected: ['api', 'landingpage', 'apbdes', 'ID']
   if (pathSegments.length < 4) {
     context.set.status = 400;
@@ -20,9 +14,9 @@ export default async function apbdesFindUnique(context: Context) {
       debug: { pathSegments }
     };
   }
-  
-  if (pathSegments[0] !== 'api' || 
-      pathSegments[1] !== 'landingpage' || 
+
+  if (pathSegments[0] !== 'api' ||
+      pathSegments[1] !== 'landingpage' ||
       pathSegments[2] !== 'apbdes') {
     context.set.status = 400;
     return {
@@ -31,9 +25,9 @@ export default async function apbdesFindUnique(context: Context) {
       debug: { pathSegments }
     };
   }
-  
-  const id = pathSegments[3]; // ✅ ID ada di index ke-3
-  
+
+  const id = pathSegments[3];
+
   if (!id || id.trim() === '') {
     context.set.status = 400;
     return {
@@ -48,11 +42,17 @@ export default async function apbdesFindUnique(context: Context) {
       include: {
         items: {
           where: { isActive: true },
-          orderBy: { kode: 'asc' }
+          orderBy: { kode: 'asc' },
+          include: {
+            realisasiItems: {
+              where: { isActive: true },
+              orderBy: { tanggal: 'asc' },
+            },
+          },
         },
         image: true,
-        file: true
-      }
+        file: true,
+      },
     });
 
     if (!result || !result.isActive) {

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/index.ts

@@ -5,17 +5,17 @@ import apbdesDelete from "./del";
 import apbdesFindMany from "./findMany";
 import apbdesFindUnique from "./findUnique";
 import apbdesUpdate from "./updt";
+import realisasiCreate from "./realisasi/create";
+import realisasiUpdate from "./realisasi/update";
+import realisasiDelete from "./realisasi/delete";
 
-// Definisikan skema untuk item APBDes
+// Definisikan skema untuk item APBDes (tanpa realisasi field)
 const ApbdesItemSchema = t.Object({
   kode: t.String(),
   uraian: t.String(),
   anggaran: t.Number(),
-  realisasi: t.Number(),
-  selisih: t.Number(),
-  persentase: t.Number(),
   level: t.Number(),
-  tipe: t.Optional(t.Union([t.String(), t.Null()])) // misal: "pendapatan" atau "belanja"
+  tipe: t.Optional(t.Union([t.String(), t.Null()])), // "pendapatan" | "belanja" | "pembiayaan" | null
 });
 
 const APBDes = new Elysia({
@@ -26,33 +26,72 @@ const APBDes = new Elysia({
   // ✅ Find all (dengan query opsional: page, limit, tahun)
   .get("/findMany", apbdesFindMany)
 
-  // ✅ Find by ID
+  // ✅ Find by ID (include realisasiItems)
   .get("/:id", apbdesFindUnique)
 
-  // ✅ Create
+  // ✅ Create APBDes dengan items (tanpa realisasi)
   .post("/create", apbdesCreate, {
     body: t.Object({
       tahun: t.Number(),
-      imageId: t.String(),
-      fileId: t.String(),
+      name: t.Optional(t.String()),
+      deskripsi: t.Optional(t.String()),
+      jumlah: t.Optional(t.String()),
+      imageId: t.Optional(t.String()),
+      fileId: t.Optional(t.String()),
       items: t.Array(ApbdesItemSchema),
     }),
   })
 
-  // ✅ Update
+  // ✅ Update APBDes dengan items (tanpa realisasi)
   .put("/:id", apbdesUpdate, {
     params: t.Object({ id: t.String() }),
     body: t.Object({
       tahun: t.Number(),
-      imageId: t.String(),
-      fileId: t.String(),
+      name: t.Optional(t.String()),
+      deskripsi: t.Optional(t.String()),
+      jumlah: t.Optional(t.String()),
+      imageId: t.Optional(t.String()),
+      fileId: t.Optional(t.String()),
       items: t.Array(ApbdesItemSchema),
     }),
   })
 
-  // ✅ Delete
+  // ✅ Delete APBDes
   .delete("/del/:id", apbdesDelete, {
     params: t.Object({ id: t.String() }),
+  })
+
+  // =========================================
+  // REALISASI ENDPOINTS
+  // =========================================
+  
+  // ✅ Create realisasi untuk item tertentu
+  .post("/:itemId/realisasi", realisasiCreate, {
+    params: t.Object({ itemId: t.String() }),
+    body: t.Object({
+      kode: t.String(),
+      jumlah: t.Number(),
+      tanggal: t.String(),
+      keterangan: t.Optional(t.String()),
+      buktiFileId: t.Optional(t.String()),
+    }),
+  })
+
+  // ✅ Update realisasi
+  .put("/realisasi/:realisasiId", realisasiUpdate, {
+    params: t.Object({ realisasiId: t.String() }),
+    body: t.Object({
+      kode: t.Optional(t.String()),
+      jumlah: t.Optional(t.Number()),
+      tanggal: t.Optional(t.String()),
+      keterangan: t.Optional(t.String()),
+      buktiFileId: t.Optional(t.String()),
+    }),
+  })
+
+  // ✅ Delete realisasi
+  .delete("/realisasi/:realisasiId", realisasiDelete, {
+    params: t.Object({ realisasiId: t.String() }),
   });
 
 export default APBDes;

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/realisasi/create.ts

@@ -0,0 +1,84 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type RealisasiCreateBody = {
+  kode: string;
+  jumlah: number;
+  tanggal: string; // ISO format
+  keterangan?: string;
+  buktiFileId?: string;
+};
+
+export default async function realisasiCreate(context: Context) {
+  const { itemId } = context.params as { itemId: string };
+  const body = context.body as RealisasiCreateBody;
+
+  console.log('Creating realisasi:', JSON.stringify(body, null, 2));
+
+  try {
+    // 1. Pastikan APBDesItem ada
+    const item = await prisma.aPBDesItem.findUnique({
+      where: { id: itemId },
+    });
+
+    if (!item) {
+      context.set.status = 404;
+      return {
+        success: false,
+        message: "Item APBDes tidak ditemukan",
+      };
+    }
+
+    // 2. Create realisasi item
+    const realisasi = await prisma.realisasiItem.create({
+      data: {
+        apbdesItemId: itemId,
+        kode: body.kode,
+        jumlah: body.jumlah,
+        tanggal: new Date(body.tanggal),
+        keterangan: body.keterangan,
+        buktiFileId: body.buktiFileId,
+      },
+    });
+
+    // 3. Update totalRealisasi, selisih, persentase di APBDesItem
+    const allRealisasi = await prisma.realisasiItem.findMany({
+      where: { apbdesItemId: itemId, isActive: true },
+      select: { jumlah: true },
+    });
+
+    const totalRealisasi = allRealisasi.reduce((sum, r) => sum + r.jumlah, 0);
+    const selisih = item.anggaran - totalRealisasi; // Sisa anggaran (positif = belum digunakan)
+    const persentase = item.anggaran > 0 ? (totalRealisasi / item.anggaran) * 100 : 0;
+
+    await prisma.aPBDesItem.update({
+      where: { id: itemId },
+      data: {
+        totalRealisasi,
+        selisih,
+        persentase,
+      },
+    });
+
+    // 4. Return response
+    return {
+      success: true,
+      message: "Realisasi berhasil ditambahkan",
+      data: realisasi,
+      meta: {
+        totalRealisasi,
+        selisih,
+        persentase,
+      },
+    };
+  } catch (error: any) {
+    console.error("Error creating realisasi:", error);
+    context.set.status = 500;
+    return {
+      success: false,
+      message: `Gagal menambahkan realisasi: ${error.message}`,
+      error: process.env.NODE_ENV === 'development' ? error : undefined,
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/realisasi/delete.ts

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function realisasiDelete(context: Context) {
+  const { realisasiId } = context.params as { realisasiId: string };
+
+  console.log('Deleting realisasi:', realisasiId);
+
+  try {
+    // 1. Pastikan realisasi ada
+    const existing = await prisma.realisasiItem.findUnique({
+      where: { id: realisasiId },
+    });
+
+    if (!existing) {
+      context.set.status = 404;
+      return {
+        success: false,
+        message: "Realisasi tidak ditemukan",
+      };
+    }
+
+    const apbdesItemId = existing.apbdesItemId;
+
+    // 2. Soft delete realisasi (set isActive = false)
+    await prisma.realisasiItem.update({
+      where: { id: realisasiId },
+      data: {
+        isActive: false,
+        deletedAt: new Date(),
+      },
+    });
+
+    // 3. Recalculate totalRealisasi, selisih, persentase di APBDesItem
+    const allRealisasi = await prisma.realisasiItem.findMany({
+      where: { apbdesItemId, isActive: true },
+      select: { jumlah: true },
+    });
+
+    const item = await prisma.aPBDesItem.findUnique({
+      where: { id: apbdesItemId },
+    });
+
+    if (item) {
+      const totalRealisasi = allRealisasi.reduce((sum, r) => sum + r.jumlah, 0);
+      const selisih = item.anggaran - totalRealisasi; // Sisa anggaran (positif = belum digunakan)
+      const persentase = item.anggaran > 0 ? (totalRealisasi / item.anggaran) * 100 : 0;
+
+      await prisma.aPBDesItem.update({
+        where: { id: apbdesItemId },
+        data: {
+          totalRealisasi,
+          selisih,
+          persentase,
+        },
+      });
+    }
+
+    return {
+      success: true,
+      message: "Realisasi berhasil dihapus",
+    };
+  } catch (error: any) {
+    console.error("Error deleting realisasi:", error);
+    context.set.status = 500;
+    return {
+      success: false,
+      message: `Gagal menghapus realisasi: ${error.message}`,
+      error: process.env.NODE_ENV === 'development' ? error : undefined,
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/realisasi/update.ts

@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type RealisasiUpdateBody = {
+  kode?: string;
+  jumlah?: number;
+  tanggal?: string;
+  keterangan?: string;
+  buktiFileId?: string;
+};
+
+export default async function realisasiUpdate(context: Context) {
+  const { realisasiId } = context.params as { realisasiId: string };
+  const body = context.body as RealisasiUpdateBody;
+
+  console.log('Updating realisasi:', JSON.stringify(body, null, 2));
+
+  try {
+    // 1. Pastikan realisasi ada
+    const existing = await prisma.realisasiItem.findUnique({
+      where: { id: realisasiId },
+    });
+
+    if (!existing) {
+      context.set.status = 404;
+      return {
+        success: false,
+        message: "Realisasi tidak ditemukan",
+      };
+    }
+
+    // 2. Update realisasi
+    const updated = await prisma.realisasiItem.update({
+      where: { id: realisasiId },
+      data: {
+        ...(body.kode !== undefined && { kode: body.kode }),
+        ...(body.jumlah !== undefined && { jumlah: body.jumlah }),
+        ...(body.tanggal !== undefined && { tanggal: new Date(body.tanggal) }),
+        ...(body.keterangan !== undefined && { keterangan: body.keterangan }),
+        ...(body.buktiFileId !== undefined && { buktiFileId: body.buktiFileId }),
+      },
+    });
+
+    // 3. Recalculate totalRealisasi, selisih, persentase di APBDesItem
+    const allRealisasi = await prisma.realisasiItem.findMany({
+      where: { apbdesItemId: existing.apbdesItemId, isActive: true },
+      select: { jumlah: true },
+    });
+
+    const item = await prisma.aPBDesItem.findUnique({
+      where: { id: existing.apbdesItemId },
+    });
+
+    if (item) {
+      const totalRealisasi = allRealisasi.reduce((sum, r) => sum + r.jumlah, 0);
+      const selisih = item.anggaran - totalRealisasi; // Sisa anggaran (positif = belum digunakan)
+      const persentase = item.anggaran > 0 ? (totalRealisasi / item.anggaran) * 100 : 0;
+
+      await prisma.aPBDesItem.update({
+        where: { id: existing.apbdesItemId },
+        data: {
+          totalRealisasi,
+          selisih,
+          persentase,
+        },
+      });
+    }
+
+    return {
+      success: true,
+      message: "Realisasi berhasil diperbarui",
+      data: updated,
+      meta: {
+        totalRealisasi: allRealisasi.reduce((sum, r) => sum + r.jumlah, 0),
+      },
+    };
+  } catch (error: any) {
+    console.error("Error updating realisasi:", error);
+    context.set.status = 500;
+    return {
+      success: false,
+      message: `Gagal memperbarui realisasi: ${error.message}`,
+      error: process.env.NODE_ENV === 'development' ? error : undefined,
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/updt.ts

@@ -1,22 +1,23 @@
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 import { assignParentIdsToApbdesItems } from "./lib/getParentsID";
+import { RealisasiItem } from "@prisma/client";
 
 type APBDesItemInput = {
   kode: string;
   uraian: string;
   anggaran: number;
-  realisasi: number;
-  selisih: number;
-  persentase: number;
   level: number;
   tipe?: string | null;
 };
 
 type FormUpdateBody = {
   tahun: number;
-  imageId: string;
-  fileId: string;
+  name?: string;
+  deskripsi?: string;
+  jumlah?: string;
+  imageId?: string | null;
+  fileId?: string | null;
   items: APBDesItemInput[];
 };
 
@@ -28,6 +29,16 @@ export default async function apbdesUpdate(context: Context) {
     // 1. Pastikan APBDes ada
     const existing = await prisma.aPBDes.findUnique({
       where: { id },
+      include: {
+        items: {
+          where: { isActive: true },
+          include: {
+            realisasiItems: {
+              where: { isActive: true },
+            },
+          },
+        },
+      },
     });
 
     if (!existing) {
@@ -38,59 +49,144 @@ export default async function apbdesUpdate(context: Context) {
       };
     }
 
-    // 2. Hapus semua item lama
+    // 2. Build map untuk preserve realisasiItems berdasarkan kode
+    const existingItemsMap = new Map<string, {
+      id: string;
+      realisasiItems: RealisasiItem[];
+    }>();
+    
+    existing.items.forEach(item => {
+      existingItemsMap.set(item.kode, {
+        id: item.id,
+        realisasiItems: item.realisasiItems,
+      });
+    });
+
+    // 3. Hapus semua item lama (cascade akan menghapus realisasiItems juga)
+    // TAPI kita sudah save realisasiItems di map atas
     await prisma.aPBDesItem.deleteMany({
       where: { apbdesId: id },
     });
 
-    // 3. Buat item baru tanpa parentId terlebih dahulu
+    // 4. Buat item baru dengan preserve realisasiItems
     await prisma.aPBDesItem.createMany({
-      data: body.items.map((item) => ({
-        apbdesId: id,
-        kode: item.kode,
-        uraian: item.uraian,
-        anggaran: item.anggaran,
-        realisasi: item.realisasi,
-        selisih: item.anggaran - item.realisasi,
-        persentase: item.anggaran > 0 ? (item.realisasi / item.anggaran) * 100 : 0,
-        level: item.level,
-        tipe: item.tipe || null,
-        isActive: true,
+      data: await Promise.all(body.items.map(async (item) => {
+        const anggaran = item.anggaran;
+        
+        // Check apakah item ini punya realisasiItems lama
+        const existingItem = existingItemsMap.get(item.kode);
+        const realisasiItemsData = existingItem?.realisasiItems || [];
+        const totalRealisasi = realisasiItemsData.reduce((sum, r) => sum + r.jumlah, 0);
+        const selisih = anggaran - totalRealisasi;
+        const persentase = anggaran > 0 ? (totalRealisasi / anggaran) * 100 : 0;
+
+        return {
+          apbdesId: id,
+          kode: item.kode,
+          uraian: item.uraian,
+          anggaran: anggaran,
+          level: item.level,
+          tipe: item.tipe || null,
+          totalRealisasi,
+          selisih,
+          persentase,
+          isActive: true,
+        };
       })),
     });
 
-    // 4. Dapatkan semua item yang baru dibuat untuk mendapatkan ID-nya
+    // 5. Dapatkan semua item yang baru dibuat untuk mendapatkan ID-nya
     const allItems = await prisma.aPBDesItem.findMany({
       where: { apbdesId: id },
       select: { id: true, kode: true },
     });
 
-    // 5. Update parentId untuk setiap item
-    // Pastikan allItems memiliki tipe yang benar
+    // 6. Build map baru untuk item IDs
+    const newItemIdsMap = new Map<string, string>();
+    allItems.forEach(item => {
+      newItemIdsMap.set(item.kode, item.id);
+    });
+
+    // 7. Re-create realisasiItems dengan link ke item IDs yang baru
+    for (const [oldKode, oldItemData] of existingItemsMap.entries()) {
+      if (oldItemData.realisasiItems.length > 0) {
+        const newItemId = newItemIdsMap.get(oldKode);
+        if (newItemId) {
+          // Re-create realisasiItems untuk item ini
+          await prisma.realisasiItem.createMany({
+            data: oldItemData.realisasiItems.map(r => ({
+              apbdesItemId: newItemId,
+              kode: r.kode,
+              jumlah: r.jumlah,
+              tanggal: r.tanggal,
+              keterangan: r.keterangan,
+              buktiFileId: r.buktiFileId,
+              isActive: true,
+            })),
+          });
+        }
+      }
+    }
+
+    // 8. Recalculate totalRealisasi setelah re-create realisasiItems
+    for (const kode of existingItemsMap.keys()) {
+      const newItemId = newItemIdsMap.get(kode);
+      if (newItemId) {
+        const realisasiItems = await prisma.realisasiItem.findMany({
+          where: { apbdesItemId: newItemId, isActive: true },
+        });
+        const totalRealisasi = realisasiItems.reduce((sum, r) => sum + r.jumlah, 0);
+        
+        const item = await prisma.aPBDesItem.findUnique({
+          where: { id: newItemId },
+        });
+        
+        if (item) {
+          const selisih = item.anggaran - totalRealisasi;
+          const persentase = item.anggaran > 0 ? (totalRealisasi / item.anggaran) * 100 : 0;
+          
+          await prisma.aPBDesItem.update({
+            where: { id: newItemId },
+            data: { totalRealisasi, selisih, persentase },
+          });
+        }
+      }
+    }
+
+    // 9. Update parentId untuk setiap item
     const itemsForParentUpdate = allItems.map(item => ({
       id: item.id,
       kode: item.kode,
     }));
-    
+
     await assignParentIdsToApbdesItems(itemsForParentUpdate);
 
-    // 6. Update data APBDes
+    // 10. Update data APBDes
     await prisma.aPBDes.update({
       where: { id },
       data: {
         tahun: body.tahun,
-        imageId: body.imageId,
-        fileId: body.fileId,
+        name: body.name || `APBDes Tahun ${body.tahun}`,
+        deskripsi: body.deskripsi,
+        jumlah: body.jumlah,
+        imageId: body.imageId === '' ? null : body.imageId,
+        fileId: body.fileId === '' ? null : body.fileId,
       },
     });
 
-    // 5. Ambil data lengkap untuk response
+    // 11. Ambil data lengkap untuk response (include realisasiItems)
     const result = await prisma.aPBDes.findUnique({
       where: { id },
       include: {
         items: {
           where: { isActive: true },
-          orderBy: { kode: 'asc' }
+          orderBy: { kode: 'asc' },
+          include: {
+            realisasiItems: {
+              where: { isActive: true },
+              orderBy: { tanggal: 'asc' },
+            },
+          },
         },
         image: true,
         file: true,

src/app/api/[[...slugs]]/_lib/landing_page/index.ts

@@ -14,7 +14,7 @@ import UmurResponden from "./indeks_kepuasan/umur-responden";
 import Responden from "./indeks_kepuasan/responden";
 
 const LandingPage = new Elysia({
-    prefix: "/api/landingpage",
+    prefix: "/landingpage",
     tags: ["Landing Page/Profile"]
 })
 

src/app/api/[[...slugs]]/_lib/lingkungan/index.ts

@@ -9,7 +9,7 @@ import KategoriKegiatan from "./gotong-royong/kategori-kegiatan";
 import KeteranganBankSampahTerdekat from "./pengelolaan-sampah/keterangan-bank-sampah";
 
 const Lingkungan = new Elysia({
-  prefix: "/api/lingkungan",
+  prefix: "/lingkungan",
   tags: ["Lingkungan"],
 })
 

src/app/api/[[...slugs]]/_lib/pendidikan/index.ts

@@ -8,7 +8,7 @@ import Beasiswa from "./beasiswa-desa";
 import PerpustakaanDigital from "./perpustakaan-digital";
 
 const Pendidikan = new Elysia({
-    prefix: "/api/pendidikan",
+    prefix: "/pendidikan",
     tags: ["Pendidikan"]
 })
 

src/app/api/[[...slugs]]/_lib/ppid/index.ts

@@ -14,7 +14,7 @@ import GrafikHasilKepuasanMasyarakat from "./ikm/grafik_hasil_kepuasan_masyaraka
 
 
 
-const PPID = new Elysia({ prefix: "/api/ppid", tags: ["PPID"] })
+const PPID = new Elysia({ prefix: "/ppid", tags: ["PPID"] })
 .use(ProfilePPID)
 .use(DaftarInformasiPublik)
 .use(GrafikHasilKepuasanMasyarakat)

src/app/api/[[...slugs]]/_lib/search/index.ts

@@ -2,7 +2,7 @@ import Elysia from "elysia";
 import searchFindMany from "./findMany";
 
 const Search = new Elysia({
-  prefix: "/api/search",
+  prefix: "/search",
   tags: ["Search"],
 })
   .get("/findMany", searchFindMany);

src/app/api/[[...slugs]]/_lib/user/index.ts

@@ -7,7 +7,7 @@ import userDelete from "./del"; // `delete` nggak boleh jadi nama file JS langsu
 import userUpdate from "./updt";
 import userDeleteAccount from "./delUser";
 
-const User = new Elysia({ prefix: "/api/user" })
+const User = new Elysia({ prefix: "/user" })
   .get("/findMany", userFindMany)
   .get("/findUnique/:id", userFindUnique)
   .put("/del/:id", userDelete, {

src/app/api/[[...slugs]]/_lib/user/role/index.ts

@@ -6,7 +6,7 @@ import roleFindUnique from "./findUnique";
 import roleUpdate from "./updt";
 
 const Role = new Elysia({
-    prefix: "/api/role",
+    prefix: "/role",
     tags: ["User / Role"],
 })
 

src/app/api/[[...slugs]]/_lib/user/updt.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { getMenuIdsByRoleId } from "@/app/admin/(dashboard)/user&role/_com/getMenuIdByRole";
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
@@ -34,11 +35,25 @@ export default async function userUpdate(context: Context) {
     const isActiveChanged =
       isActive !== undefined && currentUser.isActive !== isActive;
 
-    // ✅ Jika role berubah, hapus semua akses menu yang ada
-    if (isRoleChanged) {
+    // ✅ Jika role berubah, reset dan set ulang akses menu
+    if (isRoleChanged && roleId) {
+      // Hapus akses lama
       await prisma.userMenuAccess.deleteMany({
         where: { userId: id }
       });
+
+      // Ambil menu default untuk role baru
+      const menuIds = getMenuIdsByRoleId(roleId);
+
+      if (menuIds.length > 0) {
+        // Buat akses baru
+        await prisma.userMenuAccess.createMany({
+          data: menuIds.map(menuId => ({
+            userId: id,
+            menuId
+          }))
+        });
+      }
     }
 
     // Update user

src/app/api/[[...slugs]]/route.ts

@@ -46,11 +46,18 @@ fs.mkdir(UPLOAD_DIR_IMAGE, {
 }).catch(() => {});
 
 const corsConfig = {
-  origin: "*",
-  methods: ["GET", "POST", "PATCH", "DELETE", "PUT"] as HTTPMethod[],
-  allowedHeaders: "*",
-  exposedHeaders: "*",
-  maxAge: 5,
+  origin: [
+    "*", // Allow all origins - must be first when using credentials: true
+    "http://localhost:3000",
+    "http://localhost:3001",
+    "https://cld-dkr-desa-darmasaba-stg.wibudev.com",
+    "https://cld-dkr-staging-desa-darmasaba.wibudev.com",
+    "https://desa-darmasaba-stg.wibudev.com",
+  ],
+  methods: ["GET", "POST", "PATCH", "DELETE", "PUT", "OPTIONS"] as HTTPMethod[],
+  allowedHeaders: ["Content-Type", "Authorization", "Accept", "*"],
+  exposedHeaders: ["Content-Range", "X-Content-Range", "*"],
+  maxAge: 86400, // 24 hours
   credentials: true,
 };
 
@@ -60,7 +67,7 @@ async function layanan() {
 }
 
 const Utils = new Elysia({
-  prefix: "/api/utils",
+  prefix: "/utils",
   tags: ["Utils"],
 }).get("/version", async () => {
   const packageJson = await fs.readFile(
@@ -74,8 +81,7 @@ const Utils = new Elysia({
 if (!process.env.WIBU_UPLOAD_DIR)
   throw new Error("WIBU_UPLOAD_DIR is not defined");
 
-const ApiServer = new Elysia()
-  .use(swagger({ path: "/api/docs" }))
+const ApiServer = new Elysia({ prefix: "/api" })
   .use(
     staticPlugin({
       assets: UPLOAD_DIR,
@@ -83,6 +89,25 @@ const ApiServer = new Elysia()
     }),
   )
   .use(cors(corsConfig))
+  .use(
+    swagger({
+      path: "/docs",
+      documentation: {
+        info: {
+          title: "Desa Darmasaba API Documentation",
+          version: "1.0.0",
+        },
+      },
+    }),
+  )
+  .onError(({ code }) => {
+    if (code === "NOT_FOUND") {
+      return {
+        status: 404,
+        body: "Route not found :(",
+      };
+    }
+  })
   .use(Utils)
   .use(FileStorage)
   .use(LandingPage)
@@ -97,126 +122,114 @@ const ApiServer = new Elysia()
   .use(User)
   .use(Role)
   .use(Search)
-
-  .onError(({ code }) => {
-    if (code === "NOT_FOUND") {
-      return {
-        status: 404,
-        body: "Route not found :(",
-      };
-    }
-  })
-  .group("/api", (app) =>
-    app
-      .get("/layanan", layanan)
-      .get("/potensi", getPotensi)
-      .get(
-        "/img/:name",
-        ({ params, query }) => {
-          return img({
-            name: params.name,
-            UPLOAD_DIR_IMAGE,
-            ROOT,
-            size: query.size,
-          });
-        },
-        {
-          params: t.Object({
-            name: t.String(),
-          }),
-          query: t.Optional(
-            t.Object({
-              size: t.Optional(t.Number()),
-            }),
-          ),
-        },
-      )
-      .delete(
-        "/img/:name",
-        ({ params }) => {
-          return imgDel({
-            name: params.name,
-            UPLOAD_DIR_IMAGE,
-          });
-        },
-        {
-          params: t.Object({
-            name: t.String(),
-          }),
-        },
-      )
-      .get(
-        "/imgs",
-        ({ query }) => {
-          return imgs({
-            search: query.search,
-            page: query.page,
-            count: query.count,
-            UPLOAD_DIR_IMAGE,
-          });
-        },
-        {
-          query: t.Optional(
-            t.Object({
-              page: t.Number({ default: 1 }),
-              count: t.Number({ default: 10 }),
-              search: t.String({ default: "" }),
-            }),
-          ),
-        },
-      )
-      .post(
-        "/upl-img",
-        ({ body }) => {
-          console.log(body.title);
-          return uplImg({ files: body.files, UPLOAD_DIR_IMAGE });
-        },
-        {
-          body: t.Object({
-            title: t.String(),
-            files: t.Files({ multiple: true }),
-          }),
-        },
-      )
-      .post(
-        "/upl-img-single",
-        ({ body }) => {
-          return uplImgSingle({
-            fileName: body.name,
-            file: body.file,
-            UPLOAD_DIR_IMAGE,
-          });
-        },
-        {
-          body: t.Object({
-            name: t.String(),
-            file: t.File(),
-          }),
-        },
-      )
-      .post(
-        "/upl-csv-single",
-        ({ body }) => {
-          return uplCsvSingle({ fileName: body.name, file: body.file });
-        },
-        {
-          body: t.Object({
-            name: t.String(),
-            file: t.File(),
-          }),
-        },
-      )
-      .post(
-        "/upl-csv",
-        ({ body }) => {
-          return uplCsv({ files: body.files });
-        },
-        {
-          body: t.Object({
-            files: t.Files(),
-          }),
-        },
+  .get("/layanan", layanan)
+  .get("/potensi", getPotensi)
+  .get(
+    "/img/:name",
+    ({ params, query }) => {
+      return img({
+        name: params.name,
+        UPLOAD_DIR_IMAGE,
+        ROOT,
+        size: query.size,
+      });
+    },
+    {
+      params: t.Object({
+        name: t.String(),
+      }),
+      query: t.Optional(
+        t.Object({
+          size: t.Optional(t.Number()),
+        }),
       ),
+    },
+  )
+  .delete(
+    "/img/:name",
+    ({ params }) => {
+      return imgDel({
+        name: params.name,
+        UPLOAD_DIR_IMAGE,
+      });
+    },
+    {
+      params: t.Object({
+        name: t.String(),
+      }),
+    },
+  )
+  .get(
+    "/imgs",
+    ({ query }) => {
+      return imgs({
+        search: query.search,
+        page: query.page,
+        count: query.count,
+        UPLOAD_DIR_IMAGE,
+      });
+    },
+    {
+      query: t.Optional(
+        t.Object({
+          page: t.Number({ default: 1 }),
+          count: t.Number({ default: 10 }),
+          search: t.String({ default: "" }),
+        }),
+      ),
+    },
+  )
+  .post(
+    "/upl-img",
+    ({ body }) => {
+      console.log(body.title);
+      return uplImg({ files: body.files, UPLOAD_DIR_IMAGE });
+    },
+    {
+      body: t.Object({
+        title: t.String(),
+        files: t.Files({ multiple: true }),
+      }),
+    },
+  )
+  .post(
+    "/upl-img-single",
+    ({ body }) => {
+      return uplImgSingle({
+        fileName: body.name,
+        file: body.file,
+        UPLOAD_DIR_IMAGE,
+      });
+    },
+    {
+      body: t.Object({
+        name: t.String(),
+        file: t.File(),
+      }),
+    },
+  )
+  .post(
+    "/upl-csv-single",
+    ({ body }) => {
+      return uplCsvSingle({ fileName: body.name, file: body.file });
+    },
+    {
+      body: t.Object({
+        name: t.String(),
+        file: t.File(),
+      }),
+    },
+  )
+  .post(
+    "/upl-csv",
+    ({ body }) => {
+      return uplCsv({ files: body.files });
+    },
+    {
+      body: t.Object({
+        files: t.Files(),
+      }),
+    },
   );
 
 export const GET = ApiServer.handle;

src/app/api/auth/login/route.ts

@@ -33,37 +33,29 @@ export async function POST(req: Request) {
       const codeOtp = randomOTP();
       const otpNumber = Number(codeOtp);
 
-      // ✅ PERBAIKAN: Gunakan format pesan yang lebih sederhana
-      // Hapus karakter khusus yang bisa bikin masalah
-      // const waMessage = `Website Desa Darmasaba\nKode verifikasi Anda ${codeOtp}`;
-      
-      // // ✅ OPSI 1: Tanpa encoding (coba dulu ini)
-      // const waUrl = `https://wa.wibudev.com/code?nom=${nomor}&text=${waMessage}`;
-      
-      // ✅ OPSI 2: Dengan encoding (kalau opsi 1 gagal)
-      // const waUrl = `https://wa.wibudev.com/code?nom=${nomor}&text=${encodeURIComponent(waMessage)}`;
-      
-      // ✅ OPSI 3: Encoding manual untuk URL-safe (alternatif terakhir)
-      // const encodedMessage = waMessage.replace(/\n/g, '%0A').replace(/ /g, '%20');
-      // const waUrl = `https://wa.wibudev.com/code?nom=${nomor}&text=${encodedMessage}`;
+      console.log(`🔑 DEBUG OTP [${nomor}]: ${codeOtp}`);
 
-      // console.log("🔍 Debug WA URL:", waUrl); // Untuk debugging
+      const waMessage = `Website Desa Darmasaba - Kode ini bersifat RAHASIA dan JANGAN DI BAGIKAN KEPADA SIAPAPUN, termasuk anggota ataupun Admin lainnya.\n\n>> Kode OTP anda: ${codeOtp}.`;
+      const waUrl = `https://wa.wibudev.com/code?nom=${encodeURIComponent(nomor)}&text=${encodeURIComponent(waMessage)}`;
       
-      // const res = await fetch(waUrl);
-      // const sendWa = await res.json();
-
-      // console.log("📱 WA Response:", sendWa); // Debug response
-
-      // if (sendWa.status !== "success") {
-      //   return NextResponse.json(
-      //     { 
-      //       success: false, 
-      //       message: "Gagal mengirim OTP via WhatsApp",
-      //       debug: sendWa // Tampilkan error detail
-      //     },
-      //     { status: 400 }
-      //   );
-      // }
+      console.log("🔍 Debug WA URL:", waUrl); 
+      
+      try {
+        const res = await fetch(waUrl);
+        if (!res.ok) {
+           console.error(`⚠️ WA Service HTTP Error: ${res.status} ${res.statusText}. Continuing since OTP is logged.`);
+           console.log(`💡 Use this OTP to login: ${codeOtp}`);
+        } else {
+          const sendWa = await res.json();
+          console.log("📱 WA Response:", sendWa);
+          if (sendWa.status !== "success") {
+            console.error("⚠️ WA Service Logic Error:", sendWa);
+          }
+        }
+      } catch (waError: unknown) {
+        const errorMessage = waError instanceof Error ? waError.message : String(waError);
+        console.error("⚠️ WA Connection Exception. Continuing since OTP is logged.", errorMessage);
+      }
 
       const createOtpId = await prisma.kodeOtp.create({
         data: { nomor, otp: otpNumber, isActive: true },

src/app/api/auth/register/route.ts

@@ -22,14 +22,22 @@ export async function POST(req: Request) {
     // ✅ Generate dan kirim OTP
     const codeOtp = randomOTP();
     const otpNumber = Number(codeOtp);
+    console.log(`🔑 DEBUG REGISTER OTP [${nomor}]: ${codeOtp}`);
 
     const waMessage = `Website Desa Darmasaba - Kode verifikasi Anda: ${codeOtp}`;
     const waUrl = `https://wa.wibudev.com/code?nom=${encodeURIComponent(nomor)}&text=${encodeURIComponent(waMessage)}`;
-    const waRes = await fetch(waUrl);
-    const waData = await waRes.json();
-
-    if (waData.status !== "success") {
-      return NextResponse.json({ success: false, message: 'Gagal mengirim OTP via WhatsApp' }, { status: 400 });
+    
+    try {
+      const waRes = await fetch(waUrl);
+      if (!waRes.ok) {
+        console.warn(`⚠️ WA Service HTTP Error (Register): ${waRes.status} ${waRes.statusText}. Continuing since OTP is logged.`);
+      } else {
+        const waData = await waRes.json();
+        console.log("📱 WA Response (Register):", waData);
+      }
+    } catch (waError: unknown) {
+      const errorMessage = waError instanceof Error ? waError.message : String(waError);
+      console.warn("⚠️ WA Connection Exception (Register). Continuing since OTP is logged.", errorMessage);
     }
 
     // ✅ Simpan OTP ke database

src/app/api/auth/resend/route.ts

@@ -17,18 +17,23 @@ export async function POST(req: Request) {
 
     const codeOtp = randomOTP();
     const otpNumber = Number(codeOtp);
+    console.log(`🔑 DEBUG RESEND OTP [${nomor}]: ${codeOtp}`);
 
     // Kirim OTP via WhatsApp
-    const waMessage = `Kode verifikasi Anda: ${codeOtp}`;
+    const waMessage = `Website Desa Darmasaba - Kode ini bersifat RAHASIA dan JANGAN DI BAGIKAN KEPADA SIAPAPUN, termasuk anggota ataupun Admin lainnya.\n\n>> Kode OTP anda: ${codeOtp}.`;
     const waUrl = `https://wa.wibudev.com/code?nom=${encodeURIComponent(nomor)}&text=${encodeURIComponent(waMessage)}`;
-    const waRes = await fetch(waUrl);
-    const waData = await waRes.json();
-
-    if (waData.status !== "success") {
-      return NextResponse.json(
-        { success: false, message: "Gagal mengirim OTP via WhatsApp" },
-        { status: 400 }
-      );
+    
+    try {
+      const waRes = await fetch(waUrl);
+      if (!waRes.ok) {
+        console.warn(`⚠️ WA Service HTTP Error (Resend): ${waRes.status} ${waRes.statusText}. Continuing since OTP is logged.`);
+      } else {
+        const waData = await waRes.json();
+        console.log("📱 WA Response (Resend):", waData);
+      }
+    } catch (waError: unknown) {
+      const errorMessage = waError instanceof Error ? waError.message : String(waError);
+      console.warn("⚠️ WA Connection Exception (Resend). Continuing since OTP is logged.", errorMessage);
     }
 
     // Simpan OTP ke database

src/app/api/auth/send-otp-register/route.ts

@@ -21,14 +21,22 @@ export async function POST(req: Request) {
     // Generate OTP
     const codeOtp = randomOTP();
     const otpNumber = Number(codeOtp);
+    console.log(`🔑 DEBUG SEND-OTP-REGISTER [${nomor}]: ${codeOtp}`);
 
     // Kirim WA
     const waUrl = `https://wa.wibudev.com/code?nom=${encodeURIComponent(nomor)}&text=Website Desa Darmasaba - Kode verifikasi Anda: ${codeOtp}`;
-    const res = await fetch(waUrl);
-    const sendWa = await res.json();
-
-    if (sendWa.status !== "success") {
-      return NextResponse.json({ success: false, message: 'Gagal mengirim OTP' }, { status: 400 });
+    
+    try {
+      const res = await fetch(waUrl);
+      if (!res.ok) {
+        console.warn(`⚠️ WA Service HTTP Error (SendOTPRegister): ${res.status} ${res.statusText}. Continuing since OTP is logged.`);
+      } else {
+        const sendWa = await res.json();
+        console.log("📱 WA Response (SendOTPRegister):", sendWa);
+      }
+    } catch (waError: unknown) {
+      const errorMessage = waError instanceof Error ? waError.message : String(waError);
+      console.warn("⚠️ WA Connection Exception (SendOTPRegister). Continuing since OTP is logged.", errorMessage);
     }
 
     // Simpan OTP

src/app/context/MusicContext.tsx

@@ -0,0 +1,320 @@
+'use client';
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  ReactNode,
+} from 'react';
+
+interface MusicFile {
+  id: string;
+  name: string;
+  realName: string;
+  path: string;
+  mimeType: string;
+  link: string;
+}
+
+export interface Musik {
+  id: string;
+  judul: string;
+  artis: string;
+  deskripsi: string | null;
+  durasi: string;
+  genre: string | null;
+  tahunRilis: number | null;
+  audioFile: MusicFile | null;
+  coverImage: MusicFile | null;
+  isActive: boolean;
+}
+
+interface MusicContextType {
+  // State
+  isPlaying: boolean;
+  currentSong: Musik | null;
+  currentSongIndex: number;
+  musikData: Musik[];
+  currentTime: number;
+  duration: number;
+  volume: number;
+  isMuted: boolean;
+  isRepeat: boolean;
+  isShuffle: boolean;
+  isLoading: boolean;
+  isPlayerOpen: boolean;
+
+  // Actions
+  playSong: (song: Musik) => void;
+  togglePlayPause: () => void;
+  playNext: () => void;
+  playPrev: () => void;
+  seek: (time: number) => void;
+  setVolume: (volume: number) => void;
+  toggleMute: () => void;
+  toggleRepeat: () => void;
+  toggleShuffle: () => void;
+  togglePlayer: () => void;
+  loadMusikData: () => Promise<void>;
+}
+
+const MusicContext = createContext<MusicContextType | undefined>(undefined);
+
+export function MusicProvider({ children }: { children: ReactNode }) {
+  // State
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentSong, setCurrentSong] = useState<Musik | null>(null);
+  const [currentSongIndex, setCurrentSongIndex] = useState(-1);
+  const [musikData, setMusikData] = useState<Musik[]>([]);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [volume, setVolumeState] = useState(70);
+  const [isMuted, setIsMuted] = useState(false);
+  const [isRepeat, setIsRepeat] = useState(false);
+  const [isShuffle, setIsShuffle] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isPlayerOpen, setIsPlayerOpen] = useState(false);
+
+  // Refs
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const isSeekingRef = useRef(false);
+  const animationFrameRef = useRef<number | null>(null);
+  const isRepeatRef = useRef(false); // Ref untuk avoid stale closure
+
+  // Sync ref dengan state
+  useEffect(() => {
+    isRepeatRef.current = isRepeat;
+  }, [isRepeat]);
+
+  // Load musik data
+  const loadMusikData = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const res = await fetch('/api/desa/musik/find-many?page=1&limit=50');
+      const data = await res.json();
+      if (data.success && data.data) {
+        const activeMusik = data.data.filter((m: Musik) => m.isActive);
+        setMusikData(activeMusik);
+      }
+    } catch (error) {
+      console.error('Error fetching musik:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Initialize audio element
+  useEffect(() => {
+    audioRef.current = new Audio();
+    audioRef.current.preload = 'metadata';
+
+    // Event listeners
+    audioRef.current.addEventListener('loadedmetadata', () => {
+      setDuration(Math.floor(audioRef.current!.duration));
+    });
+
+    audioRef.current.addEventListener('ended', () => {
+      // Gunakan ref untuk avoid stale closure
+      if (isRepeatRef.current) {
+        audioRef.current!.currentTime = 0;
+        audioRef.current!.play();
+      } else {
+        playNext();
+      }
+    });
+
+    // Load initial data
+    loadMusikData();
+
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current = null;
+      }
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- playNext is intentionally not in deps to avoid circular dependency
+  }, [loadMusikData]); // Remove isRepeat dari deps karena sudah pakai ref
+
+  // Update time with requestAnimationFrame for smooth progress
+  const updateTime = useCallback(() => {
+    if (audioRef.current && !audioRef.current.paused && !isSeekingRef.current) {
+      setCurrentTime(Math.floor(audioRef.current.currentTime));
+      animationFrameRef.current = requestAnimationFrame(updateTime);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isPlaying) {
+      animationFrameRef.current = requestAnimationFrame(updateTime);
+    } else {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    }
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [isPlaying, updateTime]);
+
+  // Play song
+  const playSong = useCallback(
+    (song: Musik) => {
+      if (!song?.audioFile?.link || !audioRef.current) return;
+
+      const songIndex = musikData.findIndex(m => m.id === song.id);
+      setCurrentSongIndex(songIndex);
+      setCurrentSong(song);
+      setIsPlaying(true);
+
+      audioRef.current.src = song.audioFile.link;
+      audioRef.current.load();
+      audioRef.current
+        .play()
+        .catch((err) => console.error('Error playing audio:', err));
+    },
+    [musikData]
+  );
+
+  // Toggle play/pause
+  const togglePlayPause = useCallback(() => {
+    if (!audioRef.current || !currentSong) return;
+
+    if (isPlaying) {
+      audioRef.current.pause();
+      setIsPlaying(false);
+    } else {
+      audioRef.current
+        .play()
+        .then(() => setIsPlaying(true))
+        .catch((err) => console.error('Error playing audio:', err));
+    }
+  }, [isPlaying, currentSong]);
+
+  // Play next
+  const playNext = useCallback(() => {
+    if (musikData.length === 0) return;
+
+    let nextIndex: number;
+    if (isShuffle) {
+      nextIndex = Math.floor(Math.random() * musikData.length);
+    } else {
+      nextIndex = (currentSongIndex + 1) % musikData.length;
+    }
+    const nextSong = musikData[nextIndex];
+    if (nextSong) {
+      playSong(nextSong);
+    }
+  }, [musikData, isShuffle, currentSongIndex, playSong]);
+
+  // Play previous
+  const playPrev = useCallback(() => {
+    if (musikData.length === 0) return;
+
+    // If more than 3 seconds into song, restart it
+    if (currentTime > 3) {
+      if (audioRef.current) {
+        audioRef.current.currentTime = 0;
+      }
+      return;
+    }
+
+    const prevIndex =
+      currentSongIndex <= 0 ? musikData.length - 1 : currentSongIndex - 1;
+    const prevSong = musikData[prevIndex];
+    if (prevSong) {
+      playSong(prevSong);
+    }
+  }, [musikData, currentSongIndex, currentTime, playSong]);
+
+  // Seek
+  const seek = useCallback((time: number) => {
+    if (!audioRef.current) return;
+    audioRef.current.currentTime = time;
+    setCurrentTime(time);
+  }, []);
+
+  // Set volume
+  const setVolume = useCallback((vol: number) => {
+    if (!audioRef.current) return;
+    const normalizedVol = Math.max(0, Math.min(100, vol)) / 100;
+    audioRef.current.volume = normalizedVol;
+    setVolumeState(Math.max(0, Math.min(100, vol)));
+    setIsMuted(normalizedVol === 0);
+  }, []);
+
+  // Toggle mute
+  const toggleMute = useCallback(() => {
+    if (!audioRef.current) return;
+
+    const newMuted = !isMuted;
+    audioRef.current.muted = newMuted;
+    setIsMuted(newMuted);
+
+    if (newMuted && volume > 0) {
+      audioRef.current.volume = 0;
+    } else if (!newMuted && volume > 0) {
+      audioRef.current.volume = volume / 100;
+    }
+  }, [isMuted, volume]);
+
+  // Toggle repeat
+  const toggleRepeat = useCallback(() => {
+    setIsRepeat((prev) => !prev);
+  }, []);
+
+  // Toggle shuffle
+  const toggleShuffle = useCallback(() => {
+    setIsShuffle((prev) => !prev);
+  }, []);
+
+  // Toggle player
+  const togglePlayer = useCallback(() => {
+    setIsPlayerOpen((prev) => !prev);
+  }, []);
+
+  const value: MusicContextType = {
+    isPlaying,
+    currentSong,
+    currentSongIndex,
+    musikData,
+    currentTime,
+    duration,
+    volume,
+    isMuted,
+    isRepeat,
+    isShuffle,
+    isLoading,
+    isPlayerOpen,
+    playSong,
+    togglePlayPause,
+    playNext,
+    playPrev,
+    seek,
+    setVolume,
+    toggleMute,
+    toggleRepeat,
+    toggleShuffle,
+    togglePlayer,
+    loadMusikData,
+  };
+
+  return (
+    <MusicContext.Provider value={value}>{children}</MusicContext.Provider>
+  );
+}
+
+export function useMusic() {
+  const context = useContext(MusicContext);
+  if (context === undefined) {
+    throw new Error('useMusic must be used within a MusicProvider');
+  }
+  return context;
+}

src/app/darmasaba/(pages)/desa/berita/[kategori]/[id]/page.tsx

@@ -3,10 +3,43 @@
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import NewsReader from '@/app/darmasaba/_com/NewsReader';
 import colors from '@/con/colors';
-import { Box, Center, Container, Group, Image, Skeleton, Stack, Text, Title } from '@mantine/core';
+import {
+  Box,
+  Center,
+  Container,
+  Group,
+  Image,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+  Grid,
+  Card,
+  AspectRatio,
+  Badge,
+  Divider,
+} from '@mantine/core';
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import { IconVideo } from '@tabler/icons-react';
+
+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 Page() {
   const params = useParams<{ id: string }>();
@@ -45,13 +78,30 @@ function Page() {
     );
   }
 
+  const data = state.findUnique.data as unknown as BeritaDetail;
+
   return (
     <Stack pos="relative" bg={colors.Bg} pb="xl" gap="xs" px={{ base: 'md', md: 0 }}>
       <Group px={{ base: 'md', md: 100 }}>
         <NewsReader />
       </Group>
-      <Container w={{ base: '100%', md: '50%' }}>
+
+      <Container w={{ base: '100%', md: '60%' }}>
         <Box pb={20}>
+          {/* Kategori Badge */}
+          {data.kategoriBerita?.name && (
+            <Badge
+              color={colors['blue-button']}
+              variant="light"
+              size="lg"
+              mb="md"
+              style={{ textTransform: 'uppercase' }}
+            >
+              {data.kategoriBerita.name}
+            </Badge>
+          )}
+
+          {/* Judul */}
           <Title
             id="news-title"
             order={1}
@@ -59,41 +109,108 @@ function Page() {
             c={colors['blue-button']}
             fw="bold"
             lh={{ base: 1.2, md: 1.25 }}
+            mb="md"
           >
-            {state.findUnique.data.judul}
-          </Title>
-          <Title
-            order={2}
-            ta="center"
-            fw="bold"
-            fz={{ base: 'md', md: 'lg' }}
-            lh={{ base: 1.3, md: 1.35 }}
-          >
-            Informasi dan Pelayanan Administrasi Digital
+            {data.judul}
           </Title>
+
+          <Divider my="xs" />
         </Box>
-        <Image src={state.findUnique.data.image?.link || ''} alt="" w="100%" loading="lazy" />
-      </Container>
-      <Box px={{ base: 'md', md: 100 }}>
-        <Stack gap="xs">
+
+        {/* Featured Image */}
+        {data.image?.link && (
+          <Image
+            src={data.image.link}
+            alt={data.judul}
+            w="100%"
+            h={{ base: 300, md: 400 }}
+            radius="md"
+            loading="lazy"
+            fit="cover"
+          />
+        )}
+
+        {/* Content */}
+        <Box mt="xl">
+          <Title order={3} c={colors['blue-button']} mb="md">
+            Deskripsi Berita
+          </Title>
           <Text
             id="news-content"
             py={20}
+            px={{ base: 0, md: 'sm' }}
             fz={{ base: 'sm', md: 'md' }}
-            lh={{ base: 1.6, md: 1.8 }}
+            lh={{ base: 1.8, md: 2 }}
             ta="justify"
+            c="dimmed"
             style={{
               wordBreak: 'break-word',
               whiteSpace: 'normal',
             }}
             dangerouslySetInnerHTML={{
-              __html: state.findUnique.data.content || '',
+              __html: data.content || '',
             }}
           />
-        </Stack>
-      </Box>
+        </Box>
+
+        {/* Gallery Images */}
+        {data.images && data.images.length > 0 && (
+          <Box mt="xl">
+            <Group gap="xs" mb="md">
+              <Title order={3} c={colors['blue-button']}>
+                Galeri Foto
+              </Title>
+              <Badge color={colors['blue-button']} 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 || `Foto ${index + 1}`}
+                      h={180}
+                      radius="sm"
+                      fit="cover"
+                      loading="lazy"
+                    />
+                  </Card>
+                </Grid.Col>
+              ))}
+            </Grid>
+          </Box>
+        )}
+
+        {/* YouTube Video */}
+        {data.linkVideo && (
+          <Box mt="xl">
+            <Group gap="xs" mb="md">
+              <Title order={3} c={colors['blue-button']}>
+                Video
+              </Title>
+              <IconVideo size={24} color={colors['blue-button']} />
+            </Group>
+            <AspectRatio ratio={16 / 9} mah={500}>
+              <iframe
+                src={data.linkVideo}
+                title="YouTube Video"
+                allowFullScreen
+                style={{
+                  borderRadius: 12,
+                  border: '1px solid #e0e0e0',
+                  boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
+                }}
+              />
+            </AspectRatio>
+          </Box>
+        )}
+
+
+      </Container>
     </Stack>
   );
 }
 
-export default Page;
+export default Page;

src/app/darmasaba/(pages)/musik/lib/nextPrev.ts

@@ -0,0 +1,32 @@
+export function getNextIndex(
+  currentIndex: number,
+  total: number,
+  isShuffle: boolean
+) {
+  if (total === 0) return -1;
+
+  if (isShuffle) {
+    return Math.floor(Math.random() * total);
+  }
+
+  return (currentIndex + 1) % total;
+}
+
+export function getPrevIndex(
+  currentIndex: number,
+  total: number,
+  isShuffle: boolean
+) {
+  if (total === 0) return -1;
+
+  if (isShuffle) {
+    return Math.floor(Math.random() * total);
+  }
+
+  return currentIndex - 1 < 0 ? total - 1 : currentIndex - 1;
+}
+
+//pakai di ui
+
+// const next = getNextIndex(currentSongIndex, filteredMusik.length, isShuffle);
+// playSong(next);

src/app/darmasaba/(pages)/musik/lib/playPause.ts

@@ -0,0 +1,24 @@
+import { RefObject } from "react";
+
+export function togglePlayPause(
+  audioRef: RefObject<HTMLAudioElement | null>,
+  isPlaying: boolean,
+  setIsPlaying: (v: boolean) => void
+) {
+  if (!audioRef.current) return;
+
+  if (isPlaying) {
+    audioRef.current.pause();
+    setIsPlaying(false);
+  } else {
+    audioRef.current
+      .play()
+      .then(() => setIsPlaying(true))
+      .catch(console.error);
+  }
+}
+
+// pakai di ui
+// onClick={() =>
+//   togglePlayPause(audioRef, isPlaying, setIsPlaying)
+// }

src/app/darmasaba/(pages)/musik/lib/repeat.ts

@@ -0,0 +1,22 @@
+import { RefObject } from "react";
+
+export function handleRepeatOrNext(
+  audioRef: RefObject<HTMLAudioElement | null>,
+  isRepeat: boolean,
+  playNext: () => void
+) {
+  if (!audioRef.current) return;
+
+  if (isRepeat) {
+    audioRef.current.currentTime = 0;
+    audioRef.current.play();
+  } else {
+    playNext();
+  }
+}
+
+//dipakai di ui
+
+// onEnded={() =>
+//   handleRepeatOrNext(audioRef, isRepeat, playNext)
+// }

src/app/darmasaba/(pages)/musik/lib/seek.ts

@@ -0,0 +1,19 @@
+export function seekTo(
+  audioRef: React.RefObject<HTMLAudioElement>,
+  time: number,
+  setCurrentTime?: (v: number) => void
+) {
+  if (!audioRef.current) return;
+
+  // Validasi: jangan seek melebihi durasi atau negatif
+  const duration = audioRef.current.duration || 0;
+  const safeTime = Math.min(Math.max(0, time), duration);
+
+  // Set waktu audio
+  audioRef.current.currentTime = safeTime;
+
+  // Update state jika provided
+  if (setCurrentTime) {
+    setCurrentTime(Math.floor(safeTime));
+  }
+}

src/app/darmasaba/(pages)/musik/lib/shuffle.ts

@@ -0,0 +1,6 @@
+export function toggleShuffle(
+  isShuffle: boolean,
+  setIsShuffle: (v: boolean) => void
+) {
+  setIsShuffle(!isShuffle);
+}

src/app/darmasaba/(pages)/musik/lib/useAudioProgress.ts

@@ -0,0 +1,145 @@
+import { useRef, useEffect, useCallback } from 'react';
+
+/**
+ * Custom hook untuk smooth audio progress update menggunakan requestAnimationFrame
+ * Lebih smooth dan reliable dibanding onTimeUpdate event
+ */
+export function useAudioProgress(
+  audioRef: React.RefObject<HTMLAudioElement>,
+  isPlaying: boolean,
+  setCurrentTime: (time: number) => void,
+  isSeekingRef: React.RefObject<boolean>
+) {
+  const rafRef = useRef<number | null>(null);
+  const lastTimeRef = useRef<number>(0);
+
+  const updateProgress = useCallback(() => {
+    if (!audioRef.current || audioRef.current.paused || isSeekingRef.current) {
+      rafRef.current = requestAnimationFrame(updateProgress);
+      return;
+    }
+
+    const audio = audioRef.current;
+    const currentTime = Math.floor(audio.currentTime);
+
+    // Hanya update state jika waktu berubah
+    if (currentTime !== lastTimeRef.current) {
+      lastTimeRef.current = currentTime;
+      setCurrentTime(currentTime);
+    }
+
+    rafRef.current = requestAnimationFrame(updateProgress);
+  }, [audioRef, setCurrentTime, isSeekingRef]);
+
+  useEffect(() => {
+    if (isPlaying) {
+      rafRef.current = requestAnimationFrame(updateProgress);
+    } else if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+    }
+
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, [isPlaying, updateProgress]);
+
+  return rafRef;
+}
+
+// 'use client'
+// import { useEffect, useRef, useState, useCallback } from 'react';
+
+// export function useAudioEngine() {
+//   const audioRef = useRef<HTMLAudioElement | null>(null);
+//   const rafRef = useRef<number | null>(null);
+//   const isSeekingRef = useRef(false);
+
+//   const [isPlaying, setIsPlaying] = useState(false);
+//   const [currentTime, setCurrentTime] = useState(0);
+//   const [duration, setDuration] = useState(0);
+
+//   const load = useCallback((src: string) => {
+//     if (!audioRef.current) return;
+//     audioRef.current.src = src;
+//     audioRef.current.load();
+//     setCurrentTime(0);
+//   }, []);
+
+//   const play = async () => {
+//     if (!audioRef.current) return;
+//     await audioRef.current.play();
+//     setIsPlaying(true);
+//   };
+
+//   const pause = () => {
+//     if (!audioRef.current) return;
+//     audioRef.current.pause();
+//     setIsPlaying(false);
+//   };
+
+//   const toggle = () => {
+//     if (!audioRef.current) return;
+//     audioRef.current.paused ? play() : pause();
+//   };
+
+//   const seek = (time: number) => {
+//     if (!audioRef.current) return;
+//     isSeekingRef.current = true;
+//     audioRef.current.currentTime = time;
+//     setCurrentTime(time);
+//     requestAnimationFrame(() => {
+//       isSeekingRef.current = false;
+//     });
+//   };
+
+//   useEffect(() => {
+//     if (!audioRef.current) return;
+//     const audio = audioRef.current;
+
+//     const onLoaded = () => {
+//       setDuration(Math.floor(audio.duration));
+//     };
+
+//     const onEnded = () => {
+//       setIsPlaying(false);
+//       setCurrentTime(0);
+//     };
+
+//     audio.addEventListener('loadedmetadata', onLoaded);
+//     audio.addEventListener('ended', onEnded);
+
+//     return () => {
+//       audio.removeEventListener('loadedmetadata', onLoaded);
+//       audio.removeEventListener('ended', onEnded);
+//     };
+//   }, []);
+
+//   useEffect(() => {
+//     const loop = () => {
+//       if (
+//         audioRef.current &&
+//         !audioRef.current.paused &&
+//         !isSeekingRef.current
+//       ) {
+//         setCurrentTime(Math.floor(audioRef.current.currentTime));
+//       }
+//       rafRef.current = requestAnimationFrame(loop);
+//     };
+//     rafRef.current = requestAnimationFrame(loop);
+//     return () => {
+//       if (rafRef.current) cancelAnimationFrame(rafRef.current);
+//     };
+//   }, []);
+
+//   return {
+//     audioRef,
+//     isPlaying,
+//     currentTime,
+//     duration,
+//     load,
+//     toggle,
+//     seek,
+//   };
+// }

src/app/darmasaba/(pages)/musik/lib/volume.ts

@@ -0,0 +1,29 @@
+import { RefObject } from "react";
+
+export function setAudioVolume(
+  audioRef: RefObject<HTMLAudioElement | null>,
+  volume: number,
+  setVolume: (v: number) => void,
+  setIsMuted: (v: boolean) => void
+) {
+  if (!audioRef.current) return;
+
+  audioRef.current.volume = volume / 100;
+  setVolume(volume);
+
+  if (volume > 0) {
+    setIsMuted(false);
+  }
+}
+
+export function toggleMute(
+  audioRef: RefObject<HTMLAudioElement | null>,
+  isMuted: boolean,
+  setIsMuted: (v: boolean) => void
+) {
+  if (!audioRef.current) return;
+
+  const muted = !isMuted;
+  audioRef.current.muted = muted;
+  setIsMuted(muted);
+}

src/app/darmasaba/(pages)/musik/musik-desa/page.tsx

@@ -1,64 +1,96 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
-import { ActionIcon, Avatar, Badge, Box, Card, Flex, Grid, Group, Paper, Slider, Stack, Text, TextInput } from '@mantine/core';
+import { useMusic } from '@/app/context/MusicContext';
+import { ActionIcon, Avatar, Badge, Box, Card, Flex, Grid, Group, Paper, ScrollArea, Slider, Stack, Text, TextInput } from '@mantine/core';
 import { IconArrowsShuffle, IconPlayerPauseFilled, IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerSkipForwardFilled, IconRepeat, IconRepeatOff, IconSearch, IconVolume, IconVolumeOff, IconX } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 const MusicPlayer = () => {
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(245);
-  const [volume, setVolume] = useState(70);
-  const [isMuted, setIsMuted] = useState(false);
-  const [isRepeat, setIsRepeat] = useState(false);
-  const [isShuffle, setIsShuffle] = useState(false);
+  const {
+    isPlaying,
+    currentSong,
+    currentTime,
+    duration,
+    volume,
+    isMuted,
+    isRepeat,
+    isShuffle,
+    isLoading,
+    musikData,
+    playSong,
+    togglePlayPause,
+    playNext,
+    playPrev,
+    seek,
+    setVolume,
+    toggleMute,
+    toggleRepeat,
+    toggleShuffle,
+  } = useMusic();
 
-  const songs = [
-    { id: 1, title: 'Midnight Dreams', artist: 'The Wanderers', duration: '4:05', cover: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop' },
-    { id: 2, title: 'Summer Breeze', artist: 'Coastal Vibes', duration: '3:42', cover: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=400&h=400&fit=crop' },
-    { id: 3, title: 'City Lights', artist: 'Urban Echo', duration: '4:18', cover: 'https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?w=400&h=400&fit=crop' },
-    { id: 4, title: 'Ocean Waves', artist: 'Serenity Sound', duration: '5:20', cover: 'https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=400&h=400&fit=crop' },
-    { id: 5, title: 'Neon Nights', artist: 'Electric Dreams', duration: '3:55', cover: 'https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=400&h=400&fit=crop' },
-    { id: 6, title: 'Mountain High', artist: 'Peak Performers', duration: '4:32', cover: 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=400&h=400&fit=crop' }
-  ];
+  const [search, setSearch] = useState('');
 
-  const [currentSong, setCurrentSong] = useState(songs[0]);
+  // Fetch musik data from global state
+  const { loadMusikData } = useMusic();
 
   useEffect(() => {
-    let interval: any;
-    if (isPlaying) {
-      interval = setInterval(() => {
-        setCurrentTime(prev => {
-          if (prev >= duration) {
-            setIsPlaying(false);
-            return 0;
-          }
-          return prev + 1;
-        });
-      }, 1000);
-    }
-    return () => clearInterval(interval);
-  }, [isPlaying, duration]);
+    loadMusikData();
+  }, [loadMusikData]);
 
+  // Filter musik based on search - gunakan useMemo untuk mencegah re-calculate setiap render
+  const filteredMusik = useMemo(() => {
+    return musikData.filter(musik =>
+      musik.judul.toLowerCase().includes(search.toLowerCase()) ||
+      musik.artis.toLowerCase().includes(search.toLowerCase()) ||
+      (musik.genre && musik.genre.toLowerCase().includes(search.toLowerCase()))
+    );
+  }, [musikData, search]);
+
+  // Format time helper
   const formatTime = (seconds: number) => {
     const mins = Math.floor(seconds / 60);
     const secs = Math.floor(seconds % 60);
     return `${mins}:${secs.toString().padStart(2, '0')}`;
   };
 
-  const playSong = (song: any) => {
-    setCurrentSong(song);
-    setCurrentTime(0);
-    setIsPlaying(true);
-    const durationInSeconds = parseInt(song.duration.split(':')[0]) * 60 + parseInt(song.duration.split(':')[1]);
-    setDuration(durationInSeconds);
+  const handleVolumeChange = (value: number) => {
+    setVolume(value);
   };
 
-  const toggleMute = () => {
-    setIsMuted(!isMuted);
+  const toggleMuteHandler = () => {
+    toggleMute();
   };
 
+  const togglePlayPauseHandler = () => {
+    togglePlayPause();
+  };
+
+  const skipBack = () => {
+    playPrev();
+  };
+
+  const skipForward = () => {
+    playNext();
+  };
+
+  const toggleShuffleHandler = () => {
+    toggleShuffle();
+  };
+
+  const toggleRepeatHandler = () => {
+    toggleRepeat();
+  };
+
+  if (isLoading) {
+    return (
+      <Box px={{ base: 'md', md: 100 }} py="xl">
+        <Paper mx="auto" p="xl" radius="lg" shadow="sm" bg="white">
+          <Text ta="center">Memuat data musik...</Text>
+        </Paper>
+      </Box>
+    );
+  }
+
   return (
     <Box px={{ base: 'md', md: 100 }} py="xl">
       <Paper
@@ -84,6 +116,8 @@ const MusicPlayer = () => {
                 leftSection={<IconSearch size={18} />}
                 radius="xl"
                 w={280}
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
                 styles={{ input: { backgroundColor: '#fff' } }}
               />
             </Group>
@@ -91,63 +125,86 @@ const MusicPlayer = () => {
           <Stack gap="xl">
             <div>
               <Text size="xl" fw={700} c="#0B4F78" mb="md">Sedang Diputar</Text>
-              <Card radius="md" p="xl" shadow="md">
-                <Group align="center" gap="xl">
-                  <Avatar src={currentSong.cover} size={180} radius="md" />
-                  <Stack gap="md" style={{ flex: 1 }}>
-                    <div>
-                      <Text size="28px" fw={700} c="#0B4F78">{currentSong.title}</Text>
-                      <Text size="lg" c="#5A6C7D">{currentSong.artist}</Text>
-                    </div>
-                    <Group gap="xs" align="center">
-                      <Text size="xs" c="#5A6C7D" w={42}>{formatTime(currentTime)}</Text>
-                      <Slider
-                        value={currentTime}
-                        max={duration}
-                        onChange={setCurrentTime}
-                        color="#0B4F78"
-                        size="sm"
-                        style={{ flex: 1 }}
-                        styles={{ thumb: { borderWidth: 2 } }}
-                      />
-                      <Text size="xs" c="#5A6C7D" w={42}>{formatTime(duration)}</Text>
-                    </Group>
-                  </Stack>
-                </Group>
-              </Card>
+              {currentSong ? (
+                <Card radius="md" p="xl" shadow="md">
+                  <Group align="center" gap="xl">
+                    <Avatar
+                      src={currentSong.coverImage?.link || '/mp3-logo.png'}
+                      size={180}
+                      radius="md"
+                    />
+                    <Stack gap="md" style={{ flex: 1 }}>
+                      <div>
+                        <Text size="28px" fw={700} c="#0B4F78">{currentSong.judul}</Text>
+                        <Text size="lg" c="#5A6C7D">{currentSong.artis}</Text>
+                        {currentSong.genre && (
+                          <Badge mt="xs" color="#0B4F78" variant="light">{currentSong.genre}</Badge>
+                        )}
+                      </div>
+                      <Group gap="xs" align="center">
+                        <Text size="xs" c="#5A6C7D" w={42}>{formatTime(currentTime)}</Text>
+                        <Slider
+                          value={currentTime}
+                          max={duration || 100}
+                          onChange={(v) => seek(v)}
+                          color="#0B4F78"
+                          size="sm"
+                          style={{ flex: 1 }}
+                          styles={{ thumb: { borderWidth: 2 } }}
+                        />
+                        <Text size="xs" c="#5A6C7D" w={42}>{formatTime(duration || 0)}</Text>
+                      </Group>
+                    </Stack>
+                  </Group>
+                </Card>
+              ) : (
+                <Card radius="md" p="xl" shadow="md">
+                  <Text ta="center" c="dimmed">Pilih lagu untuk diputar</Text>
+                </Card>
+              )}
             </div>
 
             <div>
               <Text size="xl" fw={700} c="#0B4F78" mb="md">Daftar Putar</Text>
-              <Grid gutter="md">
-                {songs.map(song => (
-                  <Grid.Col span={{ base: 12, sm: 6, lg: 4 }} key={song.id}>
-                    <Card
-                      radius="md"
-                      p="md"
-                      shadow="sm"
-                      style={{
-                        cursor: 'pointer',
-                        border: currentSong.id === song.id ? '2px solid #0B4F78' : '2px solid transparent',
-                        transition: 'all 0.2s'
-                      }}
-                      onClick={() => playSong(song)}
-                    >
-                      <Group gap="md" align="center">
-                        <Avatar src={song.cover} size={64} radius="md" />
-                        <Stack gap={4} style={{ flex: 1, minWidth: 0 }}>
-                          <Text size="sm" fw={600} c="#0B4F78" truncate>{song.title}</Text>
-                          <Text size="xs" c="#5A6C7D">{song.artist}</Text>
-                          <Text size="xs" c="#8A9BA8">{song.duration}</Text>
-                        </Stack>
-                        {currentSong.id === song.id && isPlaying && (
-                          <Badge color="#0B4F78" variant="filled">Memutar</Badge>
-                        )}
-                      </Group>
-                    </Card>
-                  </Grid.Col>
-                ))}
-              </Grid>
+              {filteredMusik.length === 0 ? (
+                <Text ta="center" c="dimmed">Tidak ada musik yang ditemukan</Text>
+              ) : (
+                <ScrollArea.Autosize mah={400}>
+                  <Grid gutter="md">
+                    {filteredMusik.map((song) => (
+                      <Grid.Col span={{ base: 12, sm: 6, lg: 4 }} key={song.id}>
+                        <Card
+                          radius="md"
+                          p="md"
+                          shadow="sm"
+                          style={{
+                            cursor: 'pointer',
+                            border: currentSong?.id === song.id ? '2px solid #0B4F78' : '2px solid transparent',
+                            transition: 'all 0.2s'
+                          }}
+                          onClick={() => playSong(song)}
+                        >
+                          <Group gap="md" align="center">
+                            <Avatar
+                              src={song.coverImage?.link || 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop'}
+                              size={64}
+                              radius="md"
+                            />
+                            <Stack gap={4} style={{ flex: 1, minWidth: 0 }}>
+                              <Text size="sm" fw={600} c="#0B4F78" truncate>{song.judul}</Text>
+                              <Text size="xs" c="#5A6C7D">{song.artis}</Text>
+                              <Text size="xs" c="#8A9BA8">{song.durasi}</Text>
+                            </Stack>
+                            {currentSong?.id === song.id && isPlaying && (
+                              <Badge color="#0B4F78" variant="filled">Memutar</Badge>
+                            )}
+                          </Group>
+                        </Card>
+                      </Grid.Col>
+                    ))}
+                  </Grid>
+                </ScrollArea.Autosize>
+              )}
             </div>
           </Stack>
 
@@ -168,10 +225,20 @@ const MusicPlayer = () => {
       >
         <Flex align="center" justify="space-between" gap="xl" h="100%">
           <Group gap="md" style={{ flex: 1 }}>
-            <Avatar src={currentSong.cover} size={56} radius="md" />
+            <Avatar
+              src={currentSong?.coverImage?.link || 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop'}
+              size={56}
+              radius="md"
+            />
             <div style={{ flex: 1, minWidth: 0 }}>
-              <Text size="sm" fw={600} c="#0B4F78" truncate>{currentSong.title}</Text>
-              <Text size="xs" c="#5A6C7D">{currentSong.artist}</Text>
+              {currentSong ? (
+                <>
+                  <Text size="sm" fw={600} c="#0B4F78" truncate>{currentSong.judul}</Text>
+                  <Text size="xs" c="#5A6C7D">{currentSong.artis}</Text>
+                </>
+              ) : (
+                <Text size="sm" c="dimmed">Tidak ada lagu</Text>
+              )}
             </div>
           </Group>
 
@@ -180,12 +247,12 @@ const MusicPlayer = () => {
               <ActionIcon
                 variant={isShuffle ? 'filled' : 'subtle'}
                 color="#0B4F78"
-                onClick={() => setIsShuffle(!isShuffle)}
+                onClick={toggleShuffleHandler}
                 radius="xl"
               >
                 {isShuffle ? <IconArrowsShuffle size={18} /> : <IconX size={18} />}
               </ActionIcon>
-              <ActionIcon variant="light" color="#0B4F78" size={40} radius="xl">
+              <ActionIcon variant="light" color="#0B4F78" size={40} radius="xl" onClick={skipBack}>
                 <IconPlayerSkipBackFilled size={20} />
               </ActionIcon>
               <ActionIcon
@@ -193,17 +260,17 @@ const MusicPlayer = () => {
                 color="#0B4F78"
                 size={56}
                 radius="xl"
-                onClick={() => setIsPlaying(!isPlaying)}
+                onClick={togglePlayPauseHandler}
               >
                 {isPlaying ? <IconPlayerPauseFilled size={26} /> : <IconPlayerPlayFilled size={26} />}
               </ActionIcon>
-              <ActionIcon variant="light" color="#0B4F78" size={40} radius="xl">
+              <ActionIcon variant="light" color="#0B4F78" size={40} radius="xl" onClick={skipForward}>
                 <IconPlayerSkipForwardFilled size={20} />
               </ActionIcon>
               <ActionIcon
                 variant={isRepeat ? 'filled' : 'subtle'}
                 color="#0B4F78"
-                onClick={() => setIsRepeat(!isRepeat)}
+                onClick={toggleRepeatHandler}
                 radius="xl"
               >
                 {isRepeat ? <IconRepeat size={18} /> : <IconRepeatOff size={18} />}
@@ -213,26 +280,23 @@ const MusicPlayer = () => {
               <Text size="xs" c="#5A6C7D" w={40} ta="right">{formatTime(currentTime)}</Text>
               <Slider
                 value={currentTime}
-                max={duration}
-                onChange={setCurrentTime}
+                max={duration || 100}
+                onChange={(v) => seek(v)}
                 color="#0B4F78"
                 size="xs"
                 style={{ flex: 1 }}
               />
-              <Text size="xs" c="#5A6C7D" w={40}>{formatTime(duration)}</Text>
+              <Text size="xs" c="#5A6C7D" w={40}>{formatTime(duration || 0)}</Text>
             </Group>
           </Stack>
 
           <Group gap="xs" style={{ flex: 1 }} justify="flex-end">
-            <ActionIcon variant="subtle" color="gray" onClick={toggleMute}>
+            <ActionIcon variant="subtle" color="gray" onClick={toggleMuteHandler}>
               {isMuted || volume === 0 ? <IconVolumeOff size={20} /> : <IconVolume size={20} />}
             </ActionIcon>
             <Slider
               value={isMuted ? 0 : volume}
-              onChange={(val) => {
-                setVolume(val);
-                if (val > 0) setIsMuted(false);
-              }}
+              onChange={handleVolumeChange}
               color="#0B4F78"
               size="xs"
               w={100}

src/app/darmasaba/(tambahan)/apbdes/lib/apbDesaProgress.tsx

@@ -78,7 +78,8 @@ function APBDesProgress({ apbdesData }: APBDesProgressProps) {
   // Hitung total per kategori
   const calcTotal = (items: { anggaran: number; realisasi: number }[]) => {
     const anggaran = items.reduce((sum, item) => sum + item.anggaran, 0);
-    const realisasi = items.reduce((sum, item) => sum + item.realisasi, 0);
+    // Use realisasi field (already mapped from totalRealisasi in transformAPBDesData)
+    const realisasi = items.reduce((sum, item) => sum + (item.realisasi || 0), 0);
     const persen = anggaran > 0 ? (realisasi / anggaran) * 100 : 0;
     return { anggaran, realisasi, persen };
   };

src/app/darmasaba/(tambahan)/apbdes/lib/apbDesaTable.tsx

@@ -68,6 +68,7 @@ function APBDesTable({ apbdesData }: APBDesTableProps) {
 
   // Calculate totals
   const totalAnggaran = items.reduce((sum, item) => sum + (item.anggaran || 0), 0);
+  // Use realisasi field (already mapped from totalRealisasi in transformAPBDesData)
   const totalRealisasi = items.reduce((sum, item) => sum + (item.realisasi || 0), 0);
   const totalSelisih = totalAnggaran - totalRealisasi;
   const totalPersentase = totalAnggaran > 0 ? (totalRealisasi / totalAnggaran) * 100 : 0;

src/app/darmasaba/(tambahan)/apbdes/lib/types.ts

@@ -51,7 +51,8 @@ export function transformAPBDesData(data: any): APBDesData {
           kode: item.kode || '',
           uraian: item.uraian || '',
           anggaran: typeof item.anggaran === 'number' ? item.anggaran : 0,
-          realisasi: typeof item.realisasi === 'number' ? item.realisasi : 0,
+          // Map totalRealisasi from backend to realisasi field
+          realisasi: typeof item.totalRealisasi === 'number' ? item.totalRealisasi : (typeof item.realisasi === 'number' ? item.realisasi : 0),
           selisih: typeof item.selisih === 'number' ? item.selisih : 0,
           persentase: typeof item.persentase === 'number' ? item.persentase : 0,
           level: typeof item.level === 'number' ? item.level : 1,

src/app/darmasaba/_com/FixedPlayerBar.tsx

@@ -0,0 +1,317 @@
+import { useMusic } from '@/app/context/MusicContext';
+import {
+  ActionIcon,
+  Avatar,
+  Box,
+  Button,
+  Flex,
+  Group,
+  Paper,
+  Slider,
+  Text,
+  Transition
+} from '@mantine/core';
+import {
+  IconArrowsShuffle,
+  IconMusic,
+  IconPlayerPauseFilled,
+  IconPlayerPlayFilled,
+  IconPlayerSkipBackFilled,
+  IconPlayerSkipForwardFilled,
+  IconRepeat,
+  IconRepeatOff,
+  IconVolume,
+  IconVolumeOff,
+  IconX,
+} from '@tabler/icons-react';
+import { useState } from 'react';
+
+export default function FixedPlayerBar() {
+  const {
+    isPlaying,
+    currentSong,
+    currentTime,
+    duration,
+    volume,
+    isMuted,
+    isRepeat,
+    isShuffle,
+    togglePlayPause,
+    playNext,
+    playPrev,
+    seek,
+    setVolume,
+    toggleMute,
+    toggleRepeat,
+    toggleShuffle,
+  } = useMusic();
+
+  const [showVolume, setShowVolume] = useState(false);
+  const [isMinimized, setIsMinimized] = useState(false);
+
+  // Format time
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  // Handle seek
+  const handleSeek = (value: number) => {
+    seek(value);
+  };
+
+  // Handle volume change
+  const handleVolumeChange = (value: number) => {
+    setVolume(value);
+  };
+
+  // Handle shuffle toggle
+  const handleToggleShuffle = () => {
+    toggleShuffle();
+  };
+
+  // Handle minimize player (show floating icon)
+  const handleMinimizePlayer = () => {
+    setIsMinimized(true);
+  };
+
+  // Handle restore player from floating icon
+  const handleRestorePlayer = () => {
+    setIsMinimized(false);
+  };
+
+  // If minimized, show floating icon instead of player bar
+  if (isMinimized) {
+    return (
+      <>
+        {/* Floating Music Icon - Shows when player is minimized */}
+        <Button
+          color="#0B4F78"
+          variant="filled"
+          size="md"
+          mt="md"
+          style={{
+            position: 'fixed',
+            top: '50%', // Menempatkan titik atas ikon di tengah layar
+            left: '0px',
+            transform: 'translateY(-50%)', // Menggeser ikon ke atas sebesar setengah tingginya sendiri agar benar-benar di tengah
+            borderBottomRightRadius: '20px',
+            borderTopRightRadius: '20px',
+            cursor: 'pointer',
+            transition: 'transform 0.2s ease',
+            zIndex: 1
+          }}
+          onClick={handleRestorePlayer}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = 'translateY(-50%)';
+          }}
+        >
+          <IconMusic size={28} color="white" />
+        </Button>
+
+        {/* Spacer to prevent content from being hidden behind player */}
+        <Box h={20} />
+      </>
+    );
+  }
+
+  if (!currentSong) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Mini Player Bar - Always visible when song is playing */}
+      <Paper
+        pos="fixed"
+        bottom={0}
+        left={0}
+        right={0}
+        p="sm"
+        shadow="lg"
+        style={{
+          zIndex: 1,
+          borderTop: '1px solid rgba(0,0,0,0.1)',
+        }}
+      >
+        <Flex align="center" gap="md" justify="space-between">
+          {/* Song Info - Left */}
+          <Group gap="sm" flex={1} style={{ minWidth: 0 }}>
+            <Avatar
+              src={currentSong.coverImage?.link || ''}
+              alt={currentSong.judul}
+              size={40}
+              radius="sm"
+              imageProps={{ loading: 'lazy' }}
+            />
+            <Box style={{ minWidth: 0 }}>
+              <Text fz="sm" fw={600} truncate>
+                {currentSong.judul}
+              </Text>
+              <Text fz="xs" c="dimmed" truncate>
+                {currentSong.artis}
+              </Text>
+            </Box>
+          </Group>
+
+          {/* Controls + Progress - Center */}
+          <Group gap="xs" flex={2} justify="center">
+            {/* Control Buttons */}
+            <Group gap="xs">
+              <ActionIcon
+                variant={isShuffle ? 'filled' : 'subtle'}
+                color={isShuffle ? 'blue' : 'gray'}
+                size="lg"
+                onClick={handleToggleShuffle}
+                title="Shuffle"
+              >
+                <IconArrowsShuffle size={18} />
+              </ActionIcon>
+
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                size="lg"
+                onClick={playPrev}
+                title="Previous"
+              >
+                <IconPlayerSkipBackFilled size={20} />
+              </ActionIcon>
+
+              <ActionIcon
+                variant="filled"
+                color={isPlaying ? 'blue' : 'gray'}
+                size="xl"
+                radius="xl"
+                onClick={togglePlayPause}
+                title={isPlaying ? 'Pause' : 'Play'}
+              >
+                {isPlaying ? (
+                  <IconPlayerPauseFilled size={24} />
+                ) : (
+                  <IconPlayerPlayFilled size={24} />
+                )}
+              </ActionIcon>
+
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                size="lg"
+                onClick={playNext}
+                title="Next"
+              >
+                <IconPlayerSkipForwardFilled size={20} />
+              </ActionIcon>
+
+              <ActionIcon
+                variant="subtle"
+                color={isRepeat ? 'blue' : 'gray'}
+                size="lg"
+                onClick={toggleRepeat}
+                title={isRepeat ? 'Repeat On' : 'Repeat Off'}
+              >
+                {isRepeat ? <IconRepeat size={18} /> : <IconRepeatOff size={18} />}
+              </ActionIcon>
+            </Group>
+
+            {/* Progress Bar - Desktop */}
+            <Box w={200} display={{ base: 'none', md: 'block' }}>
+              <Slider
+                value={currentTime}
+                max={duration || 100}
+                onChange={handleSeek}
+                size="sm"
+                color="blue"
+                label={(value) => formatTime(value)}
+              />
+            </Box>
+          </Group>
+
+          {/* Right Controls - Volume + Close */}
+          <Group gap="xs" flex={1} justify="flex-end">
+            <Box
+              onMouseEnter={() => setShowVolume(true)}
+              onMouseLeave={() => setShowVolume(false)}
+              pos="relative"
+            >
+              <ActionIcon
+                variant="subtle"
+                color={isMuted ? 'red' : 'gray'}
+                size="lg"
+                onClick={toggleMute}
+                title={isMuted ? 'Unmute' : 'Mute'}
+              >
+                {isMuted ? (
+                  <IconVolumeOff size={18} />
+                ) : (
+                  <IconVolume size={18} />
+                )}
+              </ActionIcon>
+
+              <Transition
+                mounted={showVolume}
+                transition="scale-y"
+                duration={200}
+                timingFunction="ease"
+              >
+                {(style) => (
+                  <Paper
+                    style={{
+                      ...style,
+                      position: 'absolute',
+                      bottom: '100%',
+                      right: 0,
+                      mb: 'xs',
+                      p: 'sm',
+                      zIndex: 1001,
+                    }}
+                    shadow="md"
+                    withBorder
+                  >
+                    <Slider
+                      value={isMuted ? 0 : volume}
+                      max={100}
+                      onChange={handleVolumeChange}
+                      h={100}
+                      color="blue"
+                      size="sm"
+                    />
+                  </Paper>
+                )}
+              </Transition>
+            </Box>
+
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="lg"
+              onClick={handleMinimizePlayer}
+              title="Minimize player"
+            >
+              <IconX size={18} />
+            </ActionIcon>
+          </Group>
+        </Flex>
+
+        {/* Progress Bar - Mobile */}
+        <Box mt="xs" display={{ base: 'block', md: 'none' }}>
+          <Slider
+            value={currentTime}
+            max={duration || 100}
+            onChange={handleSeek}
+            size="sm"
+            color="blue"
+            label={(value) => formatTime(value)}
+          />
+        </Box>
+      </Paper>
+
+      {/* Spacer to prevent content from being hidden behind player */}
+      <Box h={80} />
+    </>
+  );
+}

src/app/darmasaba/_com/NewsReaderalanding.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { Button } from '@mantine/core';
-import { IconMusic, IconMusicOff } from '@tabler/icons-react';
+import { IconDisabled, IconDisabledOff } from '@tabler/icons-react';
 import { useEffect, useRef, useState } from 'react';
 
 const NewsReaderLanding = () => {
@@ -95,15 +95,17 @@ const NewsReaderLanding = () => {
       mt="md"
       style={{
         position: 'fixed',
-        bottom: '350px',
+        top: '50%', // Menempatkan titik atas ikon di tengah layar
         left: '0px',
+        transform: 'translateY(80%)', // Menggeser ikon ke atas sebesar setengah tingginya sendiri agar benar-benar di tengah
         borderBottomRightRadius: '20px',
         borderTopRightRadius: '20px',
-        transition: 'all 0.3s ease',
+        cursor: 'pointer',
+        transition: 'transform 0.2s',
         zIndex: 1
       }}
     >
-      {isPointerMode ? <IconMusicOff /> : <IconMusic />}
+      {isPointerMode ? <IconDisabledOff /> : <IconDisabled />}
     </Button>
   );
 };

src/app/darmasaba/_com/main-page/apbdes/components/apbdesSkeleton.tsx

@@ -0,0 +1,117 @@
+import { Skeleton, Stack, Box, Group } from '@mantine/core'
+
+export function PaguTableSkeleton() {
+  return (
+    <Box>
+      <Skeleton height={28} width="60%" mb="md" />
+      <Stack gap="xs">
+        {/* Header */}
+        <Group justify="space-between">
+          <Skeleton height={20} width="40%" />
+          <Skeleton height={20} width="30%" />
+        </Group>
+        
+        {/* Section headers */}
+        <Skeleton height={24} width="100%" mt="md" />
+        <Skeleton height={20} width="90%" />
+        <Skeleton height={20} width="85%" />
+        <Skeleton height={20} width="80%" />
+        
+        <Skeleton height={24} width="100%" mt="md" />
+        <Skeleton height={20} width="90%" />
+        <Skeleton height={20} width="85%" />
+        
+        <Skeleton height={24} width="100%" mt="md" />
+        <Skeleton height={20} width="90%" />
+      </Stack>
+    </Box>
+  )
+}
+
+export function RealisasiTableSkeleton() {
+  return (
+    <Box>
+      <Skeleton height={28} width="70%" mb="md" />
+      <Stack gap="xs">
+        {/* Header */}
+        <Group justify="space-between">
+          <Skeleton height={20} width="40%" />
+          <Skeleton height={20} width="20%" />
+          <Skeleton height={20} width="10%" />
+        </Group>
+        
+        {/* Rows */}
+        {[1, 2, 3, 4, 5].map((i) => (
+          <Group key={i} justify="space-between">
+            <Skeleton height={20} width="50%" />
+            <Skeleton height={20} width="25%" />
+            <Skeleton height={24} width="15%" radius="xl" />
+          </Group>
+        ))}
+      </Stack>
+    </Box>
+  )
+}
+
+export function GrafikRealisasiSkeleton() {
+  return (
+    <Box>
+      <Skeleton height={28} width="65%" mb="md" />
+      <Stack gap="lg">
+        {[1, 2, 3].map((i) => (
+          <Stack key={i} gap="xs">
+            <Group justify="space-between">
+              <Skeleton height={20} width="40%" />
+              <Skeleton height={20} width="15%" />
+            </Group>
+            <Skeleton height={16} width="100%" />
+            <Skeleton height={12} width="100%" mt={4} />
+            <Skeleton height={16} width="100%" radius="xl" />
+          </Stack>
+        ))}
+      </Stack>
+    </Box>
+  )
+}
+
+export function SummaryCardsSkeleton() {
+  return (
+    <Stack gap="lg">
+      <Skeleton height={28} width="50%" mb="sm" />
+      {[1, 2, 3].map((i) => (
+        <Stack key={i} gap="xs" p="md" style={{ border: '1px solid #e5e7eb', borderRadius: 8 }}>
+          <Group justify="space-between">
+            <Skeleton height={20} width="35%" />
+            <Skeleton height={20} width="20%" />
+          </Group>
+          <Skeleton height={16} width="100%" />
+          <Skeleton height={12} width="100%" mt={4} />
+          <Skeleton height={16} width="100%" radius="xl" />
+        </Stack>
+      ))}
+    </Stack>
+  )
+}
+
+export function ApbdesMainSkeleton() {
+  return (
+    <Stack gap="xl">
+      {/* Title */}
+      <Skeleton height={48} width="40%" mx="auto" />
+      <Skeleton height={24} width="60%" mx="auto" />
+      
+      {/* Select */}
+      <Skeleton height={42} width={220} mx="auto" />
+      
+      {/* Summary Cards */}
+      <SummaryCardsSkeleton />
+      
+      {/* Tables and Charts */}
+      <Stack gap="lg">
+        <PaguTableSkeleton />
+        <RealisasiTableSkeleton />
+        <GrafikRealisasiSkeleton />
+      </Stack>
+    </Stack>
+  )
+}

src/app/darmasaba/_com/main-page/apbdes/index.tsx

@@ -1,48 +1,55 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes'
-import APBDesProgress from '@/app/darmasaba/(tambahan)/apbdes/lib/apbDesaProgress'
-import { transformAPBDesData } from '@/app/darmasaba/(tambahan)/apbdes/lib/types'
+
+import apbdesState from '@/app/admin/(dashboard)/_state/landing-page/apbdes'
 import colors from '@/con/colors'
 import {
-  ActionIcon,
-  BackgroundImage,
   Box,
   Button,
-  Center,
+  Divider,
   Group,
-  Loader,
   Select,
   SimpleGrid,
   Stack,
   Text,
   Title,
+  LoadingOverlay,
+  Transition,
 } from '@mantine/core'
-import { IconDownload } from '@tabler/icons-react'
+import { motion } from 'framer-motion'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useProxy } from 'valtio/utils'
 
+import { ApbdesMainSkeleton } from './components/apbdesSkeleton'
+import ComparisonChart from './lib/comparisonChart'
+import GrafikRealisasi from './lib/grafikRealisasi'
+import PaguTable from './lib/paguTable'
+import RealisasiTable from './lib/realisasiTable'
+
+const MotionStack = motion.create(Stack)
+
 function Apbdes() {
-  const state = useProxy(apbdes)
-  const [loading, setLoading] = useState(false)
+  const state = useProxy(apbdesState)
   const [selectedYear, setSelectedYear] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isChangingYear, setIsChangingYear] = useState(false)
 
   const textHeading = {
     title: 'APBDes',
-    des: 'Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola desa yang bersih, terbuka, dan bertanggung jawab.'
+    des: 'Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola desa yang bersih, terbuka, dan bertanggung jawab.',
   }
 
   useEffect(() => {
     const loadData = async () => {
       try {
-        setLoading(true)
+        setIsLoading(true)
         await state.findMany.load()
       } catch (error) {
         console.error('Error loading data:', error)
       } finally {
-        setLoading(false)
+        setIsLoading(false)
       }
     }
     loadData()
@@ -51,171 +58,204 @@ function Apbdes() {
   const dataAPBDes = state.findMany.data || []
 
   const years = Array.from(
-  new Set(
-    dataAPBDes
-      .map((item: any) => item?.tahun)
-      .filter((tahun): tahun is number => typeof tahun === 'number')
+    new Set(
+      dataAPBDes
+        .map((item: any) => item?.tahun)
+        .filter((tahun): tahun is number => typeof tahun === 'number')
+    )
   )
-)
-  .sort((a, b) => b - a)
-  .map(year => ({
-    value: year.toString(),
-    label: `Tahun ${year}`,
-  }))
-
+    .sort((a, b) => b - a)
+    .map((year) => ({
+      value: year.toString(),
+      label: `Tahun ${year}`,
+    }))
 
   useEffect(() => {
     if (years.length > 0 && !selectedYear) {
       setSelectedYear(years[0].value)
     }
-  }, [years, selectedYear])
+  }, [years])
 
   const currentApbdes = dataAPBDes.length > 0
-    ? transformAPBDesData(dataAPBDes.find(item => item?.tahun?.toString() === selectedYear) || dataAPBDes[0])
+    ? (dataAPBDes.find((item: any) => item?.tahun?.toString() === selectedYear) || dataAPBDes[0])
     : null
 
-  const data = (state.findMany.data || []).slice(0, 3)
+  const handleYearChange = (value: string | null) => {
+    if (value !== selectedYear) {
+      setIsChangingYear(true)
+      setSelectedYear(value)
+      setTimeout(() => setIsChangingYear(false), 500)
+    }
+  }
 
   return (
-    <Stack p="sm" gap="xl" bg={colors.Bg}>
-      {/* 📌 HEADING */}
-      <Box mt="xl">
-        <Stack gap="sm">
-          <Title
-            order={1}
-            ta="center"
-            c={colors['blue-button']}
-            fz={{ base: '2rem', md: '3.6rem' }}
-            lh={{ base: 1.2, md: 1.1 }}
+    <Stack p="sm" gap="xl" bg={colors.Bg} pos="relative">
+      <LoadingOverlay
+        visible={isLoading}
+        zIndex={1000}
+        overlayProps={{ radius: 'sm', blur: 2 }}
+        loaderProps={{ color: colors['blue-button'], type: 'dots' }}
+      />
+      
+      <Transition mounted={!isLoading} transition="fade" duration={600}>
+        {(styles) => (
+          <MotionStack
+            style={styles}
+            gap="xl"
           >
-            {textHeading.title}
-          </Title>
-
-          <Text
-            ta="center"
-            fz={{ base: '1rem', md: '1.25rem' }}
-            lh={{ base: 1.5, md: 1.55 }}
-            c="black"
-          >
-            {textHeading.des}
-          </Text>
-        </Stack>
-      </Box>
-
-      {/* Button Lihat Semua */}
-      <Group justify="center">
-        <Button
-          component={Link}
-          href="/darmasaba/apbdes"
-          radius="xl"
-          size="lg"
-          variant="gradient"
-          gradient={{ from: "#26667F", to: "#124170" }}
-        >
-          Lihat Semua Data
-        </Button>
-      </Group>
-
-      {/* COMBOBOX */}
-      <Box px={{ base: 'md', md: 100 }}>
-        <Select
-          label={<Text fw={600} fz="sm">Pilih Tahun APBDes</Text>}
-          placeholder="Pilih tahun"
-          value={selectedYear}
-          onChange={setSelectedYear}
-          data={years}
-          w={{ base: '100%', sm: 220 }}
-          searchable
-          clearable
-          nothingFoundMessage="Tidak ada tahun tersedia"
-        />
-      </Box>
-
-      {/* Progress */}
-      {currentApbdes ? (
-        <APBDesProgress apbdesData={currentApbdes} />
-      ) : (
-        <Box px={{ base: 'md', md: 100 }} py="md">
-          <Text fz="sm" c="dimmed" ta="center" lh={1.5}>
-            Tidak ada data APBDes untuk tahun yang dipilih.
-          </Text>
-        </Box>
-      )}
-
-      {/* GRID */}
-      {loading ? (
-        <Center mx={{ base: 'md', md: 100 }} mih={200} pb="xl">
-          <Loader size="lg" color="blue" />
-        </Center>
-      ) : data.length === 0 ? (
-        <Center mx={{ base: 'md', md: 100 }} mih={200} pb="xl">
-          <Stack align="center" gap="xs">
-            <Text fz="lg" c="dimmed" lh={1.4}>
-              Belum ada data APBDes yang tersedia
-            </Text>
-            <Text fz="sm" c="dimmed" lh={1.4}>
-              Data akan ditampilkan di sini setelah diunggah
-            </Text>
-          </Stack>
-        </Center>
-      ) : (
-        <SimpleGrid
-          mx={{ base: 'md', md: 100 }}
-          cols={{ base: 1, sm: 3 }}
-          spacing="lg"
-          pb="xl"
-        >
-          {data.map((v, k) => (
-            <BackgroundImage
-              key={k}
-              src={v.image?.link || ''}
-              h={360}
-              radius="xl"
-              pos="relative"
-              style={{ overflow: 'hidden' }}
-            >
-              <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 16 }} />
-
-              <Stack gap="xs" justify="space-between" h="100%" p="xl" pos="relative">
-                <Text
-                  c="white"
-                  fw={600}
-                  fz={{ base: 'lg', md: 'xl' }}
+            <Divider c="gray.3" size="sm" />
+            
+            {/* 📌 HEADING */}
+            <Box mt="xl">
+              <Stack gap="sm">
+                <Title
+                  order={1}
                   ta="center"
-                  lh={1.35}
-                  lineClamp={2}
+                  c={colors['blue-button']}
+                  fz={{ base: '2rem', md: '3.6rem' }}
+                  lh={{ base: 1.2, md: 1.1 }}
                 >
-                  {v.name}
-                </Text>
+                  {textHeading.title}
+                </Title>
 
                 <Text
-                  fw={700}
-                  c="white"
-                  fz={{ base: '2.4rem', md: '3.2rem' }}
                   ta="center"
-                  lh={1}
-                  style={{ textShadow: '0 2px 8px rgba(0,0,0,0.6)' }}
+                  fz={{ base: '1rem', md: '1.25rem' }}
+                  lh={{ base: 1.5, md: 1.55 }}
+                  c="black"
+                  maw={800}
+                  mx="auto"
                 >
-                  {v.jumlah}
+                  {textHeading.des}
                 </Text>
-
-                <Center>
-                  <ActionIcon
-                    component={Link}
-                    href={v.file?.link || ''}
-                    radius="xl"
-                    size="xl"
-                    variant="gradient"
-                    gradient={{ from: '#1C6EA4', to: '#1C6EA4' }}
-                  >
-                    <IconDownload size={20} color="white" />
-                  </ActionIcon>
-                </Center>
               </Stack>
-            </BackgroundImage>
-          ))}
-        </SimpleGrid>
-      )}
+            </Box>
+
+            {/* Button Lihat Semua */}
+            <Group justify="center">
+              <Button
+                component={Link}
+                href="/darmasaba/apbdes"
+                radius="xl"
+                size="lg"
+                variant="gradient"
+                gradient={{ from: '#26667F', to: '#124170' }}
+                style={{ 
+                  transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                  ':hover': {
+                    transform: 'translateY(-2px)',
+                    boxShadow: '0 4px 12px rgba(38, 102, 127, 0.4)',
+                  },
+                }}
+              >
+                Lihat Semua Data
+              </Button>
+            </Group>
+
+            {/* COMBOBOX */}
+            <Box px={{ base: 'md', md: 'sm' }}>
+              <Select
+                label={<Text fw={600} fz="sm">Pilih Tahun APBDes</Text>}
+                placeholder="Pilih tahun"
+                value={selectedYear}
+                onChange={handleYearChange}
+                data={years}
+                w={{ base: '100%', sm: 220 }}
+                searchable
+                clearable
+                nothingFoundMessage="Tidak ada tahun tersedia"
+                disabled={isChangingYear}
+              />
+            </Box>
+
+            {/* Tables & Charts */}
+            {currentApbdes && currentApbdes.items && currentApbdes.items.length > 0 ? (
+              <Box px={{ base: 'md', md: 'sm' }} mb="xl">
+                <Transition
+                  mounted={!isChangingYear}
+                  transition="slide-up"
+                  duration={400}
+                  timingFunction="ease"
+                >
+                  {(styles) => (
+                    <SimpleGrid 
+                      cols={{ base: 1, sm: 3 }}
+                      style={styles}
+                    >
+                      <MotionStack
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.4, delay: 0.1 }}
+                      >
+                        <PaguTable apbdesData={currentApbdes as any} />
+                      </MotionStack>
+                      
+                      <MotionStack
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.4, delay: 0.2 }}
+                      >
+                        <RealisasiTable apbdesData={currentApbdes as any} />
+                      </MotionStack>
+                      
+                      <MotionStack
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.4, delay: 0.3 }}
+                      >
+                        <GrafikRealisasi apbdesData={currentApbdes as any} />
+                      </MotionStack>
+                    </SimpleGrid>
+                  )}
+                </Transition>
+
+                {/* Comparison Chart */}
+                <Box mt="lg">
+                  <Transition
+                    mounted={!isChangingYear}
+                    transition="slide-up"
+                    duration={400}
+                    timingFunction="ease"
+                  >
+                    {(styles) => (
+                      <MotionStack
+                        style={styles}
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.4, delay: 0.4 }}
+                      >
+                        <ComparisonChart apbdesData={currentApbdes as any} />
+                      </MotionStack>
+                    )}
+                  </Transition>
+                </Box>
+              </Box>
+            ) : currentApbdes ? (
+              <Box px={{ base: 'md', md: 100 }} py="xl" mb="xl">
+                <Stack align="center" gap="sm">
+                  <Text fz="2rem">📊</Text>
+                  <Text fz="sm" c="dimmed" ta="center" lh={1.5}>
+                    Tidak ada data item untuk tahun yang dipilih.
+                  </Text>
+                </Stack>
+              </Box>
+            ) : null}
+
+            {/* Loading State for Year Change */}
+            <Transition mounted={isChangingYear} transition="fade" duration={200}>
+              {(styles) => (
+                <Box 
+                  px={{ base: 'md', md: 'sm' }} 
+                  mb="xl"
+                  style={styles}
+                >
+                  <ApbdesMainSkeleton />
+                </Box>
+              )}
+            </Transition>
+          </MotionStack>
+        )}
+      </Transition>
     </Stack>
   )
 }

src/app/darmasaba/_com/main-page/apbdes/lib/comparisonChart.tsx

@@ -0,0 +1,229 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Paper, Title, Box, Text, Stack, Group, rem } from '@mantine/core'
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Cell,
+} from 'recharts'
+import { APBDes, APBDesItem } from '../types/apbdes'
+
+interface ComparisonChartProps {
+  apbdesData: APBDes
+}
+
+export default function ComparisonChart({ apbdesData }: ComparisonChartProps) {
+  const items = apbdesData?.items || []
+  const tahun = apbdesData?.tahun || new Date().getFullYear()
+
+  const pendapatan = items.filter((i: APBDesItem) => i.tipe === 'pendapatan')
+  const belanja = items.filter((i: APBDesItem) => i.tipe === 'belanja')
+  const pembiayaan = items.filter((i: APBDesItem) => i.tipe === 'pembiayaan')
+
+  const totalPendapatan = pendapatan.reduce((sum, i) => sum + i.anggaran, 0)
+  const totalBelanja = belanja.reduce((sum, i) => sum + i.anggaran, 0)
+  const totalPembiayaan = pembiayaan.reduce((sum, i) => sum + i.anggaran, 0)
+
+  // Hitung total realisasi dari realisasiItems (konsisten dengan RealisasiTable)
+  const totalPendapatanRealisasi = pendapatan.reduce(
+    (sum, i) => {
+      if (i.realisasiItems && i.realisasiItems.length > 0) {
+        return sum + i.realisasiItems.reduce((sumReal, real) => sumReal + (real.jumlah || 0), 0)
+      }
+      return sum
+    },
+    0
+  )
+  const totalBelanjaRealisasi = belanja.reduce(
+    (sum, i) => {
+      if (i.realisasiItems && i.realisasiItems.length > 0) {
+        return sum + i.realisasiItems.reduce((sumReal, real) => sumReal + (real.jumlah || 0), 0)
+      }
+      return sum
+    },
+    0
+  )
+  const totalPembiayaanRealisasi = pembiayaan.reduce(
+    (sum, i) => {
+      if (i.realisasiItems && i.realisasiItems.length > 0) {
+        return sum + i.realisasiItems.reduce((sumReal, real) => sumReal + (real.jumlah || 0), 0)
+      }
+      return sum
+    },
+    0
+  )
+
+  const formatRupiah = (value: number) => {
+    if (value >= 1000000000) {
+      return `Rp ${(value / 1000000000).toFixed(1)}B`
+    }
+    if (value >= 1000000) {
+      return `Rp ${(value / 1000000).toFixed(1)}Jt`
+    }
+    if (value >= 1000) {
+      return `Rp ${(value / 1000).toFixed(0)}Rb`
+    }
+    return `Rp ${value.toFixed(0)}`
+  }
+
+  const data = [
+    {
+      name: 'Pendapatan',
+      pagu: totalPendapatan,
+      realisasi: totalPendapatanRealisasi,
+      fill: '#40c057',
+    },
+    {
+      name: 'Belanja',
+      pagu: totalBelanja,
+      realisasi: totalBelanjaRealisasi,
+      fill: '#fa5252',
+    },
+    {
+      name: 'Pembiayaan',
+      pagu: totalPembiayaan,
+      realisasi: totalPembiayaanRealisasi,
+      fill: '#fd7e14',
+    },
+  ]
+
+  const CustomTooltip = ({ active, payload }: any) => {
+    if (active && payload && payload.length) {
+      const data = payload[0].payload
+      return (
+        <Box
+          bg="white"
+          p="md"
+          style={{
+            border: '1px solid #e5e7eb',
+            borderRadius: 8,
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+          }}
+        >
+          <Stack gap="xs">
+            <Text fw={700} c="gray.8" fz="sm">
+              {data.name}
+            </Text>
+            <Group justify="space-between" gap="lg">
+              <Text fz="xs" c="gray.6">
+                Pagu:
+              </Text>
+              <Text fz="xs" fw={700} c="blue.9">
+                {formatRupiah(data.pagu)}
+              </Text>
+            </Group>
+            <Group justify="space-between" gap="lg">
+              <Text fz="xs" c="gray.6">
+                Realisasi:
+              </Text>
+              <Text fz="xs" fw={700} c="green.9">
+                {formatRupiah(data.realisasi)}
+              </Text>
+            </Group>
+            {data.pagu > 0 && (
+              <Group justify="space-between" gap="lg">
+                <Text fz="xs" c="gray.6">
+                  Persentase:
+                </Text>
+                <Text 
+                  fz="xs" 
+                  fw={700} 
+                  c={data.realisasi >= data.pagu ? 'teal' : 'blue'}
+                >
+                  {((data.realisasi / data.pagu) * 100).toFixed(1)}%
+                </Text>
+              </Group>
+            )}
+          </Stack>
+        </Box>
+      )
+    }
+    return null
+  }
+
+  return (
+    <Paper
+      withBorder
+      p="lg"
+      radius="lg"
+      shadow="sm"
+      style={{
+        transition: 'box-shadow 0.3s ease',
+        ':hover': {
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+        },
+      }}
+    >
+      <Title
+        order={5}
+        mb="lg"
+        c="blue.9"
+        fz={{ base: '1rem', md: '1.1rem' }}
+        fw={700}
+      >
+        Perbandingan Pagu vs Realisasi {tahun}
+      </Title>
+
+      <Box style={{ width: '100%', height: 300 }}>
+        <ResponsiveContainer>
+          <BarChart
+            data={data}
+            margin={{ top: 20, right: 30, left: 0, bottom: 0 }}
+            barSize={60}
+          >
+            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+            <XAxis
+              dataKey="name"
+              tick={{ fill: '#6b7280', fontSize: 12 }}
+              axisLine={{ stroke: '#e5e7eb' }}
+            />
+            <YAxis
+              tickFormatter={formatRupiah}
+              tick={{ fill: '#6b7280', fontSize: 11 }}
+              axisLine={{ stroke: '#e5e7eb' }}
+              width={80}
+            />
+            <Tooltip content={<CustomTooltip />} />
+            <Legend
+              wrapperStyle={{ 
+                paddingTop: rem(20),
+                fontSize: 12,
+              }}
+            />
+            <Bar
+              name="Pagu"
+              dataKey="pagu"
+              fill="#228be6"
+              radius={[8, 8, 0, 0]}
+            >
+              {data.map((entry, index) => (
+                <Cell 
+                  key={`cell-pagu-${index}`} 
+                  fill={entry.fill}
+                  opacity={0.7}
+                />
+              ))}
+            </Bar>
+            <Bar
+              name="Realisasi"
+              dataKey="realisasi"
+              fill="#40c057"
+              radius={[8, 8, 0, 0]}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </Box>
+
+      <Box mt="md">
+        <Text fz="xs" c="dimmed" ta="center">
+          *Geser cursor pada bar untuk melihat detail
+        </Text>
+      </Box>
+    </Paper>
+  )
+}

src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx

@@ -0,0 +1,223 @@
+import { Paper, Title, Progress, Stack, Text, Group, Box } from '@mantine/core'
+import { IconArrowUpRight, IconArrowDownRight } from '@tabler/icons-react'
+import { APBDes, APBDesItem } from '../types/apbdes'
+
+interface SummaryProps {
+  title: string
+  data: APBDesItem[]
+  icon?: React.ReactNode
+}
+
+function Summary({ title, data, icon }: SummaryProps) {
+  if (!data || data.length === 0) return null
+
+  const totalAnggaran = data.reduce((sum, i) => sum + i.anggaran, 0)
+  
+  // Hitung total realisasi dari realisasiItems (konsisten dengan RealisasiTable)
+  const totalRealisasi = data.reduce((sum, i) => {
+    if (i.realisasiItems && i.realisasiItems.length > 0) {
+      return sum + i.realisasiItems.reduce((sumReal, real) => sumReal + (real.jumlah || 0), 0)
+    }
+    return sum
+  }, 0)
+
+  const persentase = totalAnggaran > 0 ? (totalRealisasi / totalAnggaran) * 100 : 0
+
+  const formatRupiah = (angka: number) => {
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(angka)
+  }
+
+  const getProgressColor = (persen: number) => {
+    if (persen >= 100) return 'teal'
+    if (persen >= 80) return 'blue'
+    if (persen >= 60) return 'yellow'
+    return 'red'
+  }
+
+  const getStatusMessage = (persen: number) => {
+    if (persen >= 100) {
+      return { text: 'Realisasi mencapai 100% dari anggaran', color: 'teal' }
+    }
+    if (persen >= 80) {
+      return { text: 'Realisasi baik, mendekati target', color: 'blue' }
+    }
+    if (persen >= 60) {
+      return { text: 'Realisasi cukup, perlu ditingkatkan', color: 'yellow' }
+    }
+    return { text: 'Realisasi rendah, perlu perhatian khusus', color: 'red' }
+  }
+
+  const statusMessage = getStatusMessage(persentase)
+
+  return (
+    <Box>
+      <Group justify="space-between" mb="xs">
+        <Group gap="xs">
+          {icon}
+          <Text fw={700} fz="md" c="gray.8">{title}</Text>
+        </Group>
+        <Group gap="xs">
+          {persentase >= 100 ? (
+            <IconArrowUpRight 
+              size={18} 
+              color="var(--mantine-color-teal-7)" 
+              stroke={2.5}
+            />
+          ) : persentase < 60 ? (
+            <IconArrowDownRight 
+              size={18} 
+              color="var(--mantine-color-red-7)" 
+              stroke={2.5}
+            />
+          ) : null}
+          <Text 
+            fw={700} 
+            fz="lg" 
+            c={getProgressColor(persentase)}
+            style={{ 
+              minWidth: 60,
+              textAlign: 'right',
+            }}
+          >
+            {persentase.toFixed(1)}%
+          </Text>
+        </Group>
+      </Group>
+
+      <Text fz="xs" c="gray.6" mb="sm" lh={1.5}>
+        Realisasi: <Text component="span" fw={700} c="blue.9">{formatRupiah(totalRealisasi)}</Text>
+        {' '}/ Anggaran: <Text component="span" fw={700} c="gray.7">{formatRupiah(totalAnggaran)}</Text>
+      </Text>
+
+      <Progress
+        value={persentase}
+        size="xl"
+        radius="xl"
+        color={getProgressColor(persentase)}
+        striped={persentase < 100}
+        animated={persentase < 100}
+        mb="xs"
+      />
+
+      <Text 
+        fz="xs" 
+        c={statusMessage.color} 
+        fw={600}
+        style={{ 
+          backgroundColor: `var(--mantine-color-${statusMessage.color}-0)`,
+          padding: '6px 10px',
+          borderRadius: 6,
+          display: 'inline-block',
+        }}
+      >
+        {persentase >= 100 && '✓ '}{statusMessage.text}
+      </Text>
+    </Box>
+  )
+}
+
+interface GrafikRealisasiProps {
+  apbdesData: APBDes
+}
+
+export default function GrafikRealisasi({ apbdesData }: GrafikRealisasiProps) {
+  const items = apbdesData?.items || []
+  const tahun = apbdesData?.tahun || new Date().getFullYear()
+
+  const pendapatan = items.filter((i: APBDesItem) => i.tipe === 'pendapatan')
+  const belanja = items.filter((i: APBDesItem) => i.tipe === 'belanja')
+  const pembiayaan = items.filter((i: APBDesItem) => i.tipe === 'pembiayaan')
+
+  return (
+    <Paper
+      withBorder
+      p="lg"
+      radius="lg"
+      shadow="sm"
+      style={{
+        transition: 'box-shadow 0.3s ease',
+        ':hover': {
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+        },
+      }}
+      h={"100%"}
+    >
+      <Title
+        order={5}
+        mb="lg"
+        c="blue.9"
+        fz={{ base: '1rem', md: '1.1rem' }}
+        fw={700}
+      >
+        GRAFIK REALISASI APBDes {tahun}
+      </Title>
+
+      <Stack gap="xl">
+        <Summary
+          title="Pendapatan"
+          data={pendapatan}
+          icon={
+            <Box 
+              style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: 'var(--mantine-color-green-0)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Text fz="lg">💰</Text>
+            </Box>
+          }
+        />
+        
+        <Summary
+          title="Belanja"
+          data={belanja}
+          icon={
+            <Box
+              style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: 'var(--mantine-color-red-0)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Text fz="lg">💸</Text>
+            </Box>
+          }
+        />
+        
+        <Summary
+          title="Pembiayaan"
+          data={pembiayaan}
+          icon={
+            <Box
+              style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: 'var(--mantine-color-orange-0)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Text fz="lg">📊</Text>
+            </Box>
+          }
+        />
+      </Stack>
+    </Paper>
+  )
+}

src/app/darmasaba/_com/main-page/apbdes/lib/paguTable.tsx

@@ -0,0 +1,179 @@
+import { Paper, Table, Title, Box, ScrollArea, Badge } from '@mantine/core'
+import { APBDes, APBDesItem } from '../types/apbdes'
+
+interface SectionProps {
+  title: string
+  data: APBDesItem[]
+  badgeColor?: string
+}
+
+function Section({ title, data, badgeColor = 'blue' }: SectionProps) {
+  if (!data || data.length === 0) return null
+
+  return (
+    <>
+      <Table.Tr bg="gray.0">
+        <Table.Td colSpan={2}>
+          <Badge color={badgeColor} variant="light" size="lg" fw={600}>
+            {title}
+          </Badge>
+        </Table.Td>
+      </Table.Tr>
+
+      {data.map((item, index) => (
+        <Table.Tr 
+          key={item.id} 
+          bg={index % 2 === 1 ? 'gray.50' : 'white'}
+          style={{ 
+            transition: 'background-color 0.2s ease',
+            ':hover': {
+              backgroundColor: 'var(--mantine-color-blue-0)',
+            },
+          }}
+        >
+          <Table.Td style={{ borderBottom: '1px solid #e5e7eb' }}>
+            <Box style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+              <span style={{ 
+                fontWeight: 500, 
+                color: 'var(--mantine-color-gray-7)',
+                minWidth: 80,
+              }}>
+                {item.kode}
+              </span>
+              <span style={{ 
+                color: 'var(--mantine-color-gray-6)',
+                fontSize: '0.9rem',
+              }}>
+                {item.uraian}
+              </span>
+            </Box>
+          </Table.Td>
+          <Table.Td 
+            ta="right" 
+            style={{ 
+              borderBottom: '1px solid #e5e7eb',
+              fontWeight: 600,
+              color: 'var(--mantine-color-blue-7)',
+            }}
+          >
+            Rp {item.anggaran.toLocaleString('id-ID')}
+          </Table.Td>
+        </Table.Tr>
+      ))}
+    </>
+  )
+}
+
+interface PaguTableProps {
+  apbdesData: APBDes
+}
+
+export default function PaguTable({ apbdesData }: PaguTableProps) {
+  const items = apbdesData.items || []
+
+  const title = apbdesData.tahun
+    ? `PAGU APBDes Tahun ${apbdesData.tahun}`
+    : 'PAGU APBDes'
+
+  const pendapatan = items.filter((i: APBDesItem) => i.tipe === 'pendapatan')
+  const belanja = items.filter((i: APBDesItem) => i.tipe === 'belanja')
+  const pembiayaan = items.filter((i: APBDesItem) => i.tipe === 'pembiayaan')
+
+  // Calculate totals
+  const totalPendapatan = pendapatan.reduce((sum, i) => sum + i.anggaran, 0)
+  const totalBelanja = belanja.reduce((sum, i) => sum + i.anggaran, 0)
+  const totalPembiayaan = pembiayaan.reduce((sum, i) => sum + i.anggaran, 0)
+
+  return (
+    <Paper 
+      withBorder 
+      p="md" 
+      radius="lg" 
+      shadow="sm"
+      style={{ 
+        transition: 'box-shadow 0.3s ease',
+        ':hover': {
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+        },
+      }}
+      h={"100%"}
+    >
+      <Title 
+        order={5} 
+        mb="md" 
+        c="blue.9"
+        fz={{ base: '1rem', md: '1.1rem' }}
+        fw={700}
+      >
+        {title}
+      </Title>
+
+      <ScrollArea offsetScrollbars type="hover">
+        <Table 
+          horizontalSpacing="md"
+          verticalSpacing="xs"
+          layout="fixed"
+        >
+          <Table.Thead>
+            <Table.Tr bg="blue.9">
+              <Table.Th c="white" fw={600} style={{ minWidth: '60%' }}>
+                Uraian
+              </Table.Th>
+              <Table.Th 
+                c="white" 
+                fw={600} 
+                ta="right"
+                style={{ minWidth: '40%' }}
+              >
+                Anggaran (Rp)
+              </Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            <Section 
+              title="1) PENDAPATAN" 
+              data={pendapatan} 
+              badgeColor="green"
+            />
+            {totalPendapatan > 0 && (
+              <Table.Tr bg="green.0" fw={700}>
+                <Table.Td>Total Pendapatan</Table.Td>
+                <Table.Td ta="right">
+                  Rp {totalPendapatan.toLocaleString('id-ID')}
+                </Table.Td>
+              </Table.Tr>
+            )}
+            
+            <Section 
+              title="2) BELANJA" 
+              data={belanja} 
+              badgeColor="red"
+            />
+            {totalBelanja > 0 && (
+              <Table.Tr bg="red.0" fw={700}>
+                <Table.Td>Total Belanja</Table.Td>
+                <Table.Td ta="right">
+                  Rp {totalBelanja.toLocaleString('id-ID')}
+                </Table.Td>
+              </Table.Tr>
+            )}
+            
+            <Section 
+              title="3) PEMBIAYAAN" 
+              data={pembiayaan} 
+              badgeColor="orange"
+            />
+            {totalPembiayaan > 0 && (
+              <Table.Tr bg="orange.0" fw={700}>
+                <Table.Td>Total Pembiayaan</Table.Td>
+                <Table.Td ta="right">
+                  Rp {totalPembiayaan.toLocaleString('id-ID')}
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  )
+}

src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx

@@ -0,0 +1,211 @@
+import { Paper, Table, Title, Badge, Text, Box, ScrollArea } from '@mantine/core'
+import { APBDes, APBDesItem, RealisasiItem } from '../types/apbdes'
+
+interface RealisasiRowProps {
+  realisasi: RealisasiItem
+  parentItem: APBDesItem
+}
+
+function RealisasiRow({ realisasi, parentItem }: RealisasiRowProps) {
+  const persentase = parentItem.anggaran > 0
+    ? (realisasi.jumlah / parentItem.anggaran) * 100
+    : 0
+
+  const getBadgeColor = (percentage: number) => {
+    if (percentage >= 100) return 'teal'
+    if (percentage >= 80) return 'blue'
+    if (percentage >= 60) return 'yellow'
+    return 'red'
+  }
+
+  const getBadgeVariant = (percentage: number) => {
+    if (percentage >= 100) return 'filled'
+    return 'light'
+  }
+
+  return (
+    <Table.Tr
+      style={{
+        transition: 'background-color 0.2s ease',
+        ':hover': {
+          backgroundColor: 'var(--mantine-color-blue-0)',
+        },
+      }}
+    >
+      <Table.Td style={{ borderBottom: '1px solid #e5e7eb' }}>
+        <Box style={{ gap: 8, alignItems: 'center' }}>
+          <span style={{
+            fontWeight: 500,
+            color: 'var(--mantine-color-gray-7)',
+          }}>
+            {realisasi.kode || '-'}
+          </span>
+          <Text
+            size="sm"
+            c="gray.7"
+            title={realisasi.keterangan || '-'}
+          >
+            {realisasi.keterangan || '-'}
+          </Text>
+        </Box>
+      </Table.Td>
+      <Table.Td
+        ta="right"
+        style={{
+          borderBottom: '1px solid #e5e7eb',
+          fontWeight: 700,
+          color: 'var(--mantine-color-blue-7)',
+        }}
+      >
+        {new Intl.NumberFormat('id-ID', {
+          style: 'currency',
+          currency: 'IDR',
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0,
+        }).format(realisasi.jumlah || 0)}
+      </Table.Td>
+      <Table.Td
+        ta="center"
+        style={{ borderBottom: '1px solid #e5e7eb' }}
+      >
+        <Badge
+          color={getBadgeColor(persentase)}
+          variant={getBadgeVariant(persentase)}
+          size="sm"
+          radius="xl"
+          fw={600}
+          style={{
+            minWidth: 65,
+            transition: 'transform 0.2s ease',
+          }}
+        >
+          {persentase.toFixed(1)}%
+        </Badge>
+      </Table.Td>
+    </Table.Tr>
+  )
+}
+
+interface RealisasiTableProps {
+  apbdesData: APBDes
+}
+
+export default function RealisasiTable({ apbdesData }: RealisasiTableProps) {
+  const items = apbdesData.items || []
+
+  const title = apbdesData.tahun
+    ? `REALISASI APBDes Tahun ${apbdesData.tahun}`
+    : 'REALISASI APBDes'
+
+  // Flatten: kumpulkan semua realisasi items
+  const allRealisasiRows: Array<{ realisasi: RealisasiItem; parentItem: APBDesItem }> = []
+
+  items.forEach((item: APBDesItem) => {
+    if (item.realisasiItems && item.realisasiItems.length > 0) {
+      item.realisasiItems.forEach((realisasi: RealisasiItem) => {
+        allRealisasiRows.push({ realisasi, parentItem: item })
+      })
+    }
+  })
+
+  // Calculate total realisasi
+  const totalRealisasi = allRealisasiRows.reduce(
+    (sum, { realisasi }) => sum + (realisasi.jumlah || 0),
+    0
+  )
+
+  return (
+    <Paper
+      withBorder
+      p="md"
+      radius="lg"
+      shadow="sm"
+      style={{
+        transition: 'box-shadow 0.3s ease',
+        ':hover': {
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+        },
+      }}
+      h={"100%"}
+    >
+      <Title
+        order={5}
+        mb="md"
+        c="blue.9"
+        fz={{ base: '1rem', md: '1.1rem' }}
+        fw={700}
+      >
+        {title}
+      </Title>
+
+      {allRealisasiRows.length === 0 ? (
+        <Box
+          py="xl"
+          px="md"
+          style={{
+            backgroundColor: 'var(--mantine-color-gray-0)',
+            borderRadius: 8,
+          }}
+        >
+          <Text
+            fz="sm"
+            c="dimmed"
+            ta="center"
+            lh={1.6}
+          >
+            Belum ada data realisasi untuk tahun ini
+          </Text>
+        </Box>
+      ) : (
+        <>
+          <ScrollArea offsetScrollbars type="hover">
+            <Table
+              horizontalSpacing="md"
+              verticalSpacing="xs"
+              layout="fixed"
+            >
+              <Table.Thead>
+                <Table.Tr bg="blue.9">
+                  <Table.Th c="white" fw={600}>Uraian</Table.Th>
+                  <Table.Th c="white" fw={600} ta="right">Realisasi (Rp)</Table.Th>
+                  <Table.Th c="white" fw={600} ta="center">%</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {allRealisasiRows.map(({ realisasi, parentItem }) => (
+                  <RealisasiRow
+                    key={realisasi.id}
+                    realisasi={realisasi}
+                    parentItem={parentItem}
+                  />
+                ))}
+              </Table.Tbody>
+            </Table>
+          </ScrollArea>
+          <Box mb="md" px="sm">
+            <Text
+              size="sm"
+              c="gray.6"
+              fw={500}
+            >
+              Total Realisasi:{' '}
+              <Text
+                component="span"
+                c="blue.9"
+                fw={700}
+                fz="md"
+              >
+                {new Intl.NumberFormat('id-ID', {
+                  style: 'currency',
+                  currency: 'IDR',
+                  minimumFractionDigits: 0,
+                  maximumFractionDigits: 0,
+                }).format(totalRealisasi)}
+              </Text>
+            </Text>
+          </Box>
+        </>
+      )}
+    </Paper>
+  )
+}