feat: add form validation for ekonomi module admin pages

- Added isFormValid() and isHtmlEmpty() helper functions - Disabled submit buttons when required fields are empty - Applied consistent validation pattern across all create/edit pages - Validated fields: nama, deskripsi, tahun, jumlah, value, icon, statistik, and more - Edit pages allow existing data, create pages require all fields Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
feat: add form validation for keamanan module admin pages
2026-02-18 16:13:20 +08:00 · 2026-02-18 11:22:30 +08:00 · 2026-02-18 10:51:10 +08:00 · 2026-02-14 14:17:17 +08:00 · 2026-02-11 17:04:55 +08:00
152 changed files with 4178 additions and 209 deletions
--- a/.gemini/hooks/telegram-notify.ts
+++ b/.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();
--- a/.gemini/settings.json
+++ b/.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
+					}
+				]
+			}
+		]
+	}
+}
--- a/GEMINI.md
+++ b/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.
--- a/QWEN.md
+++ b/QWEN.md
@@ -0,0 +1,232 @@
+# Desa Darmasaba - Village Management System
+
+## Project Overview
+
+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
+- **Language**: TypeScript with strict mode
+- **Styling**: Mantine UI components with custom CSS
+- **Backend**: Elysia.js API server integrated with Next.js
+- **Database**: PostgreSQL with Prisma ORM
+- **State Management**: Valtio for global state
+- **Authentication**: JWT with iron-session
+
+### Architecture
+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
+- Node.js (with Bun runtime)
+- PostgreSQL database
+- Seafile server for file storage
+
+### Setup Instructions
+1. Install dependencies:
+   ```bash
+   bun install
+   ```
+
+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
+   ```
+
+3. Generate Prisma client:
+   ```bash
+   bunx prisma generate
+   ```
+
+4. Push database schema:
+   ```bash
+   bunx prisma db push
+   ```
+
+5. Seed the database:
+   ```bash
+   bun run prisma/seed.ts
+   ```
+
+6. Run the development server:
+   ```bash
+   bun run dev
+   ```
+
+### 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
+
+## Development Conventions
+
+### Code Structure
+```
+src/
+├── app/                 # Next.js app router pages
+│   ├── 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
+```
+
+### Import Conventions
+- Use absolute imports with `@/` alias (configured in tsconfig.json)
+- Group imports: external libraries first, then internal modules
+- 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`)
+- Target: ES2017
+- 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
+- Implement proper CORS configuration
+- Never expose database credentials or API keys
+- Use HTTPS in production
+- Implement rate limiting for sensitive endpoints
+
+### Performance Considerations
+- Use Next.js Image optimization
+- Implement proper caching strategies
+- Use React.memo for expensive components
+- Optimize bundle size with dynamic imports
+- Use Prisma query optimization
+
+## Domain Modules
+
+The application is organized into several domain modules:
+
+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
+
+Each module has its own section in both the admin panel and public-facing areas.
+
+## 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 in the `NOTE.md` file that outline:
+- Automated deployment with GitHub API integration
+- Environment-specific configurations
+- PM2 process management
+- Release management with versioning
+
+## Troubleshooting
+
+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
--- a/tests/api/fileStorage.test.ts
+++ b/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');
+  });
+});
--- a/tests/e2e/homepage.spec.ts
+++ b/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();
+});
--- a/tests/mocks/handlers.ts
+++ b/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,
+      }
+    });
+  }),
+];
--- a/tests/mocks/server.ts
+++ b/tests/mocks/server.ts
@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers);
--- a/tests/setup.ts
+++ b/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());
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/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"
@@ -106,17 +109,23 @@
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
+    "@playwright/test": "^1.58.2",
+    "@testing-library/jest-dom": "^6.9.1",
    "@types/cli-progress": "^3.11.6",
    "@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"
  }
 }
--- a/playwright-report/data/3262232ac1998014dfaa14b6734778979a7c99c4.md
+++ b/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]
+```
--- a/playwright-report/index.html
+++ b/playwright-report/index.html
--- a/playwright.config.ts
+++ b/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,
+  },
+});
--- a/src/app/admin/(dashboard)/desa/berita/kategori-berita/[id]/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/berita/kategori-berita/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/berita/list-berita/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/list-berita/[id]/edit/page.tsx
@@ -48,6 +48,24 @@ function EditBerita() {

  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.kategoriBeritaId !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      (file !== null || originalData.imageId !== '') && // Either a new file is selected or an existing image exists
+      !isHtmlEmpty(formData.content)
+    );
+  };
+
  const [originalData, setOriginalData] = useState({
    judul: "",
    deskripsi: "",
@@ -103,6 +121,31 @@ function EditBerita() {
  };

  const handleSubmit = async () => {
+    if (!formData.judul?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+    
+    if (!formData.kategoriBeritaId) {
+      toast.error('Kategori wajib dipilih');
+      return;
+    }
+    
+    if (isHtmlEmpty(formData.deskripsi)) {
+      toast.error('Deskripsi singkat wajib diisi');
+      return;
+    }
+    
+    if (!file && !originalData.imageId) {
+      toast.error('Gambar wajib dipilih');
+      return;
+    }
+    
+    if (isHtmlEmpty(formData.content)) {
+      toast.error('Konten wajib diisi');
+      return;
+    }
+
    try {
      setIsSubmitting(true);
      // Update global state hanya sekali di sini
@@ -326,8 +369,11 @@ function EditBerita() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/desa/berita/list-berita/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/list-berita/create/page.tsx
@@ -32,6 +32,24 @@ export default function CreateBerita() {
  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 (
+      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();
  }, []);
@@ -49,6 +67,31 @@ export default function CreateBerita() {
  };

  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 wajib dipilih');
+      return;
+    }
+    
+    if (isHtmlEmpty(beritaState.berita.create.form.content)) {
+      toast.error('Konten wajib diisi');
+      return;
+    }
+
    try {
      setIsSubmitting(true);
      if (!file) {
@@ -250,8 +293,11 @@ export default function CreateBerita() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/desa/gallery/foto/[id]/edit/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/gallery/foto/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/gallery/video/[id]/edit/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/gallery/video/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_penduduk_non_permanent/[id]/page.tsx
+++ b/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)',
                }}
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_perizinan_berusaha/[id]/page.tsx
+++ b/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)',
                }}
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/edit/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/[id]/edit/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/penghargaan/[id]/edit/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/penghargaan/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/[id]/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/edit/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/potensi/kategori-potensi/[id]/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/potensi/kategori-potensi/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/edit/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/potensi/list-potensi/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/desa/profil/profil-desa/[id]/lambang_desa/page.tsx
+++ b/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>
--- a/src/app/admin/(dashboard)/desa/profil/profil-desa/[id]/maskot_desa/page.tsx
+++ b/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)',
                }}
--- a/src/app/admin/(dashboard)/desa/profil/profil-desa/[id]/sejarah_desa/page.tsx
+++ b/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)',
                                }}
--- a/src/app/admin/(dashboard)/desa/profil/profil-desa/[id]/visi_misi_desa/page.tsx
+++ b/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>
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/[id]/edit/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/[id]/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/[id]/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/[id]/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/[id]/edit/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/create/page.tsx
+++ b/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)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/[id]/page.tsx
@@ -31,6 +31,23 @@ function EditPosisiOrganisasiBumDes() {
    hierarki: 0,
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.hierarki !== null &&
+      formData.hierarki >= 0
+    );
+  };
+
  // Fungsi generik untuk update formData
  const handleChange = (field: keyof typeof formData, value: any) => {
    setFormData(prev => ({ ...prev, [field]: value }));
@@ -173,8 +190,11 @@ function EditPosisiOrganisasiBumDes() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/create/page.tsx
@@ -15,6 +15,23 @@ function CreatePosisiOrganisasiBumDes() {
  const stateOrganisasi = useProxy(stateStrukturBumDes.posisiOrganisasi);
  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 (
+      stateOrganisasi.create.form.nama?.trim() !== '' &&
+      !isHtmlEmpty(stateOrganisasi.create.form.deskripsi) &&
+      stateOrganisasi.create.form.hierarki !== null &&
+      stateOrganisasi.create.form.hierarki >= 0
+    );
+  };
+
  useEffect(() => {
    stateOrganisasi.findMany.load();
  }, []);
@@ -115,8 +132,11 @@ function CreatePosisiOrganisasiBumDes() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/[id]/page.tsx
@@ -41,6 +41,17 @@ export default function EditDemografiPekerjaan() {
    perempuan: 0,
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.pekerjaan?.trim() !== '' &&
+      formData.lakiLaki !== null &&
+      formData.lakiLaki >= 0 &&
+      formData.perempuan !== null &&
+      formData.perempuan >= 0
+    );
+  };
+
  // ✅ Load data hanya sekali di awal (tidak reset form)
  useEffect(() => {
    if (!id) return;
@@ -186,8 +197,11 @@ export default function EditDemografiPekerjaan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/create/page.tsx
@@ -26,6 +26,17 @@ function CreateDemografiPekerjaan() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateDemografi.create.form.pekerjaan?.trim() !== '' &&
+      stateDemografi.create.form.lakiLaki !== null &&
+      stateDemografi.create.form.lakiLaki >= 0 &&
+      stateDemografi.create.form.perempuan !== null &&
+      stateDemografi.create.form.perempuan >= 0
+    );
+  };
+
  const resetForm = () => {
    stateDemografi.create.form = {
      pekerjaan: '',
@@ -128,8 +139,11 @@ function CreateDemografiPekerjaan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/[id]/page.tsx
@@ -37,6 +37,16 @@ function EditJumlahPendudukMiskin() {
    totalPoorPopulation: 0,
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.year !== null &&
+      formData.year > 0 &&
+      formData.totalPoorPopulation !== null &&
+      formData.totalPoorPopulation >= 0
+    );
+  };
+
  // 🔹 Load data awal dari backend
  useEffect(() => {
    if (!id) return;
@@ -160,8 +170,11 @@ function EditJumlahPendudukMiskin() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/create/page.tsx
@@ -16,6 +16,16 @@ export default function CreateJumlahPendudukMiskin() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateJPM.create.form.year !== null &&
+      stateJPM.create.form.year > 0 &&
+      stateJPM.create.form.totalPoorPopulation !== null &&
+      stateJPM.create.form.totalPoorPopulation >= 0
+    );
+  };
+
  const resetForm = () => {
    stateJPM.create.form = {
      year: new Date().getFullYear(),
@@ -105,8 +115,11 @@ export default function CreateJumlahPendudukMiskin() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/[id]/page.tsx
@@ -33,6 +33,17 @@ function EditGrafikBerdasarkanPendidikan() {
    S1: '',
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.SD?.trim() !== '' &&
+      formData.SMP?.trim() !== '' &&
+      formData.SMA?.trim() !== '' &&
+      formData.D3?.trim() !== '' &&
+      formData.S1?.trim() !== ''
+    );
+  };
+
  useEffect(() => {
    if (id) {
      stategrafik.findUnique.load(id).then(() => {
@@ -174,8 +185,11 @@ function EditGrafikBerdasarkanPendidikan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create/page.tsx
@@ -16,6 +16,17 @@ function CreateGrafikBerdasarkanPendidikan() {
  const [donutData, setDonutData] = useState<any[]>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stategrafik.create.form.SD?.trim() !== '' &&
+      stategrafik.create.form.SMP?.trim() !== '' &&
+      stategrafik.create.form.SMA?.trim() !== '' &&
+      stategrafik.create.form.D3?.trim() !== '' &&
+      stategrafik.create.form.S1?.trim() !== ''
+    );
+  };
+
  const resetForm = () => {
    stategrafik.create.form = {
      ...stategrafik.create.form,
@@ -127,8 +138,11 @@ function CreateGrafikBerdasarkanPendidikan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/[id]/page.tsx
@@ -43,6 +43,16 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
    usia46_keatas: '',
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.usia18_25?.trim() !== '' &&
+      formData.usia26_35?.trim() !== '' &&
+      formData.usia36_45?.trim() !== '' &&
+      formData.usia46_keatas?.trim() !== ''
+    );
+  };
+
  // load data dari global state -> masukin ke local state
  useEffect(() => {
    if (id) {
@@ -179,8 +189,11 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create/page.tsx
@@ -17,6 +17,16 @@ function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
  const [donutData, setDonutData] = useState<any[]>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stategrafik.create.form.usia18_25?.trim() !== '' &&
+      stategrafik.create.form.usia26_35?.trim() !== '' &&
+      stategrafik.create.form.usia36_45?.trim() !== '' &&
+      stategrafik.create.form.usia46_keatas?.trim() !== ''
+    );
+  };
+
  const resetForm = () => {
    stategrafik.create.form = {
      ...stategrafik.create.form,
@@ -120,8 +130,11 @@ function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/edit/page.tsx
@@ -53,6 +53,19 @@ function EditDetailDataPengangguran() {
    percentageChange: 0,
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.month?.trim() !== '' &&
+      formData.year !== null &&
+      formData.year > 0 &&
+      formData.educatedUnemployment !== null &&
+      formData.educatedUnemployment >= 0 &&
+      formData.uneducatedUnemployment !== null &&
+      formData.uneducatedUnemployment >= 0
+    );
+  };
+
  // --- hitung total + persentase perubahan
  const calculateTotalAndChange = useCallback(
    async (data: typeof formData) => {
@@ -255,8 +268,11 @@ function EditDetailDataPengangguran() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/create/page.tsx
@@ -27,6 +27,19 @@ function CreateJumlahPengangguran() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateDetail.create.form.month?.trim() !== '' &&
+      stateDetail.create.form.year !== null &&
+      stateDetail.create.form.year > 0 &&
+      stateDetail.create.form.educatedUnemployment !== null &&
+      stateDetail.create.form.educatedUnemployment >= 0 &&
+      stateDetail.create.form.uneducatedUnemployment !== null &&
+      stateDetail.create.form.uneducatedUnemployment >= 0
+    );
+  };
+
  const monthOptions = [
    'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
    'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'
@@ -204,8 +217,11 @@ function CreateJumlahPengangguran() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/[id]/edit/page.tsx
@@ -48,6 +48,27 @@ function EditLowonganKerja() {
    notelp: '',
  })

+  // 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.posisi?.trim() !== '' &&
+      formData.namaPerusahaan?.trim() !== '' &&
+      formData.notelp?.trim() !== '' &&
+      formData.lokasi?.trim() !== '' &&
+      formData.tipePekerjaan?.trim() !== '' &&
+      formData.gaji?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      !isHtmlEmpty(formData.kualifikasi)
+    );
+  };
+
  // load data sekali aja ketika mount / id berubah
  useEffect(() => {
    const loadLowongan = async () => {
@@ -229,8 +250,11 @@ function EditLowonganKerja() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/create/page.tsx
@@ -24,6 +24,27 @@ function CreateLowonganKerja() {
  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 (
+      lowonganState.create.form.posisi?.trim() !== '' &&
+      lowonganState.create.form.namaPerusahaan?.trim() !== '' &&
+      lowonganState.create.form.notelp?.trim() !== '' &&
+      lowonganState.create.form.lokasi?.trim() !== '' &&
+      lowonganState.create.form.tipePekerjaan?.trim() !== '' &&
+      lowonganState.create.form.gaji?.trim() !== '' &&
+      !isHtmlEmpty(lowonganState.create.form.deskripsi) &&
+      !isHtmlEmpty(lowonganState.create.form.kualifikasi)
+    );
+  };
+
  const resetForm = () => {
    lowonganState.create.form = {
      posisi: '',
@@ -175,8 +196,11 @@ function CreateLowonganKerja() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/[id]/page.tsx
@@ -28,6 +28,11 @@ function EditKategoriProduk() {
  const [formData, setFormData] = useState({ nama: '' });
  const [originalData, setOriginalData] = useState({ nama: '' });

+  // Check if form is valid
+  const isFormValid = () => {
+    return formData.nama?.trim() !== '';
+  };
+
  useEffect(() => {
    const loadKategoriProduk = async () => {
      if (!id) return;
@@ -146,8 +151,11 @@ function EditKategoriProduk() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/create/page.tsx
@@ -23,6 +23,11 @@ function CreateKategoriProduk() {
  const statePasar = useProxy(pasarDesaState.kategoriProduk);
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return statePasar.create.form.nama?.trim() !== '';
+  };
+
  useEffect(() => {
    statePasar.findMany.load();
  }, []);
@@ -101,8 +106,11 @@ function CreateKategoriProduk() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/edit/page.tsx
@@ -68,6 +68,23 @@ function EditPasarDesa() {
    deskripsi: ''
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.harga !== null &&
+      formData.harga > 0 &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // load data awal
  useEffect(() => {
    pasarState.kategoriProduk.findManyAll.load();
@@ -352,8 +369,11 @@ function EditPasarDesa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/create/page.tsx
@@ -32,6 +32,24 @@ export default function CreatePasarDesa() {
  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 (
+      statePasar.pasarDesa.create.form.nama?.trim() !== '' &&
+      statePasar.pasarDesa.create.form.harga !== null &&
+      statePasar.pasarDesa.create.form.harga > 0 &&
+      !isHtmlEmpty(statePasar.pasarDesa.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
  useEffect(() => {
    statePasar.kategoriProduk.findManyAll.load();
  }, []);
@@ -265,8 +283,11 @@ export default function CreatePasarDesa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/edit/page.tsx
@@ -53,6 +53,24 @@ function EditProgramKemiskinan() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [originalData, setOriginalData] = useState<FormData>(initialForm);

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.icon?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.statistik.jumlah?.trim() !== '' &&
+      formData.statistik.tahun?.trim() !== ''
+    );
+  };
+
  // Load data 1x dari global state → isi local state
  useEffect(() => {
    if (!id) return;
@@ -235,8 +253,11 @@ function EditProgramKemiskinan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/program-kemiskinan/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/program-kemiskinan/create/page.tsx
@@ -29,6 +29,25 @@ function CreateProgramKemiskinan() {
  const [lineChart, setLineChart] = useState<any[]>([]);

  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 (
+      programState.create.form.nama?.trim() !== '' &&
+      programState.create.form.icon?.trim() !== '' &&
+      !isHtmlEmpty(programState.create.form.deskripsi) &&
+      programState.create.form.statistik.jumlah?.trim() !== '' &&
+      programState.create.form.statistik.tahun?.trim() !== ''
+    );
+  };
+
  const resetForm = () => {
    programState.create.form = {
      nama: '',
@@ -172,8 +191,11 @@ function CreateProgramKemiskinan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/[id]/edit/page.tsx
@@ -41,6 +41,23 @@ function EditSektorUnggulanDesa() {
    value: 0,
  });

+  // 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.description) &&
+      formData.value !== null &&
+      formData.value >= 0
+    );
+  };
+
  // Load data saat komponen mount
  useEffect(() => {
    if (id) {
@@ -168,8 +185,11 @@ function EditSektorUnggulanDesa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/create/page.tsx
@@ -27,6 +27,23 @@ function CreateSektorUnggulanDesa() {
  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 (
+      stateGrafik.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(stateGrafik.create.form.description) &&
+      stateGrafik.create.form.value !== null &&
+      stateGrafik.create.form.value >= 0
+    );
+  };
+
  const resetForm = () => {
    stateGrafik.create.form = {
      name: '',
@@ -132,8 +149,11 @@ function CreateSektorUnggulanDesa() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/edit/page.tsx
@@ -53,6 +53,21 @@ function EditKeamananLingkungan() {
    imageUrl: "",
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // Load data sekali pas mount
  useEffect(() => {
    const loadData = async () => {
@@ -294,8 +309,11 @@ function EditKeamananLingkungan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx
@@ -35,6 +35,22 @@ function CreateKeamananLingkungan() {
  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 (
+      keamananState.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(keamananState.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
  const resetForm = () => {
    keamananState.create.form = {
      name: '',
@@ -237,8 +253,11 @@ function CreateKeamananLingkungan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/[id]/edit/page.tsx
@@ -39,6 +39,15 @@ function EditKontakItem() {
    icon: '',
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.nomorTelepon?.trim() !== '' &&
+      formData.icon?.trim() !== ''
+    );
+  };
+
  // Load data sekali dari global state
  useEffect(() => {
    const loadKontakDarurat = async () => {
@@ -170,8 +179,11 @@ function EditKontakItem() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/create/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/create/page.tsx
@@ -23,6 +23,16 @@ function CreateKontakItem() {
  const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      kontakState.create.form.nama?.trim() !== '' &&
+      kontakState.create.form.nomorTelepon?.trim() !== '' &&
+      kontakState.create.form.icon?.trim() !== ''
+    );
+  };
+
  const resetForm = () => {
    kontakState.create.form = {
      nama: '',
@@ -115,8 +125,11 @@ function CreateKontakItem() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx
@@ -46,6 +46,14 @@ export default function EditKontakDaruratKeamanan() {
    kategoriId: [],
  });

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

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      kontakState.create.form.nama?.trim() !== '' &&
+      kontakState.create.form.icon?.trim() !== ''
+    );
+  };
+
  useShallowEffect(() => {
    kontakDarurat.kontakDaruratItem.findMany.load();
  }, []);
@@ -127,8 +135,11 @@ function CreateKontakDaruratKeamanan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/laporan-publik/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/laporan-publik/[id]/edit/page.tsx
@@ -55,6 +55,25 @@ function EditLaporanPublik() {
    kronologi: '',
  });

+  // 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.lokasi?.trim() !== '' &&
+      formData.tanggalWaktu?.trim() !== '' &&
+      formData.status?.trim() !== '' &&
+      !isHtmlEmpty(formData.kronologi) &&
+      !isHtmlEmpty(formData.penanganan)
+    );
+  };
+
  useEffect(() => {
    const loadLaporanPublik = async () => {
      const id = params?.id as string;
@@ -223,8 +242,11 @@ function EditLaporanPublik() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx
@@ -26,6 +26,16 @@ function CreateLaporanPublik() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateLaporan.create.form.judul?.trim() !== '' &&
+      stateLaporan.create.form.lokasi?.trim() !== '' &&
+      stateLaporan.create.form.tanggalWaktu?.trim() !== '' &&
+      stateLaporan.create.form.kronologi?.trim() !== ''
+    );
+  };
+
  const resetForm = () => {
    stateLaporan.create.form = {
      judul: '',
@@ -123,8 +133,11 @@ function CreateLaporanPublik() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/[id]/edit/page.tsx
@@ -41,6 +41,23 @@ function EditPencegahanKriminalitas() {
    linkVideo: '',
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsiSingkat) &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      convertYoutubeUrlToEmbed(formData.linkVideo) !== ''
+    );
+  };
+
  // load data hanya sekali pas id berubah
  useEffect(() => {
    const loadKriminalitas = async () => {
@@ -220,8 +237,11 @@ function EditPencegahanKriminalitas() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx
@@ -28,6 +28,23 @@ function CreatePencegahanKriminalitas() {
  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 (
+      kriminalitasState.create.form.judul?.trim() !== '' &&
+      !isHtmlEmpty(kriminalitasState.create.form.deskripsiSingkat) &&
+      !isHtmlEmpty(kriminalitasState.create.form.deskripsi) &&
+      embedLink !== ''
+    );
+  };
+
  const resetForm = () => {
    kriminalitasState.create.form = {
      judul: "",
@@ -165,8 +182,11 @@ function CreatePencegahanKriminalitas() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/[id]/edit/page.tsx
@@ -67,6 +67,17 @@ function EditPolsekTerdekat() {
    layananPolsekId: []
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.jarakKeDesa?.trim() !== '' &&
+      formData.alamat?.trim() !== '' &&
+      formData.nomorTelepon?.trim() !== '' &&
+      formData.layananPolsekId.length > 0
+    );
+  };
+
    useEffect(() => {
    statePolsekTerdekat.layananPolsek.findManyAll.load();
  }, []);
@@ -261,8 +272,11 @@ function EditPolsekTerdekat() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/create/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/create/page.tsx
@@ -24,6 +24,17 @@ function CreatePolsekTerdekat() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      polsekState.create.form.nama?.trim() !== '' &&
+      polsekState.create.form.jarakKeDesa?.trim() !== '' &&
+      polsekState.create.form.alamat?.trim() !== '' &&
+      polsekState.create.form.nomorTelepon?.trim() !== '' &&
+      polsekState.create.form.layananPolsekId.length > 0
+    );
+  };
+
  useEffect(() => {
    statePolsekTerdekat.layananPolsek.findManyAll.load();
  }, []);
@@ -219,8 +230,11 @@ function CreatePolsekTerdekat() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/[id]/page.tsx
@@ -33,6 +33,11 @@ function EditLayananPolsek() {
    nama: '',
  });

+  // Check if form is valid
+  const isFormValid = () => {
+    return formData.nama?.trim() !== '';
+  };
+
  useEffect(() => {
    const loadLayananPolsek = async () => {
      const id = params?.id as string;
@@ -143,8 +148,11 @@ function EditLayananPolsek() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/create/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/create/page.tsx
@@ -22,6 +22,11 @@ function CreateLayananPolsek() {
  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: '',
@@ -93,8 +98,11 @@ function CreateLayananPolsek() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/edit/page.tsx
@@ -52,6 +52,21 @@ function EditTipsKeamanan() {
    imageUrl: "",
  });

+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
  // Load data saat pertama kali
  useEffect(() => {
    const loadData = async () => {
@@ -295,8 +310,11 @@ function EditTipsKeamanan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx
@@ -30,6 +30,22 @@ function CreateKeamananLingkungan() {
  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 (
+      stateKeamanan.create.form.judul?.trim() !== '' &&
+      !isHtmlEmpty(stateKeamanan.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
  const resetForm = () => {
    stateKeamanan.create.form = {
      judul: '',
@@ -199,8 +215,11 @@ function CreateKeamananLingkungan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/create/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/create/page.tsx
@@ -30,6 +30,33 @@ function CreateArtikelKesehatan() {
  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 (
+      stateArtikelKesehatan.create.form.title?.trim() !== '' &&
+      stateArtikelKesehatan.create.form.content?.trim() !== '' &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.introduction.content) &&
+      stateArtikelKesehatan.create.form.symptom.title?.trim() !== '' &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.symptom.content) &&
+      stateArtikelKesehatan.create.form.prevention.title?.trim() !== '' &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.prevention.content) &&
+      stateArtikelKesehatan.create.form.firstAid.title?.trim() !== '' &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.firstAid.content) &&
+      stateArtikelKesehatan.create.form.mythVsFact.title?.trim() !== '' &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.mythVsFact.mitos) &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.mythVsFact.fakta) &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.doctorSign.content) &&
+      file !== null
+    );
+  };
+
  const resetForm = () => {
    stateArtikelKesehatan.create.form = {
      title: '',
@@ -65,10 +92,79 @@ function CreateArtikelKesehatan() {

  const handleSubmit = async (e?: React.FormEvent) => {
    e?.preventDefault();
+
+    if (!stateArtikelKesehatan.create.form.title?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+
+    if (!stateArtikelKesehatan.create.form.content?.trim()) {
+      toast.error('Deskripsi wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.introduction.content)) {
+      toast.error('Pendahuluan wajib diisi');
+      return;
+    }
+
+    if (!stateArtikelKesehatan.create.form.symptom.title?.trim()) {
+      toast.error('Judul gejala wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.symptom.content)) {
+      toast.error('Deskripsi gejala wajib diisi');
+      return;
+    }
+
+    if (!stateArtikelKesehatan.create.form.prevention.title?.trim()) {
+      toast.error('Judul pencegahan wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.prevention.content)) {
+      toast.error('Deskripsi pencegahan wajib diisi');
+      return;
+    }
+
+    if (!stateArtikelKesehatan.create.form.firstAid.title?.trim()) {
+      toast.error('Judul pertolongan pertama wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.firstAid.content)) {
+      toast.error('Deskripsi pertolongan pertama wajib diisi');
+      return;
+    }
+
+    if (!stateArtikelKesehatan.create.form.mythVsFact.title?.trim()) {
+      toast.error('Judul mitos vs fakta wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.mythVsFact.mitos)) {
+      toast.error('Deskripsi mitos wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.mythVsFact.fakta)) {
+      toast.error('Deskripsi fakta wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.doctorSign.content)) {
+      toast.error('Deskripsi kapan harus ke dokter wajib diisi');
+      return;
+    }
+
+    if (!file) {
+      toast.error('Gambar wajib dipilih');
+      return;
+    }
+
    try {
-      if (!file) {
-        return toast.warn('Silakan pilih file gambar terlebih dahulu');
-      }
+      setIsSubmitting(true);

      const res = await ApiFetch.api.fileStorage.create.post({
        file,
@@ -344,8 +440,11 @@ function CreateArtikelKesehatan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/[id]/edit/page.tsx
@@ -45,6 +45,28 @@ function EditFasilitasKesehatan() {
  const params = useParams<{ id: string }>();
  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.informasiUmum.fasilitas?.trim() !== '' &&
+      formData.informasiUmum.alamat?.trim() !== '' &&
+      formData.informasiUmum.jamOperasional?.trim() !== '' &&
+      !isHtmlEmpty(formData.layananUnggulan.content) &&
+      formData.dokterdanTenagaMedis.length > 0 &&
+      !isHtmlEmpty(formData.fasilitasPendukung.content) &&
+      !isHtmlEmpty(formData.prosedurPendaftaran.content) &&
+      formData.tarifDanLayanan.length > 0
+    );
+  };
+
  const [formData, setFormData] = useState<EditFasilitasKesehatanForm>({
    name: '',
    informasiUmum: { fasilitas: '', alamat: '', jamOperasional: '' },
@@ -111,6 +133,52 @@ function EditFasilitasKesehatan() {

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
+
+    if (!formData.name?.trim()) {
+      toast.error('Nama fasilitas kesehatan wajib diisi');
+      return;
+    }
+
+    if (!formData.informasiUmum.fasilitas?.trim()) {
+      toast.error('Fasilitas wajib diisi');
+      return;
+    }
+
+    if (!formData.informasiUmum.alamat?.trim()) {
+      toast.error('Alamat wajib diisi');
+      return;
+    }
+
+    if (!formData.informasiUmum.jamOperasional?.trim()) {
+      toast.error('Jam operasional wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.layananUnggulan.content)) {
+      toast.error('Layanan unggulan wajib diisi');
+      return;
+    }
+
+    if (formData.dokterdanTenagaMedis.length === 0) {
+      toast.error('Dokter dan tenaga medis wajib dipilih');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.fasilitasPendukung.content)) {
+      toast.error('Fasilitas pendukung wajib diisi');
+      return;
+    }
+
+    if (formData.tarifDanLayanan.length === 0) {
+      toast.error('Tarif dan layanan wajib dipilih');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.prosedurPendaftaran.content)) {
+      toast.error('Prosedur pendaftaran wajib diisi');
+      return;
+    }
+
    try {
      setIsSubmitting(true);

@@ -264,8 +332,11 @@ function EditFasilitasKesehatan() {
            <Button
              type="submit"
              radius="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/create/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/create/page.tsx
@@ -26,6 +26,28 @@ function CreateFasilitasKesehatan() {
  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 (
+      stateFasilitasKesehatan.create.form.name?.trim() !== '' &&
+      stateFasilitasKesehatan.create.form.informasiUmum.fasilitas?.trim() !== '' &&
+      stateFasilitasKesehatan.create.form.informasiUmum.alamat?.trim() !== '' &&
+      stateFasilitasKesehatan.create.form.informasiUmum.jamOperasional?.trim() !== '' &&
+      !isHtmlEmpty(stateFasilitasKesehatan.create.form.layananUnggulan.content) &&
+      stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.length > 0 &&
+      !isHtmlEmpty(stateFasilitasKesehatan.create.form.fasilitasPendukung.content) &&
+      stateFasilitasKesehatan.create.form.tarifDanLayanan.length > 0 &&
+      !isHtmlEmpty(stateFasilitasKesehatan.create.form.prosedurPendaftaran.content)
+    );
+  };
+
  const resetForm = () => {
    stateFasilitasKesehatan.create.form = {
      name: '',
@@ -50,6 +72,52 @@ function CreateFasilitasKesehatan() {

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
+
+    if (!stateFasilitasKesehatan.create.form.name?.trim()) {
+      toast.error('Nama fasilitas kesehatan wajib diisi');
+      return;
+    }
+
+    if (!stateFasilitasKesehatan.create.form.informasiUmum.fasilitas?.trim()) {
+      toast.error('Fasilitas wajib diisi');
+      return;
+    }
+
+    if (!stateFasilitasKesehatan.create.form.informasiUmum.alamat?.trim()) {
+      toast.error('Alamat wajib diisi');
+      return;
+    }
+
+    if (!stateFasilitasKesehatan.create.form.informasiUmum.jamOperasional?.trim()) {
+      toast.error('Jam operasional wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateFasilitasKesehatan.create.form.layananUnggulan.content)) {
+      toast.error('Layanan unggulan wajib diisi');
+      return;
+    }
+
+    if (stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.length === 0) {
+      toast.error('Dokter dan tenaga medis wajib dipilih');
+      return;
+    }
+
+    if (isHtmlEmpty(stateFasilitasKesehatan.create.form.fasilitasPendukung.content)) {
+      toast.error('Fasilitas pendukung wajib diisi');
+      return;
+    }
+
+    if (stateFasilitasKesehatan.create.form.tarifDanLayanan.length === 0) {
+      toast.error('Layanan wajib dipilih');
+      return;
+    }
+
+    if (isHtmlEmpty(stateFasilitasKesehatan.create.form.prosedurPendaftaran.content)) {
+      toast.error('Prosedur pendaftaran wajib diisi');
+      return;
+    }
+
    try {
      setIsSubmitting(true);
      await stateFasilitasKesehatan.create.submit();
@@ -214,8 +282,11 @@ function CreateFasilitasKesehatan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/[id]/edit/page.tsx
@@ -29,6 +29,20 @@ function EditDokterTenagaMedis() {
  const params = useParams();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.specialist?.trim() !== '' &&
+      formData.jadwal?.trim() !== '' &&
+      formData.jadwalLibur?.trim() !== '' &&
+      formData.jamBukaOperasional !== '' &&
+      formData.jamTutupOperasional !== '' &&
+      formData.jamBukaLibur !== '' &&
+      formData.jamTutupLibur !== ''
+    );
+  };
+
  const [formData, setFormData] = useState({
    name: '',
    specialist: '',
@@ -108,6 +122,46 @@ function EditDokterTenagaMedis() {

  // Submit
  const handleSubmit = async () => {
+    if (!formData.name?.trim()) {
+      toast.error('Nama dokter wajib diisi');
+      return;
+    }
+
+    if (!formData.specialist?.trim()) {
+      toast.error('Specialist wajib diisi');
+      return;
+    }
+
+    if (!formData.jadwal?.trim()) {
+      toast.error('Jadwal wajib diisi');
+      return;
+    }
+
+    if (!formData.jadwalLibur?.trim()) {
+      toast.error('Jadwal libur wajib diisi');
+      return;
+    }
+
+    if (!formData.jamBukaOperasional) {
+      toast.error('Jam buka operasional wajib diisi');
+      return;
+    }
+
+    if (!formData.jamTutupOperasional) {
+      toast.error('Jam tutup operasional wajib diisi');
+      return;
+    }
+
+    if (!formData.jamBukaLibur) {
+      toast.error('Jam buka hari libur wajib diisi');
+      return;
+    }
+
+    if (!formData.jamTutupLibur) {
+      toast.error('Jam tutup hari libur wajib diisi');
+      return;
+    }
+
    try {
      setIsSubmitting(true);
      state.update.form = { ...state.update.form, ...formData };
@@ -223,8 +277,11 @@ function EditDokterTenagaMedis() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/create/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/create/page.tsx
@@ -16,6 +16,20 @@ function CreateDokter() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      createState.create.create.form.name?.trim() !== '' &&
+      createState.create.create.form.specialist?.trim() !== '' &&
+      createState.create.create.form.jadwal?.trim() !== '' &&
+      createState.create.create.form.jadwalLibur?.trim() !== '' &&
+      createState.create.create.form.jamBukaOperasional !== '' &&
+      createState.create.create.form.jamTutupOperasional !== '' &&
+      createState.create.create.form.jamBukaLibur !== '' &&
+      createState.create.create.form.jamTutupLibur !== ''
+    );
+  };
+
  const resetForm = () => {
    createState.create.create.form = {
      name: "",
@@ -41,7 +55,49 @@ function CreateDokter() {
  );


-  const handleSubmit = async () => {
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault(); // Prevent default form submission
+    
+    if (!createState.create.create.form.name?.trim()) {
+      toast.error('Nama dokter wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.specialist?.trim()) {
+      toast.error('Specialist wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.jadwal?.trim()) {
+      toast.error('Jadwal wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.jadwalLibur?.trim()) {
+      toast.error('Jadwal libur wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.jamBukaOperasional) {
+      toast.error('Jam buka operasional wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.jamTutupOperasional) {
+      toast.error('Jam tutup operasional wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.jamBukaLibur) {
+      toast.error('Jam buka hari libur wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.jamTutupLibur) {
+      toast.error('Jam tutup hari libur wajib diisi');
+      return;
+    }
+
    try {
      setIsSubmitting(true);
      await createState.create.create.create();
@@ -170,8 +226,11 @@ function CreateDokter() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/tarif-layanan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/tarif-layanan/[id]/page.tsx
@@ -25,6 +25,14 @@ function EditTarifLayanan() {
  const params = useParams();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.layanan?.trim() !== '' &&
+      formData.tarif?.trim() !== ''
+    );
+  };
+
  const [originalData, setOriginalData] = useState({
    tarif: '',
    layanan: ''
@@ -74,6 +82,16 @@ function EditTarifLayanan() {
  };

  const handleSubmit = async () => {
+    if (!formData.layanan?.trim()) {
+      toast.error('Layanan wajib diisi');
+      return;
+    }
+
+    if (!formData.tarif?.trim()) {
+      toast.error('Tarif wajib diisi');
+      return;
+    }
+
    try {
      setIsSubmitting(true);
      // update global state hanya saat submit
@@ -155,8 +173,11 @@ function EditTarifLayanan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/tarif-layanan/create/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/tarif-layanan/create/page.tsx
@@ -22,6 +22,14 @@ function CreateTarifLayanan() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      createState.create.form.layanan?.trim() !== '' &&
+      createState.create.form.tarif?.trim() !== ''
+    );
+  };
+
  const resetForm = () => {
    createState.create.form = {
      tarif: '',
@@ -30,6 +38,16 @@ function CreateTarifLayanan() {
  };

  const handleSubmit = async () => {
+    if (!createState.create.form.layanan?.trim()) {
+      toast.error('Layanan wajib diisi');
+      return;
+    }
+
+    if (!createState.create.form.tarif?.trim()) {
+      toast.error('Tarif wajib diisi');
+      return;
+    }
+
    setIsSubmitting(true);
    try {
      await createState.create.create();
@@ -101,8 +119,11 @@ function CreateTarifLayanan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/jadwal_kegiatan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/jadwal_kegiatan/[id]/edit/page.tsx
@@ -43,6 +43,25 @@ function EditJadwalKegiatan() {
  const [formData, setFormData] = useState<JadwalKegiatanFormBase>(emptyForm());
  const [originalData, setOriginalData] = useState<JadwalKegiatanFormBase>(emptyForm());

+  // 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.content?.trim() !== '' &&
+      formData.informasiJadwalKegiatan.name?.trim() !== '' &&
+      formData.informasiJadwalKegiatan.tanggal?.trim() !== '' &&
+      formData.informasiJadwalKegiatan.waktu?.trim() !== '' &&
+      formData.informasiJadwalKegiatan.lokasi?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsiJadwalKegiatan.deskripsi)
+    );
+  };
+

  // Helper untuk update nested state
  const updateNested = <
@@ -241,8 +260,11 @@ function EditJadwalKegiatan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/jadwal_kegiatan/create/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/jadwal_kegiatan/create/page.tsx
@@ -24,6 +24,25 @@ function CreateJadwalKegiatan() {
  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 (
+      stateJadwalKegiatan.create.form.content?.trim() !== '' &&
+      stateJadwalKegiatan.create.form.informasiJadwalKegiatan.name?.trim() !== '' &&
+      stateJadwalKegiatan.create.form.informasiJadwalKegiatan.tanggal?.trim() !== '' &&
+      stateJadwalKegiatan.create.form.informasiJadwalKegiatan.waktu?.trim() !== '' &&
+      stateJadwalKegiatan.create.form.informasiJadwalKegiatan.lokasi?.trim() !== '' &&
+      !isHtmlEmpty(stateJadwalKegiatan.create.form.deskripsiJadwalKegiatan.deskripsi)
+    );
+  };
+
  const resetForm = () => {
    stateJadwalKegiatan.create.form = {
      content: '',
@@ -198,8 +217,11 @@ function CreateJadwalKegiatan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/[id]/edit/page.tsx
@@ -26,6 +26,17 @@ function EditGrafikHasilKepuasan() {
  const params = useParams();
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.tanggal !== '' &&
+      formData.jenisKelamin?.trim() !== '' &&
+      formData.alamat?.trim() !== '' &&
+      formData.penyakit?.trim() !== ''
+    );
+  };
+
  const [formData, setFormData] = useState({
    nama: '',
    tanggal: '',
@@ -95,6 +106,31 @@ function EditGrafikHasilKepuasan() {
  };

  const handleSubmit = async () => {
+    if (!formData.nama?.trim()) {
+      toast.error('Nama wajib diisi');
+      return;
+    }
+
+    if (!formData.tanggal) {
+      toast.error('Tanggal wajib diisi');
+      return;
+    }
+
+    if (!formData.jenisKelamin?.trim()) {
+      toast.error('Jenis kelamin wajib diisi');
+      return;
+    }
+
+    if (!formData.alamat?.trim()) {
+      toast.error('Alamat wajib diisi');
+      return;
+    }
+
+    if (!formData.penyakit?.trim()) {
+      toast.error('Penyakit wajib diisi');
+      return;
+    }
+
    try {
      setIsSubmitting(true);
      editState.update.form = { ...editState.update.form, ...formData };
@@ -164,8 +200,11 @@ function EditGrafikHasilKepuasan() {
              onClick={handleSubmit}
              radius="md"
              size="md"
+              disabled={!isFormValid() || isSubmitting}
              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
nico	1ddc1d7eac	feat: add form validation for ekonomi module admin pages - Added isFormValid() and isHtmlEmpty() helper functions - Disabled submit buttons when required fields are empty - Applied consistent validation pattern across all create/edit pages - Validated fields: nama, deskripsi, tahun, jumlah, value, icon, statistik, and more - Edit pages allow existing data, create pages require all fields Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-02-18 16:13:20 +08:00
nico	aa354992e7	feat: add form validation for keamanan module admin pages - Added isFormValid() and isHtmlEmpty() helper functions - Disabled submit buttons when required fields are empty - Applied consistent validation pattern across all create/edit pages - Validated fields: judul, deskripsi, lokasi, tanggal, status, kronologi, penanganan, link video, and image uploads - Edit pages allow existing images, create pages require new uploads Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-02-18 11:22:30 +08:00
nico	d43b07c2ef	feat: add form validation for kesehatan module admin pages - Added isFormValid() and isHtmlEmpty() helper functions - Disabled submit buttons when required fields are empty - Applied consistent validation pattern across all create/edit pages - Validated fields: name, address, dates, descriptions, and image uploads - Edit pages allow existing images, create pages require new uploads Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-02-18 10:51:10 +08:00
nico	9678e6979b	feat: implement form validation for empty fields across multiple admin pages - Added validation to disable submit buttons when required fields are empty - Implemented consistent validation patterns across various admin pages - Applied validation to create and edit forms for berita, gallery, layanan, penghargaan, pengumuman, potensi, profil-desa, and ppid sections - Used helper functions to check for empty HTML content in editor fields - Ensured submit buttons are disabled until all required fields are filled Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-02-14 14:17:17 +08:00
nico	b35874b120	feat: add form validation and disable submit buttons when fields are empty Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-02-11 17:04:55 +08:00