Fix Responsive

Reviewed-on: #78

.gemini/hooks/telegram-notify.ts

@@ -0,0 +1,65 @@
+#!/usr/bin/env bun
+import { readFileSync } from "node:fs";
+
+// 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);
+		}
+	};
+	search(obj);
+	return longest;
+}
+
+async function run() {
+	try {
+		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));
+
+		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(", ");
+		}
+
+		const message =
+			`✅ *Gemini Task Selesai*\n\n` +
+			`🆔 Session: \`${sessionId}\` \n\n` +
+			`🧠 Output:\n${finalText.substring(0, 3500)}`;
+
+		await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				chat_id: CHAT_ID,
+				text: message,
+				parse_mode: "Markdown",
+			}),
+		});
+
+		process.stdout.write(JSON.stringify({ status: "continue" }));
+	} catch (err) {
+		console.error("Hook Error:", err);
+		process.stdout.write(JSON.stringify({ status: "continue" }));
+	}
+}
+
+run();

.gemini/settings.json

@@ -0,0 +1,17 @@
+{
+	"hooks": {
+		"AfterAgent": [
+			{
+				"matcher": "*",
+				"hooks": [
+					{
+						"name": "telegram-notify",
+						"type": "command",
+						"command": "bun $GEMINI_PROJECT_DIR/.gemini/hooks/telegram-notify.ts",
+						"timeout": 10000
+					}
+				]
+			}
+		]
+	}
+}

.gitignore

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

AUDIT_REPORT.md

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

GEMINI.md

@@ -0,0 +1,62 @@
+# Project: Desa Darmasaba
+
+## Project Overview
+
+The `desa-darmasaba` project is a Next.js (version 15+) application developed with TypeScript. It serves as an official platform for Desa Darmasaba (a village in Badung, Bali), offering various public services, news, and detailed village profiles.
+
+**Key Technologies:**
+
+*   **Frontend Framework:** Next.js (v15+) with React (v19+)
+*   **Language:** TypeScript
+*   **UI Library:** Mantine UI
+*   **Database ORM:** Prisma (v6+)
+*   **Database:** PostgreSQL (as configured in `prisma/schema.prisma`)
+*   **API Framework:** Elysia (used for API routes, as seen in dependencies)
+*   **State Management:** Potentially Jotai and Valtio (listed in dependencies)
+*   **Image Processing:** Sharp
+*   **Package Manager:** Likely Bun, given `bun.lockb` and the `prisma:seed` script.
+
+The application architecture follows the Next.js App Router structure, with comprehensive data models defined in `prisma/schema.prisma` covering various domains like public information, health, security, economy, innovation, environment, and education. It also includes configurations for image handling and caching.
+
+## Building and Running
+
+This project uses `bun` as the package manager. Ensure Bun is installed to run these commands.
+
+*   **Install Dependencies:**
+    ```bash
+    bun install
+    ```
+
+*   **Development Server:**
+    Runs the Next.js development server.
+    ```bash
+    bun run dev
+    ```
+
+*   **Build for Production:**
+    Builds the Next.js application for production deployment.
+    ```bash
+    bun run build
+    ```
+
+*   **Start Production Server:**
+    Starts the Next.js application in production mode.
+    ```bash
+    bun run start
+    ```
+
+*   **Database Seeding:**
+    Executes the Prisma seeding script to populate the database.
+    ```bash
+    bun run prisma:seed
+    ```
+
+## Development Conventions
+
+*   **Coding Language:** TypeScript is strictly enforced.
+*   **Frontend Framework:** Next.js App Router for page and component structuring.
+*   **UI/UX:** Adherence to Mantine UI component library for consistent styling and user experience.
+*   **Database Interaction:** Prisma ORM is used for all database operations, with a PostgreSQL database.
+*   **Linting:** ESLint is configured with `next/core-web-vitals` and `next/typescript` to maintain code quality and adherence to Next.js and TypeScript best practices.
+*   **Styling:** PostCSS is used, with `postcss-preset-mantine` and `postcss-simple-vars` defining Mantine-specific breakpoints and other CSS variables.
+*   **Imports:** Absolute imports are configured using `@/*` which resolves to the `src/` directory.

QWEN.md

@@ -2,7 +2,7 @@
 
 ## Project Overview
 
-Desa Darmasaba is a comprehensive Next.js 15 application designed for village management services in Badung, Bali. The platform serves as a digital hub for government services, public information, news, and community engagement for the residents of Darmasaba village.
+Desa Darmasaba is a comprehensive Next.js 15 application designed for village management services in Darmasaba, Badung, Bali. The application serves as a digital platform for government services, public information, and community engagement. It features multiple sections including PPID (Public Information Disclosure), health services, security, education, environment, economy, innovation, and more.
 
 ### Key Technologies
 - **Framework**: Next.js 15 with App Router
@@ -10,146 +10,104 @@ Desa Darmasaba is a comprehensive Next.js 15 application designed for village ma
 - **Styling**: Mantine UI components with custom CSS
 - **Backend**: Elysia.js API server integrated with Next.js
 - **Database**: PostgreSQL with Prisma ORM
-- **State Management**: Jotai for global state
+- **State Management**: Valtio for global state
 - **Authentication**: JWT with iron-session
-- **Runtime**: Bun (instead of Node.js)
 
 ### Architecture
-The application follows a modern full-stack architecture with:
-- Frontend built with Next.js 15 and TypeScript
-- Backend API endpoints using Elysia.js
-- PostgreSQL database managed with Prisma ORM
-- Mantine UI library for consistent design components
-- File storage system for managing images and documents
-- Comprehensive user authentication and authorization system
-
-## Features
-
-The application provides extensive functionality across multiple domains:
-
-### Government Services
-- Public service information and requests
-- Administrative online services
-- Community announcements and news
-- Village profile and governance information
-
-### Health Services
-- Healthcare facility information
-- Health programs and initiatives
-- Emergency health contacts
-- Health articles and education
-- Posyandu (community health posts) information
-
-### Economic Development
-- Local market information
-- Job listings and employment opportunities
-- Village economic statistics
-- Business registration and support
-
-### Innovation & Technology
-- Digital village initiatives
-- Technology adoption programs
-- Innovation proposal system
-- Smart village features
-
-### Education
-- School information and statistics
-- Scholarship programs
-- Educational support services
-- Library and learning resources
-
-### Environmental Management
-- Waste management systems
-- Green initiatives
-- Environmental conservation programs
-- Community participation activities
-
-### Security & Safety
-- Emergency contacts
-- Police station information
-- Crime prevention measures
-- Community safety programs
+The application follows a modular architecture with:
+- A main frontend built with Next.js and Mantine UI
+- An integrated Elysia.js API server for backend operations
+- Prisma ORM for database interactions
+- File storage integration with Seafile
+- Multiple domain-specific modules (PPID, health, security, education, etc.)
 
 ## Building and Running
 
 ### Prerequisites
-- Bun runtime (version specified in package.json)
+- Node.js (with Bun runtime)
 - PostgreSQL database
-- Environment variables configured
+- Seafile server for file storage
 
-### Setup Commands
-```bash
-# Install dependencies
-bun install
+### Setup Instructions
+1. Install dependencies:
+   ```bash
+   bun install
+   ```
 
-# Set up environment variables
-cp .env.example .env.local
-# Edit .env.local with your configuration
+2. Set up environment variables in `.env.local`:
+   ```
+   DATABASE_URL=your_postgresql_connection_string
+   SEAFILE_TOKEN=your_seafile_token
+   SEAFILE_REPO_ID=your_seafile_repo_id
+   SEAFILE_BASE_URL=your_seafile_base_url
+   SEAFILE_PUBLIC_SHARE_TOKEN=your_seafile_public_share_token
+   SEAFILE_URL=your_seafile_api_url
+   WIBU_UPLOAD_DIR=your_upload_directory
+   ```
 
-# Database setup
-bunx prisma db push
-bunx prisma generate
+3. Generate Prisma client:
+   ```bash
+   bunx prisma generate
+   ```
 
-# Seed database (optional)
-bun run prisma/seed.ts
+4. Push database schema:
+   ```bash
+   bunx prisma db push
+   ```
 
-# Development mode
-bun run dev
+5. Seed the database:
+   ```bash
+   bun run prisma/seed.ts
+   ```
 
-# Production build
-bun run build
+6. Run the development server:
+   ```bash
+   bun run dev
+   ```
 
-# Start production server
-bun run start
-```
+### Available Scripts
+- `bun run dev` - Start development server
+- `bun run build` - Build for production
+- `bun run start` - Start production server
+- `bun run prisma/seed.ts` - Run database seeding
+- `bunx prisma generate` - Generate Prisma client
+- `bunx prisma db push` - Push schema changes to database
+- `bunx prisma studio` - Open Prisma Studio GUI
 
-### Additional Commands
-```bash
-# Linting (ESLint)
-bunx eslint .
-
-# Type checking
-bunx tsc --noEmit
-
-# Prisma operations
-bunx prisma generate
-bunx prisma db push
-bunx prisma studio
-```
-
-## Project Structure
+## Development Conventions
 
+### Code Structure
 ```
 src/
 ├── app/                 # Next.js app router pages
-│   ├── _com/           # Common components
-│   ├── admin/          # Admin panel routes
-│   ├── api/            # API routes
-│   ├── darmasaba/      # Main application pages
-│   ├── login/          # Authentication pages
-│   └── ...             # Other feature pages
-├── con/                # Constants and static data
-├── hooks/              # Custom React hooks
-├── lib/                # Utility functions and configurations
-├── middlewares/        # Middleware functions
-├── state/              # Global state management
-├── store/              # Additional state management
-├── types/              # TypeScript type definitions
-├── utils/              # Utility functions
-├── middleware.ts       # Application middleware
-└── schema.ts           # Schema definitions
+│   ├── admin/           # Admin dashboard pages
+│   ├── api/             # API routes with Elysia.js
+│   ├── darmasaba/       # Public-facing village pages
+│   └── ...
+├── con/                 # Constants and configuration
+├── hooks/               # React hooks
+├── lib/                 # Utility functions and configurations
+├── middlewares/         # Next.js middleware
+├── state/               # Global state management
+├── store/               # Additional state management
+├── types/               # TypeScript type definitions
+└── utils/               # Utility functions
 ```
 
-## Development Guidelines
-
-### Code Style
+### Import Conventions
 - Use absolute imports with `@/` alias (configured in tsconfig.json)
 - Group imports: external libraries first, then internal modules
-- Follow consistent naming conventions:
-  - Components: PascalCase (e.g., `UploadImage.tsx`)
-  - Files: kebab-case for utilities (e.g., `api-fetch.ts`)
-  - Variables/Functions: camelCase
-  - Constants: UPPER_SNAKE_CASE
+- Keep import statements organized and remove unused imports
+
+```typescript
+// External libraries
+import { useState } from 'react'
+import { Button, Stack } from '@mantine/core'
+
+// Internal modules
+import ApiFetch from '@/lib/api-fetch'
+import { MyComponent } from '@/components/my-component'
+```
 
 ### TypeScript Configuration
 - Strict mode enabled (`"strict": true`)
@@ -157,12 +115,52 @@ src/
 - Module resolution: bundler
 - Path alias: `@/*` maps to `./src/*`
 
+### Naming Conventions
+- **Components**: PascalCase (e.g., `UploadImage.tsx`)
+- **Files**: kebab-case for utilities (e.g., `api-fetch.ts`)
+- **Variables/Functions**: camelCase
+- **Constants**: UPPER_SNAKE_CASE
+- **Database Models**: PascalCase (Prisma convention)
+
 ### Error Handling
 - Use try-catch blocks for async operations
 - Implement proper error boundaries in React components
 - Log errors appropriately without exposing sensitive data
 - Use Zod for runtime validation and type safety
 
+### API Structure
+- Backend uses Elysia.js with TypeScript
+- API routes are in `src/app/api/[[...slugs]]/` directory
+- Use treaty client for type-safe API calls
+- Follow RESTful conventions for endpoints
+- Include proper HTTP status codes and error responses
+
+### Database Operations
+- Use Prisma client from `@/lib/prisma.ts`
+- Database connection includes graceful shutdown handling
+- Use transactions for complex operations
+- Implement proper error handling for database queries
+
+### Component Guidelines
+- Use functional components with hooks
+- Implement proper prop types with TypeScript interfaces
+- Use Mantine components for UI consistency
+- Follow atomic design principles when possible
+- Add loading states and error states for async operations
+
+### State Management
+- Use Valtio proxies for global state
+- Keep local state in components when possible
+- Use SWR for server state caching
+- Implement optimistic updates for better UX
+
+### Styling
+- Primary: Mantine UI components
+- Use Mantine theme system for customization
+- Custom CSS should be minimal and scoped
+- Follow responsive design principles
+- Use semantic HTML5 elements
+
 ### Security Practices
 - Validate all user inputs with Zod schemas
 - Use JWT tokens for authentication
@@ -178,42 +176,57 @@ src/
 - Optimize bundle size with dynamic imports
 - Use Prisma query optimization
 
-## Database Schema
+## Domain Modules
 
-The application uses a comprehensive PostgreSQL database schema with Prisma ORM, featuring:
+The application is organized into several domain modules:
 
-- **User Management**: Complete user authentication system with roles and permissions
-- **Content Management**: News, announcements, and various content types
-- **Service Management**: Various government and community services
-- **File Storage**: Centralized file management system
-- **Health Information**: Healthcare facilities and programs
-- **Economic Data**: Market information and employment data
-- **Educational Resources**: Schools, scholarships, and educational programs
-- **Environmental Data**: Sustainability and environmental management
-- **Security Information**: Emergency contacts and safety measures
+1. **PPID (Public Information Disclosure)**: Profile, structure, information requests, legal basis
+2. **Health**: Health facilities, programs, emergency response, disease information
+3. **Security**: Community security, emergency contacts, crime prevention
+4. **Education**: Schools, scholarships, educational programs
+5. **Economy**: Local markets, BUMDes, employment data
+6. **Environment**: Environmental data, conservation, waste management
+7. **Innovation**: Digital services, innovation programs
+8. **Culture**: Village traditions, music, cultural preservation
 
-## API Structure
+Each module has its own section in both the admin panel and public-facing areas.
 
-- Backend uses Elysia.js with TypeScript
-- API routes are in `src/app/api/[[...slugs]]/` directory
-- Use treaty client for type-safe API calls
-- Follow RESTful conventions for endpoints
-- Include proper HTTP status codes and error responses
+## File Storage Integration
+
+The application integrates with Seafile for file storage, with specific handling for:
+- Images and documents
+- Public sharing capabilities
+- CDN URL generation
+- Batch processing of assets
+
+## Testing
+
+Currently no formal test framework is configured. When adding tests:
+- Consider Jest or Vitest for unit testing
+- Use Playwright for E2E testing
+- Update this section with specific test commands
 
 ## Deployment
 
-The application includes deployment scripts for staging environments, with:
-- Automated builds using Bun
-- Database migration handling
+The application includes deployment scripts in the `NOTE.md` file that outline:
+- Automated deployment with GitHub API integration
 - Environment-specific configurations
-- PM2 process management for production
+- PM2 process management
+- Release management with versioning
 
-## Important Notes
+## Troubleshooting
 
-- The application uses a custom Elysia.js server integrated with Next.js API routes
-- Image uploads are handled through `/api/upl-img-single` endpoint
-- Database seeding is done with Bun runtime
-- The app supports Indonesian locale (id_ID) for SEO and content
-- CORS is configured to allow cross-origin requests during development
-- Authentication is implemented with JWT tokens and iron-session
-- The application has both public-facing and admin sections with different access controls
+Common issues and solutions:
+- **API endpoints returning 404**: Check that environment variables are properly configured
+- **Database connection errors**: Verify DATABASE_URL in environment variables
+- **File upload issues**: Ensure Seafile integration is properly configured
+- **Build failures**: Run `bunx prisma generate` before building
+
+## Development Workflow
+
+1. Always run type checking before committing: `bunx tsc --noEmit`
+2. Run linting to catch style issues: `bun run eslint .`
+3. Test database changes with `bunx prisma db push`
+4. Use the integrated Swagger docs at `/api/docs` for API testing
+5. Check environment variables are properly configured
+6. Verify responsive design on different screen sizes

__tests__/api/fileStorage.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+import ApiFetch from '@/lib/api-fetch';
+
+describe('FileStorage API', () => {
+  it('should fetch a list of files from /api/fileStorage/findMany', async () => {
+    const response = await ApiFetch.api.fileStorage.findMany.get();
+    
+    expect(response.status).toBe(200);
+
+    const responseBody = response.data as any;
+    
+    expect(responseBody.data).toBeInstanceOf(Array);
+    expect(responseBody.data.length).toBe(2);
+    expect(responseBody.data[0].name).toBe('file1.jpg');
+  });
+
+  it('should create a file using /api/fileStorage/create', async () => {
+    const mockFile = new File(['hello'], 'hello.png', { type: 'image/png' });
+    const response = await ApiFetch.api.fileStorage.create.post({
+      file: mockFile,
+      name: 'hello.png',
+    });
+
+    expect(response.status).toBe(200);
+    const responseBody = response.data as any;
+
+    expect(responseBody.data.realName).toBe('hello.png');
+    expect(responseBody.data.id).toBe('3');
+  });
+});

__tests__/e2e/homepage.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test('homepage has correct title and content', async ({ page }) => {
+  await page.goto('/');
+
+  // Wait for the redirect to /darmasaba
+  await page.waitForURL('/darmasaba');
+
+  // Check for the main heading
+  await expect(page.getByText('DARMASABA', { exact: true })).toBeVisible();
+});

__tests__/mocks/handlers.ts

@@ -0,0 +1,43 @@
+import { http, HttpResponse } from 'msw';
+
+export const handlers = [
+  http.get('http://localhost:3000/api/fileStorage/findMany', () => {
+    return HttpResponse.json({
+      data: [
+        { id: '1', name: 'file1.jpg', url: '/uploads/file1.jpg' },
+        { id: '2', name: 'file2.png', url: '/uploads/file2.png' },
+      ],
+      meta: {
+        page: 1,
+        limit: 10,
+        total: 2,
+        totalPages: 1,
+      },
+    });
+  }),
+  http.post('http://localhost:3000/api/fileStorage/create', async ({ request }) => {
+    const data = await request.formData();
+    const file = data.get('file') as File;
+    const name = data.get('name') as string;
+
+    if (!file) {
+      return new HttpResponse(null, { status: 400 });
+    }
+
+    return HttpResponse.json({
+      data: {
+        id: '3',
+        name: 'generated-nanoid',
+        path: `/uploads/generated-nanoid`,
+        link: `/uploads/generated-nanoid`,
+        realName: name,
+        mimeType: file.type,
+        category: "uncategorized",
+        isActive: true,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        deletedAt: null,
+      }
+    });
+  }),
+];

__tests__/mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers);

__tests__/setup.ts

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom';
+import { server } from './mocks/server';
+import { beforeAll, afterEach, afterAll } from 'vitest';
+
+beforeAll(() => server.listen({ onUnhandledRequest: 'bypass' }));
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());

darkMode.md

@@ -0,0 +1,169 @@
+# 🌙 Dark Mode Design Specification
+## Admin Darmasaba – Dashboard & CMS
+
+Dokumen ini mendefinisikan standar **Dark Mode UI** agar:
+- nyaman di mata
+- konsisten
+- tidak flat
+- tetap profesional untuk aplikasi pemerintahan
+
+---
+
+## 🎨 Color Palette (Dark Mode)
+
+### Background Layers
+| Layer | Token | Warna | Fungsi |
+|------|------|------|------|
+| Base | `--bg-base` | `#0B1220` | Background utama aplikasi |
+| App | `--bg-app` | `#0F172A` | Area kerja utama |
+| Card | `--bg-card` | `#162235` | Card / container |
+| Surface | `--bg-surface` | `#1E2A3D` | Table header, tab, input |
+
+---
+
+### Border & Divider
+| Token | Warna | Catatan |
+|-----|------|--------|
+| `--border-default` | `#2A3A52` | Border utama |
+| `--border-soft` | `#22314A` | Divider halus |
+
+> ❗ Hindari border terlalu tipis (`opacity < 20%`)
+
+---
+
+### Text Colors
+| Jenis | Token | Warna |
+|-----|------|------|
+| Primary | `--text-primary` | `#E5E7EB` |
+| Secondary | `--text-secondary` | `#9CA3AF` |
+| Muted | `--text-muted` | `#6B7280` |
+| Inverse | `--text-inverse` | `#020617` |
+
+---
+
+### Accent & Action
+| Fungsi | Warna |
+|------|------|
+| Primary Action | `#3B82F6` |
+| Hover | `#2563EB` |
+| Active | `#1D4ED8` |
+| Link | `#60A5FA` |
+
+---
+
+### Status Colors
+| Status | Warna |
+|------|------|
+| Success | `#22C55E` |
+| Warning | `#FACC15` |
+| Error | `#EF4444` |
+| Info | `#38BDF8` |
+
+---
+
+## 🧱 Layout Rules
+
+### Sidebar
+- Background: `--bg-app`
+- Active menu:
+  - Background: `rgba(59,130,246,0.15)`
+  - Text: Primary
+  - Indicator: kiri (2–3px accent bar)
+- Hover:
+  - Background: `rgba(255,255,255,0.04)`
+
+---
+
+### Header / Topbar
+- Background: `linear-gradient(#0F172A → #0B1220)`
+- Border bawah wajib (`--border-soft`)
+- Icon:
+  - Default: muted
+  - Hover: primary
+
+---
+
+## 📦 Card & Section
+
+### Card
+- Background: `--bg-card`
+- Border: `--border-default`
+- Radius: 12–16px
+- Jangan pakai shadow hitam
+
+### Section Header
+- Font weight lebih besar
+- Text: primary
+- Spacing jelas dari konten
+
+---
+
+## 📊 Table (Dark Mode Friendly)
+
+### Table Header
+- Background: `--bg-surface`
+- Text: secondary
+- Font weight: medium
+
+### Table Row
+- Default: transparent
+- Hover:
+  - Background: `rgba(255,255,255,0.03)`
+- Divider antar row wajib terlihat
+
+### Link di Table
+- Warna link **lebih terang dari text**
+- Hover underline
+
+---
+
+## 🔘 Button Rules
+
+### Primary Button
+- Background: Primary Action
+- Text: Inverse
+- Hover: darker shade
+
+### Secondary Button
+- Background: transparent
+- Border: `--border-default`
+- Text: primary
+
+### Icon Button
+- Default: muted
+- Hover: primary + bg soft
+
+---
+
+## 🧭 Tab Navigation
+
+- Inactive:
+  - Text: muted
+- Active:
+  - Background: `rgba(59,130,246,0.15)`
+  - Text: primary
+  - Icon ikut berubah
+
+---
+
+## 🌗 Dark vs Light Mode Rule
+- Layout, spacing, typography **HARUS SAMA**
+- Yang boleh beda:
+  - warna
+  - border intensity
+  - background layer
+
+> ❌ Jangan ganti struktur UI antara dark & light
+
+---
+
+## ✅ Dark Mode Checklist
+- [ ] Kontras teks terbaca
+- [ ] Active state jelas
+- [ ] Hover terasa hidup
+- [ ] Tidak flat
+- [ ] Tidak silau
+
+---
+
+Dokumen ini adalah **single source of truth** untuk Dark Mode.

next.config.ts

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

package.json

@@ -5,7 +5,10 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "test:api": "vitest run",
+    "test:e2e": "playwright test",
+    "test": "bun run test:api && bun run test:e2e"
   },
   "prisma": {
     "seed": "bun run prisma/seed.ts"
@@ -30,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",
@@ -50,6 +53,7 @@
     "add": "^2.0.6",
     "adm-zip": "^0.5.16",
     "animate.css": "^4.1.1",
+    "async-mutex": "^0.5.0",
     "bcryptjs": "^3.0.2",
     "bun": "^1.2.2",
     "chart.js": "^4.4.8",
@@ -58,6 +62,7 @@
     "colors": "^1.4.0",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
+    "dompurify": "^3.3.1",
     "dotenv": "^17.2.3",
     "elysia": "^1.3.5",
     "embla-carousel": "^8.6.0",
@@ -84,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",
@@ -105,17 +110,24 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@playwright/test": "^1.58.2",
+    "@testing-library/jest-dom": "^6.9.1",
     "@types/cli-progress": "^3.11.6",
+    "@types/dompurify": "^3.2.0",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitest/ui": "^4.0.18",
     "eslint": "^9",
     "eslint-config-next": "15.1.6",
+    "jsdom": "^28.0.0",
+    "msw": "^2.12.9",
     "parcel": "^2.6.2",
     "postcss": "^8.5.1",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^4.0.18"
   }
 }

playwright-report/data/3262232ac1998014dfaa14b6734778979a7c99c4.md

@@ -0,0 +1,208 @@
+# Page snapshot
+
+```yaml
+- generic [active] [ref=e1]:
+  - generic [ref=e2]:
+    - generic [ref=e7]:
+      - button "Darmasaba Logo" [ref=e8] [cursor=pointer]:
+        - img "Darmasaba Logo" [ref=e10]
+      - button "PPID" [ref=e11] [cursor=pointer]:
+        - generic [ref=e13]: PPID
+      - button "Desa" [ref=e14] [cursor=pointer]:
+        - generic [ref=e16]: Desa
+      - button "Kesehatan" [ref=e17] [cursor=pointer]:
+        - generic [ref=e19]: Kesehatan
+      - button "Keamanan" [ref=e20] [cursor=pointer]:
+        - generic [ref=e22]: Keamanan
+      - button "Ekonomi" [ref=e23] [cursor=pointer]:
+        - generic [ref=e25]: Ekonomi
+      - button "Inovasi" [ref=e26] [cursor=pointer]:
+        - generic [ref=e28]: Inovasi
+      - button "Lingkungan" [ref=e29] [cursor=pointer]:
+        - generic [ref=e31]: Lingkungan
+      - button "Pendidikan" [ref=e32] [cursor=pointer]:
+        - generic [ref=e34]: Pendidikan
+      - button "Musik" [ref=e35] [cursor=pointer]:
+        - generic [ref=e37]: Musik
+      - button [ref=e38] [cursor=pointer]:
+        - img [ref=e40]
+    - generic [ref=e46]:
+      - generic [ref=e51]:
+        - generic [ref=e52]:
+          - generic [ref=e53]:
+            - img "Logo Darmasaba" [ref=e55]
+            - img "Logo Pudak" [ref=e57]
+          - generic [ref=e63]:
+            - generic [ref=e65]:
+              - generic [ref=e66]:
+                - img [ref=e67]
+                - paragraph [ref=e71]: Jam Operasional
+              - generic [ref=e72]:
+                - generic [ref=e74]: Buka
+                - paragraph [ref=e75]: 07:30 - 15:30
+            - generic [ref=e77]:
+              - generic [ref=e78]:
+                - img [ref=e79]
+                - paragraph [ref=e82]: Hari Ini
+              - generic [ref=e83]:
+                - paragraph [ref=e84]: Status Kantor
+                - paragraph [ref=e85]: Sedang Beroperasi
+        - paragraph [ref=e95]: Bagikan ide, kritik, atau saran Anda untuk mendukung pembangunan desa. Semua lebih mudah dengan fitur interaktif yang kami sediakan.
+      - generic [ref=e102]:
+        - generic [ref=e103]: Browser Anda tidak mendukung video.
+        - generic [ref=e106]:
+          - heading "Penghargaan Desa" [level=2] [ref=e107]
+          - paragraph [ref=e110]: Sedang memuat data penghargaan...
+          - button "Lihat semua penghargaan" [ref=e111] [cursor=pointer]:
+            - generic [ref=e112]:
+              - paragraph [ref=e114]: Lihat Semua Penghargaan
+              - img [ref=e116]
+      - generic [ref=e119]:
+        - generic [ref=e121]:
+          - heading "Layanan" [level=1] [ref=e122]
+          - paragraph [ref=e123]: Layanan adalah fitur yang membantu warga desa mengakses berbagai kebutuhan administrasi, informasi, dan bantuan secara cepat, mudah, dan transparan. Dengan fitur ini, semua layanan desa ada dalam genggaman Anda!
+          - link "Detail" [ref=e125] [cursor=pointer]:
+            - /url: /darmasaba/desa/layanan
+            - generic [ref=e127]: Detail
+        - separator [ref=e129]
+      - generic [ref=e130]:
+        - generic [ref=e131]:
+          - paragraph [ref=e132]: Potensi Desa
+          - paragraph [ref=e133]: Jelajahi berbagai potensi dan peluang yang dimiliki desa. Fitur ini membantu warga maupun pemerintah desa dalam merencanakan dan mengembangkan program berbasis kekuatan lokal.
+        - paragraph [ref=e136]: Sedang memuat potensi desa...
+        - button "Lihat Semua Potensi" [ref=e139] [cursor=pointer]:
+          - generic [ref=e140]:
+            - generic [ref=e141]: Lihat Semua Potensi
+            - img [ref=e143]
+        - separator [ref=e146]
+      - generic [ref=e147]:
+        - generic [ref=e148]:
+          - paragraph [ref=e150]: Desa Anti Korupsi
+          - paragraph [ref=e151]: Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola secara terbuka dengan melibatkan warga dalam pengawasan anggaran, sehingga digunakan tepat sasaran dan sesuai kebutuhan masyarakat.
+          - link "Selengkapnya" [ref=e153] [cursor=pointer]:
+            - /url: /darmasaba/desa-anti-korupsi/detail
+            - generic [ref=e155]: Selengkapnya
+        - paragraph [ref=e158]: Memuat Data...
+      - generic [ref=e166]:
+        - heading "SDGs Desa" [level=1] [ref=e168]
+        - paragraph [ref=e169]: SDGs Desa adalah upaya desa untuk menciptakan pembangunan yang maju, inklusif, dan berkelanjutan melalui 17 tujuan mulai dari pengentasan kemiskinan, pendidikan, kesehatan, hingga pelestarian lingkungan.
+        - generic [ref=e170]:
+          - generic [ref=e171]:
+            - img [ref=e172]
+            - paragraph [ref=e175]: Data SDGs Desa belum tersedia
+          - link "Jelajahi Semua Tujuan SDGs Desa" [ref=e177] [cursor=pointer]:
+            - /url: /darmasaba/sdgs-desa
+            - paragraph [ref=e180]: Jelajahi Semua Tujuan SDGs Desa
+      - generic [ref=e181]:
+        - generic [ref=e183]:
+          - heading "APBDes" [level=1] [ref=e184]
+          - paragraph [ref=e185]: Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola desa yang bersih, terbuka, dan bertanggung jawab.
+        - link "Lihat Semua Data" [ref=e187] [cursor=pointer]:
+          - /url: /darmasaba/apbdes
+          - generic [ref=e189]: Lihat Semua Data
+        - generic [ref=e191]:
+          - paragraph [ref=e193]: Pilih Tahun APBDes
+          - generic [ref=e194]:
+            - textbox "Pilih Tahun APBDes" [ref=e195]:
+              - /placeholder: Pilih tahun
+            - generic:
+              - img
+        - paragraph [ref=e197]: Tidak ada data APBDes untuk tahun yang dipilih.
+      - generic [ref=e202]:
+        - heading "Prestasi Desa" [level=1] [ref=e203]
+        - paragraph [ref=e204]: Kami bangga dengan pencapaian desa hingga saat ini. Semoga prestasi ini menjadi inspirasi untuk terus berkarya dan berinovasi demi kemajuan bersama.
+        - link "Lihat Semua Prestasi" [ref=e205] [cursor=pointer]:
+          - /url: /darmasaba/prestasi-desa
+          - generic [ref=e207]: Lihat Semua Prestasi
+      - button [ref=e211] [cursor=pointer]:
+        - img [ref=e214]
+      - button [ref=e219] [cursor=pointer]:
+        - img [ref=e221]
+    - generic [ref=e225]:
+      - contentinfo [ref=e228]:
+        - generic [ref=e230]:
+          - generic [ref=e231]:
+            - heading "Komitmen Layanan Kami" [level=2] [ref=e232]
+            - generic [ref=e233]:
+              - generic [ref=e234]:
+                - paragraph [ref=e235]: "1. Transparansi:"
+                - paragraph [ref=e236]: Pengelolaan dana desa dilakukan secara terbuka agar masyarakat dapat memahami dan memantau penggunaan anggaran.
+              - generic [ref=e237]:
+                - paragraph [ref=e238]: "2. Profesionalisme:"
+                - paragraph [ref=e239]: Layanan desa diberikan secara cepat, adil, dan profesional demi kepuasan masyarakat.
+              - generic [ref=e240]:
+                - paragraph [ref=e241]: "3. Partisipasi:"
+                - paragraph [ref=e242]: Masyarakat dilibatkan aktif dalam pengambilan keputusan demi pembangunan desa yang berhasil.
+              - generic [ref=e243]:
+                - paragraph [ref=e244]: "4. Inovasi:"
+                - paragraph [ref=e245]: Kami terus berinovasi, termasuk melalui teknologi, agar layanan semakin mudah diakses.
+              - generic [ref=e246]:
+                - paragraph [ref=e247]: "5. Keadilan:"
+                - paragraph [ref=e248]: Kebijakan dan program disusun untuk memberi manfaat yang merata bagi seluruh warga.
+              - generic [ref=e249]:
+                - paragraph [ref=e250]: "6. Pemberdayaan:"
+                - paragraph [ref=e251]: Masyarakat didukung melalui pelatihan, pendampingan, dan pengembangan usaha lokal.
+              - generic [ref=e252]:
+                - paragraph [ref=e253]: "7. Ramah Lingkungan:"
+                - paragraph [ref=e254]: Seluruh kegiatan pembangunan memperhatikan keberlanjutan demi menjaga alam dan kesehatan warga.
+          - separator [ref=e255]
+          - generic [ref=e256]:
+            - heading "Visi Kami" [level=2] [ref=e257]
+            - paragraph [ref=e258]: Dengan visi ini, kami berkomitmen menjadikan desa sebagai tempat yang aman, sejahtera, dan nyaman bagi seluruh warga.
+            - paragraph [ref=e259]: Kami percaya kemajuan dimulai dari kerja sama antara pemerintah desa dan masyarakat, didukung tata kelola yang baik demi kepentingan bersama. Saran maupun keluhan dapat disampaikan melalui kontak di bawah ini.
+          - generic [ref=e260]:
+            - paragraph [ref=e261]: "\"Desa Kuat, Warga Sejahtera!\""
+            - button "Logo Desa" [ref=e262] [cursor=pointer]:
+              - generic [ref=e263]:
+                - img "Logo Desa"
+      - generic [ref=e265]:
+        - generic [ref=e267]:
+          - paragraph [ref=e268]: Tentang Darmasaba
+          - paragraph [ref=e269]: Darmasaba adalah desa budaya yang kaya akan tradisi dan nilai-nilai warisan Bali.
+          - generic [ref=e270]:
+            - link [ref=e271] [cursor=pointer]:
+              - /url: https://www.facebook.com/DarmasabaDesaku
+              - img [ref=e273]
+            - link [ref=e275] [cursor=pointer]:
+              - /url: https://www.instagram.com/ddarmasaba/
+              - img [ref=e277]
+            - link [ref=e280] [cursor=pointer]:
+              - /url: https://www.youtube.com/channel/UCtPw9WOQO7d2HIKzKgel4Xg
+              - img [ref=e282]
+            - link [ref=e285] [cursor=pointer]:
+              - /url: https://www.tiktok.com/@desa.darmasaba?is_from_webapp=1&sender_device=pc
+              - img [ref=e287]
+        - generic [ref=e290]:
+          - paragraph [ref=e291]: Layanan Desa
+          - link "Administrasi Kependudukan" [ref=e292] [cursor=pointer]:
+            - /url: /darmasaba/desa/layanan/
+          - link "Layanan Sosial" [ref=e293] [cursor=pointer]:
+            - /url: /darmasaba/ekonomi/program-kemiskinan
+          - link "Pengaduan Masyarakat" [ref=e294] [cursor=pointer]:
+            - /url: /darmasaba/keamanan/laporan-publik
+          - link "Informasi Publik" [ref=e295] [cursor=pointer]:
+            - /url: /darmasaba/ppid/daftar-informasi-publik-desa-darmasaba
+        - generic [ref=e297]:
+          - paragraph [ref=e298]: Tautan Penting
+          - link "Portal Badung" [ref=e299] [cursor=pointer]:
+            - /url: /darmasaba/desa/berita/semua
+          - link "E-Government" [ref=e300] [cursor=pointer]:
+            - /url: /darmasaba/inovasi/desa-digital-smart-village
+          - link "Transparansi" [ref=e301] [cursor=pointer]:
+            - /url: /darmasaba/ppid/daftar-informasi-publik-desa-darmasaba
+        - generic [ref=e303]:
+          - paragraph [ref=e304]: Berlangganan Info
+          - paragraph [ref=e305]: Dapatkan kabar terbaru tentang program dan kegiatan desa langsung ke email Anda.
+          - generic [ref=e306]:
+            - generic [ref=e308]:
+              - textbox "Masukkan email Anda" [ref=e309]
+              - img [ref=e311]
+            - button "Daftar" [ref=e314] [cursor=pointer]:
+              - generic [ref=e316]: Daftar
+      - separator [ref=e317]
+      - paragraph [ref=e318]: © 2025 Desa Darmasaba. Hak cipta dilindungi.
+  - region "Notifications Alt+T"
+  - button "Open Next.js Dev Tools" [ref=e324] [cursor=pointer]:
+    - img [ref=e325]
+  - alert [ref=e328]
+```

playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './__tests__/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'bun run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});

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/_seeder_list/desa/profile-desa/seed_profile_desa.ts

@@ -4,6 +4,7 @@ import maskotDesa from "../../../data/desa/profile/maskot_desa.json";
 import profilePerbekel from "../../../data/desa/profile/profil_perbekel.json";
 import profileDesaImage from "../../../data/desa/profile/profileDesaImage.json";
 import sejarahDesa from "../../../data/desa/profile/sejarah_desa.json";
+import visiMisiDesa from "../../../data/desa/profile/visi_misi_desa.json";
 
 export async function seedProfileDesa() {
   // =========== SEJARAH DESA ===========
@@ -26,6 +27,26 @@ export async function seedProfileDesa() {
 
   console.log("sejarah desa success ...");
 
+  // =========== VISI MISI DESA ===========
+  for (const l of visiMisiDesa) {
+    await prisma.visiMisiDesa.upsert({
+      where: {
+        id: l.id,
+      },
+      update: {
+        visi: l.visi,
+        misi: l.misi,
+      },
+      create: {
+        id: l.id,
+        visi: l.visi,
+        misi: l.misi,
+      },
+    });
+  }
+
+  console.log("visi misi desa success ...");
+
   // =========== MASKOT DESA ===========
   for (const l of maskotDesa) {
     await prisma.maskotDesa.upsert({

prisma/_seeder_list/inovasi/seed_desa_digital.ts

@@ -4,6 +4,23 @@ import desaDigital from "../../data/inovasi/desa-digital/desa-digital.json";
 export async function seedDesaDigital() {
   console.log("🔄 Seeding Desa Digital...");
   for (const d of desaDigital) {
+    let imageId: string | null = null;
+
+    if (d.imageName) {
+      const image = await prisma.fileStorage.findUnique({
+        where: { name: d.imageName },
+        select: { id: true },
+      });
+
+      if (!image) {
+        console.warn(
+          `⚠️ Image not found for desa digital "${d.name}": ${d.imageName}`,
+        );
+      } else {
+        imageId = image.id;
+      }
+    }
+
     await prisma.desaDigital.upsert({
       where: {
         id: d.id,
@@ -11,13 +28,13 @@ export async function seedDesaDigital() {
       update: {
         name: d.name,
         deskripsi: d.deskripsi,
-        imageId: d.imageId,
+        imageId: imageId,
       },
       create: {
         id: d.id,
         name: d.name,
         deskripsi: d.deskripsi,
-        imageId: d.imageId,
+        imageId: imageId,
       },
     });
   }

prisma/_seeder_list/inovasi/seed_layanan_online_desa.ts

@@ -63,6 +63,23 @@ export async function seedLayananOnlineDesa() {
   console.log("✅ Jenis Pengaduan Masyarakat seeded successfully");
   console.log("🔄 Seeding Pengaduan Masyarakat...");
   for (const d of pengaduanMasyarakat) {
+    let imageId: string | null = null;
+
+    if (d.imageName) {
+      const image = await prisma.fileStorage.findUnique({
+        where: { name: d.imageName },
+        select: { id: true },
+      });
+
+      if (!image) {
+        console.warn(
+          `⚠️ Image not found for pengaduan masyarakat "${d.name}": ${d.imageName}`,
+        );
+      } else {
+        imageId = image.id;
+      }
+    }
+
     await prisma.pengaduanMasyarakat.upsert({
       where: {
         id: d.id,
@@ -74,7 +91,7 @@ export async function seedLayananOnlineDesa() {
         nomorTelepon: d.nomorTelepon,
         judulPengaduan: d.judulPengaduan,
         lokasiKejadian: d.lokasiKejadian,
-        imageId: d.imageId,
+        imageId: imageId,
         deskripsiPengaduan: d.deskripsiPengaduan,
         jenisPengaduanId: d.jenisPengaduanId,
       },
@@ -86,7 +103,7 @@ export async function seedLayananOnlineDesa() {
         nomorTelepon: d.nomorTelepon,
         judulPengaduan: d.judulPengaduan,
         lokasiKejadian: d.lokasiKejadian,
-        imageId: d.imageId,
+        imageId: imageId,
         deskripsiPengaduan: d.deskripsiPengaduan,
         jenisPengaduanId: d.jenisPengaduanId,
       },

prisma/_seeder_list/lingkungan/seed_data_gotong_royong.ts

@@ -0,0 +1,71 @@
+import prisma from "@/lib/prisma";
+import kategoriGotongRoyong from "../../data/lingkungan/gotong-royong/kategori-gotong-royong.json";
+import gotongRoyong from "../../data/lingkungan/gotong-royong/gotong-royong.json";
+
+export async function seedDataGotongRoyong() {
+  console.log("🔄 Seeding Kategori Gotong Royong...");
+
+  for (const k of kategoriGotongRoyong) {
+    await prisma.kategoriKegiatan.upsert({
+      where: {
+        id: k.id,
+      },
+      update: {
+        nama: k.nama,
+      },
+      create: {
+        id: k.id,
+        nama: k.nama,
+      },
+    });
+  }
+  console.log("✅ Kategori Gotong Royong seeded successfully");
+
+  console.log("🔄 Seeding Gotong Royong...");
+  for (const k of gotongRoyong) {
+    let imageId: string | null = null;
+
+    if (k.imageName) {
+      const image = await prisma.fileStorage.findUnique({
+        where: { name: k.imageName },
+        select: { id: true },
+      });
+
+      if (!image) {
+        console.warn(
+          `⚠️ Image not found for gotong royong "${k.judul}": ${k.imageName}`,
+        );
+      } else {
+        imageId = image.id;
+      }
+    }
+
+    await prisma.kegiatanDesa.upsert({
+      where: {
+        id: k.id,
+      },
+      update: {
+        judul: k.judul,
+        deskripsiSingkat: k.deskripsiSingkat,
+        deskripsiLengkap: k.deskripsiLengkap,
+        tanggal: k.tanggal,
+        lokasi: k.lokasi,
+        partisipan: k.partisipan,
+        imageId: imageId,
+        kategoriKegiatanId: k.kategoriKegiatanId,
+      },
+      create: {
+        id: k.id,
+        judul: k.judul,
+        deskripsiSingkat: k.deskripsiSingkat,
+        deskripsiLengkap: k.deskripsiLengkap,
+        tanggal: k.tanggal,
+        lokasi: k.lokasi,
+        partisipan: k.partisipan,
+        imageId: imageId,
+        kategoriKegiatanId: k.kategoriKegiatanId,
+      },
+    });
+  }
+  console.log("✅ Gotong Royong seeded successfully");
+}

prisma/_seeder_list/lingkungan/seed_data_lingkungan_desa.ts

@@ -0,0 +1,27 @@
+import prisma from "@/lib/prisma";
+import dataLingkunganDesa from "../../data/lingkungan/data-lingkungan-desa/data-lingkungan-desa.json";
+
+export async function seedDataLingkunganDesa() {
+  console.log("🔄 Seeding Data Lingkungan Desa...");
+  for (const p of dataLingkunganDesa) {
+    await prisma.dataLingkunganDesa.upsert({
+      where: {
+        id: p.id,
+      },
+      update: {
+        name: p.name,
+        jumlah: p.jumlah,
+        deskripsi: p.deskripsi,
+        icon: p.icon,
+      },
+      create: {
+        id: p.id,
+        name: p.name,
+        jumlah: p.jumlah,
+        deskripsi: p.deskripsi,
+        icon: p.icon,
+      },
+    });
+  }
+  console.log("✅ Data Lingkungan Desa seeded successfully");
+}

prisma/_seeder_list/lingkungan/seed_edukasi_lingkungan.ts

@@ -0,0 +1,63 @@
+import prisma from "@/lib/prisma";
+import tujuanEdukasiLingkungan from "../../data/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan.json";
+import materiEdukasiLingkungan from "../../data/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan.json";
+import contohEdukasiLingkungan from "../../data/lingkungan/edukasi-lingkungan/contoh-kegiatan-di-desa-darmasaba.json";
+
+export async function seedEdukasiLingkungan() {
+  for (const e of tujuanEdukasiLingkungan) {
+    await prisma.tujuanEdukasiLingkungan.upsert({
+      where: {
+        id: e.id,
+      },
+      update: {
+        judul: e.judul,
+        deskripsi: e.deskripsi,
+      },
+      create: {
+        id: e.id,
+        judul: e.judul,
+        deskripsi: e.deskripsi,
+      },
+    });
+  }
+
+  console.log("tujuan edukasi lingkungan success ...");
+
+  for (const m of materiEdukasiLingkungan) {
+    await prisma.materiEdukasiLingkungan.upsert({
+      where: {
+        id: m.id,
+      },
+      update: {
+        judul: m.judul,
+        deskripsi: m.deskripsi,
+      },
+      create: {
+        id: m.id,
+        judul: m.judul,
+        deskripsi: m.deskripsi,
+      },
+    });
+  }
+
+  console.log("materi edukasi lingkungan success ...");
+
+  for (const c of contohEdukasiLingkungan) {
+    await prisma.contohEdukasiLingkungan.upsert({
+      where: {
+        id: c.id,
+      },
+      update: {
+        judul: c.judul,
+        deskripsi: c.deskripsi,
+      },
+      create: {
+        id: c.id,
+        judul: c.judul,
+        deskripsi: c.deskripsi,
+      },
+    });
+  }
+
+  console.log("contoh edukasi lingkungan success ...");
+}

prisma/_seeder_list/lingkungan/seed_konservasi_adat_bali.ts

@@ -0,0 +1,63 @@
+import prisma from "@/lib/prisma";
+import filosofiTriHita from "../../data/lingkungan/konservasi-adat-bali/filosofi-tri-hita.json";
+import bentukKonservasiBerdasarkanAdat from "../../data/lingkungan/konservasi-adat-bali/bentuk-konservasi.json";
+import nilaiKonservasiAdat from "../../data/lingkungan/konservasi-adat-bali/nilai-konservasi-adat.json";
+
+export async function seedKonservasiAdatBali() {
+  for (const f of filosofiTriHita) {
+    await prisma.filosofiTriHita.upsert({
+      where: {
+        id: f.id,
+      },
+      update: {
+        judul: f.judul,
+        deskripsi: f.deskripsi,
+      },
+      create: {
+        id: f.id,
+        judul: f.judul,
+        deskripsi: f.deskripsi,
+      },
+    });
+  }
+
+  console.log("filosofi tri hita success ...");
+
+  for (const b of bentukKonservasiBerdasarkanAdat) {
+    await prisma.bentukKonservasiBerdasarkanAdat.upsert({
+      where: {
+        id: b.id,
+      },
+      update: {
+        judul: b.judul,
+        deskripsi: b.deskripsi,
+      },
+      create: {
+        id: b.id,
+        judul: b.judul,
+        deskripsi: b.deskripsi,
+      },
+    });
+  }
+
+  console.log("bentuk konservasi berdasarkan adat success ...");
+
+  for (const n of nilaiKonservasiAdat) {
+    await prisma.nilaiKonservasiAdat.upsert({
+      where: {
+        id: n.id,
+      },
+      update: {
+        judul: n.judul,
+        deskripsi: n.deskripsi,
+      },
+      create: {
+        id: n.id,
+        judul: n.judul,
+        deskripsi: n.deskripsi,
+      },
+    });
+  }
+
+  console.log("nilai konservasi adat success ...");
+}

prisma/_seeder_list/lingkungan/seed_pengelolaan_sampah.ts

@@ -0,0 +1,51 @@
+import prisma from "@/lib/prisma";
+import pengelolaanSampah from "../../data/lingkungan/pengelolaan-sampah/pengelolaan-sampah.json";
+import keteranganBankSampah from "../../data/lingkungan/pengelolaan-sampah/keterangan-bank-sampah.json";
+
+export async function seedPengelolaanSampah() {
+  console.log("🔄 Seeding Pengelolaan Sampah...");
+  for (const p of pengelolaanSampah) {
+    await prisma.pengelolaanSampah.upsert({
+      where: {
+        id: p.id,
+      },
+      update: {
+        name: p.name,
+        icon: p.icon,
+      },
+      create: {
+        id: p.id,
+        name: p.name,
+        icon: p.icon,
+      },
+    });
+  }
+  console.log("✅ Pengelolaan Sampah seeded successfully");
+
+  console.log("🔄 Seeding Keterangan Bank Sampah...");
+  for (const p of keteranganBankSampah) {
+    await prisma.keteranganBankSampahTerdekat.upsert({
+      where: {
+        id: p.id,
+      },
+      update: {
+        name: p.name,
+        alamat: p.alamat,
+        namaTempatMaps: p.namaTempatMaps,
+        linkPetunjukArah: p.linkPetunjukArah,
+        lat: p.lat,
+        lng: p.lng,
+      },
+      create: {
+        id: p.id,
+        name: p.name,
+        alamat: p.alamat,
+        namaTempatMaps: p.namaTempatMaps,
+        linkPetunjukArah: p.linkPetunjukArah,
+        lat: p.lat,
+        lng: p.lng,
+      },
+    });
+  }
+  console.log("✅ Keterangan Bank Sampah seeded successfully");
+}

prisma/_seeder_list/lingkungan/seed_program_penghijauan.ts

@@ -0,0 +1,27 @@
+import prisma from "@/lib/prisma";
+import programPenghijauan from "../../data/lingkungan/program-penghijauan/program-penghijauan.json";
+
+export async function seedProgramPenghijauan() {
+  console.log("🔄 Seeding Program Penghijauan...");
+  for (const p of programPenghijauan) {
+    await prisma.programPenghijauan.upsert({
+      where: {
+        id: p.id,
+      },
+      update: {
+        name: p.name,
+        judul: p.judul,
+        deskripsi: p.deskripsi,
+        icon: p.icon,
+      },
+      create: {
+        id: p.id,
+        name: p.name,
+        judul: p.judul,
+        deskripsi: p.deskripsi,
+        icon: p.icon,
+      },
+    });
+  }
+  console.log("✅ Program Penghijauan seeded successfully");
+}

prisma/_seeder_list/pendidikan/seed_bimbingan_belajar.ts

@@ -0,0 +1,60 @@
+import prisma from "@/lib/prisma";
+import tujuanBimbinganBelajarDesa from "../../data/pendidikan/bimbingan-belajar-desa/tujuan-bimbingan-belajar-desa.json";
+import lokasiJadwalBimbinganBelajarDesa from "../../data/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal.json";
+import fasilitasBimbinganBelajarDesa from "../../data/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan.json";
+
+export async function seedBimbinganBelajar() {
+for (const t of tujuanBimbinganBelajarDesa) {
+    await prisma.tujuanBimbinganBelajarDesa.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log(
+    "✅ tujuan bimbingan belajar desa seeded (editable later via UI)",
+  );
+
+  for (const t of lokasiJadwalBimbinganBelajarDesa) {
+    await prisma.lokasiJadwalBimbinganBelajarDesa.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log(
+    "✅ lokasi jadwal bimbingan belajar desa seeded (editable later via UI)",
+  );
+
+  for (const t of fasilitasBimbinganBelajarDesa) {
+    await prisma.fasilitasBimbinganBelajarDesa.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log(
+    "✅ fasilitas bimbingan belajar desa seeded (editable later via UI)",
+  );
+}

prisma/_seeder_list/pendidikan/seed_data_pendidikan.ts

@@ -0,0 +1,23 @@
+import prisma from "@/lib/prisma";
+import dataPendidikan from "../../data/pendidikan/data-pendidikan/data-pendidikan.json";
+
+export async function seedDataPendidikan() {
+ console.log("🔄 Seeding Data pendidikan...");
+  for (const k of dataPendidikan) {
+    await prisma.dataPendidikan.upsert({
+      where: {
+        id: k.id,
+      },
+      update: {
+        name: k.name,
+        jumlah: k.jumlah,
+      },
+      create: {
+        id: k.id,
+        name: k.name,
+        jumlah: k.jumlah,
+      },
+    });
+  }
+  console.log("✅ Data pendidikan seeded successfully");
+}

prisma/_seeder_list/pendidikan/seed_data_perpustakaan.ts

@@ -0,0 +1,71 @@
+import prisma from "@/lib/prisma";
+import dataPerpustakaan from "../../data/pendidikan/perpustakaan-digital/perpustakaan-digital.json";
+import kategoriBuku from "../../data/pendidikan/perpustakaan-digital/kategori-buku.json";
+
+export async function seedDataPerpustakaan() {
+  console.log("🔄 Seeding Kategori Buku...");
+  for (const k of kategoriBuku) {
+    await prisma.kategoriBuku.upsert({
+      where: {
+        id: k.id,
+      },
+      update: {
+        name: k.name,
+      },
+      create: {
+        id: k.id,
+        name: k.name,
+      },
+    });
+  }
+  console.log("✅ Kategori Buku seeded successfully");
+
+  console.log("🔄 Seeding Data perpustakaan...");
+  for (const k of dataPerpustakaan) {
+  let imageId: string | null = null;
+
+  if (k.imageName) {
+    const image = await prisma.fileStorage.findUnique({
+      where: { name: k.imageName },
+      select: { id: true },
+    });
+
+    if (!image) {
+      console.warn(
+        `⚠️ Image not found for perpustakaan "${k.judul}": ${k.imageName}`,
+      );
+    } else {
+      imageId = image.id;
+    }
+  }
+
+    await prisma.dataPerpustakaan.upsert({
+      where: {
+        id: k.id,
+      },
+      update: {
+        judul: k.judul,
+        deskripsi: k.deskripsi,
+        kategoriId: k.kategoriId,
+        imageId: imageId
+      },
+      create: {
+        id: k.id,
+        judul: k.judul,
+        deskripsi: k.deskripsi,
+        kategoriId: k.kategoriId,
+        imageId: imageId
+      },
+    });
+  }
+  console.log("✅ Data perpustakaan seeded successfully");
+}
+if (import.meta.main) {
+  seedDataPerpustakaan()
+    .then(() => {
+      console.log("seed data perpustakaan success");
+    })
+    .catch((err) => {
+      console.log("gagal seed data perpustakaan", JSON.stringify(err));
+    });
+}

prisma/_seeder_list/pendidikan/seed_info_program_pendidikan.ts

@@ -0,0 +1,36 @@
+import prisma from "@/lib/prisma";
+import tujuanProgram from "../../data/pendidikan/program-pendidikan-anak/tujuan-program.json";
+import programUnggulan from "../../data/pendidikan/program-pendidikan-anak/program-unggulan.json";
+
+export async function seedInfoProgramPendidikan() {
+  for (const t of tujuanProgram) {
+    await prisma.tujuanProgram.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log("✅ tujuan program seeded (editable later via UI)");
+  for (const t of programUnggulan) {
+    await prisma.programUnggulan.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log("✅ program unggulan seeded (editable later via UI)");
+}

prisma/_seeder_list/pendidikan/seed_info_sekolah.ts

@@ -0,0 +1,74 @@
+import prisma from "@/lib/prisma";
+import jenjangPendidikan from "../../data/pendidikan/info-sekolah/jenjang-pendidikan.json";
+import lembagaPendidikan from "../../data/pendidikan/info-sekolah/lembaga.json";
+import siswa from "../../data/pendidikan/info-sekolah/siswa.json";
+import pengajar from "../../data/pendidikan/info-sekolah/pengajar.json";
+
+export async function seedInfoSekolah() {
+  for (const j of jenjangPendidikan) {
+    await prisma.jenjangPendidikan.upsert({
+      where: {
+        id: j.id,
+      },
+      update: {
+        nama: j.nama,
+      },
+      create: {
+        id: j.id,
+        nama: j.nama,
+      },
+    });
+  }
+  console.log("✅ Jenjang Pendidikan seeded successfully");
+  for (const j of lembagaPendidikan) {
+    await prisma.lembaga.upsert({
+      where: {
+        id: j.id,
+      },
+      update: {
+        nama: j.nama,
+        jenjangId: j.jenjangId,
+      },
+      create: {
+        id: j.id,
+        nama: j.nama,
+        jenjangId: j.jenjangId,
+      },
+    });
+  }
+  console.log("✅ Lembaga Pendidikan seeded successfully");
+  for (const j of siswa) {
+    await prisma.siswa.upsert({
+      where: {
+        id: j.id,
+      },
+      update: {
+        nama: j.nama,
+        lembagaId: j.lembagaId,
+      },
+      create: {
+        id: j.id,
+        nama: j.nama,
+        lembagaId: j.lembagaId,
+      },
+    });
+  }
+  console.log("✅ siswa seeded successfully");
+  for (const j of pengajar) {
+    await prisma.pengajar.upsert({
+      where: {
+        id: j.id,
+      },
+      update: {
+        nama: j.nama,
+        lembagaId: j.lembagaId,
+      },
+      create: {
+        id: j.id,
+        nama: j.nama,
+        lembagaId: j.lembagaId,
+      },
+    });
+  }
+  console.log("✅ pengajar seeded successfully");
+}

prisma/_seeder_list/pendidikan/seed_pendidikan_non_formal.ts

@@ -0,0 +1,60 @@
+import prisma from "@/lib/prisma";
+import tujuanProgram from "../../data/pendidikan/pendidikan-non-formal/tujuan-program2.json";
+import tempatKegiatan from "../../data/pendidikan/pendidikan-non-formal/tempat-kegiatan.json";
+import jenisProgramYangDiselenggarakan from "../../data/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan.json";
+
+export async function seedPendidikanNonFormal() {
+  for (const t of tujuanProgram) {
+    await prisma.tujuanPendidikanNonFormal.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log(
+    "✅ fasilitas bimbingan belajar desa seeded (editable later via UI)",
+  );
+
+  for (const t of tempatKegiatan) {
+    await prisma.tempatKegiatan.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log(
+    "✅ fasilitas bimbingan belajar desa seeded (editable later via UI)",
+  );
+
+  for (const t of jenisProgramYangDiselenggarakan) {
+    await prisma.jenisProgramYangDiselenggarakan.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log(
+    "✅ fasilitas bimbingan belajar desa seeded (editable later via UI)",
+  );   
+}

prisma/data/inovasi/desa-digital/desa-digital.json

@@ -3,30 +3,30 @@
     "id": "cmkkshcox000504l88lp54coc",
     "name": "Darmasaba Digital App",
     "deskripsi": "<p>Aplikasi digital desa yang dikembangkan oleh Pemerintah Desa Darmasaba pada tahun 2024 untuk mempermudah pelayanan publik dan informasi pemerintahan berbasis digital.</p>",
-    "imageId": "cmkksb3jr0005vni4sp3ogr87"
+    "imageName": "r_gBF0FuFpFPfSENHc4XI-mobile.webp"
   },
   {
     "id": "cmkkshln8000604l8c9b5b4il",
     "name": "D’DAMART (Darmasaba Digital Market)",
     "deskripsi": "<p>Sistem pasar UMKM digital berbasis website yang dikembangkan untuk meningkatkan akses pasar dan pemasaran produk UMKM Desa Darmasaba melalui platform digital.</p>",
-    "imageId": "cmkksoze80008vni4ki2ry81r"
+    "imageName": "uE2QwpbcXyBWxVYqCWQQT-mobile.webp"
   },
   {
     "id": "cmkm1a1g80007vnsw8ejmj816",
     "name": "Media Aspirasi dan Pengaduan Warga",
     "deskripsi": "<p>Media aspirasi dan pengaduan warga disediakan sebagai wadah partisipasi masyarakat dalam menyampaikan saran, masukan, maupun keluhan secara transparan dan terstruktur. Fitur ini memperkuat komunikasi dua arah antara pemerintah desa dan masyarakat, sehingga setiap aspirasi dapat ditindaklanjuti secara lebih cepat dan akuntabel.</p>",
-    "imageId": "cmkm1a14d0005vnsww1tsd92o"
+    "imageName": "c7xWNyoYp8Cak28NG5NoG-mobile.webp"
   },
   {
     "id": "cmkm0w0s50003vnswmwpnqsi5",
     "name": "Website Desa Resmi",
     "deskripsi": "<p>Website Desa Darmasaba berfungsi sebagai sarana utama penyampaian informasi resmi kepada masyarakat. Melalui website ini, pemerintah desa menghadirkan keterbukaan informasi publik, mempermudah akses warga terhadap berita, pengumuman, serta agenda kegiatan desa, sekaligus menjadi pusat data dan referensi terkait profil dan struktur pemerintahan desa.</p>",
-    "imageId": "cmkm0z9hx0004vnswtjd2bk3z"
+    "imageName": "kN09yF3sahmy-d5EaeGqA-mobile.webp"
   },
   {
     "id": "cmkm1c8wx000avnswksc56orq",
     "name": "Publikasi Kegiatan Desa Secara Digital",
     "deskripsi": "<p>Publikasi kegiatan desa secara digital bertujuan untuk mendokumentasikan dan menyebarluaskan berbagai aktivitas serta program kerja pemerintah desa. Melalui artikel dan dokumentasi foto, masyarakat dapat mengetahui perkembangan kegiatan desa secara terbuka, sekaligus meningkatkan kepercayaan publik terhadap pelaksanaan program desa.</p>",
-    "imageId": "cmkm1c8py0008vnsw0unbxkpq"
+    "imageName": "h_Gd0SoeIJVTi_5TWUO-P-mobile.webp"
   }
 ]

prisma/data/inovasi/layanan-online-desa/pengaduan-masyarakat.json

@@ -9,7 +9,7 @@
     "deskripsiPengaduan": "<p>Permintaan Pemasangan Spanduk Larangan Bagi Hewan</p>",
     "lokasiKejadian": "Banjar Darmasaba Tengah",
     "jenisPengaduanId": "eommt91ma000004lb4dpq7ll1",
-    "imageId": "cmkkxep9l000evni4xkegbk72"
+    "imageName": "gyNi4s8TnK2UrViU-gN2C-mobile.webp"
   },
   {
     "id": "cmkkrxmub0004vni41cwyhid5",
@@ -21,7 +21,7 @@
     "deskripsiPengaduan": "<p>Laporan Anjing Liar Sering Menyerang Warga</p>",
     "lokasiKejadian": "Jl. Raya Darmasaba",
     "jenisPengaduanId": "eommt91ma000004lb4dpq8mm2",
-    "imageId": "cmkkx9e38000bvni4azjd3u53"
+    "imageName": "SQqSobKRg3ShvgPw_H41h-mobile.webp"
   },
   {
     "id": "cmkkrxmub0004vni41cwyhid6",
@@ -33,6 +33,6 @@
     "deskripsiPengaduan": "<p>Pengelolaan Sampah Rumah Tangga Belum Efektif</p>",
     "lokasiKejadian": "Banjar Bucu",
     "jenisPengaduanId": "eommt91ma000004lb4dpq7ll1",
-    "imageId": "cmkky60sq0000vnjjc55k84d2"
+    "imageName": "y78xZ2axTOjz87gRKjVAf-mobile.webp"
   }
 ]

prisma/data/lingkungan/gotong-royong/gotong-royong.json

@@ -7,7 +7,7 @@
     "tanggal": "2024-01-28T00:00:00.000Z",
     "lokasi": "Pura Desa dan Pura Dalem, Desa Adat Tegal, Desa Darmasaba, Badung",
     "partisipan": 30,
-    "imageId": "cmknb59md0000vnmam828iuzt",
+    "imageName": "YgOX5qAP3O1PHG5XmQXkr-mobile.webp",
     "kategoriKegiatanId": "cmknan39v000004l8eiql149r"
   },
   {
@@ -18,7 +18,7 @@
     "tanggal": "2023-11-17T00:00:00.000Z",
     "lokasi": "Desa Darmasaba, Badung",
     "partisipan": 25,
-    "imageId": "cmknbp3vd0001vnmarjz542o7",
+    "imageName": "qxqSDHe-akIRi1EkQFUbG-mobile.webp",
     "kategoriKegiatanId": "cmknan39v000004l8eiql149r"
   },
   {
@@ -29,7 +29,7 @@
     "tanggal": "2022-05-26T00:00:00.000Z",
     "lokasi": "Pura Dalem Kangin, Desa Adat Tegal, Desa Darmasaba, Badung",
     "partisipan": 28,
-    "imageId": "cmknbrj4r0002vnmantw9rn0l",
+    "imageName": "iHTVkQZ1VdkMOXLt5qdAd-mobile.webp",
     "kategoriKegiatanId": "cmknan39v000004l8eiql149r"
   }
 ]

prisma/data/pendidikan/perpustakaan-digital/perpustakaan-digital.json

@@ -4,139 +4,195 @@
     "judul": "Laskar Pelangi",
     "deskripsi": "<p>Novel inspiratif tentang perjuangan anak-anak di Belitung dalam meraih pendidikan dan mimpi mereka</p>",
     "kategoriId": "cmkqb11mc000104jibq76bdzu",
-    "imageId": "cmkqhbhxi0000vneamj3din9u"
+    "imageName": "RnAdv7O0QAFrxkFLAXJSa-mobile.webp"
   },
   {
     "id": "cmkqhedff0005vneas3rtbumi",
     "judul": "Bumi Manusia",
     "deskripsi": "<p>Kisah kehidupan Minke di masa kolonial yang menggambarkan perjuangan, pendidikan, dan identitas bangsa</p>",
     "kategoriId": "cmkqb11mc000104jibqc7bdzu",
-    "imageId": "cmkqhed8x0003vneakx0c7me2"
+    "imageName": "71eZShq4FYAFLxpLfZB0W-mobile.webp"
   },
   {
     "id": "cmkqhg1g70008vneajbpz8phh",
     "judul": "Atomic Habits",
     "deskripsi": "<p>Panduan membangun kebiasaan kecil yang konsisten untuk menghasilkan perubahan besar dalam hidup</p>",
     "kategoriId": "cmkqb11mc000104jibqf7bdzu",
-    "imageId": "cmkqhg1cb0006vneagsxa6t4t"
+    "imageName": "Uxq3GXPqh7HN9fHmRkr3r-mobile.webp"
   },
   {
     "id": "cmkqhl6sr000bvneampx0svus",
     "judul": "Clean Code",
     "deskripsi": "<p>Buku wajib programmer tentang cara menulis kode yang bersih, mudah dibaca, dan mudah dirawat</p>",
     "kategoriId": "cmkqb11mc000104jibqd7bdzu",
-    "imageId": "cmkqhl6mv0009vneasgix42ud"
+    "imageName": "W5Fc0uRADNkIY3nZicvQA-mobile.webp"
   },
   {
     "id": "cmkqhoaa1000evnearppgpyxo",
     "judul": "Sejarah Indonesia Modern",
     "deskripsi": "<p>Membahas perjalanan sejarah Indonesia dari masa kolonial hingga era modern</p>",
     "kategoriId": "cmkqb11mc000104jibqc7bdzu",
-    "imageId": "cmkqhoa5w000cvneah15n28zq"
+    "imageName": "mp77Op-MwtPQZnH3so4JY-mobile.webp"
   },
   {
     "id": "cmkqhr9oc000hvnea677ad3kb",
     "judul": "Ensiklopedia Anak Pintar",
     "deskripsi": "<p>Buku referensi bergambar yang membantu anak mengenal ilmu pengetahuan secara menyenangkan</p>",
     "kategoriId": "cmkqb11mc000104jibqh7bdzu",
-    "imageId": "cmkqhr9lg000fvneai3q8qw0s"
+    "imageName": "V09ZxN1wOwbSFLQiDK0VQ-mobile.webp"
   },
   {
     "id": "cmkqi5ksf000kvnea9c04n2hy",
     "judul": "Filosofi Teras",
     "deskripsi": "<p>Pengenalan filsafat Stoikisme untuk menghadapi kehidupan modern dengan lebih tenang</p>",
     "kategoriId": "cmkqb11mc000104jibq87bdzu",
-    "imageId": "cmkqi5knc000ivnea8grp7j06"
+    "imageName": "Wqp4AyVkGjqRMED9Q5XAs-mobile.webp"
   },
   {
     "id": "cmkqi97hq000nvneaparjbcrm",
     "judul": "Pemrograman JavaScript Dasar",
     "deskripsi": "<p>Panduan dasar belajar JavaScript untuk pemula dalam dunia pengembangan web</p>",
     "kategoriId": "cmkqb11mc000104jibqd7bdzu",
-    "imageId": "cmkqi9799000lvneamskmvpq5"
+    "imageName": "NH4aLc7cVuutdQBCofTC0-mobile.webp"
   },
   {
     "id": "cmkqibjt9000qvnea13ox7fmv",
     "judul": "Pendidikan Karakter",
     "deskripsi": "<p>Buku yang membahas pentingnya pendidikan karakter dalam membentuk generasi bangsa</p>",
     "kategoriId": "cmkqb11mc000104jibqf7bdzu",
-    "imageId": "cmkqibjj2000ovnea3zmmvdop"
+    "imageName": "MLrsPrD6oiHsrNP4Lc8J7-mobile.webp"
   },
   {
     "id": "cmkqidnar000tvneaohk5v8k6",
     "judul": "Psikologi Kepribadian",
     "deskripsi": "<p>Mengenal teori-teori kepribadian manusia dalam perspektif psikologi</p>",
     "kategoriId": "cmkqb11mc000104jibq87bdzu",
-    "imageId": "cmkqidn7e000rvnea5rl58f2e"
+    "imageName": "iaIeNdhuxqltqKP7aZncQ-mobile.webp"
   },
   {
     "id": "cmkqifdiu000wvnea7xd0yi4f",
     "judul": "Ayat-Ayat Cinta",
     "deskripsi": "<p>Novel religi yang mengangkat kisah cinta, iman, dan perjuangan hidup</p>",
     "kategoriId": "cmkqb11mc000104jibqe7bdzu",
-    "imageId": "cmkqifdfs000uvneajss8zswp"
+    "imageName": "WUDssJ59pTKE_3IuTiZ2s-mobile.webp"
   },
   {
     "id": "cmkqik7vi000zvneae7d5cq9i",
     "judul": "Negeri 5 Menara",
     "deskripsi": "<p>Cerita persahabatan dan perjuangan santri dalam mengejar mimpi hingga ke mancanegara</p>",
     "kategoriId": "cmkqb11mc000104jibq76bdzu",
-    "imageId": "cmkqik7p5000xvnea6krii3vw"
+    "imageName": "RJH_-4_R_nlP7GVEQeD1M-mobile.webp"
   },
   {
     "id": "cmkqinno30012vneac1sgsvis",
     "judul": "Belajar UI/UX Design",
     "deskripsi": "<p>Panduan praktis memahami desain antarmuka dan pengalaman pengguna</p>",
     "kategoriId": "cmkqb11mc000104jibqd7bdzu",
-    "imageId": "cmkqinnih0010vneakpjb9egl"
+    "imageName": "9MA-Jx_36uoho2Tg40_G9-mobile.webp"
   },
   {
     "id": "cmkqiqegd0015vneawv5u5tpm",
     "judul": "Manajemen Waktu Efektif",
     "deskripsi": "<p>Teknik mengatur waktu agar lebih produktif dan fokus pada hal penting</p>",
     "kategoriId": "cmkqb11mc000104jibqf7bdzu",
-    "imageId": "cmkqiqeb60013vnea2ygrq5rs"
+    "imageName": "dkb7ZWFl28TREVcvH8sWd-mobile.webp"
   },
   {
     "id": "cmkqiurc60018vneavyd3pj9q",
     "judul": "Dongeng Nusantara",
     "deskripsi": "<p>Kumpulan dongeng tradisional Indonesia yang sarat pesan moral</p>",
     "kategoriId": "cmkqb11mc000104jibq76bdzu",
-    "imageId": "cmkqiur960016vnea3werdoey"
+    "imageName": "nVj3one6CLuWRd04QnsWo-mobile.webp"
   },
   {
     "id": "cmkqix2kb001bvnea5v81cw7p",
     "judul": "Ekonomi Makro",
     "deskripsi": "<p>Pembahasan konsep ekonomi makro secara sistematis dan mudah dipahami</p>",
     "kategoriId": "cmkqb11mc000104jibq87bdzu",
-    "imageId": "cmkqix2go0019vnea8coousvn"
+    "imageName": "AnB7JO4_6tlPTX3ypOVLi-mobile.webp"
   },
   {
     "id": "cmkqiyts2001evneahnk45ry5",
     "judul": "Seni Berpikir Kritis",
     "deskripsi": "<p>Buku yang membantu pembaca menghindari kesalahan berpikir dalam pengambilan keputusan</p>",
     "kategoriId": "cmkqb11mc000104jibq87bdzu",
-    "imageId": "cmkqiytnv001cvnea7o2sv1vt"
+    "imageName": "sAyoMERxL6JgFfiO22KPb-mobile.webp"
   },
   {
     "id": "cmkqj0nq0001hvnea06r8m3kj",
     "judul": "Seni Berpikir Kritis",
     "deskripsi": "<p>Buku yang membantu pembaca menghindari kesalahan berpikir dalam pengambilan keputusan</p>",
     "kategoriId": "cmkqb11mc000104jibq87bdzu",
-    "imageId": "cmkqj0nn0001fvneaufur3nke"
+    "imageName": "WeA-JP2Ks_32fv1k529vj-mobile.webp"
   },
   {
     "id": "cmkqj37w4001kvnea04n9w2bx",
     "judul": "Panduan Shalat Lengkap",
     "deskripsi": "<p>Panduan praktis dan lengkap tentang tata cara shalat sesuai tuntunan</p>",
     "kategoriId": "cmkqb11mc000104jibqe7bdzu",
-    "imageId": "cmkqj37rg001ivneam29fgayr"
+    "imageName": "pxlHu2kDmIprQqC2PuXaL-mobile.webp"
   },
   {
     "id": "cmkqj5qp6001nvnea4xhvluz3",
     "judul": "Cerita Sains untuk Anak",
     "deskripsi": "<p>Cerita edukatif yang mengenalkan sains kepada anak dengan bahasa sederhana</p>",
     "kategoriId": "cmkqb11mc000104jibqh7bdzu",
-    "imageId": "cmkqj5ql6001lvnea6p0afr9f"
+    "imageName": "G0iELZb2DhQDCCP5OdzJR-desktop.webp"
+  },
+  {
+    "id": "cml7fq776000104jscnj58sgm",
+    "judul": "Pedagogy of the Oppressed",
+    "deskripsi": "<p>Klasik pemikiran pendidikan kritis; menggali hubungan guru-murid dan peran pendidikan dalam pembebasan sosial</p>",
+    "kategoriId": "cmkqb11mc000104jibq97bdzu",
+    "imageName": "pendidikan-1.webp"
+  },
+  {
+    "id": "cml7fqurm000204js5p60hkym",
+    "judul": "The Courage to Teach",
+    "deskripsi": "<p>Tentang refleksi diri seorang pendidik; cocok untuk pengajar yang ingin lebih dari sekedar “metode mengajar”</p>",
+    "kategoriId": "cmkqb11mc000104jibq97bdzu",
+    "imageName": "pendidikan-2.webp"
+  },
+  {
+    "id": "cml7fqurm000204js5p60hkzn",
+    "judul": "A Brief History of Time",
+    "deskripsi": "<p>Penjelasan kosmologi yang terkenal dunia; sains kompleks dibahas dengan bahasa yang bisa dinikmati pembaca umum</p>",
+    "kategoriId": "cmkqb11mc000104jibqa7bdzu",
+    "imageName": "ilmiah-1.webp"
+  },
+  {
+    "id": "cml7fqurm000204js5p60hkao",
+    "judul": "The Selfish Gene",
+    "deskripsi": "<p>Membawa perspektif baru tentang evolusi melalui “gen” sebagai unit seleksi</p>",
+    "kategoriId": "cmkqb11mc000104jibqa7bdzu",
+    "imageName": "ilmiah-2.webp"
+  },
+  {
+    "id": "cml7fx09c000304jshams3xbg",
+    "judul": "A Little Life",
+    "deskripsi": "<p>Novel yang menggambarkan hidup seorang remaja yang mengalami kehidupan yang sangat sulit</p>",
+    "kategoriId": "cmkqb11mc000104jibqb7bdzu",
+    "imageName": "drama-1.webp"
+  },
+  {
+    "id": "cml7fx09c000304jshams3xch",
+    "judul": "Death of a Salesman",
+    "deskripsi": "<p>Drama teater klasik Amerika tentang harapan, keluarga, dan realitas hidup.</p>",
+    "kategoriId": "cmkqb11mc000104jibqb7bdzu",
+    "imageName": "drama-2.webp"
+  },
+  {
+    "id": "cml7fx09c000304jshams3xdi",
+    "judul": "How Not to Die",
+    "deskripsi": "<p>Panduan berbasis penelitian tentang pola makan untuk mencegah dan menangani penyakit.</p>",
+    "kategoriId": "cmkqb11mc000104jibqg7bdzu",
+    "imageName": "kesehatan-1.webp"
+  },
+  {
+    "id": "cml7fx09c000304jshams3xej",
+    "judul": "The Body Keeps the Score",
+    "deskripsi": "<p>Fokus pada trauma, otak & tubuh; penting untuk memahami kesehatan mental secara mendalam.</p>",
+    "kategoriId": "cmkqb11mc000104jibqg7bdzu",
+    "imageName": "kesehatan-2.webp"
   }
 ]

prisma/lib/create_file_share_folder.ts

@@ -0,0 +1,246 @@
+// import { getValidAuthToken } from "../../src/lib/seafile-auth-service";
+
+// type CdnItem = {
+//   name: string;
+//   path: string;
+//   cdnUrl: string;
+// };
+
+// type DirItem = {
+//   type: "file" | "dir";
+//   name: string;
+// };
+
+// const BASE_URL = process.env.SEAFILE_BASE_URL!;
+// const REPO_ID = process.env.SEAFILE_REPO_ID!;
+
+// // folder yang dishare (RELATIVE, tanpa slash depan)
+// const DIR_TARGET = "asset-web";
+
+// // 🔑 TOKEN DIRECTORY SHARE (/d/{token})
+// const PUBLIC_SHARE_TOKEN = process.env.SEAFILE_PUBLIC_SHARE_TOKEN!;
+
+// /**
+//  * Ambil list file dari repo (butuh token sekali)
+//  */
+// async function getDirItems(): Promise<DirItem[]> {
+//   const token = await getValidAuthToken();
+
+//   // Validasi bahwa semua variabel lingkungan telah diatur
+//   if (!BASE_URL) {
+//     throw new Error('SEAFILE_BASE_URL environment variable is not set');
+//   }
+
+//   if (!REPO_ID) {
+//     throw new Error('SEAFILE_REPO_ID environment variable is not set');
+//   }
+
+//   // Bangun URL dan pastikan valid
+//   const url = `${BASE_URL}/api2/repos/${REPO_ID}/dir/?p=/${DIR_TARGET}`;
+
+//   try {
+//     new URL(url); // Ini akan melempar error jika URL tidak valid
+//   } catch (error) {
+//     throw new Error(`Invalid URL constructed: ${url}. Error: ${error}`);
+//   }
+
+//   const res = await fetch(url, {
+//     headers: {
+//       Authorization: `Token ${token}`,
+//     },
+//   });
+
+//   if (!res.ok) {
+//     const text = await res.text();
+//     throw new Error(`Failed get dir items: ${text}`);
+//   }
+
+//   return res.json();
+// }
+
+// /**
+//  * Build PUBLIC CDN URL
+//  */
+// function buildPublicCdnUrl(fileName: string) {
+//   return `${BASE_URL}/d/${PUBLIC_SHARE_TOKEN}/files/?p=${encodeURIComponent(
+//     fileName,
+//   )}&raw=1`;
+// }
+
+// /**
+//  * Ambil semua PUBLIC CDN URL
+//  */
+// export async function getAllPublicCdnUrls(): Promise<CdnItem[]> {
+//   const items = await getDirItems();
+
+//   return items
+//     .filter((item) => item.type === "file")
+//     .map((file) => {
+//       const path = `${DIR_TARGET}/${file.name}`;
+//       return {
+//         name: file.name,
+//         path,
+//         cdnUrl: buildPublicCdnUrl(file.name),
+//       };
+//     });
+// }
+
+// /**
+//  * Run langsung (optional)
+//  */
+// if (import.meta.main) {
+//   const data = await getAllPublicCdnUrls();
+//   console.log(data);
+// }
+
+
+
+// import { getValidAuthToken } from "../../src/lib/seafile-auth-service";
+
+// type CdnItem = {
+//   name: string;
+//   path: string;
+//   cdnUrl: string;
+// };
+
+// type DirItem = {
+//   type: "file" | "dir";
+//   name: string;
+// };
+
+// // ✅ PAKAI ENV YANG BENAR
+// const BASE_URL = process.env.SEAFILE_URL!;
+// const REPO_ID = process.env.SEAFILE_REPO_ID!;
+// const PUBLIC_SHARE_TOKEN = process.env.SEAFILE_PUBLIC_SHARE_TOKEN!;
+
+// // folder yang dishare (RELATIVE, TANPA slash depan)
+// const DIR_TARGET = "asset-web";
+
+// /**
+//  * Ambil list file dari repo (token dipakai SEKALI)
+//  */
+// async function getDirItems(): Promise<DirItem[]> {
+//   if (!BASE_URL || !REPO_ID) {
+//     throw new Error("SEAFILE env not configured correctly");
+//   }
+
+//   const token = await getValidAuthToken();
+
+//   const url = `${BASE_URL}/api2/repos/${REPO_ID}/dir/?p=/${DIR_TARGET}`;
+
+//   const res = await fetch(url, {
+//     headers: {
+//       Authorization: `Token ${token}`,
+//     },
+//   });
+
+//   if (!res.ok) {
+//     const text = await res.text();
+//     throw new Error(`Failed get dir items: ${text}`);
+//   }
+
+//   return res.json();
+// }
+
+// /**
+//  * Build PUBLIC CDN URL (DIRECTORY SHARE)
+//  */
+// function buildPublicCdnUrl(fileName: string) {
+//   const fullPath = `/${DIR_TARGET}/${fileName}`;
+//   return `${BASE_URL}/d/${PUBLIC_SHARE_TOKEN}/files/?p=${encodeURIComponent(
+//     fullPath,
+//   )}&raw=1`;
+// }
+
+// /**
+//  * Ambil semua PUBLIC CDN URL
+//  */
+// export async function getAllPublicCdnUrls(): Promise<CdnItem[]> {
+//   const items = await getDirItems();
+
+//   return items
+//     .filter((item) => item.type === "file")
+//     .map((file) => ({
+//       name: file.name,
+//       path: `${DIR_TARGET}/${file.name}`,
+//       cdnUrl: buildPublicCdnUrl(file.name),
+//     }));
+// }
+
+// /**
+//  * Run langsung
+//  */
+// if (import.meta.main) {
+//   const data = await getAllPublicCdnUrls();
+//   console.log(data);
+// }
+
+
+import { getValidAuthToken } from "../../src/lib/seafile-auth-service";
+type CdnItem = {
+  name: string;
+  path: string;
+  cdnUrl: string;
+};
+type DirItem = {
+  type: "file" | "dir";
+  name: string;
+};
+const BASE_URL = "https://cld-dkr-makuro-seafile.wibudev.com";
+const REPO_ID = process.env.SEAFILE_REPO_ID!;
+// folder yang dishare (RELATIVE, tanpa slash depan)
+const DIR_TARGET = "asset-web";
+// 🔑 TOKEN DIRECTORY SHARE (/d/{token})
+const PUBLIC_SHARE_TOKEN = "3a9a9ecb5e244f4da8ae";
+/**
+ * Ambil list file dari repo (butuh token sekali)
+ */
+async function getDirItems(): Promise<DirItem[]> {
+  const token = await getValidAuthToken();
+  const res = await fetch(
+    `${BASE_URL}/api2/repos/${REPO_ID}/dir/?p=/${DIR_TARGET}`,
+    {
+      headers: {
+        Authorization: `Token ${token}`,
+      },
+    },
+  );
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`Failed get dir items: ${text}`);
+  }
+  return res.json();
+}
+/**
+ * Build PUBLIC CDN URL
+ */
+function buildPublicCdnUrl(fileName: string) {
+  return `${BASE_URL}/d/${PUBLIC_SHARE_TOKEN}/files/?p=${encodeURIComponent(
+    fileName,
+  )}&raw=1`;
+}
+/**
+ * Ambil semua PUBLIC CDN URL
+ */
+export async function getAllPublicCdnUrls(): Promise<CdnItem[]> {
+  const items = await getDirItems();
+  return items
+    .filter((item) => item.type === "file")
+    .map((file) => {
+    //   const path = `${DIR_TARGET}/${file.name}`;
+    const path = `/${file.name}`;
+      return {
+        name: file.name,
+        path,
+        cdnUrl: buildPublicCdnUrl(file.name),
+      };
+    });
+}
+/**
+ * Run langsung (optional)
+ */
+if (import.meta.main) {
+  const data = await getAllPublicCdnUrls();
+  console.log(data);
+}
+

prisma/lib/get_images.ts

@@ -1,3 +1,5 @@
+import { getValidAuthToken } from "../../src/lib/seafile-auth-service";
+
 type DirItem = {
   type: "file" | "dir";
   name: string;
@@ -5,7 +7,6 @@ type DirItem = {
   size?: number;
 };
 
-const TOKEN = process.env.SEAFILE_TOKEN!;
 const REPO_ID = process.env.SEAFILE_REPO_ID!;
 
 // ⛔ PENTING: RELATIVE PATH (tanpa slash depan)
@@ -13,11 +14,12 @@ const DIR_TARGET = "asset-web";
 
 const BASE_URL = process.env.SEAFILE_URL;
 
-const headers = {
-  Authorization: `Token ${TOKEN}`,
-};
-
 async function getDirItems(): Promise<DirItem[]> {
+  const token = await getValidAuthToken();
+  const headers = {
+    Authorization: `Token ${token}`,
+  };
+
   const res = await fetch(`${BASE_URL}/repos/${REPO_ID}/dir/?p=${DIR_TARGET}`, {
     headers,
   });
@@ -30,6 +32,11 @@ async function getDirItems(): Promise<DirItem[]> {
 }
 
 async function getDownloadUrl(filePath: string): Promise<string> {
+  const token = await getValidAuthToken();
+  const headers = {
+    Authorization: `Token ${token}`,
+  };
+
   const res = await fetch(
     `${BASE_URL}/repos/${REPO_ID}/file/?p=${encodeURIComponent(filePath)}&reuse=1`,
     { headers },

prisma/lib/get_shared_images.ts

@@ -0,0 +1,71 @@
+//ini code awal cari image by folder di seafile
+
+
+type CdnItem = {
+  name: string;
+  path: string;
+  cdnUrl: string;
+};
+
+const BASE_URL = "https://cld-dkr-makuro-seafile.wibudev.com";
+const SHARE_ID = "3325e9db2c504ebf9584";
+
+// https://cld-dkr-makuro-seafile.wibudev.com/d/3a9a9ecb5e244f4da8ae/
+// https://cld-dkr-makuro-seafile.wibudev.com/d/3a9a9ecb5e244f4da8ae/files/?p=-M_tICRVz6ZxOfvkuHQgU-mobile.webp&raw=1
+
+
+/**
+ * Build CDN URL langsung (tanpa API, tanpa token)
+ */
+export function buildCdnUrl(filePath: string) {
+  // filePath contoh: "banner/home.jpg"
+  return `${BASE_URL}/f/${SHARE_ID}/${filePath}?raw=1`;
+}
+
+/**
+ * Ambil daftar file dari PUBLIC SHARE (optional)
+ * Tidak pakai token
+ */
+async function getPublicDirItems(path = "/"): Promise<any[]> {
+  const res = await fetch(
+    `${BASE_URL}/api/v2.1/share-links/${SHARE_ID}/dir/?p=${encodeURIComponent(
+      path,
+    )}`,
+  );
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`Failed get public dir items: ${text}`);
+  }
+
+  return res.json();
+}
+
+/**
+ * Ambil semua CDN URL dari folder public share
+ */
+export async function getAllCdnUrls(
+  dirPath = "/",
+): Promise<CdnItem[]> {
+  const items = await getPublicDirItems(dirPath);
+
+  return items
+    .filter((item: any) => item.type === "file")
+    .map((file: any) => {
+      const filePath =
+        dirPath === "/"
+          ? file.name
+          : `${dirPath.replace(/\/$/, "")}/${file.name}`;
+
+      return {
+        name: file.name,
+        path: filePath,
+        cdnUrl: buildCdnUrl(filePath),
+      };
+    });
+}
+
+if(import.meta.main) {
+  const allCdnUrls = await getAllCdnUrls();
+  console.log(allCdnUrls);
+}

prisma/lib/get_sharef.ts

@@ -0,0 +1,33 @@
+const BASE_URL = "https://cld-dkr-makuro-seafile.wibudev.com";
+const ADMIN_TOKEN = process.env.SEAFILE_TOKEN!;
+const REPO_ID = process.env.SEAFILE_REPO_ID!;
+
+export async function createFileShareForFolder() {
+  const res = await fetch(`${BASE_URL}/api/v2.1/share-links/`, {
+    method: "POST",
+    headers: {
+      Authorization: `Token ${ADMIN_TOKEN}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      repo_id: REPO_ID,
+      path: "/asset-web", // FOLDER
+      permission: "r",
+    }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const data = await res.json();
+  console.log("FILE SHARE LINK:", data);
+
+  // data.link -> https://domain/f/XXXX/
+  // data.token / data.id (tergantung versi)
+}
+
+if (import.meta.main) {
+  await createFileShareForFolder();
+}

prisma/migrations/20260225082505_deploy/migration.sql

@@ -0,0 +1,170 @@
+/*
+  Warnings:
+
+  - You are about to alter the column `nama` on the `KategoriPotensi` table. The data in that column could be lost. The data in that column will be cast from `Text` to `VarChar(100)`.
+  - You are about to alter the column `name` on the `PotensiDesa` table. The data in that column could be lost. The data in that column will be cast from `Text` to `VarChar(255)`.
+  - You are about to alter the column `kategoriId` on the `PotensiDesa` table. The data in that column could be lost. The data in that column will be cast from `Text` to `VarChar(36)`.
+  - A unique constraint covering the columns `[nama]` on the table `KategoriPotensi` will be added. If there are existing duplicate values, this will fail.
+  - A unique constraint covering the columns `[name]` on the table `PotensiDesa` will be added. If there are existing duplicate values, this will fail.
+  - Made the column `kategoriId` on table `PotensiDesa` required. This step will fail if there are existing NULL values in that column.
+
+*/
+-- DropForeignKey
+ALTER TABLE "DataPerpustakaan" DROP CONSTRAINT "DataPerpustakaan_imageId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "DesaDigital" DROP CONSTRAINT "DesaDigital_imageId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "InfoTekno" DROP CONSTRAINT "InfoTekno_imageId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "KegiatanDesa" DROP CONSTRAINT "KegiatanDesa_imageId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "PengaduanMasyarakat" DROP CONSTRAINT "PengaduanMasyarakat_imageId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "PotensiDesa" DROP CONSTRAINT "PotensiDesa_kategoriId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "ProfileDesaImage" DROP CONSTRAINT "ProfileDesaImage_imageId_fkey";
+
+-- AlterTable
+ALTER TABLE "CaraMemperolehInformasi" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "CaraMemperolehSalinanInformasi" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "DaftarInformasiPublik" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "DasarHukumPPID" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "DataPerpustakaan" ALTER COLUMN "imageId" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "DesaDigital" ALTER COLUMN "imageId" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "FormulirPermohonanKeberatan" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "InfoTekno" ALTER COLUMN "imageId" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "JenisInformasiDiminta" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "JenisKelaminResponden" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "KategoriPotensi" ALTER COLUMN "nama" SET DATA TYPE VARCHAR(100),
+ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "KategoriPrestasiDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "KegiatanDesa" ALTER COLUMN "imageId" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "LambangDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "MaskotDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "PegawaiPPID" ADD COLUMN     "deletedAt" TIMESTAMP(3);
+
+-- AlterTable
+ALTER TABLE "PengaduanMasyarakat" ALTER COLUMN "imageId" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "PermohonanInformasiPublik" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "PilihanRatingResponden" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "PosisiOrganisasiPPID" ADD COLUMN     "deletedAt" TIMESTAMP(3);
+
+-- AlterTable
+ALTER TABLE "PotensiDesa" ALTER COLUMN "name" SET DATA TYPE VARCHAR(255),
+ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT,
+ALTER COLUMN "kategoriId" SET NOT NULL,
+ALTER COLUMN "kategoriId" SET DATA TYPE VARCHAR(36);
+
+-- AlterTable
+ALTER TABLE "PrestasiDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "ProfileDesaImage" ALTER COLUMN "imageId" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "ProfilePPID" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "Responden" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "SejarahDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "UmurResponden" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "VisiMisiDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "VisiMisiPPID" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "KategoriPotensi_nama_key" ON "KategoriPotensi"("nama");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PotensiDesa_name_key" ON "PotensiDesa"("name");
+
+-- AddForeignKey
+ALTER TABLE "ProfileDesaImage" ADD CONSTRAINT "ProfileDesaImage_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PotensiDesa" ADD CONSTRAINT "PotensiDesa_kategoriId_fkey" FOREIGN KEY ("kategoriId") REFERENCES "KategoriPotensi"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "DesaDigital" ADD CONSTRAINT "DesaDigital_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "InfoTekno" ADD CONSTRAINT "InfoTekno_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PengaduanMasyarakat" ADD CONSTRAINT "PengaduanMasyarakat_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "KegiatanDesa" ADD CONSTRAINT "KegiatanDesa_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "DataPerpustakaan" ADD CONSTRAINT "DataPerpustakaan_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/migrations/migration_lock.toml

@@ -1,3 +1,3 @@
 # Please do not edit this file manually
 # It should be added in your version-control system (e.g., Git)
-provider = "postgresql"
+provider = "postgresql"

prisma/schema.prisma

@@ -60,8 +60,9 @@ model FileStorage {
   deletedAt                      DateTime?
   isActive                       Boolean                    @default(true)
   link                           String
-  category                       String // "image" / "document" / "other"
-  Berita                         Berita[]
+  category                       String // "image" / "document" / "audio" / "other"
+  Berita                         Berita[]                 @relation("BeritaFeaturedImage")
+  BeritaImages                   Berita[]                 @relation("BeritaImages")
   PotensiDesa                    PotensiDesa[]
   Posyandu                       Posyandu[]
   StrukturPPID                   StrukturPPID[]
@@ -102,6 +103,9 @@ model FileStorage {
 
   ArtikelKesehatan ArtikelKesehatan[]
   StrukturBumDes   StrukturBumDes[]
+  
+  MusikDesaAudio   MusikDesa[] @relation("MusikAudioFile")
+  MusikDesaCover   MusikDesa[] @relation("MusikCoverImage")
 }
 
 //========================================= MENU LANDING PAGE ========================================= //
@@ -205,16 +209,22 @@ model APBDesItem {
   kode       String // contoh: "4", "4.1", "4.1.2"
   uraian     String // nama item, contoh: "Pendapatan Asli Desa", "Hasil Usaha"
   anggaran   Float // dalam satuan Rupiah (bisa DECIMAL di DB, tapi Float umum di TS/JS)
-  realisasi  Float
-  selisih    Float // realisasi - anggaran
-  persentase Float
-  tipe       String? // (realisasi / anggaran) * 100
+  tipe       String? // "pendapatan" | "belanja" | "pembiayaan" | null
   level      Int // 1 = kelompok utama, 2 = sub-kelompok, 3 = detail
   parentId   String? // untuk relasi hierarki
   parent     APBDesItem?  @relation("APBDesItemParent", fields: [parentId], references: [id])
   children   APBDesItem[] @relation("APBDesItemParent")
   apbdesId   String
   apbdes     APBDes       @relation(fields: [apbdesId], references: [id])
+  
+  // Field kalkulasi (auto-calculated dari realisasi items)
+  totalRealisasi Float      @default(0) // Sum dari semua realisasi
+  selisih        Float      @default(0) // totalRealisasi - anggaran
+  persentase     Float      @default(0) // (totalRealisasi / anggaran) * 100
+  
+  // Relasi ke realisasi items
+  realisasiItems RealisasiItem[]
+  
   createdAt  DateTime     @default(now())
   updatedAt  DateTime     @updatedAt
   deletedAt  DateTime?
@@ -225,6 +235,28 @@ model APBDesItem {
   @@index([apbdesId])
 }
 
+// Model baru untuk multiple realisasi per item
+model RealisasiItem {
+  id           String     @id @default(cuid())
+  kode         String?     // Kode realisasi, mirip dengan APBDesItem
+  apbdesItemId String
+  apbdesItem   APBDesItem @relation(fields: [apbdesItemId], references: [id], onDelete: Cascade)
+
+  jumlah       Float      // Jumlah realisasi dalam Rupiah
+  tanggal      DateTime   @db.Date // Tanggal realisasi
+  keterangan   String?    @db.Text // Keterangan tambahan (opsional)
+  buktiFileId  String?    // FileStorage ID untuk bukti/foto (opsional)
+
+  createdAt    DateTime   @default(now())
+  updatedAt    DateTime   @updatedAt
+  deletedAt    DateTime?
+  isActive     Boolean    @default(true)
+
+  @@index([kode])
+  @@index([apbdesItemId])
+  @@index([tanggal])
+}
+
 //========================================= PRESTASI DESA ========================================= //
 model PrestasiDesa {
   id         String               @id @default(cuid())
@@ -236,7 +268,7 @@ model PrestasiDesa {
   imageId    String?
   createdAt  DateTime             @default(now())
   updatedAt  DateTime             @updatedAt
-  deletedAt  DateTime             @default(now())
+  deletedAt  DateTime?
   isActive   Boolean              @default(true)
 }
 
@@ -245,7 +277,7 @@ model KategoriPrestasiDesa {
   name         String         @unique
   createdAt    DateTime       @default(now())
   updatedAt    DateTime       @updatedAt
-  deletedAt    DateTime       @default(now())
+  deletedAt    DateTime?
   isActive     Boolean        @default(true)
   PrestasiDesa PrestasiDesa[]
 }
@@ -263,7 +295,7 @@ model Responden {
   kelompokUmurId String
   createdAt      DateTime               @default(now())
   updatedAt      DateTime               @updatedAt
-  deletedAt      DateTime               @default(now())
+  deletedAt  DateTime?
   isActive       Boolean                @default(true)
 }
 
@@ -272,7 +304,7 @@ model JenisKelaminResponden {
   name      String      @unique
   createdAt DateTime    @default(now())
   updatedAt DateTime    @updatedAt
-  deletedAt DateTime    @default(now())
+  deletedAt  DateTime?
   isActive  Boolean     @default(true)
   Responden Responden[]
 }
@@ -282,7 +314,7 @@ model PilihanRatingResponden {
   name      String      @unique
   createdAt DateTime    @default(now())
   updatedAt DateTime    @updatedAt
-  deletedAt DateTime    @default(now())
+  deletedAt  DateTime?
   isActive  Boolean     @default(true)
   Responden Responden[]
 }
@@ -292,7 +324,7 @@ model UmurResponden {
   name      String      @unique
   createdAt DateTime    @default(now())
   updatedAt DateTime    @updatedAt
-  deletedAt DateTime    @default(now())
+  deletedAt  DateTime?
   isActive  Boolean     @default(true)
   Responden Responden[]
 }
@@ -326,6 +358,7 @@ model PosisiOrganisasiPPID {
   isActive               Boolean                  @default(true)
   createdAt              DateTime                 @default(now())
   updatedAt              DateTime                 @updatedAt
+  deletedAt              DateTime?
   parent                 PosisiOrganisasiPPID?    @relation("Parent", fields: [parentId], references: [id])
   children               PosisiOrganisasiPPID[]   @relation("Parent")
   StrukturOrganisasiPPID StrukturOrganisasiPPID[]
@@ -345,6 +378,7 @@ model PegawaiPPID {
   isActive               Boolean                  @default(true)
   createdAt              DateTime                 @default(now())
   updatedAt              DateTime                 @updatedAt
+  deletedAt              DateTime?
   posisi                 PosisiOrganisasiPPID     @relation(fields: [posisiId], references: [id])
   strukturOrganisasi     StrukturPPID[] // Relasi balik
   StrukturOrganisasiPPID StrukturOrganisasiPPID[]
@@ -370,7 +404,7 @@ model VisiMisiPPID {
   misi      String   @db.Text
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime?
   isActive  Boolean  @default(true)
 }
 
@@ -381,7 +415,7 @@ model DasarHukumPPID {
   content   String   @db.Text
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime?
   isActive  Boolean  @default(true)
 }
 
@@ -398,7 +432,7 @@ model ProfilePPID {
   imageId    String?
   createdAt  DateTime     @default(now())
   updatedAt  DateTime     @updatedAt
-  deletedAt  DateTime     @default(now())
+  deletedAt  DateTime?
   isActive   Boolean      @default(true)
 }
 
@@ -410,7 +444,7 @@ model DaftarInformasiPublik {
   tanggal        DateTime @db.Date
   createdAt      DateTime @default(now())
   updatedAt      DateTime @updatedAt
-  deletedAt      DateTime @default(now())
+  deletedAt      DateTime?
   isActive       Boolean  @default(true)
 }
 
@@ -431,7 +465,7 @@ model PermohonanInformasiPublik {
   caraMemperolehSalinanInformasiId String?
   createdAt                        DateTime                        @default(now())
   updatedAt                        DateTime                        @updatedAt
-  deletedAt                        DateTime                        @default(now())
+  deletedAt                        DateTime?
   isActive                         Boolean                         @default(true)
 }
 
@@ -440,7 +474,7 @@ model JenisInformasiDiminta {
   name                      String                      @unique
   createdAt                 DateTime                    @default(now())
   updatedAt                 DateTime                    @updatedAt
-  deletedAt                 DateTime                    @default(now())
+  deletedAt                 DateTime?
   isActive                  Boolean                     @default(true)
   PermohonanInformasiPublik PermohonanInformasiPublik[]
 }
@@ -450,7 +484,7 @@ model CaraMemperolehInformasi {
   name                      String                      @unique
   createdAt                 DateTime                    @default(now())
   updatedAt                 DateTime                    @updatedAt
-  deletedAt                 DateTime                    @default(now())
+  deletedAt                 DateTime?
   isActive                  Boolean                     @default(true)
   PermohonanInformasiPublik PermohonanInformasiPublik[]
 }
@@ -460,7 +494,7 @@ model CaraMemperolehSalinanInformasi {
   name                      String                      @unique
   createdAt                 DateTime                    @default(now())
   updatedAt                 DateTime                    @updatedAt
-  deletedAt                 DateTime                    @default(now())
+  deletedAt                 DateTime?
   isActive                  Boolean                     @default(true)
   PermohonanInformasiPublik PermohonanInformasiPublik[]
 }
@@ -474,7 +508,7 @@ model FormulirPermohonanKeberatan {
   alasan    String
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime?
   isActive  Boolean  @default(true)
 }
 
@@ -531,7 +565,7 @@ model SejarahDesa {
   deskripsi String   @db.Text
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime?
   isActive  Boolean  @default(true)
 }
 
@@ -541,7 +575,7 @@ model VisiMisiDesa {
   misi      String   @db.Text
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime?
   isActive  Boolean  @default(true)
 }
 
@@ -551,7 +585,7 @@ model LambangDesa {
   deskripsi String   @db.Text
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime?
   isActive  Boolean  @default(true)
 }
 
@@ -562,7 +596,7 @@ model MaskotDesa {
   images    ProfileDesaImage[]
   createdAt DateTime           @default(now())
   updatedAt DateTime           @updatedAt
-  deletedAt DateTime           @default(now())
+  deletedAt DateTime?
   isActive  Boolean            @default(true)
 }
 
@@ -607,15 +641,19 @@ model Berita {
   id               String          @id @default(cuid())
   judul            String
   deskripsi        String
-  image            FileStorage?    @relation(fields: [imageId], references: [id])
+  image            FileStorage?    @relation("BeritaFeaturedImage", fields: [imageId], references: [id])
   imageId          String?
+  images           FileStorage[]   @relation("BeritaImages")
   content          String          @db.Text
+  linkVideo        String?         @db.VarChar(500)
   createdAt        DateTime        @default(now())
   updatedAt        DateTime        @updatedAt
   deletedAt        DateTime        @default(now())
   isActive         Boolean         @default(true)
   kategoriBerita   KategoriBerita? @relation(fields: [kategoriBeritaId], references: [id])
   kategoriBeritaId String?
+
+  @@index([kategoriBeritaId])
 }
 
 model KategoriBerita {
@@ -631,25 +669,25 @@ model KategoriBerita {
 // ========================================= POTENSI DESA ========================================= //
 model PotensiDesa {
   id         String           @id @default(cuid())
-  name       String
-  deskripsi  String
+  name       String           @unique @db.VarChar(255)
+  deskripsi  String           @db.Text
   kategori   KategoriPotensi? @relation(fields: [kategoriId], references: [id])
-  kategoriId String?
+  kategoriId String           @db.VarChar(36)
   image      FileStorage?     @relation(fields: [imageId], references: [id])
   imageId    String?
   content    String           @db.Text
   createdAt  DateTime         @default(now())
   updatedAt  DateTime         @updatedAt
-  deletedAt  DateTime         @default(now())
+  deletedAt  DateTime?
   isActive   Boolean          @default(true)
 }
 
 model KategoriPotensi {
   id          String        @id @default(cuid())
-  nama        String
+  nama        String        @unique @db.VarChar(100)
   createdAt   DateTime      @default(now())
   updatedAt   DateTime      @updatedAt
-  deletedAt   DateTime      @default(now())
+  deletedAt   DateTime?
   isActive    Boolean       @default(true)
   PotensiDesa PotensiDesa[]
 }
@@ -1659,8 +1697,8 @@ model DesaDigital {
   id        String      @id @default(cuid())
   name      String
   deskripsi String      @db.Text
-  image     FileStorage @relation(fields: [imageId], references: [id])
-  imageId   String
+  image     FileStorage? @relation(fields: [imageId], references: [id])
+  imageId   String?
   createdAt DateTime    @default(now())
   updatedAt DateTime    @updatedAt
   deletedAt DateTime    @default(now())
@@ -1766,8 +1804,8 @@ model PengaduanMasyarakat {
   nik                String
   judulPengaduan     String
   lokasiKejadian     String
-  image              FileStorage    @relation(fields: [imageId], references: [id])
-  imageId            String
+  image              FileStorage?    @relation(fields: [imageId], references: [id])
+  imageId            String?
   deskripsiPengaduan String         @db.Text
   jenisPengaduan     JenisPengaduan @relation(fields: [jenisPengaduanId], references: [id])
   jenisPengaduanId   String
@@ -1848,8 +1886,8 @@ model KegiatanDesa {
   tanggal            DateTime
   lokasi             String
   partisipan         Int
-  image              FileStorage      @relation(fields: [imageId], references: [id])
-  imageId            String
+  image              FileStorage?      @relation(fields: [imageId], references: [id])
+  imageId            String?
   createdAt          DateTime         @default(now())
   updatedAt          DateTime         @updatedAt
   deletedAt          DateTime         @default(now())
@@ -2133,8 +2171,8 @@ model DataPerpustakaan {
   deskripsi  String       @db.Text
   kategori   KategoriBuku @relation(fields: [kategoriId], references: [id])
   kategoriId String
-  image      FileStorage  @relation(fields: [imageId], references: [id])
-  imageId    String
+  image      FileStorage?  @relation(fields: [imageId], references: [id])
+  imageId    String?
   createdAt  DateTime     @default(now())
   updatedAt  DateTime     @updatedAt
   deletedAt  DateTime     @default(now())
@@ -2261,3 +2299,25 @@ model UserMenuAccess {
 
   @@unique([userId, menuId]) // Satu user tidak bisa punya akses menu yang sama dua kali
 }
+
+// ========================================= MUSIK DESA ========================================= //
+model MusikDesa {
+  id          String       @id @default(cuid())
+  judul       String       @db.VarChar(255)
+  artis       String       @db.VarChar(255)
+  deskripsi   String?      @db.Text
+  durasi      String       @db.VarChar(20) // format: "MM:SS"
+  audioFile   FileStorage? @relation("MusikAudioFile", fields: [audioFileId], references: [id])
+  audioFileId String?
+  coverImage  FileStorage? @relation("MusikCoverImage", fields: [coverImageId], references: [id])
+  coverImageId String?
+  genre       String?      @db.VarChar(100)
+  tahunRilis  Int?
+  createdAt   DateTime     @default(now())
+  updatedAt   DateTime     @updatedAt
+  deletedAt   DateTime?
+  isActive    Boolean      @default(true)
+
+  @@index([judul])
+  @@index([artis])
+}

prisma/seed.ts

@@ -53,21 +53,24 @@ import { seedLayananOnlineDesa } from "./_seeder_list/inovasi/seed_layanan_onlin
 import { seedProgramKreatifDesa } from "./_seeder_list/inovasi/seed_program_kreatif_desa";
 import { seedKolaborasiInovasi } from "./_seeder_list/inovasi/seed_kolaborasi_inovasi";
 import { seedInfoTeknologi } from "./_seeder_list/inovasi/seed_info_teknologi";
+import { seedPengelolaanSampah } from "./_seeder_list/lingkungan/seed_pengelolaan_sampah";
+import { seedProgramPenghijauan } from "./_seeder_list/lingkungan/seed_program_penghijauan";
+import { seedDataLingkunganDesa } from "./_seeder_list/lingkungan/seed_data_lingkungan_desa";
+import { seedDataGotongRoyong } from "./_seeder_list/lingkungan/seed_data_gotong_royong";
+import { seedEdukasiLingkungan } from "./_seeder_list/lingkungan/seed_edukasi_lingkungan";
+import { seedKonservasiAdatBali } from "./_seeder_list/lingkungan/seed_konservasi_adat_bali";
+import { seedInfoSekolah } from "./_seeder_list/pendidikan/seed_info_sekolah";
+import { seedInfoProgramPendidikan } from "./_seeder_list/pendidikan/seed_info_program_pendidikan";
+import { seedBimbinganBelajar } from "./_seeder_list/pendidikan/seed_bimbingan_belajar";
+import { seedDataPendidikan } from "./_seeder_list/pendidikan/seed_data_pendidikan";
+import { seedPendidikanNonFormal } from "./_seeder_list/pendidikan/seed_pendidikan_non_formal";
+import { seedDataPerpustakaan } from "./_seeder_list/pendidikan/seed_data_perpustakaan";
+import { seedProfilPpd } from "./_seeder_list/ppid/profil-ppid/seed_profil_ppd";
 
 (async () => {
-  const totalFiles = await prisma.fileStorage.count();
-
-  const hasImageAsset = await prisma.fileStorage.findFirst({
-    where: { category: "image" },
-    select: { id: true },
-  });
-
-  if (totalFiles === 0 || !hasImageAsset) {
-    console.log("📂 fileStorage not ready, seeding assets...");
-    await seedAssets();
-  } else {
-    console.log("ℹ️ fileStorage already initialized, skipping asset seed");
-  }
+  // Always run seedAssets to handle new images without duplication
+  console.log("📂 Checking for new assets to seed...");
+  await seedAssets();
 
   // // =========== FILE STORAGE ===========
 
@@ -177,6 +180,9 @@ import { seedInfoTeknologi } from "./_seeder_list/inovasi/seed_info_teknologi";
 
   // // =========== MENU PPID ===========
 
+  // // =========== SUBMENU PROFIL PPID ===========
+  await seedProfilPpd();
+
   // // =========== SUBMENU STRUKTUR PPID ===========
   await seedPegawaiPpid();
 
@@ -279,7 +285,7 @@ import { seedInfoTeknologi } from "./_seeder_list/inovasi/seed_info_teknologi";
   await seedProgramKemiskinan();
 
   // // ==================== SUBMENU SEKTOR UNGGULAN DESA =============
- await seedSektorUnggulanDesa();
+  await seedSektorUnggulanDesa();
 
   // // ==================== SUBMENU DEMOGRAFI PEKERJAAN =============
   await seedDemografiPekerjaan();
@@ -303,554 +309,41 @@ import { seedInfoTeknologi } from "./_seeder_list/inovasi/seed_info_teknologi";
 
   // // ====================== MENU LINGKUNGAN ==========================
   // // ==================== SUBMENU PENGELOLAAN SAMPAH ==========
-  // console.log("🔄 Seeding Pengelolaan Sampah...");
-  // for (const p of pengelolaanSampah) {
-  //   await prisma.pengelolaanSampah.upsert({
-  //     where: {
-  //       id: p.id,
-  //     },
-  //     update: {
-  //       name: p.name,
-  //       icon: p.icon,
-  //     },
-  //     create: {
-  //       id: p.id,
-  //       name: p.name,
-  //       icon: p.icon,
-  //     },
-  //   });
-  // }
-  // console.log("✅ Pengelolaan Sampah seeded successfully");
-
-  // console.log("🔄 Seeding Keterangan Bank Sampah...");
-  // for (const p of keteranganBankSampah) {
-  //   await prisma.keteranganBankSampahTerdekat.upsert({
-  //     where: {
-  //       id: p.id,
-  //     },
-  //     update: {
-  //       name: p.name,
-  //       alamat: p.alamat,
-  //       namaTempatMaps: p.namaTempatMaps,
-  //       linkPetunjukArah: p.linkPetunjukArah,
-  //       lat: p.lat,
-  //       lng: p.lng,
-  //     },
-  //     create: {
-  //       id: p.id,
-  //       name: p.name,
-  //       alamat: p.alamat,
-  //       namaTempatMaps: p.namaTempatMaps,
-  //       linkPetunjukArah: p.linkPetunjukArah,
-  //       lat: p.lat,
-  //       lng: p.lng,
-  //     },
-  //   });
-  // }
-  // console.log("✅ Keterangan Bank Sampah seeded successfully");
+  await seedPengelolaanSampah();
 
   // // ==================== SUBMENU PROGRAM PENGHIJAUAN ==========
-  // console.log("🔄 Seeding Program Penghijauan...");
-  // for (const p of programPenghijauan) {
-  //   await prisma.programPenghijauan.upsert({
-  //     where: {
-  //       id: p.id,
-  //     },
-  //     update: {
-  //       name: p.name,
-  //       judul: p.judul,
-  //       deskripsi: p.deskripsi,
-  //       icon: p.icon,
-  //     },
-  //     create: {
-  //       id: p.id,
-  //       name: p.name,
-  //       judul: p.judul,
-  //       deskripsi: p.deskripsi,
-  //       icon: p.icon,
-  //     },
-  //   });
-  // }
-  // console.log("✅ Program Penghijauan seeded successfully");
+  await seedProgramPenghijauan();
 
   // // ==================== SUBMENU DATA LINGKUNGAN DESA ==========
-  // console.log("🔄 Seeding Data Lingkungan Desa...");
-  // for (const p of dataLingkunganDesa) {
-  //   await prisma.dataLingkunganDesa.upsert({
-  //     where: {
-  //       id: p.id,
-  //     },
-  //     update: {
-  //       name: p.name,
-  //       jumlah: p.jumlah,
-  //       deskripsi: p.deskripsi,
-  //       icon: p.icon,
-  //     },
-  //     create: {
-  //       id: p.id,
-  //       name: p.name,
-  //       jumlah: p.jumlah,
-  //       deskripsi: p.deskripsi,
-  //       icon: p.icon,
-  //     },
-  //   });
-  // }
-  // console.log("✅ Data Lingkungan Desa seeded successfully");
+  await seedDataLingkunganDesa();
 
   // // =========== SUBMENU GOTONG ROYONG ===========
-  // console.log("🔄 Seeding Kategori Gotong Royong...");
-
-  // for (const k of kategoriGotongRoyong) {
-  //   await prisma.kategoriKegiatan.upsert({
-  //     where: {
-  //       id: k.id,
-  //     },
-  //     update: {
-  //       nama: k.nama,
-  //     },
-  //     create: {
-  //       id: k.id,
-  //       nama: k.nama,
-  //     },
-  //   });
-  // }
-
-  // console.log("✅ Kategori Gotong Royong seeded successfully");
-
-  // console.log("🔄 Seeding Gotong Royong...");
-
-  // for (const k of gotongRoyong) {
-  //   await prisma.kegiatanDesa.upsert({
-  //     where: {
-  //       id: k.id,
-  //     },
-  //     update: {
-  //       judul: k.judul,
-  //       deskripsiSingkat: k.deskripsiSingkat,
-  //       deskripsiLengkap: k.deskripsiLengkap,
-  //       tanggal: k.tanggal,
-  //       lokasi: k.lokasi,
-  //       partisipan: k.partisipan,
-  //       imageId: k.imageId,
-  //       kategoriKegiatanId: k.kategoriKegiatanId,
-  //     },
-  //     create: {
-  //       id: k.id,
-  //       judul: k.judul,
-  //       deskripsiSingkat: k.deskripsiSingkat,
-  //       deskripsiLengkap: k.deskripsiLengkap,
-  //       tanggal: k.tanggal,
-  //       lokasi: k.lokasi,
-  //       partisipan: k.partisipan,
-  //       imageId: k.imageId,
-  //       kategoriKegiatanId: k.kategoriKegiatanId,
-  //     },
-  //   });
-  // }
-
-  // console.log("✅ Kategori Gotong Royong seeded successfully");
+  await seedDataGotongRoyong();
 
   // // =========== SUBMENU EDUKASI LINGKUNGAN ===========
-
-  // for (const e of tujuanEdukasiLingkungan) {
-  //   await prisma.tujuanEdukasiLingkungan.upsert({
-  //     where: {
-  //       id: e.id,
-  //     },
-  //     update: {
-  //       judul: e.judul,
-  //       deskripsi: e.deskripsi,
-  //     },
-  //     create: {
-  //       id: e.id,
-  //       judul: e.judul,
-  //       deskripsi: e.deskripsi,
-  //     },
-  //   });
-  // }
-
-  // console.log("tujuan edukasi lingkungan success ...");
-
-  // for (const m of materiEdukasiLingkungan) {
-  //   await prisma.materiEdukasiLingkungan.upsert({
-  //     where: {
-  //       id: m.id,
-  //     },
-  //     update: {
-  //       judul: m.judul,
-  //       deskripsi: m.deskripsi,
-  //     },
-  //     create: {
-  //       id: m.id,
-  //       judul: m.judul,
-  //       deskripsi: m.deskripsi,
-  //     },
-  //   });
-  // }
-
-  // console.log("materi edukasi lingkungan success ...");
-
-  // for (const c of contohEdukasiLingkungan) {
-  //   await prisma.contohEdukasiLingkungan.upsert({
-  //     where: {
-  //       id: c.id,
-  //     },
-  //     update: {
-  //       judul: c.judul,
-  //       deskripsi: c.deskripsi,
-  //     },
-  //     create: {
-  //       id: c.id,
-  //       judul: c.judul,
-  //       deskripsi: c.deskripsi,
-  //     },
-  //   });
-  // }
-
-  // console.log("contoh edukasi lingkungan success ...");
+  await seedEdukasiLingkungan();
 
   // // =========== SUBMENU KONSERVASI ADAT BALI ===========
-
-  // for (const f of filosofiTriHita) {
-  //   await prisma.filosofiTriHita.upsert({
-  //     where: {
-  //       id: f.id,
-  //     },
-  //     update: {
-  //       judul: f.judul,
-  //       deskripsi: f.deskripsi,
-  //     },
-  //     create: {
-  //       id: f.id,
-  //       judul: f.judul,
-  //       deskripsi: f.deskripsi,
-  //     },
-  //   });
-  // }
-
-  // console.log("filosofi tri hita success ...");
-
-  // for (const b of bentukKonservasiBerdasarkanAdat) {
-  //   await prisma.bentukKonservasiBerdasarkanAdat.upsert({
-  //     where: {
-  //       id: b.id,
-  //     },
-  //     update: {
-  //       judul: b.judul,
-  //       deskripsi: b.deskripsi,
-  //     },
-  //     create: {
-  //       id: b.id,
-  //       judul: b.judul,
-  //       deskripsi: b.deskripsi,
-  //     },
-  //   });
-  // }
-
-  // console.log("bentuk konservasi berdasarkan adat success ...");
-
-  // for (const n of nilaiKonservasiAdat) {
-  //   await prisma.nilaiKonservasiAdat.upsert({
-  //     where: {
-  //       id: n.id,
-  //     },
-  //     update: {
-  //       judul: n.judul,
-  //       deskripsi: n.deskripsi,
-  //     },
-  //     create: {
-  //       id: n.id,
-  //       judul: n.judul,
-  //       deskripsi: n.deskripsi,
-  //     },
-  //   });
-  // }
-
-  // console.log("nilai konservasi adat success ...");
+  await seedKonservasiAdatBali();
 
   // // ====================== MENU PENDIDIKAN ==========================
   // // =========== SUBMENU INFO SEKOLAH =====================
-
-  // for (const j of jenjangPendidikan) {
-  //   await prisma.jenjangPendidikan.upsert({
-  //     where: {
-  //       id: j.id,
-  //     },
-  //     update: {
-  //       nama: j.nama,
-  //     },
-  //     create: {
-  //       id: j.id,
-  //       nama: j.nama,
-  //     },
-  //   });
-  // }
-
-  // console.log("✅ Jenjang Pendidikan seeded successfully");
-
-  // for (const j of lembagaPendidikan) {
-  //   await prisma.lembaga.upsert({
-  //     where: {
-  //       id: j.id,
-  //     },
-  //     update: {
-  //       nama: j.nama,
-  //       jenjangId: j.jenjangId,
-  //     },
-  //     create: {
-  //       id: j.id,
-  //       nama: j.nama,
-  //       jenjangId: j.jenjangId,
-  //     },
-  //   });
-  // }
-
-  // console.log("✅ Lembaga Pendidikan seeded successfully");
-
-  // for (const j of siswa) {
-  //   await prisma.siswa.upsert({
-  //     where: {
-  //       id: j.id,
-  //     },
-  //     update: {
-  //       nama: j.nama,
-  //       lembagaId: j.lembagaId,
-  //     },
-  //     create: {
-  //       id: j.id,
-  //       nama: j.nama,
-  //       lembagaId: j.lembagaId,
-  //     },
-  //   });
-  // }
-
-  // console.log("✅ siswa seeded successfully");
-
-  // for (const j of pengajar) {
-  //   await prisma.pengajar.upsert({
-  //     where: {
-  //       id: j.id,
-  //     },
-  //     update: {
-  //       nama: j.nama,
-  //       lembagaId: j.lembagaId,
-  //     },
-  //     create: {
-  //       id: j.id,
-  //       nama: j.nama,
-  //       lembagaId: j.lembagaId,
-  //     },
-  //   });
-  // }
-
-  // console.log("✅ pengajar seeded successfully");
+  await seedInfoSekolah();
 
   // // =========== SUBMENU PROGRAM PENDIDIKAN ANAK =====================
 
-  // for (const t of tujuanProgram) {
-  //   await prisma.tujuanProgram.upsert({
-  //     where: { id: t.id },
-  //     update: {
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //     create: {
-  //       id: t.id,
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //   });
-  // }
-  // console.log("✅ tujuan program seeded (editable later via UI)");
-
-  // for (const t of programUnggulan) {
-  //   await prisma.programUnggulan.upsert({
-  //     where: { id: t.id },
-  //     update: {
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //     create: {
-  //       id: t.id,
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //   });
-  // }
-  // console.log("✅ program unggulan seeded (editable later via UI)");
+  await seedInfoProgramPendidikan();
 
   // // =========== SUBMENU BIMBINGAN BELAJAR DESA =====================
-
-  // for (const t of tujuanBimbinganBelajarDesa) {
-  //   await prisma.tujuanBimbinganBelajarDesa.upsert({
-  //     where: { id: t.id },
-  //     update: {
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //     create: {
-  //       id: t.id,
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //   });
-  // }
-  // console.log(
-  //   "✅ tujuan bimbingan belajar desa seeded (editable later via UI)",
-  // );
-
-  // for (const t of lokasiJadwalBimbinganBelajarDesa) {
-  //   await prisma.lokasiJadwalBimbinganBelajarDesa.upsert({
-  //     where: { id: t.id },
-  //     update: {
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //     create: {
-  //       id: t.id,
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //   });
-  // }
-  // console.log(
-  //   "✅ lokasi jadwal bimbingan belajar desa seeded (editable later via UI)",
-  // );
-
-  // for (const t of fasilitasBimbinganBelajarDesa) {
-  //   await prisma.fasilitasBimbinganBelajarDesa.upsert({
-  //     where: { id: t.id },
-  //     update: {
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //     create: {
-  //       id: t.id,
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //   });
-  // }
-  // console.log(
-  //   "✅ fasilitas bimbingan belajar desa seeded (editable later via UI)",
-  // );
+  await seedBimbinganBelajar();
 
   // // =========== SUBMENU PENDIDIKAN NON FORMAL =====================
-
-  // for (const t of tujuanProgram2) {
-  //   await prisma.tujuanPendidikanNonFormal.upsert({
-  //     where: { id: t.id },
-  //     update: {
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //     create: {
-  //       id: t.id,
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //   });
-  // }
-  // console.log(
-  //   "✅ fasilitas bimbingan belajar desa seeded (editable later via UI)",
-  // );
-
-  // for (const t of tempatKegiatan) {
-  //   await prisma.tempatKegiatan.upsert({
-  //     where: { id: t.id },
-  //     update: {
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //     create: {
-  //       id: t.id,
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //   });
-  // }
-  // console.log(
-  //   "✅ fasilitas bimbingan belajar desa seeded (editable later via UI)",
-  // );
-
-  // for (const t of jenisProgramYangDiselenggarakan) {
-  //   await prisma.jenisProgramYangDiselenggarakan.upsert({
-  //     where: { id: t.id },
-  //     update: {
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //     create: {
-  //       id: t.id,
-  //       judul: t.judul,
-  //       deskripsi: t.deskripsi,
-  //     },
-  //   });
-  // }
-  // console.log(
-  //   "✅ fasilitas bimbingan belajar desa seeded (editable later via UI)",
-  // );
-
+  await seedPendidikanNonFormal();
   // // =========== SUBMENU PERPUSTAKAAN DIGITAL =====================
-  // console.log("🔄 Seeding Kategori Buku...");
-  // for (const k of kategoriBuku) {
-  //   await prisma.kategoriBuku.upsert({
-  //     where: {
-  //       id: k.id,
-  //     },
-  //     update: {
-  //       name: k.name,
-  //     },
-  //     create: {
-  //       id: k.id,
-  //       name: k.name,
-  //     },
-  //   });
-  // }
-  // console.log("✅ Kategori Buku seeded successfully");
-
-  // console.log("🔄 Seeding Data perpustakaan...");
-  // for (const k of dataPerpustakaan) {
-  //   await prisma.dataPerpustakaan.upsert({
-  //     where: {
-  //       id: k.id,
-  //     },
-  //     update: {
-  //       judul: k.judul,
-  //       deskripsi: k.deskripsi,
-  //       kategoriId: k.kategoriId,
-  //       imageId: k.imageId,
-  //     },
-  //     create: {
-  //       id: k.id,
-  //       judul: k.judul,
-  //       deskripsi: k.deskripsi,
-  //       kategoriId: k.kategoriId,
-  //       imageId: k.imageId,
-  //     },
-  //   });
-  // }
-  // console.log("✅ Data perpustakaan seeded successfully");
+  await seedDataPerpustakaan();
 
   // =========== SUBMENU DATA PENDIDIKAN =====================
-  console.log("🔄 Seeding Data pendidikan...");
-  for (const k of dataPendidikan) {
-    await prisma.dataPendidikan.upsert({
-      where: {
-        id: k.id,
-      },
-      update: {
-        name: k.name,
-        jumlah: k.jumlah,
-      },
-      create: {
-        id: k.id,
-        name: k.name,
-        jumlah: k.jumlah,
-      },
-    });
-  }
-  console.log("✅ Data pendidikan seeded successfully");
+  await seedDataPendidikan();
 })()
   .then(() => prisma.$disconnect())
   .catch((e) => {

prisma/seed_assets.ts

@@ -1,43 +1,49 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
 
-import { getAllDownloadUrls } from "./lib/get_images";
+import { getAllPublicCdnUrls } from "./lib/create_file_share_folder";
 
 export default async function seedAssets() {
-  const images = await getAllDownloadUrls();
+  const images = await getAllPublicCdnUrls();
 
   for (const img of images) {
     try {
-      await prisma.fileStorage.upsert({
-        where: {
-          id: img.name,
-        },
-        create: {
-          name: img.name,
-          category: "image",
-          mimeType: "image/webp",
-          link: img.downloadUrl,
-          path: "images",
-          realName: img.name,
-          isActive: true,
-        },
-        update: {},
+      // Check if the image already exists by name
+      const existingImage = await prisma.fileStorage.findUnique({
+        where: { name: img.name },
       });
-      console.log(img.name, ": success")
+
+      if (!existingImage) {
+        // Only create if it doesn't exist
+        await prisma.fileStorage.create({
+          data: {
+            name: img.name,
+            category: "image",
+            mimeType: "image/webp",
+            link: img.cdnUrl,
+            path: "images",
+            realName: img.name,
+            isActive: true,
+          },
+        });
+        console.log(`✅ Created new image: ${img.name}`);
+      } else {
+        console.log(`ℹ️ Image already exists, skipping: ${img.name}`);
+      }
     } catch (err) {
-      console.log("gagal seed assets", JSON.stringify(err));
+      console.log(`❌ Failed to seed asset ${img.name}:`, JSON.stringify(err));
     }
   }
 
   console.log("🎉 Image seeding completed");
 }
 
-// if (import.meta.main) {
-//   seedAssets()
-//     .then(() => {
-//       console.log("seed assets success");
-//     })
-//     .catch((err) => {
-//       console.log("gagal seed assets", JSON.stringify(err));
-//     });
-// }
+if (import.meta.main) {
+  seedAssets()
+    .then(() => {
+      console.log("seed assets success");
+    })
+    .catch((err) => {
+      console.log("gagal seed assets", JSON.stringify(err));
+    });
+}

public/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "Desa Darmasaba",
+  "short_name": "Darmasaba",
+  "description": "Website resmi Desa Darmasaba, Kabupaten Badung, Bali",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#1e40af",
+  "icons": [
+    {
+      "src": "/darmasaba-icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/darmasaba-icon.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

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

@@ -1,7 +1,11 @@
+'use client';
+
 import React from 'react';
-import { Grid, GridCol, Paper, TextInput, Title } from '@mantine/core';
+import { Grid, GridCol, Paper, TextInput } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
-import colors from '@/con/colors';
+import { useDarkMode } from '@/state/darkModeStore';
+import { themeTokens } from '@/utils/themeTokens';
+import { UnifiedTitle } from '@/components/admin/UnifiedTypography';
 
 type HeaderSearchProps = {
   title: string;
@@ -18,13 +22,16 @@ const HeaderSearch = ({
   value,
   onChange,
 }: HeaderSearchProps) => {
+  const { isDark } = useDarkMode();
+  const tokens = themeTokens(isDark);
+
   return (
     <Grid mb={10}>
       <GridCol span={{ base: 12, md: 9 }}>
-        <Title order={3}>{title}</Title>
+        <UnifiedTitle order={3}>{title}</UnifiedTitle>
       </GridCol>
       <GridCol span={{ base: 12, md: 3 }}>
-        <Paper radius="lg" bg={colors['white-1']}>
+        <Paper radius="lg" bg={tokens.colors.bg.surface}>
           <TextInput
             radius="lg"
             placeholder={placeholder}
@@ -32,6 +39,16 @@ const HeaderSearch = ({
             w="100%"
             value={value}
             onChange={onChange}
+            style={{
+              input: {
+                backgroundColor: tokens.colors.bg.surface,
+                color: tokens.colors.text.primary,
+                borderColor: tokens.colors.border.default,
+                '::placeholder': {
+                  color: tokens.colors.text.muted,
+                },
+              },
+            }}
           />
         </Paper>
       </GridCol>

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

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

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

@@ -1,9 +1,11 @@
 'use client'
-import colors from '@/con/colors';
-import { Grid, GridCol, Button, Text, Paper, TextInput } from '@mantine/core';
+import { Grid, GridCol, Button, Paper, TextInput } from '@mantine/core';
 import { IconCircleDashedPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React from 'react';
+import { useDarkMode } from '@/state/darkModeStore';
+import { themeTokens } from '@/utils/themeTokens';
+import { UnifiedText } from '@/components/admin/UnifiedTypography';
 
 type JudulListTabProps = {
   title: string;
@@ -14,17 +16,16 @@ type JudulListTabProps = {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-
-
-
 const JudulListTab = ({
   title = "",
   href = "#",
   placeholder = "pencarian",
   searchIcon = <IconSearch size={20} />,
   value,
-  onChange 
+  onChange
 }: JudulListTabProps) => {
+  const { isDark } = useDarkMode();
+  const tokens = themeTokens(isDark);
   const router = useRouter();
 
   const handleNavigate = () => {
@@ -34,10 +35,17 @@ const JudulListTab = ({
   return (
     <Grid mb={10}>
       <GridCol span={{ base: 12, md: 8 }}>
-        <Text fz={{ base: "md", md: "xl" }} fw={"bold"}>{title}</Text>
+        <UnifiedText 
+          size="body" 
+          weight="bold"
+          color="primary"
+          style={{ fontSize: 'clamp(1rem, 2vw, 1.25rem)' }}
+        >
+          {title}
+        </UnifiedText>
       </GridCol>
       <GridCol span={{ base: 9, md: 3 }} ta="right">
-        <Paper radius={"lg"} bg={colors['white-1']}>
+        <Paper radius={"lg"} bg={tokens.colors.bg.surface}>
           <TextInput
             radius="lg"
             placeholder={placeholder}
@@ -45,11 +53,29 @@ const JudulListTab = ({
             w="100%"
             value={value}
             onChange={onChange}
+            style={{
+              input: {
+                backgroundColor: tokens.colors.bg.surface,
+                color: tokens.colors.text.primary,
+                borderColor: tokens.colors.border.default,
+                '::placeholder': {
+                  color: tokens.colors.text.muted,
+                },
+              },
+            }}
           />
         </Paper>
       </GridCol>
       <GridCol span={{ base: 3, md: 1 }} ta="right">
-        <Button onClick={handleNavigate} bg={colors['blue-button']}>
+        <Button 
+          onClick={handleNavigate} 
+          bg={tokens.colors.primary}
+          style={{
+            background: `linear-gradient(135deg, ${tokens.colors.primary}, ${isDark ? '#60A5FA' : '#4facfe'})`,
+            color: tokens.colors.text.inverse,
+            boxShadow: isDark ? 'none' : `0 4px 15px rgba(79, 172, 254, 0.4)`,
+          }}
+        >
           <IconCircleDashedPlus size={25} />
         </Button>
       </GridCol>

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

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

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

@@ -0,0 +1,297 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+// 1. Schema validasi dengan Zod
+const templateForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  artis: z.string().min(3, "Artis minimal 3 karakter"),
+  deskripsi: z.string().optional(),
+  durasi: z.string().min(3, "Durasi minimal 3 karakter"),
+  audioFileId: z.string().nonempty(),
+  coverImageId: z.string().nonempty(),
+  genre: z.string().optional(),
+  tahunRilis: z.number().optional().or(z.literal(undefined)),
+});
+
+// 2. Default value form musik
+const defaultForm = {
+  judul: "",
+  artis: "",
+  deskripsi: "",
+  durasi: "",
+  audioFileId: "",
+  coverImageId: "",
+  genre: "",
+  tahunRilis: undefined as number | undefined,
+};
+
+// 3. Musik proxy
+const musik = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(musik.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        musik.create.loading = true;
+        const res = await ApiFetch.api.desa.musik["create"].post(
+          musik.create.form
+        );
+        if (res.status === 200) {
+          musik.findMany.load();
+          return toast.success("Musik berhasil disimpan!");
+        }
+
+        return toast.error("Gagal menyimpan musik");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        musik.create.loading = false;
+      }
+    },
+    resetForm() {
+      musik.create.form = { ...defaultForm };
+    },
+  },
+
+  findMany: {
+    data: null as
+      | Prisma.MusikDesaGetPayload<{
+          include: {
+            audioFile: true;
+            coverImage: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "", genre = "") => {
+      const startTime = Date.now();
+      musik.findMany.loading = true;
+      musik.findMany.page = page;
+      musik.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (genre) query.genre = genre;
+
+        const res = await ApiFetch.api.desa.musik["find-many"].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          musik.findMany.data = res.data.data ?? [];
+          musik.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          musik.findMany.data = [];
+          musik.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch musik paginated:", err);
+        musik.findMany.data = [];
+        musik.findMany.totalPages = 1;
+      } finally {
+        const elapsed = Date.now() - startTime;
+        const minDelay = 300;
+        const delay = elapsed < minDelay ? minDelay - elapsed : 0;
+
+        setTimeout(() => {
+          musik.findMany.loading = false;
+        }, delay);
+      }
+    },
+  },
+
+  findUnique: {
+    data: null as Prisma.MusikDesaGetPayload<{
+      include: {
+        audioFile: true;
+        coverImage: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        musik.findUnique.loading = true;
+        const res = await fetch(`/api/desa/musik/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          musik.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch musik:", res.statusText);
+          musik.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching musik:", error);
+        musik.findUnique.data = null;
+      } finally {
+        musik.findUnique.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        musik.delete.loading = true;
+
+        const response = await fetch(`/api/desa/musik/delete/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Musik berhasil dihapus");
+          await musik.findMany.load();
+        } else {
+          toast.error(result?.message || "Gagal menghapus musik");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus musik");
+      } finally {
+        musik.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/desa/musik/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            judul: data.judul,
+            artis: data.artis,
+            deskripsi: data.deskripsi || "",
+            durasi: data.durasi,
+            audioFileId: data.audioFileId || "",
+            coverImageId: data.coverImageId || "",
+            genre: data.genre || "",
+            tahunRilis: data.tahunRilis || undefined,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading musik:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateForm.safeParse(musik.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        musik.edit.loading = true;
+
+        const response = await fetch(`/api/desa/musik/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            judul: this.form.judul,
+            artis: this.form.artis,
+            deskripsi: this.form.deskripsi,
+            durasi: this.form.durasi,
+            audioFileId: this.form.audioFileId,
+            coverImageId: this.form.coverImageId,
+            genre: this.form.genre,
+            tahunRilis: this.form.tahunRilis,
+          }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Musik berhasil diupdate");
+          await musik.findMany.load();
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update musik");
+        }
+      } catch (error) {
+        console.error("Error updating musik:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update musik"
+        );
+        return false;
+      } finally {
+        musik.edit.loading = false;
+      }
+    },
+
+    reset() {
+      musik.edit.id = "";
+      musik.edit.form = { ...defaultForm };
+    },
+  },
+});
+
+// 4. State global
+const stateDashboardMusik = proxy({
+  musik,
+});
+
+export default stateDashboardMusik;

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

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

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

@@ -55,10 +55,15 @@ const programInovasi = proxy({
           programInovasi.findMany.load();
           return toast.success("Sukses menambahkan");
         }
-        console.log(res);
+        if (process.env.NODE_ENV === 'development') {
+          console.log(res);
+        }
         return toast.error("failed create");
       } catch (error) {
-        console.log((error as Error).message);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Create error:", error);
+        }
+        toast.error("Gagal menambahkan data");
       } finally {
         programInovasi.create.loading = false;
       }
@@ -91,13 +96,17 @@ const programInovasi = proxy({
           programInovasi.findMany.total = res.data.total || 0;
           programInovasi.findMany.totalPages = res.data.totalPages || 1;
         } else {
-          console.error("Failed to load pegawai:", res.data?.message);
+          if (process.env.NODE_ENV === 'development') {
+            console.error("Failed to load pegawai:", res.data?.message);
+          }
           programInovasi.findMany.data = [];
           programInovasi.findMany.total = 0;
           programInovasi.findMany.totalPages = 1;
         }
       } catch (error) {
-        console.error("Error loading pegawai:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error loading pegawai:", error);
+        }
         programInovasi.findMany.data = [];
         programInovasi.findMany.total = 0;
         programInovasi.findMany.totalPages = 1;
@@ -112,19 +121,25 @@ const programInovasi = proxy({
         image: true;
       };
     }> | null,
+    loading: false,
     async load(id: string) {
       try {
-        const res = await fetch(`/api/landingpage/programinovasi/${id}`);
-        if (res.ok) {
-          const data = await res.json();
-          programInovasi.findUnique.data = data.data ?? null;
+        programInovasi.findUnique.loading = true;
+        const res = await (ApiFetch.api.landingpage.programinovasi as any)[id].get();
+        if (res.data?.success) {
+          programInovasi.findUnique.data = res.data.data ?? null;
+          return res.data.data;
         } else {
-          console.error("Failed to fetch program inovasi:", res.statusText);
+          toast.error(res.data?.message || "Gagal memuat data program inovasi");
           programInovasi.findUnique.data = null;
+          return null;
         }
       } catch (error) {
         console.error("Error fetching program inovasi:", error);
         programInovasi.findUnique.data = null;
+        return null;
+      } finally {
+        programInovasi.findUnique.loading = false;
       }
     },
   },
@@ -135,27 +150,18 @@ const programInovasi = proxy({
 
       try {
         programInovasi.delete.loading = true;
+        const res = await (ApiFetch.api.landingpage.programinovasi as any)["del"][id].delete();
 
-        const response = await fetch(
-          `/api/landingpage/programinovasi/del/${id}`,
-          {
-            method: "DELETE",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
-
-        const result = await response.json();
-
-        if (response.ok && result?.success) {
-          toast.success(result.message || "Program inovasi berhasil dihapus");
-          await programInovasi.findMany.load(); // refresh list
+        if (res.data?.success) {
+          toast.success(res.data.message || "Program inovasi berhasil dihapus");
+          await programInovasi.findMany.load();
         } else {
-          toast.error(result?.message || "Gagal menghapus program inovasi");
+          toast.error(res.data?.message || "Gagal menghapus program inovasi");
         }
       } catch (error) {
-        console.error("Gagal delete:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Gagal delete:", error);
+        }
         toast.error("Terjadi kesalahan saat menghapus program inovasi");
       } finally {
         programInovasi.delete.loading = false;
@@ -174,20 +180,11 @@ const programInovasi = proxy({
       }
 
       try {
-        const response = await fetch(`/api/landingpage/programinovasi/${id}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
+        programInovasi.update.loading = true;
+        const res = await (ApiFetch.api.landingpage.programinovasi as any)[id].get();
 
-        const result = await response.json();
-
-        if (result?.success) {
-          const data = result.data;
+        if (res.data?.success) {
+          const data = res.data.data;
           this.id = data.id;
           this.form = {
             name: data.name,
@@ -197,13 +194,15 @@ const programInovasi = proxy({
           };
           return data;
         } else {
-          throw new Error(
-            result?.message || "Gagal mengambil data program inovasi"
-          );
+          toast.error(res.data?.message || "Gagal mengambil data program inovasi");
+          return null;
         }
       } catch (error) {
-        console.error((error as Error).message);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error loading program inovasi:", error);
+        }
         toast.error("Terjadi kesalahan saat mengambil data program inovasi");
+        return null;
       } finally {
         programInovasi.update.loading = false;
       }
@@ -221,41 +220,25 @@ const programInovasi = proxy({
 
       try {
         programInovasi.update.loading = true;
+        const res = await (ApiFetch.api.landingpage.programinovasi as any)[this.id].put({
+          name: this.form.name,
+          description: this.form.description,
+          imageId: this.form.imageId,
+          link: this.form.link,
+        });
 
-        const response = await fetch(
-          `/api/landingpage/programinovasi/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              name: this.form.name,
-              description: this.form.description,
-              imageId: this.form.imageId,
-              link: this.form.link,
-            }),
-          }
-        );
-
-        if (!response.ok) {
-          const errorData = await response.json().catch(() => ({}));
-          throw new Error(
-            errorData.message || `HTTP error! status: ${response.status}`
-          );
-        }
-
-        const result = await response.json();
-
-        if (result.success) {
+        if (res.data?.success) {
           toast.success("Berhasil update program inovasi");
-          await programInovasi.findMany.load(); // refresh list
+          await programInovasi.findMany.load();
           return true;
         } else {
-          throw new Error(result.message || "Gagal update program inovasi");
+          toast.error(res.data?.message || "Gagal update program inovasi");
+          return false;
         }
       } catch (error) {
-        console.error("Error updating program inovasi:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error updating program inovasi:", error);
+        }
         toast.error(
           error instanceof Error
             ? error.message
@@ -443,7 +426,7 @@ const pejabatDesa = proxy({
 const templateMediaSosial = z.object({
   name: z.string().min(3, "Nama minimal 3 karakter"),
   imageId: z.string().nullable().optional(),
-  iconUrl: z.string().min(3, "Icon URL minimal 3 karakter"),
+  iconUrl: z.string().optional(), // ✅ Optional - tidak selalu required
   icon: z.string().nullable().optional(),
 });
 
@@ -484,10 +467,15 @@ const mediaSosial = proxy({
           mediaSosial.findMany.load();
           return toast.success("Sukses menambahkan");
         }
-        console.log(res);
+        if (process.env.NODE_ENV === 'development') {
+          console.log(res);
+        }
         return toast.error("failed create");
       } catch (error) {
-        console.log((error as Error).message);
+        if (process.env.NODE_ENV === 'development') {
+          console.log((error as Error).message);
+        }
+        toast.error("Gagal menambahkan data");
       } finally {
         mediaSosial.create.loading = false;
       }
@@ -518,13 +506,17 @@ const mediaSosial = proxy({
           mediaSosial.findMany.total = res.data.total || 0;
           mediaSosial.findMany.totalPages = res.data.totalPages || 1;
         } else {
-          console.error("Failed to load media sosial:", res.data?.message);
+          if (process.env.NODE_ENV === 'development') {
+            console.error("Failed to load media sosial:", res.data?.message);
+          }
           mediaSosial.findMany.data = [];
           mediaSosial.findMany.total = 0;
           mediaSosial.findMany.totalPages = 1;
         }
       } catch (error) {
-        console.error("Error loading media sosial:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error loading media sosial:", error);
+        }
         mediaSosial.findMany.data = [];
         mediaSosial.findMany.total = 0;
         mediaSosial.findMany.totalPages = 1;
@@ -539,25 +531,32 @@ const mediaSosial = proxy({
         image: true;
       };
     }> | null,
+    loading: false,
     async load(id: string) {
       if (!id) {
         toast.warn("ID tidak valid");
         return null;
       }
 
-      mediaSosial.update.loading = true;
+      mediaSosial.findUnique.loading = true;
       try {
-        const res = await fetch(`/api/landingpage/mediasosial/${id}`);
-        if (res.ok) {
-          const data = await res.json();
-          mediaSosial.findUnique.data = data.data ?? null;
+        const res = await (ApiFetch.api.landingpage.mediasosial as any)[id].get();
+        if (res.data?.success) {
+          mediaSosial.findUnique.data = res.data.data ?? null;
+          return res.data.data;
         } else {
-          console.error("Failed to fetch media sosial:", res.statusText);
+          toast.error(res.data?.message || "Gagal memuat data media sosial");
           mediaSosial.findUnique.data = null;
+          return null;
         }
       } catch (error) {
-        console.error("Error fetching media sosial:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error fetching media sosial:", error);
+        }
         mediaSosial.findUnique.data = null;
+        return null;
+      } finally {
+        mediaSosial.findUnique.loading = false;
       }
     },
   },
@@ -568,24 +567,18 @@ const mediaSosial = proxy({
 
       try {
         mediaSosial.delete.loading = true;
+        const res = await (ApiFetch.api.landingpage.mediasosial as any)["del"][id].delete();
 
-        const response = await fetch(`/api/landingpage/mediasosial/del/${id}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-
-        const result = await response.json();
-
-        if (response.ok && result?.success) {
-          toast.success(result.message || "Media Sosial berhasil dihapus");
-          await mediaSosial.findMany.load(); // refresh list
+        if (res.data?.success) {
+          toast.success(res.data.message || "Media Sosial berhasil dihapus");
+          await mediaSosial.findMany.load();
         } else {
-          toast.error(result?.message || "Gagal menghapus media sosial");
+          toast.error(res.data?.message || "Gagal menghapus media sosial");
         }
       } catch (error) {
-        console.error("Gagal delete:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Gagal delete:", error);
+        }
         toast.error("Terjadi kesalahan saat menghapus media sosial");
       } finally {
         mediaSosial.delete.loading = false;
@@ -603,43 +596,32 @@ const mediaSosial = proxy({
         return null;
       }
 
-      mediaSosial.update.loading = true; // ✅ Tambahkan ini di awal
-
+      mediaSosial.update.loading = true;
       try {
-        const response = await fetch(`/api/landingpage/mediasosial/${id}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const res = await (ApiFetch.api.landingpage.mediasosial as any)[id].get();
 
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        const result = await response.json();
-
-        if (result?.success) {
-          const data = result.data;
+        if (res.data?.success) {
+          const data = res.data.data;
           this.id = data.id;
           this.form = {
             name: data.name || "",
             imageId: data.imageId || null,
             iconUrl: data.iconUrl || "",
             icon: data.icon || null,
-            
           };
           return data;
         } else {
-          throw new Error(
-            result?.message || "Gagal mengambil data media sosial"
-          );
+          toast.error(res.data?.message || "Gagal mengambil data media sosial");
+          return null;
         }
       } catch (error) {
-        console.error((error as Error).message);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error loading media sosial:", error);
+        }
         toast.error("Terjadi kesalahan saat mengambil data media sosial");
+        return null;
       } finally {
-        mediaSosial.update.loading = false; // ✅ Supaya berhenti loading walau error
+        mediaSosial.update.loading = false;
       }
     },
 
@@ -655,41 +637,25 @@ const mediaSosial = proxy({
 
       try {
         mediaSosial.update.loading = true;
+        const res = await (ApiFetch.api.landingpage.mediasosial as any)[this.id].put({
+          name: this.form.name,
+          imageId: this.form.imageId,
+          iconUrl: this.form.iconUrl,
+          icon: this.form.icon,
+        });
 
-        const response = await fetch(
-          `/api/landingpage/mediasosial/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              name: this.form.name,
-              imageId: this.form.imageId,
-              iconUrl: this.form.iconUrl,
-              icon: this.form.icon,
-            }),
-          }
-        );
-
-        if (!response.ok) {
-          const errorData = await response.json().catch(() => ({}));
-          throw new Error(
-            errorData.message || `HTTP error! status: ${response.status}`
-          );
-        }
-
-        const result = await response.json();
-
-        if (result.success) {
+        if (res.data?.success) {
           toast.success("Berhasil update media sosial");
-          await mediaSosial.findMany.load(); // refresh list
+          await mediaSosial.findMany.load();
           return true;
         } else {
-          throw new Error(result.message || "Gagal update media sosial");
+          toast.error(res.data?.message || "Gagal update media sosial");
+          return false;
         }
       } catch (error) {
-        console.error("Error updating media sosial:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error updating media sosial:", error);
+        }
         toast.error(
           error instanceof Error
             ? error.message

src/app/admin/(dashboard)/_state/ppid/profile_ppid/profile_PPID.ts

@@ -57,12 +57,24 @@ const stateProfilePPID = proxy({
         if (result.success) {
           this.data = result.data;
           return result.data;
-        } else throw new Error(result.message || "Gagal memuat data profile");
+        } else {
+          // Jika pesan adalah "Data tidak ditemukan" atau "Belum ada data profil PPID yang aktif",
+          // tetap simpan sebagai error tapi tidak perlu menampilkan toast error karena ini bukan error sebenarnya
+          if (result.message === "Data tidak ditemukan" || result.message === "Belum ada data profil PPID yang aktif") {
+            this.error = result.message;
+            return null;
+          } else {
+            throw new Error(result.message || "Gagal memuat data profile");
+          }
+        }
       } catch (err) {
         const msg = (err as Error).message;
         this.error = msg;
         console.error("Load profile error:", msg);
-        toast.error("Gagal memuat data profile");
+        // Hanya tampilkan toast error jika bukan karena data tidak ditemukan
+        if (msg !== "Data tidak ditemukan" && msg !== "Belum ada data profil PPID yang aktif") {
+          toast.error("Gagal memuat data profile");
+        }
         return null;
       } finally {
         this.loading = false;

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

@@ -33,6 +33,13 @@ function EditKategoriBerita() {
     name: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== ''
+    );
+  };
+
   useEffect(() => {
     const loadKategori = async () => {
       const id = params?.id as string;
@@ -72,6 +79,11 @@ function EditKategoriBerita() {
   };
 
   const handleSubmit = async () => {
+    if (!formData.name?.trim()) {
+      toast.error('Nama kategori berita wajib diisi');
+      return;
+    }
+    
     try {
       setIsSubmitting(true);
       // update global state hanya saat submit
@@ -143,8 +155,11 @@ function EditKategoriBerita() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -22,6 +22,13 @@ function CreateKategoriBerita() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      createState.create.form.name?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     createState.create.form = {
       name: '',
@@ -29,6 +36,11 @@ function CreateKategoriBerita() {
   };
 
   const handleSubmit = async () => {
+    if (!createState.create.form.name?.trim()) {
+      toast.error('Nama kategori berita wajib diisi');
+      return;
+    }
+    
     setIsSubmitting(true);
     try {
       await createState.create.create();
@@ -93,8 +105,11 @@ function CreateKategoriBerita() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -160,7 +160,7 @@ function ListKategoriBerita({ search }: { search: string }) {
                 ))
               ) : (
                 <TableTr>
-                  <TableTd colSpan={4}>
+                  <TableTd colSpan={3}>  {/* ✅ Match column count (3 columns) */}
                     <Center py={24}>
                       <Text c="dimmed" fz="sm" lh={1.4}>
                         Tidak ada data kategori berita yang cocok

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

@@ -9,6 +9,8 @@ import {
   ActionIcon,
   Box,
   Button,
+  Card,
+  Grid,
   Group,
   Image,
   Paper,
@@ -17,7 +19,7 @@ import {
   Text,
   TextInput,
   Title,
-  Loader
+  Loader,
 } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import {
@@ -25,19 +27,51 @@ import {
   IconPhoto,
   IconUpload,
   IconX,
+  IconVideo,
+  IconTrash,
 } from "@tabler/icons-react";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useProxy } from "valtio/utils";
+import { convertYoutubeUrlToEmbed } from '@/app/admin/(dashboard)/desa/gallery/lib/youtube-utils';
+
+interface ExistingImage {
+  id: string;
+  link: string;
+  name: string;
+}
+
+interface BeritaData {
+  id: string;
+  judul: string;
+  deskripsi: string;
+  content: string;
+  kategoriBeritaId: string | null;
+  imageId: string | null;
+  image?: { link: string } | null;
+  images?: ExistingImage[];
+  linkVideo?: string | null;
+}
 
 function EditBerita() {
   const beritaState = useProxy(stateDashboardBerita);
   const router = useRouter();
   const params = useParams();
 
+  // Featured image state
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
+  
+  // Gallery images state
+  const [existingGalleryImages, setExistingGalleryImages] = useState<ExistingImage[]>([]);
+  const [galleryFiles, setGalleryFiles] = useState<File[]>([]);
+  const [galleryPreviews, setGalleryPreviews] = useState<string[]>([]);
+  
+  // YouTube link state
+  const [youtubeLink, setYoutubeLink] = useState('');
+  const [originalYoutubeLink, setOriginalYoutubeLink] = useState('');
+
   const [formData, setFormData] = useState({
     judul: "",
     deskripsi: "",
@@ -57,7 +91,24 @@ function EditBerita() {
     imageUrl: ""
   });
 
-  // Load kategori + berita
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      formData.kategoriBeritaId !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      (file !== null || originalData.imageId !== '') &&
+      !isHtmlEmpty(formData.content)
+    );
+  };
+
+  // Load data
   useEffect(() => {
     beritaState.kategoriBerita.findMany.load();
 
@@ -66,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 || "",
@@ -88,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);
@@ -102,15 +164,74 @@ 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 utama wajib dipilih');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.content)) {
+      toast.error('Konten wajib diisi');
+      return;
+    }
+
     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,
@@ -119,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");
@@ -146,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 */}
@@ -176,6 +321,7 @@ function EditBerita() {
         style={{ border: "1px solid #e0e0e0" }}
       >
         <Stack gap="md">
+          {/* Judul */}
           <TextInput
             label="Judul"
             placeholder="Masukkan judul"
@@ -184,6 +330,7 @@ function EditBerita() {
             required
           />
 
+          {/* Kategori */}
           <Select
             value={formData.kategoriBeritaId}
             onChange={(val) => handleChange("kategoriBeritaId", val || "")}
@@ -198,9 +345,9 @@ function EditBerita() {
             clearable
             searchable
             required
-            error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
           />
 
+          {/* Deskripsi */}
           <Box>
             <Text fz="sm" fw="bold">
               Deskripsi Singkat
@@ -213,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) => {
@@ -231,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} />
@@ -249,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>
 
@@ -285,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>
@@ -295,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">
@@ -308,9 +572,8 @@ function EditBerita() {
             />
           </Box>
 
-          {/* Action */}
+          {/* Action Buttons */}
           <Group justify="right">
-            {/* Tombol Batal */}
             <Button
               variant="outline"
               color="gray"
@@ -320,14 +583,15 @@ function EditBerita() {
             >
               Batal
             </Button>
-
-            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/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,23 +15,53 @@ 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) => {
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      beritaState.berita.create.form.judul?.trim() !== '' &&
+      beritaState.berita.create.form.kategoriBeritaId !== '' &&
+      !isHtmlEmpty(beritaState.berita.create.form.deskripsi) &&
+      file !== null &&
+      !isHtmlEmpty(beritaState.berita.create.form.content)
+    );
+  };
+
   useShallowEffect(() => {
     beritaState.kategoriBerita.findMany.load();
   }, []);
@@ -43,29 +73,96 @@ 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 () => {
+    if (!beritaState.berita.create.form.judul?.trim()) {
+      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 utama wajib dipilih');
+      return;
+    }
+
+    if (isHtmlEmpty(beritaState.berita.create.form.content)) {
+      toast.error('Konten wajib diisi');
+      return;
+    }
+
     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();
 
@@ -79,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">
@@ -105,6 +199,7 @@ export default function CreateBerita() {
         style={{ border: '1px solid #e0e0e0' }}
       >
         <Stack gap="md">
+          {/* Judul */}
           <TextInput
             label="Judul"
             placeholder="Masukkan judul berita"
@@ -113,6 +208,7 @@ export default function CreateBerita() {
             required
           />
 
+          {/* Kategori */}
           <Select
             label="Kategori"
             placeholder="Pilih kategori"
@@ -139,6 +235,7 @@ export default function CreateBerita() {
             required
           />
 
+          {/* Deskripsi */}
           <Box>
             <Text fz="sm" fw="bold" mb={6}>
               Deskripsi Singkat
@@ -151,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) => {
@@ -189,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"
@@ -212,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>
@@ -222,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
@@ -234,6 +420,7 @@ export default function CreateBerita() {
             />
           </Box>
 
+          {/* Buttons */}
           <Group justify="right">
             <Button
               variant="outline"
@@ -244,14 +431,15 @@ export default function CreateBerita() {
             >
               Reset
             </Button>
-
-            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -187,7 +187,7 @@ function ListBerita({ search }: { search: string }) {
         <Pagination
           value={page}
           onChange={(newPage) => {
-            load(newPage, 10);
+            load(newPage, 10, debouncedSearch);  // ✅ Include search parameter
             window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}

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

@@ -45,6 +45,22 @@ function EditFoto() {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      (file !== null || originalData.imagesId !== '') // Either a new file is selected or an existing image exists
+    );
+  };
+
   const [originalData, setOriginalData] = useState({
     name: "",
     deskripsi: "",
@@ -94,6 +110,21 @@ function EditFoto() {
   };
 
   const handleSubmit = async () => {
+    if (!formData.name?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+    
+    if (isHtmlEmpty(formData.deskripsi)) {
+      toast.error('Deskripsi wajib diisi');
+      return;
+    }
+    
+    if (!file && !originalData.imagesId) {
+      toast.error('Gambar wajib dipilih');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       // Update global state hanya sekali di sini
@@ -285,8 +316,11 @@ function EditFoto() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -30,6 +30,22 @@ function CreateFoto() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      FotoState.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(FotoState.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     FotoState.create.form = {
       name: '',
@@ -41,6 +57,21 @@ function CreateFoto() {
   };
 
   const handleSubmit = async () => {
+    if (!FotoState.create.form.name?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+    
+    if (isHtmlEmpty(FotoState.create.form.deskripsi)) {
+      toast.error('Deskripsi wajib diisi');
+      return;
+    }
+    
+    if (!file) {
+      toast.error('Gambar wajib dipilih');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       if (!file) {
@@ -210,8 +241,11 @@ function CreateFoto() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -28,6 +28,24 @@ function EditVideo() {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    const embedLink = convertYoutubeUrlToEmbed(formData.linkVideo);
+    return (
+      formData.name?.trim() !== '' &&
+      formData.linkVideo?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      embedLink !== null // Make sure the embed link is valid
+    );
+  };
+
   const [originalData, setOriginalData] = useState({
     name: "",
     deskripsi: "",
@@ -86,6 +104,21 @@ function EditVideo() {
   };
 
   const handleSubmit = async () => {
+    if (!formData.name?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+    
+    if (!formData.linkVideo?.trim()) {
+      toast.error('Link YouTube wajib diisi');
+      return;
+    }
+    
+    if (isHtmlEmpty(formData.deskripsi)) {
+      toast.error('Deskripsi wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       const converted = convertYoutubeUrlToEmbed(formData.linkVideo);
@@ -218,8 +251,11 @@ function EditVideo() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -28,6 +28,23 @@ function CreateVideo() {
   const embedLink = convertYoutubeUrlToEmbed(link);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      videoState.create.form.name?.trim() !== '' &&
+      link.trim() !== '' &&
+      !isHtmlEmpty(videoState.create.form.deskripsi) &&
+      embedLink !== null // Make sure the embed link is valid
+    );
+  };
+
   const resetForm = () => {
     videoState.create.form = {
       name: '',
@@ -38,6 +55,26 @@ function CreateVideo() {
   };
 
   const handleSubmit = async () => {
+    if (!videoState.create.form.name?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+    
+    if (!link.trim()) {
+      toast.error('Link YouTube wajib diisi');
+      return;
+    }
+    
+    if (isHtmlEmpty(videoState.create.form.deskripsi)) {
+      toast.error('Deskripsi wajib diisi');
+      return;
+    }
+    
+    if (!embedLink) {
+      toast.error('Link YouTube tidak valid. Pastikan formatnya benar.');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       if (!embedLink) {
@@ -168,8 +205,11 @@ function CreateVideo() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -35,6 +35,21 @@ function EditPelayananPendudukNonPermanent() {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   const [originalData, setOriginalData] = useState({
     name: '',
     deskripsi: '',
@@ -86,6 +101,16 @@ function EditPelayananPendudukNonPermanent() {
   };
 
   const handleSubmit = async () => {
+    if (!formData.name?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.deskripsi)) {
+      toast.error('Deskripsi wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       if (!statePendudukNonPermanent.findById.data) return;
@@ -173,8 +198,11 @@ function EditPelayananPendudukNonPermanent() {
                 onClick={handleSubmit}
                 radius="md"
                 size="md"
+                disabled={!isFormValid() || isSubmitting}
                 style={{
-                  background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                  background: !isFormValid() || isSubmitting
+                    ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                    : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                   color: '#fff',
                   boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
                 }}

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

@@ -36,6 +36,22 @@ function EditPelayananPerizinanBerusaha() {
   });
 
   const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   const [originalData, setOriginalData] = useState({
     id: '',
     name: '',
@@ -102,6 +118,21 @@ function EditPelayananPerizinanBerusaha() {
   };
 
   const handleSubmit = async () => {
+    if (!formData.name?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.deskripsi)) {
+      toast.error('Deskripsi wajib diisi');
+      return;
+    }
+
+    if (!formData.link?.trim()) {
+      toast.error('Link wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       await state.update.update(formData);
@@ -192,8 +223,11 @@ function EditPelayananPerizinanBerusaha() {
                 onClick={handleSubmit}
                 radius="md"
                 size="md"
+                disabled={!isFormValid() || isSubmitting}
                 style={{
-                  background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                  background: !isFormValid() || isSubmitting
+                    ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                    : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                   color: '#fff',
                   boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
                 }}

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

@@ -149,6 +149,22 @@ function EditSuratKeterangan() {
   const [previewImage2, setPreviewImage2] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      (previewImage !== null || originalData.imageId !== '') // Either a new file is selected or an existing image exists
+    );
+  };
+
   // 🧭 Load Initial Data
   useEffect(() => {
     const loadSurat = async () => {
@@ -209,6 +225,21 @@ function EditSuratKeterangan() {
 
   // 💾 Submit Handler
   const handleSubmit = useCallback(async () => {
+    if (!formData.name?.trim()) {
+      toast.error('Nama surat keterangan wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.deskripsi)) {
+      toast.error('Konten wajib diisi');
+      return;
+    }
+
+    if (!previewImage && !originalData.imageId) {
+      toast.error('Gambar konten pelayanan wajib dipilih');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
 
@@ -251,7 +282,7 @@ function EditSuratKeterangan() {
     } finally {
       setIsSubmitting(false);
     }
-  }, [formData, file, file2, router]);
+  }, [formData, file, file2, router, previewImage, originalData.imageId]);
 
   // 📝 Form Field Handlers
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -324,10 +355,10 @@ function EditSuratKeterangan() {
 
           {/* Action Buttons */}
           <Group justify="right">
-            <Button 
-              variant="outline" 
-              color="gray" 
-              radius="md" 
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
               onClick={handleResetForm}
               disabled={isSubmitting}
             >
@@ -336,9 +367,11 @@ function EditSuratKeterangan() {
             <Button
               onClick={handleSubmit}
               radius="md"
-              disabled={isSubmitting}
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79,172,254,0.4)',
               }}

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

@@ -31,6 +31,22 @@ function CreateSuratKeterangan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateSurat.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(stateSurat.create.form.deskripsi) &&
+      previewImage !== null
+    );
+  };
+
   const resetForm = () => {
     stateSurat.create.form = {
       name: '',
@@ -43,8 +59,19 @@ function CreateSuratKeterangan() {
   };
 
   const handleSubmit = async () => {
+    if (!stateSurat.create.form.name?.trim()) {
+      toast.error('Nama surat keterangan wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateSurat.create.form.deskripsi)) {
+      toast.error('Konten wajib diisi');
+      return;
+    }
+
     if (!previewImage) {
-      return toast.warn('Pilih file gambar utama terlebih dahulu');
+      toast.error('Gambar konten pelayanan wajib dipilih');
+      return;
     }
 
     try {
@@ -284,8 +311,11 @@ function CreateSuratKeterangan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -24,6 +24,15 @@ function EditPelayananTelunjukSakti() {
   const params = useParams();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.deskripsi?.trim() !== '' &&
+      formData.link?.trim() !== ''
+    );
+  };
+
   const [formData, setFormData] = useState({
     name: '',
     deskripsi: '',
@@ -84,6 +93,21 @@ function EditPelayananTelunjukSakti() {
 
   // Submit: update global state hanya saat simpan
   const handleSubmit = async () => {
+    if (!formData.name?.trim()) {
+      toast.error('Nama pelayanan wajib diisi');
+      return;
+    }
+
+    if (!formData.deskripsi?.trim()) {
+      toast.error('Judul link wajib diisi');
+      return;
+    }
+
+    if (!formData.link?.trim()) {
+      toast.error('Link wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       stateTelunjukDesa.edit.form = {
@@ -165,8 +189,11 @@ function EditPelayananTelunjukSakti() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -23,6 +23,15 @@ function CreatePelayananTelunjukDesa() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateTelunjukDesa.create.form.name?.trim() !== '' &&
+      stateTelunjukDesa.create.form.deskripsi?.trim() !== '' &&
+      stateTelunjukDesa.create.form.link?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     stateTelunjukDesa.create.form = {
       name: '',
@@ -32,6 +41,21 @@ function CreatePelayananTelunjukDesa() {
   };
 
   const handleSubmit = async () => {
+    if (!stateTelunjukDesa.create.form.name?.trim()) {
+      toast.error('Nama pelayanan wajib diisi');
+      return;
+    }
+
+    if (!stateTelunjukDesa.create.form.deskripsi?.trim()) {
+      toast.error('Judul link wajib diisi');
+      return;
+    }
+
+    if (!stateTelunjukDesa.create.form.link?.trim()) {
+      toast.error('Link wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       await stateTelunjukDesa.create.create();
@@ -118,8 +142,11 @@ function CreatePelayananTelunjukDesa() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -33,6 +33,23 @@ function EditPenghargaan() {
   const [file, setFile] = useState<File | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.juara?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      (file !== null || originalData.imageId !== '') // Either a new file is selected or an existing image exists
+    );
+  };
+
   const [originalData, setOriginalData] = useState({
     name: "",
     juara: "",
@@ -100,6 +117,26 @@ function EditPenghargaan() {
 
   // Submit
   const handleSubmit = async () => {
+    if (!formData.name?.trim()) {
+      toast.error('Nama penghargaan wajib diisi');
+      return;
+    }
+
+    if (!formData.juara?.trim()) {
+      toast.error('Juara wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.deskripsi)) {
+      toast.error('Deskripsi wajib diisi');
+      return;
+    }
+
+    if (!file && !originalData.imageId) {
+      toast.error('Gambar wajib dipilih');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       // Sync ke global state saat submit
@@ -281,8 +318,11 @@ function EditPenghargaan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -30,6 +30,23 @@ function CreatePenghargaan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      statePenghargaan.create.form.name?.trim() !== '' &&
+      statePenghargaan.create.form.juara?.trim() !== '' &&
+      !isHtmlEmpty(statePenghargaan.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     statePenghargaan.create.form = {
       name: '',
@@ -42,6 +59,26 @@ function CreatePenghargaan() {
   };
 
   const handleSubmit = async () => {
+    if (!statePenghargaan.create.form.name?.trim()) {
+      toast.error('Nama penghargaan wajib diisi');
+      return;
+    }
+
+    if (!statePenghargaan.create.form.juara?.trim()) {
+      toast.error('Juara wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(statePenghargaan.create.form.deskripsi)) {
+      toast.error('Deskripsi wajib diisi');
+      return;
+    }
+
+    if (!file) {
+      toast.error('Gambar wajib dipilih');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       if (!file) {
@@ -201,8 +238,11 @@ function CreatePenghargaan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -27,6 +27,13 @@ function EditKategoriPengumuman() {
   const [formData, setFormData] = useState({ name: '' });
   const [originalData, setOriginalData] = useState({ name: '' });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== ''
+    );
+  };
+
   // Load data awal sekali aja
   useEffect(() => {
     const loadKategori = async () => {
@@ -56,6 +63,11 @@ function EditKategoriPengumuman() {
   };
 
   const handleSubmit = async () => {
+    if (!formData.name?.trim()) {
+      toast.error('Nama kategori pengumuman wajib diisi');
+      return;
+    }
+    
     try {
       setIsSubmitting(true);
       // Update global state hanya di sini
@@ -134,8 +146,11 @@ function EditKategoriPengumuman() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -22,6 +22,13 @@ function CreateKategoriPengumuman() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      createState.create.form.name?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     createState.create.form = {
       name: '',
@@ -29,6 +36,11 @@ function CreateKategoriPengumuman() {
   };
 
   const handleSubmit = async () => {
+    if (!createState.create.form.name?.trim()) {
+      toast.error('Nama kategori pengumuman wajib diisi');
+      return;
+    }
+    
     try {
       await createState.create.create();
       resetForm();
@@ -92,8 +104,11 @@ function CreateKategoriPengumuman() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -36,6 +36,23 @@ function EditPengumuman() {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      formData.deskripsi?.trim() !== '' &&
+      formData.categoryPengumumanId !== '' &&
+      !isHtmlEmpty(formData.content)
+    );
+  };
+
   const [originalData, setOriginalData] = useState({
     judul: "",
     deskripsi: "",
@@ -81,6 +98,26 @@ function EditPengumuman() {
   };
 
   const handleSubmit = async () => {
+    if (!formData.judul?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+    
+    if (!formData.deskripsi?.trim()) {
+      toast.error('Deskripsi singkat wajib diisi');
+      return;
+    }
+    
+    if (!formData.categoryPengumumanId) {
+      toast.error('Kategori wajib dipilih');
+      return;
+    }
+    
+    if (isHtmlEmpty(formData.content)) {
+      toast.error('Konten lengkap wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       // update global state hanya sekali pas submit
@@ -197,8 +234,11 @@ function EditPengumuman() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -27,11 +27,48 @@ function CreatePengumuman() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      pengumumanState.pengumuman.create.form.judul?.trim() !== '' &&
+      pengumumanState.pengumuman.create.form.categoryPengumumanId !== '' &&
+      pengumumanState.pengumuman.create.form.deskripsi?.trim() !== '' &&
+      !isHtmlEmpty(pengumumanState.pengumuman.create.form.content)
+    );
+  };
+
   useShallowEffect(() => {
     pengumumanState.category.findMany.load();
   }, []);
 
   const handleSubmit = async () => {
+    if (!pengumumanState.pengumuman.create.form.judul?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+    
+    if (!pengumumanState.pengumuman.create.form.categoryPengumumanId) {
+      toast.error('Kategori wajib dipilih');
+      return;
+    }
+    
+    if (!pengumumanState.pengumuman.create.form.deskripsi?.trim()) {
+      toast.error('Deskripsi singkat wajib diisi');
+      return;
+    }
+    
+    if (isHtmlEmpty(pengumumanState.pengumuman.create.form.content)) {
+      toast.error('Konten lengkap wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       await pengumumanState.pengumuman.create.create();
@@ -150,8 +187,11 @@ function CreatePengumuman() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -33,6 +33,13 @@ function EditKategoriPotensi() {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== ''
+    );
+  };
+
   // Load data dari backend -> isi ke formData lokal
   useEffect(() => {
     const loadKategori = async () => {
@@ -73,6 +80,11 @@ function EditKategoriPotensi() {
   };
 
   const handleSubmit = async () => {
+    if (!formData.nama?.trim()) {
+      toast.error('Nama kategori potensi wajib diisi');
+      return;
+    }
+    
     try {
       setIsSubmitting(true);
       // Update global state hanya pas submit
@@ -141,8 +153,11 @@ function EditKategoriPotensi() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -21,6 +21,13 @@ function CreateKategoriPotensi() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      createState.create.form.nama?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     createState.create.form = {
       nama: '',
@@ -28,6 +35,11 @@ function CreateKategoriPotensi() {
   };
 
   const handleSubmit = async () => {
+    if (!createState.create.form.nama?.trim()) {
+      alert('Nama kategori potensi wajib diisi');
+      return;
+    }
+    
     try {
       setIsSubmitting(true);
       await createState.create.create();
@@ -91,8 +103,11 @@ function CreateKategoriPotensi() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -42,6 +42,24 @@ function EditPotensi() {
   });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.kategoriId !== '' &&
+      (file !== null || originalData.imageId !== '') && // Either a new file is selected or an existing image exists
+      !isHtmlEmpty(formData.content)
+    );
+  };
+
   const [originalData, setOriginalData] = useState({
     name: "",
     deskripsi: "",
@@ -109,6 +127,31 @@ function EditPotensi() {
 
 
   const handleSubmit = async () => {
+    if (!formData.name?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+    
+    if (isHtmlEmpty(formData.deskripsi)) {
+      toast.error('Deskripsi singkat wajib diisi');
+      return;
+    }
+    
+    if (!formData.kategoriId) {
+      toast.error('Kategori wajib dipilih');
+      return;
+    }
+    
+    if (!file && !originalData.imageId) {
+      toast.error('Gambar wajib dipilih');
+      return;
+    }
+    
+    if (isHtmlEmpty(formData.content)) {
+      toast.error('Konten lengkap wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       let imageId = formData.imageId;
@@ -341,8 +384,11 @@ function EditPotensi() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -8,6 +8,7 @@ import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import DOMPurify from 'dompurify';
 
 export default function DetailPotensi() {
   const router = useRouter();
@@ -77,7 +78,17 @@ export default function DetailPotensi() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}></Text>
+                <Text 
+                  fz="md" 
+                  c="dimmed" 
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }} 
+                  dangerouslySetInnerHTML={{ 
+                    __html: DOMPurify.sanitize(data.deskripsi || '-', {
+                      ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
+                      ALLOWED_ATTR: []
+                    })
+                  }}
+                ></Text>
               </Box>
 
               <Box>
@@ -102,7 +113,12 @@ export default function DetailPotensi() {
                 <Text
                   fz="md"
                   c="dimmed"
-                  dangerouslySetInnerHTML={{ __html: data.content || '-' }}
+                  dangerouslySetInnerHTML={{
+                    __html: DOMPurify.sanitize(data.content || '-', {
+                      ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
+                      ALLOWED_ATTR: []
+                    })
+                  }}
                   style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
               </Box>

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

@@ -32,11 +32,54 @@ function CreatePotensi() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      potensiState.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(potensiState.create.form.deskripsi) &&
+      potensiState.create.form.kategoriId !== '' &&
+      file !== null &&
+      !isHtmlEmpty(potensiState.create.form.content)
+    );
+  };
+
   useEffect(() => {
     potensiDesaState.kategoriPotensi.findMany.load();
   }, []);
 
   const handleSubmit = async () => {
+    if (!potensiState.create.form.name?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+    
+    if (isHtmlEmpty(potensiState.create.form.deskripsi)) {
+      toast.error('Deskripsi singkat wajib diisi');
+      return;
+    }
+    
+    if (!potensiState.create.form.kategoriId) {
+      toast.error('Kategori wajib dipilih');
+      return;
+    }
+    
+    if (!file) {
+      toast.error('Gambar wajib dipilih');
+      return;
+    }
+    
+    if (isHtmlEmpty(potensiState.create.form.content)) {
+      toast.error('Konten lengkap wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       if (!file) return toast.warn('Pilih file gambar terlebih dahulu');
@@ -266,8 +309,11 @@ function CreatePotensi() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -27,6 +27,7 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import potensiDesaState from '../../../_state/desa/potensi';
 import { useDebouncedValue } from '@mantine/hooks';
+import DOMPurify from 'dompurify';
 
 function Potensi() {
   const [search, setSearch] = useState("");
@@ -137,7 +138,12 @@ function ListPotensi({ search }: { search: string }) {
                         fz="sm"
                         lh={1.5}
                         lineClamp={2}
-                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                        dangerouslySetInnerHTML={{
+                          __html: DOMPurify.sanitize(item.deskripsi, {
+                            ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
+                            ALLOWED_ATTR: []
+                          })
+                        }}
                         style={{ wordBreak: 'break-word' }}
                       />
                     </TableTd>
@@ -199,7 +205,12 @@ function ListPotensi({ search }: { search: string }) {
                     <Text
                       fz="sm"
                       lh={1.5}
-                      dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                      dangerouslySetInnerHTML={{
+                        __html: DOMPurify.sanitize(item.deskripsi, {
+                          ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
+                          ALLOWED_ATTR: []
+                        })
+                      }}
                       style={{ wordBreak: 'break-word' }}
                     />
                   </Box>

src/app/admin/(dashboard)/desa/profil/profil-desa/[id]/lambang_desa/page.tsx

@@ -83,6 +83,21 @@ function Page() {
     };
   }, [params?.id, router]);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // 🔁 Reset form
   const handleResetForm = () => {
     setFormData(originalData);
@@ -95,6 +110,11 @@ function Page() {
       toast.error('Judul wajib diisi');
       return;
     }
+    
+    if (isHtmlEmpty(formData.deskripsi)) {
+      toast.error('Deskripsi wajib diisi');
+      return;
+    }
 
     setIsSubmitting(true);
     try {
@@ -224,14 +244,16 @@ function Page() {
                 onClick={handleSubmit}
                 radius="md"
                 size="md"
+                disabled={!isFormValid() || isSubmitting}
                 style={{
-                  background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                  background: !isFormValid() || isSubmitting
+                    ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                    : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                   color: '#fff',
                   boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
                 }}
-                loading={isSubmitting}
               >
-                Simpan
+                {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
               </Button>
             </Group>
           </Stack>

src/app/admin/(dashboard)/desa/profil/profil-desa/[id]/maskot_desa/page.tsx

@@ -34,6 +34,21 @@ function Page() {
     images: [] as Array<{ label: string; imageId: string }>
   });
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // Load data
   useEffect(() => {
     const loadData = async () => {
@@ -122,6 +137,12 @@ function Page() {
       toast.error("Judul wajib diisi");
       return;
     }
+    
+    if (isHtmlEmpty(formData.deskripsi)) {
+      toast.error("Deskripsi wajib diisi");
+      return;
+    }
+    
     try {
       setIsSubmitting(true);
       const uploadedImages = [];
@@ -315,8 +336,11 @@ function Page() {
                 onClick={handleSubmit}
                 radius="md"
                 size="md"
+                disabled={!isFormValid() || isSubmitting}
                 style={{
-                  background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                  background: !isFormValid() || isSubmitting
+                    ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                    : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                   color: '#fff',
                   boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
                 }}

src/app/admin/(dashboard)/desa/profil/profil-desa/[id]/sejarah_desa/page.tsx

@@ -99,6 +99,21 @@ function Page() {
         toast.info('Form dikembalikan ke data awal');
     };
 
+    // Helper function to check if HTML content is empty
+    const isHtmlEmpty = (html: string) => {
+        // Remove all HTML tags and check if there's any text content
+        const textContent = html.replace(/<[^>]*>/g, '').trim();
+        return textContent === '';
+    };
+
+    // Check if form is valid
+    const isFormValid = () => {
+        return (
+            formData.judul?.trim() !== '' &&
+            !isHtmlEmpty(formData.deskripsi)
+        );
+    };
+
     // 💾 Submit Handler
     const handleSubmit = async () => {
         // Validation
@@ -106,6 +121,11 @@ function Page() {
             toast.error('Judul wajib diisi');
             return;
         }
+        
+        if (isHtmlEmpty(formData.deskripsi)) {
+            toast.error('Deskripsi wajib diisi');
+            return;
+        }
 
         setIsSubmitting(true);
 
@@ -260,8 +280,11 @@ function Page() {
                                 onClick={handleSubmit}
                                 radius="md"
                                 size="md"
+                                disabled={!isFormValid() || isSubmitting}
                                 style={{
-                                    background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                                    background: !isFormValid() || isSubmitting
+                                        ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                                        : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                                     color: '#fff',
                                     boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
                                 }}

src/app/admin/(dashboard)/desa/profil/profil-desa/[id]/visi_misi_desa/page.tsx

@@ -81,6 +81,21 @@ function Page() {
     };
   }, [params?.id, router]);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      !isHtmlEmpty(formData.visi) &&
+      !isHtmlEmpty(formData.misi)
+    );
+  };
+
   // 🔄 Reset Form
   const handleResetForm = () => {
     setFormData(originalData);
@@ -89,11 +104,16 @@ function Page() {
 
   // 💾 Submit
   const handleSubmit = async () => {
-    if (!formData.visi.trim()) {
+    if (isHtmlEmpty(formData.visi)) {
       toast.error('Visi wajib diisi');
       return;
     }
 
+    if (isHtmlEmpty(formData.misi)) {
+      toast.error('Misi wajib diisi');
+      return;
+    }
+
     setIsSubmitting(true);
     try {
       const originalState = stateProfileDesa.visiMisiDesa;
@@ -227,14 +247,16 @@ function Page() {
                 onClick={handleSubmit}
                 radius="md"
                 size="md"
+                disabled={!isFormValid() || isSubmitting}
                 style={{
-                  background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                  background: !isFormValid() || isSubmitting
+                    ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                    : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                   color: '#fff',
                   boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
                 }}
-                loading={isSubmitting}
               >
-                Simpan
+                {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
               </Button>
             </Group>
           </Stack>

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/[id]/edit/page.tsx

@@ -51,6 +51,17 @@ function EditAPBDesa() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.tahun?.trim() !== '' &&
+      Number(formData.tahun) > 0 &&
+      formData.pendapatanIds.length > 0 &&
+      formData.belanjaIds.length > 0 &&
+      formData.pembiayaanIds.length > 0
+    );
+  };
+
   // ==================== LOAD DATA ====================
   useEffect(() => {
     const loadAPBdesa = async () => {
@@ -213,8 +224,11 @@ function EditAPBDesa() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/create/page.tsx

@@ -27,6 +27,17 @@ function CreateAPBDesa() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      apbDesaState.create.form.tahun !== null &&
+      apbDesaState.create.form.tahun > 0 &&
+      apbDesaState.create.form.pendapatanIds.length > 0 &&
+      apbDesaState.create.form.belanjaIds.length > 0 &&
+      apbDesaState.create.form.pembiayaanIds.length > 0
+    );
+  };
+
   const resetForm = () => {
     apbDesaState.create.form = {
       tahun: 0,
@@ -121,8 +132,11 @@ function CreateAPBDesa() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/[id]/page.tsx

@@ -35,6 +35,15 @@ function EditBelanja() {
     value: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.value !== '' &&
+      Number(formData.value) > 0
+    );
+  };
+
   // format angka ke rupiah
   const formatRupiah = (value: number | string) => {
     const number =
@@ -172,8 +181,11 @@ function EditBelanja() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/create/page.tsx

@@ -24,6 +24,15 @@ function CreateBelanja() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      belanjaState.create.form.name?.trim() !== '' &&
+      belanjaState.create.form.value !== null &&
+      belanjaState.create.form.value > 0
+    );
+  };
+
   const formatRupiah = (value: number | string) => {
     const number =
       typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
@@ -126,8 +135,11 @@ function CreateBelanja() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/[id]/page.tsx

@@ -34,6 +34,15 @@ function EditPembiayaan() {
     value: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.value !== '' &&
+      Number(formData.value) > 0
+    );
+  };
+
   const formatRupiah = (value: number | string) => {
     const number =
       typeof value === 'number'
@@ -169,8 +178,11 @@ function EditPembiayaan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/create/page.tsx

@@ -23,6 +23,15 @@ function CreatePembiayaan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      pembiayaanState.create.form.name?.trim() !== '' &&
+      pembiayaanState.create.form.value !== null &&
+      pembiayaanState.create.form.value > 0
+    );
+  };
+
   const formatRupiah = (value: number | string) => {
     const number =
       typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
@@ -127,8 +136,11 @@ function CreatePembiayaan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/[id]/page.tsx

@@ -34,6 +34,15 @@ function EditPendapatan() {
     value: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.value !== '' &&
+      Number(formData.value) > 0
+    );
+  };
+
   // helper format
   const formatRupiah = (value: number | string) => {
     const number = typeof value === 'number'
@@ -176,8 +185,11 @@ function EditPendapatan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/create/page.tsx

@@ -22,6 +22,15 @@ function CreatePendapatan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      pendapatanState.create.form.name?.trim() !== '' &&
+      pendapatanState.create.form.value !== null &&
+      pendapatanState.create.form.value > 0
+    );
+  };
+
   const formatRupiah = (value: number | string) => {
     const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
     return new Intl.NumberFormat('id-ID', {
@@ -122,8 +131,11 @@ function CreatePendapatan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/[id]/edit/page.tsx

@@ -56,6 +56,14 @@ export default function EditPegawaiBumDes() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.namaLengkap?.trim() !== '' &&
+      formData.posisiId?.trim() !== ''
+    );
+  };
+
   // Format date for <input type="date">
   const formatDateForInput = (dateString: string) => {
     if (!dateString) return '';
@@ -325,8 +333,11 @@ export default function EditPegawaiBumDes() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/create/page.tsx

@@ -23,6 +23,15 @@ function CreatePegawaiBumDes() {
   const [file, setFile] = useState<File | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateOrganisasi.create.form.namaLengkap?.trim() !== '' &&
+      stateOrganisasi.create.form.posisiId?.trim() !== '' &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     stateOrganisasi.create.form = {
       namaLengkap: "",
@@ -284,8 +293,11 @@ function CreatePegawaiBumDes() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}