Compare commits

..

48 Commits

Author SHA1 Message Date
0a5d17f45e docs: add AI collaboration contract and fix KegiatanCard image handling - bump to 0.1.48 2026-04-30 15:30:24 +08:00
83a2dece57 refactor(kegiatan-desa): redesign public list page to card grid + kategori filter
- Remove hero/featured section and tab navigation
- Redesign to pecalang-style: 3-col card grid (image, title, desc, Detail button)
- Replace tabs with Select dropdown filter by kategori
- Search + kategori filter use query params, stay on /semua route
- Image hidden when empty (no placeholder)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-30 15:09:33 +08:00
e0a5177257 feat(kegiatan-desa): add full CRUD frontend + public detail page - bump to 0.1.47
- API: add GET /:id endpoint (findUnique) for KegiatanDesa
- Admin CMS: add pages for list-kegiatan-desa and kategori-kegiatan-desa (list, create, detail, edit)
- Public: add detail page at /desa/kegiatan-desa/[kategori]/[id]
- Refactor: move KegiatanCard to _com to fix Next.js page export constraint
- Nav: register kegiatan-desa in navbar and admin page list

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-30 14:27:28 +08:00
23c955597e feat(api): add KategoriKegiatan CRUD API and register module - bump to 0.1.46
- Add KategoriKegiatan CRUD (create, findMany, findUnique, update, del)
- Register KategoriKegiatan in Desa API router
- Support soft delete for categories
2026-04-30 11:33:29 +08:00
28a22e8d77 chore(merge): merge sosial seeder branch into stg
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-30 11:02:14 +08:00
67efe6ce35 feat(seeder): add seeders for Sosial dashboard APIs
- Add seed_ringkasan_kesehatan.ts (ibuHamil=87, balita=342, stunting=12)
- Add seed_beasiswa_config.ts (tahun 2025/2026, dana Rp 1.2M)
- Add seed_kegiatan_desa.ts (KategoriKegiatan + KegiatanDesa incl. Budaya)
- Add kategori-kegiatan.json + kegiatan-desa.json data files
- Update posyandu.json: 1 → 8 posyandu (Mawar, Melati, Dahlia, Anggrek, dll)
- Update program-kesehatan.json: add persentase field + 4 stat entries
- Update seed_program_kesehatan.ts: include persentase in upsert
- Update seed.ts: import + call new seeders

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-30 11:00:44 +08:00
b39f9b39da feat(sosial): add schema fields + API endpoints for Sosial dashboard - bump to 0.1.45
- Add persentase field to ProgramKesehatan (for health stats bar chart)
- Add BeasiswaConfig model (dana tersalurkan + tahun ajaran)
- Add RingkasanKesehatanDesa model (ibu hamil, balita, alert stunting)
- Add KegiatanDesa CRUD API (GET /api/desa/kegiatandesa/find-many?kategori=Budaya)
- Add BeasiswaConfig API (GET/PUT /api/pendidikan/beasiswa/beasiswaconfig/...)
- Add RingkasanKesehatan API (GET/PUT /api/kesehatan/ringkasankesehatan/...)
- Migration: 20260430000000_add_sosial_fields

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-30 00:16:25 +08:00
6041cdf552 chore: bump version to 0.1.44 for stg deploy
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 14:35:03 +08:00
5cd6e3aa99 fix(api): update swagger path and add scalarConfig - bump to 0.1.43 2026-04-29 14:15:51 +08:00
f31ab0eda5 chore: bump version to 0.1.42 for stg deploy 2026-04-29 11:54:36 +08:00
0517d50c8e feat(umkm): dashboard frontend - mode toggle, kategoriAktif, jumlahKategoriTerbanyak, growth badge, trendPersen, filter dropdowns - bump to 0.1.41
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 07:41:42 +08:00
fa7a52a0f3 fix(umkm): dashboard backend - jumlahKategoriTerbanyak, kategoriAktif, growth, trendPersen, mode=week - bump to 0.1.40
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 02:34:36 +08:00
ef237aea2f chore: bump version to 0.1.40 for stg deploy 2026-04-29 02:33:21 +08:00
f6107e971d fix(umkm): use KategoriProdukUmkm in KPI and fix product detail description - bump to 0.1.39 2026-04-28 16:22:55 +08:00
550961d524 fix(umkm): make PasarDesa.kategoriProdukId nullable, null-out orphaned refs - bump to 0.1.38 2026-04-28 15:50:20 +08:00
34d49fa073 fix(umkm): seed KategoriProdukUmkm from PasarDesa FK data - bump to 0.1.37 2026-04-28 15:21:39 +08:00
1631e273a4 fix(umkm): migrate PasarDesa.kategoriProdukId FK to KategoriProdukUmkm - bump to 0.1.36 2026-04-28 14:26:23 +08:00
faf78064c7 chore: bump version to 0.1.35 for stg deploy 2026-04-28 11:08:13 +08:00
9dd5d1545f feat(umkm): migrate kategori produk to KategoriProdukUmkm model - bump to 0.1.34 2026-04-28 00:51:00 +08:00
a4c7a97593 feat(umkm): migrate KategoriProduk to KategoriProdukUmkm for UMKM isolation
- update prisma schema to use KategoriProdukUmkm for Umkm model
- add @@map to KategoriProdukUmkm for lowercase table naming
- update API endpoints and KPI dashboard to use new model
- bump version to 0.1.33
2026-04-28 00:47:22 +08:00
5ab014281a feat(umkm): implement full CRUD for product categories
- added CRUD endpoints for KategoriProduk in Elysia API
- updated umkmState with category management logic
- added 'Kategori Produk' tab in admin dashboard
- created list, create, and edit pages for category management
- bumped version to 0.1.32
2026-04-27 17:37:16 +08:00
865074a310 fix(umkm): fix toast.error return value bug in kategoriProduk state and deploy v0.1.31 2026-04-27 17:33:27 +08:00
b640bb3919 fix(migration): also delete KategoriToPasar rows before PasarDesa FK cleanup - bump to 0.1.30 2026-04-27 15:20:01 +08:00
f48b982b3c fix(migration): delete invalid PasarDesa rows before FK constraint - bump to 0.1.29 2026-04-27 14:54:53 +08:00
cfe06137d8 chore: bump version to 0.1.28 for stg deploy 2026-04-27 14:08:01 +08:00
f0504c9dc0 fix(migration): make migration idempotent and auto-resolve failed state on deploy
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-27 12:02:21 +08:00
1916c616de fix(env): add MinIO placeholder vars to .env.example for Docker build
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-27 11:35:20 +08:00
e3345c71f5 fix(docker): copy bun.lock text lockfile and update lockfile
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-27 11:22:41 +08:00
68da360cea chore: update bun lockfile for stg deploy
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-27 11:17:34 +08:00
b9b2b65294 chore: bump version to 0.1.27 for stg deploy 2026-04-27 11:11:03 +08:00
71e23dea1a feat(api): add /version endpoint and increment version to 0.1.25 2026-04-27 10:19:56 +08:00
cd7425292c feat(ekonomi): refactor umkm module with sales delete, stock validation, and ordering system 2026-04-24 16:57:43 +08:00
187e3a2115 feat(admin): refactor UMKM edit pages to match berita pattern with interfaces 2026-04-24 14:34:02 +08:00
7f5588f69e feat(admin): refactor UMKM edit pages to match berita pattern 2026-04-24 14:20:40 +08:00
30fbed73c9 fix(admin): resolve 404 on kategoriProduk API and correct Valtio state endpoint mismatches
- Created missing API endpoint
- Corrected UMKM and Produk update/delete routes in Valtio state to match Elysia API:
  - UMKM Update:
  - UMKM Delete:
  - Produk Update:
  - Produk Delete:
2026-04-24 12:19:24 +08:00
67c51302fe docs: add plan, task, and summary for admin-umkm-edit 2026-04-24 11:49:15 +08:00
b1916ca3a3 feat(admin): implement edit and delete functionality for UMKM and Produk modules
- Added update and del methods to UMKM Valtio state
- Wired up edit and delete buttons in UMKM and Produk list pages
- Integrated ModalKonfirmasiHapus for deletion safety
- Created UMKM and Produk edit pages with data loading and image previews
- Cleaned up unused imports and fixed useEffect dependencies
- Bumped version to 0.1.21
2026-04-24 11:46:08 +08:00
b9d43eb723 fix(storage): migrate domain-specific delete and update handlers to MinIO
- Replaces local filesystem operations (fs.unlink, path.join) with MinIO removeObject in all domain lib handlers
- Updated handlers for: Berita, GalleryFoto, Layanan, Musik, Penghargaan, Potensi, Profile, Inovasi, Keamanan, Kesehatan, LandingPage, and PPID
- bump: version 0.1.19 -> 0.1.20
2026-04-23 17:05:44 +08:00
37940fc7e2 fix(img): fix WebP Content-Type bug and seed 232 missing FileStorage records
- img.ts: replace hardcoded 'image/jpeg' Content-Type with dynamic MIME_MAP
  lookup per file extension — WebP files now served with correct 'image/webp'
  header so browsers can decode them
- img.ts: skip sharp resize when no size param (serve original buffer directly)
- Adds migration 20260423072135 to add stok and umkmId columns to PasarDesa
- FileStorage DB now has all 232 MinIO images seeded (was 80, missing 152)
- All domain records (Berita 18/18, GalleryFoto 3/3, PasarDesa 4/4, etc.)
  now have imageId properly linked after full re-seed

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-23 15:41:20 +08:00
2958950585 fix(storage): migrate fileStorage handlers and seeder from local disk/Seafile to MinIO
Root cause: images not showing because:
1. seed_assets.ts was listing from Seafile (unreliable, 502 errors)
2. fileStorage create/findUniq/del handlers used local disk (not available in containers)
3. link format in file-storage.json had inconsistent path prefix

Changes:
- seed_assets.ts: list objects from MinIO bucket instead of Seafile API; seed
  link as /api/img/{name}, path as "image" (matches MinIO prefix)
- fileStorage/create.ts: upload image/audio/document to MinIO via putObject;
  remove WIBU_UPLOAD_DIR dependency and all fs.writeFile calls
- fileStorage/findUniq.ts: stream file from MinIO via getObject; remove
  WIBU_UPLOAD_DIR and fs.readFile
- fileStorage/del.ts: delete from MinIO via removeObject; remove fs.unlink
- file-storage.json: fix path field to "image" (was full path); all 80 entries
  already have correct link=/api/img/{name} format

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-23 14:28:08 +08:00
d145611221 bump: version 0.1.18 -> 0.1.19 2026-04-23 13:53:17 +08:00
437e9aa13c fix(build): resolve type errors in img.ts and cleanup route.ts 2026-04-23 13:52:57 +08:00
55d0735fcf merge(stg): merge main into stg and resolve storage conflicts 2026-04-23 13:48:26 +08:00
00a81d7dba Migrate Minio 2026-04-23 12:13:25 +08:00
b9b00f0a20 docs(qc): add quality control summaries for various modules
Added comprehensive QC reports and fix summaries for:
- Desa (Berita, Potensi, Profil, Layanan, Penghargaan, Pengumuman)
- Kesehatan (Posyandu)
- Landing Page (APBDes, SDGS, Anti-Korupsi, Profil, Prestasi)
- PPID (Daftar Informasi, Dasar Hukum, IKM, Permohonan, Struktur, Visi Misi)
2026-04-23 12:11:55 +08:00
fec6b79743 feat(storage): add Seafile→MinIO migration script and asset manifest
- migrate-seafile-to-minio.ts: downloads 80 assets from Seafile public
  share and re-uploads to MinIO with identical filenames (idempotent,
  skips existing objects)
- file-storage.json: asset manifest with names and Seafile download URLs
  used as migration source

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-23 12:06:40 +08:00
6fc79f7541 feat(storage): migrate file storage from local disk to MinIO
Replace local filesystem-based image storage with MinIO S3-compatible
object storage. All upload, serve, delete, and list operations now use
the MinIO bucket defined in MINIO_* env vars.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-23 11:40:43 +08:00
1a48c15c87 refactor(ekonomi): consolidate Pasar Desa into UMKM module
- Remove "Pasar Desa" as a separate entity; products are now strictly linked to UMKM.
- Delete redundant Pasar Desa API endpoints and state management.
- Update Admin UI: remove "Pasar Desa" menu and unified product management under UMKM.
- Update Public UI: replace "Pasar Desa" with "UMKM" in navbar and unified hub at /darmasaba/ekonomi/umkm.
- Implement mandatory umkmId in PasarDesa model and update seeders accordingly.
- Fix UI bugs, missing imports, and invalid API filters for mandatory umkmId.
- Increment version to 0.1.18.
2026-04-21 17:52:08 +08:00
223 changed files with 26847 additions and 4290 deletions

44
.claude/ARCHITECTURE.md Normal file
View File

@@ -0,0 +1,44 @@
# Architecture
## Tech Stack
- **Framework**: Next.js 15 (App Router) + React 19
- **Runtime/Package manager**: Bun (not npm)
- **API server**: Elysia.js (mounted at `/api/[[...slugs]]`)
- **ORM**: Prisma + PostgreSQL
- **UI**: Mantine UI v7-8
- **State**: Jotai (atoms), Valtio (proxies), SWR (data fetching)
- **Auth**: iron-session + JWT
- **File storage**: Local uploads + MinIO (object storage) + Seafile (self-hosted fallback)
## Request Flow
```
Browser → Next.js middleware (src/middleware.ts)
→ Public pages: src/app/darmasaba/
→ Admin pages: src/app/admin/
→ API: src/app/api/[[...slugs]]/route.ts (Elysia.js)
└── _lib/*.ts (domain modules)
```
The Elysia server is a single entry point with domain-specific modules: `desa/`, `kesehatan/`, `ekonomi/`, `keamanan/`, `lingkungan/`, `pendidikan/`, `kependudukan/`, `ppid/`, `inovasi/`, `landing_page/`, `search/`, `auth/`, `user/`, `fileStorage/`. Swagger docs are auto-generated at `/api/docs`.
## Domain Modules
Each domain (desa, kesehatan, ekonomi, etc.) has:
- API handler in `src/app/api/[[...slugs]]/_lib/<domain>/`
- Admin CMS pages in `src/app/admin/(dashboard)/<domain>/`
- Public pages in `src/app/darmasaba/(pages)/<domain>/`
Active domains: `desa`, `ekonomi`, `inovasi`, `keamanan`, `kependudukan`, `kesehatan`, `lingkungan`, `musik`, `pendidikan`, `ppid` — plus `landing_page` and `search` (API-only, no public/admin pages).
## Key Files
| File | Purpose |
|------|---------|
| `src/middleware.ts` | Route guards and auth |
| `src/lib/prisma.ts` | Prisma client singleton |
| `src/lib/api-auth.ts` | JWT/session validation |
| `src/lib/api-fetch.ts` | Typed fetch wrapper used by frontend |
| `src/lib/session.ts` | iron-session config |
| `next.config.ts` | Next.js config (cache headers, allowed origins) |
| `postcss.config.cjs` | Mantine CSS preset and breakpoints |
| `docker-entrypoint.sh` | Runs `prisma migrate deploy` then starts app |

16
.claude/DATABASE.md Normal file
View File

@@ -0,0 +1,16 @@
# Database & Data Layer
## Prisma Schema
- Schema at `prisma/schema.prisma` (~2400 lines, 100+ models)
- Common model conventions: `@default(cuid())` IDs, `createdAt`/`updatedAt` timestamps, `deletedAt DateTime?` (soft delete), `isActive Boolean @default(true)`
- Seeders per-module in `prisma/_seeder_list/`, orchestrated by `prisma/seed.ts`
## Authentication Flow
1. User submits phone → OTP sent (email/SMS)
2. OTP validated → JWT created + iron-session stored
3. `UserSession` model tracks active sessions
4. `src/middleware.ts` validates on each request
5. `src/lib/api-auth.ts` handles JWT/session checks in API routes
## File Handling
All uploaded files reference the `FileStorage` Prisma model. Uploads land in `WIBU_UPLOAD_DIR` (default: `uploads/`). Seafile is the external storage fallback.

34
.claude/DEPLOYMENT.md Normal file
View File

@@ -0,0 +1,34 @@
# Deployment
## Environment Variables
Copy `.env.example` to `.env`. Required variables:
```env
DATABASE_URL="postgresql://..."
NEXT_PUBLIC_BASE_URL="/"
BASE_SESSION_KEY="..." # random string
BASE_TOKEN_KEY="..." # random string
SESSION_PASSWORD="..." # min 32 chars
SEAFILE_TOKEN="..."
SEAFILE_REPO_ID="..."
SEAFILE_URL="..."
MINIO_ENDPOINT="..."
MINIO_ACCESS_KEY="..."
MINIO_SECRET_KEY="..."
MINIO_BUCKET="..."
MINIO_USE_SSL="..."
```
## Docker
Multi-stage build: `oven/bun:1-debian` → builder → runner. The runner creates a `nextjs` user (UID 1001), exposes port 3000, and mounts `/app/uploads` as a volume. Entrypoint runs migrations automatically.
## CI/CD
GitHub Actions workflows in `.github/workflows/`:
- `docker-publish.yml` — triggers on `v*` tags, pushes to GHCR
- `publish.yml` — manual build & push
- `re-pull.yml` — triggers Portainer to redeploy latest image
To release: tag with `git tag -a v0.1.x -m "..."` and push the tag.

View File

@@ -0,0 +1,120 @@
# deploy-stg
Deploy ke staging environment secara penuh menggunakan MCP server `deploy-stg`.
**Repo GitHub:** `bipprojectbali/desa-darmasaba`
**Branch stg:** `stg`
**STG URL:** `https://desa-darmasaba-stg.wibudev.com`
---
## Alur Eksekusi
### Langkah 0 — Cek /api/version endpoint
Pastikan endpoint `/api/version` sudah ada di API:
```bash
grep -n '"/version"' src/app/api/\[\[...slugs\]\]/route.ts
```
Jika belum ada, tambahkan ke main API group yang membaca `version` dari `package.json`.
---
### Langkah 1 — Version Bump
Gunakan MCP tool `bump_version` (server: `deploy-stg`).
Tool otomatis baca `package.json`, increment patch (+1), tulis kembali.
Catat `new_version` dari response — akan dipakai di Langkah 5 dan 6.
---
### Langkah 2 — Cek & Buat Migration
Gunakan MCP tool `check_migrations` (server: `deploy-stg`).
- Jika `needs_migration: true` → jalankan `create_migration` dengan `name: bump-stg-<new_version>`
- Jika `is_up_to_date: true` → lanjut ke Langkah 3
---
### Langkah 3 — Build Check
```bash
bun run build
```
Jika build gagal → **stop**, perbaiki error sebelum melanjutkan.
---
### Langkah 4 — Commit & Push ke stg
Gunakan MCP tool `commit_and_push_stg` (server: `deploy-stg`).
Tool otomatis stage `package.json` + `prisma/migrations/`, commit dengan message yang menyertakan versi baru, lalu push ke branch `stg` menggunakan `GH_TOKEN`.
---
### Langkah 5 — Trigger publish.yml
Gunakan MCP tool `trigger_publish` (server: `deploy-stg`):
- `stack_env`: `stg` (default)
- `tag`: nilai `new_version` dari Langkah 1 (sama persis dengan versi di `package.json`)
Tool mengembalikan `run_id`. Poll dengan `watch_workflow_run` setiap 30 detik hingga `status == "completed"`:
- `conclusion == "success"` → lanjut ke Langkah 6
- `conclusion != "success"`**stop**, tampilkan error, jangan lanjut ke re-pull
---
### Langkah 6 — Trigger re-pull.yml
Setelah publish berhasil, gunakan MCP tool `trigger_repull` (server: `deploy-stg`):
- `stack_name`: otomatis dari env `STACK_NAME` (tidak perlu diisi manual)
- `stack_env`: `stg`
Stack yang di-deploy: `<STACK_NAME>-stg`. Poll dengan `watch_workflow_run` setiap 30 detik hingga `status == "completed"`.
---
### Langkah 7 — Verifikasi Versi
Gunakan MCP tool `check_stg_version` (server: `deploy-stg`):
- `wait_seconds`: `30` (tunggu container siap)
Tool otomatis fetch `BASE_URL/api/version` dan bandingkan dengan versi lokal.
- `match: true`**Deploy berhasil!**
- `match: false` → cek container logs di Portainer atau jalankan `gh run view <run_id> --repo bipprojectbali/desa-darmasaba --log`
---
## Ringkasan MCP Tools
| Tool | Server | Tujuan |
|------|--------|--------|
| `bump_version` | `deploy-stg` | Increment patch version di package.json |
| `check_migrations` | `deploy-stg` | Cek status Prisma migrations |
| `create_migration` | `deploy-stg` | Buat migration baru jika diperlukan |
| `commit_and_push_stg` | `deploy-stg` | Commit + push ke branch stg |
| `trigger_publish` | `deploy-stg` | Trigger publish.yml (build Docker image) |
| `watch_workflow_run` | `deploy-stg` | Poll status workflow run |
| `trigger_repull` | `deploy-stg` | Trigger re-pull.yml (redeploy di Portainer) |
| `check_stg_version` | `deploy-stg` | Bandingkan versi lokal vs STG |
## Ringkasan Workflow Inputs
| Workflow | Input | Value |
|----------|-------|-------|
| `publish.yml` | `stack_env` | `stg` |
| `publish.yml` | `tag` | versi dari `package.json` (e.g. `0.1.26`) |
| `publish.yml` | `stack_name` | dari env `STACK_NAME` (opsional) |
| `re-pull.yml` | `stack_name` | dari env `STACK_NAME` (otomatis) |
| `re-pull.yml` | `stack_env` | `stg` |
## Catatan
- Jangan jalankan `re-pull.yml` jika `publish.yml` belum selesai/berhasil.
- Isi `GH_TOKEN` di `.env` sebelum menjalankan deploy (bisa sama dengan `GH_TOKEN`).
- `BASE_URL` di `.env` sudah diset ke `https://desa-darmasaba-stg.wibudev.com`.
- `STACK_NAME` di `.env` diset ke nama stack (e.g. `desa-darmasaba`) — dipakai otomatis oleh `trigger_publish` dan `trigger_repull`.
- Verifikasi versi via `/api/version` (bukan `/api/utils/version`).

View File

@@ -0,0 +1,478 @@
#!/usr/bin/env node
/**
* MCP Server: GitHub Actions Workflow Tools + Deploy-STG Pre/Post Steps
* Tools: trigger_publish, trigger_repull, get_workflow_runs, watch_workflow_run,
* check_migrations, create_migration, bump_version, commit_and_push_stg, check_stg_version
*/
import { spawnSync } from "child_process";
import { readFileSync, writeFileSync } from "fs";
import { join } from "path";
const REPO = "bipprojectbali/desa-darmasaba";
const CWD = process.cwd();
// --- MCP Protocol Helpers ---
function send(obj) {
process.stdout.write(JSON.stringify(obj) + "\n");
}
function respond(id, result) {
send({ jsonrpc: "2.0", id, result });
}
function respondError(id, code, message) {
send({ jsonrpc: "2.0", id, error: { code, message } });
}
// --- Shell Helper ---
function runCmd(cmd, opts = {}) {
const r = spawnSync("sh", ["-c", cmd], {
encoding: "utf-8",
cwd: CWD,
...opts,
});
if (r.error) return { ok: false, out: r.error.message };
if (r.status !== 0) return { ok: false, out: (r.stderr || r.stdout || "").trim() };
return { ok: true, out: (r.stdout || "").trim() };
}
function getLatestRunId(workflow, delaySecs = 3) {
const r = runCmd(
`sleep ${delaySecs} && gh run list --workflow=${workflow} --repo ${REPO} --limit 1 --json databaseId -q '.[0].databaseId'`
);
return r.ok ? r.out.trim() : null;
}
// --- Tool Definitions ---
const TOOLS = [
{
name: "check_migrations",
description: "Cek status Prisma migrations. Returns apakah ada pending migrations.",
inputSchema: { type: "object", properties: {} },
},
{
name: "create_migration",
description: "Buat Prisma migration baru (prisma migrate dev). Jalankan hanya jika check_migrations mendeteksi pending/drift.",
inputSchema: {
type: "object",
properties: {
name: {
type: "string",
description: "Nama migration (e.g. bump-stg-0.1.26)",
},
},
required: ["name"],
},
},
{
name: "bump_version",
description: "Baca versi dari package.json, increment patch (+1), tulis kembali. Returns old_version dan new_version.",
inputSchema: { type: "object", properties: {} },
},
{
name: "commit_and_push_stg",
description: "Stage package.json + prisma/migrations, commit, lalu push ke branch stg menggunakan GH_TOKEN.",
inputSchema: {
type: "object",
properties: {
message: {
type: "string",
description: "Commit message. Jika tidak diisi, auto-generate dari versi package.json.",
},
},
},
},
{
name: "check_stg_version",
description: "Bandingkan versi lokal (package.json) dengan versi di STG (/api/version). Tunggu container siap jika perlu.",
inputSchema: {
type: "object",
properties: {
wait_seconds: {
type: "number",
description: "Detik tunggu sebelum fetch STG (default: 30, untuk memberi waktu container siap).",
},
},
},
},
{
name: "trigger_publish",
description:
"Trigger publish.yml workflow: build & push Docker image ke GHCR. Returns run ID.",
inputSchema: {
type: "object",
properties: {
stack_env: {
type: "string",
enum: ["dev", "stg", "prod"],
description: "Target environment. Default: stg.",
},
tag: {
type: "string",
description: "Image tag — harus sama persis dengan versi di package.json (e.g. 0.1.25).",
},
stack_name: {
type: "string",
description: `Nama stack. Default: nilai env STACK_NAME (${process.env.STACK_NAME || "belum diset"}).`,
},
},
required: ["stack_env", "tag"],
},
},
{
name: "trigger_repull",
description:
"Trigger re-pull.yml workflow: redeploy stack di Portainer. Jalankan HANYA setelah publish berhasil.",
inputSchema: {
type: "object",
properties: {
stack_name: {
type: "string",
description: `Nama stack (e.g. desa-darmasaba). Stack yang di-deploy: <stack_name>-<stack_env>. Default: nilai env STACK_NAME (${process.env.STACK_NAME || "belum diset"}).`,
},
stack_env: {
type: "string",
enum: ["dev", "stg", "prod"],
description: "Target environment.",
},
},
required: ["stack_env"],
},
},
{
name: "get_workflow_runs",
description: "List run terbaru dari suatu workflow beserta status dan conclusion-nya.",
inputSchema: {
type: "object",
properties: {
workflow: {
type: "string",
description: "Nama file workflow (e.g. publish.yml, re-pull.yml)",
},
limit: {
type: "number",
description: "Jumlah run yang ditampilkan (default: 5)",
},
},
required: ["workflow"],
},
},
{
name: "watch_workflow_run",
description:
"Lihat status detail sebuah workflow run: apakah in_progress, success, atau failure.",
inputSchema: {
type: "object",
properties: {
run_id: {
type: "number",
description: "ID workflow run (dapat dari trigger_publish / trigger_repull / get_workflow_runs)",
},
},
required: ["run_id"],
},
},
];
// --- Tool Handlers ---
function handleCheckMigrations() {
const r = runCmd("bunx prisma migrate status 2>&1", { timeout: 30000 });
const out = r.out || "";
const hasPending =
out.includes("following migration(s) have not yet been applied") ||
out.includes("drift") ||
out.includes("pending");
const isUpToDate =
out.includes("Database schema is up to date") ||
out.includes("up to date");
return {
ok: true,
needs_migration: hasPending && !isUpToDate,
is_up_to_date: isUpToDate,
output: out,
};
}
function handleCreateMigration(args) {
const { name } = args;
const r = runCmd(
`echo "" | bunx prisma migrate dev --name ${name} --skip-generate 2>&1`,
{ timeout: 120000 }
);
return {
ok: r.ok,
output: r.out,
error: r.ok ? undefined : r.out,
};
}
function handleBumpVersion() {
const pkgPath = join(CWD, "package.json");
let pkg;
try {
pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
} catch (e) {
return { ok: false, error: `Gagal baca package.json: ${e.message}` };
}
const oldVersion = pkg.version;
const [maj, min, pat] = oldVersion.split(".").map(Number);
const newVersion = `${maj}.${min}.${pat + 1}`;
pkg.version = newVersion;
try {
writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
} catch (e) {
return { ok: false, error: `Gagal tulis package.json: ${e.message}` };
}
return { ok: true, old_version: oldVersion, new_version: newVersion };
}
function handleCommitAndPushStg(args) {
const { message } = args || {};
// Baca versi untuk auto commit message
let version = "unknown";
try {
const pkg = JSON.parse(readFileSync(join(CWD, "package.json"), "utf-8"));
version = pkg.version;
} catch {}
const commitMsg = message || `chore: bump version to ${version} for stg deploy`;
// Stage file
runCmd("git add package.json 2>&1");
runCmd("git add prisma/migrations/ 2>&1");
// Cek apakah ada yang di-stage
const statusR = runCmd("git diff --cached --name-only 2>&1");
if (!statusR.out.trim()) {
return { ok: false, error: "Tidak ada perubahan yang di-stage untuk di-commit." };
}
// Commit
const commitR = runCmd(`git commit -m "${commitMsg}" 2>&1`);
if (!commitR.ok) return { ok: false, step: "commit", error: commitR.out };
// Push ke stg menggunakan GH_TOKEN jika tersedia
const token = process.env.GH_TOKEN;
const pushCmd = token
? `git push https://x-access-token:${token}@github.com/${REPO}.git HEAD:stg 2>&1`
: `git push origin HEAD:stg 2>&1`;
const pushR = runCmd(pushCmd, { timeout: 60000 });
if (!pushR.ok) return { ok: false, step: "push", error: pushR.out };
return {
ok: true,
message: `Berhasil commit "${commitMsg}" dan push ke stg`,
version,
};
}
function handleCheckStgVersion(args) {
const waitSecs = (args && args.wait_seconds) || 30;
const baseUrl = process.env.BASE_URL;
if (!baseUrl) {
return { ok: false, error: "BASE_URL tidak ada di environment — isi di .env" };
}
// Baca versi lokal
let localVersion;
try {
const pkg = JSON.parse(readFileSync(join(CWD, "package.json"), "utf-8"));
localVersion = pkg.version;
} catch (e) {
return { ok: false, error: `Gagal baca package.json: ${e.message}` };
}
// Tunggu container siap
if (waitSecs > 0) {
runCmd(`sleep ${waitSecs}`);
}
// Fetch versi dari STG
const r = runCmd(`curl -sf --max-time 10 "${baseUrl}/api/version" 2>&1`);
if (!r.ok) {
return {
ok: false,
error: `Gagal fetch ${baseUrl}/api/version: ${r.out}`,
local_version: localVersion,
};
}
let stgVersion;
try {
stgVersion = JSON.parse(r.out).version;
} catch {
return {
ok: false,
error: `Gagal parse response: ${r.out}`,
local_version: localVersion,
};
}
const match = localVersion === stgVersion;
return {
ok: true,
local_version: localVersion,
stg_version: stgVersion,
match,
status: match
? "✓ DEPLOY BERHASIL — versi STG sudah sesuai"
: "✗ VERSI BERBEDA — cek container logs di Portainer",
};
}
function handleTriggerPublish(args) {
const { stack_env = "stg", tag, stack_name } = args;
const resolvedStackName = stack_name || process.env.STACK_NAME;
let triggerCmd = `gh workflow run publish.yml --repo ${REPO} --ref ${stack_env} -f stack_env=${stack_env} -f tag=${tag}`;
if (resolvedStackName) triggerCmd += ` -f stack_name=${resolvedStackName}`;
const r = runCmd(triggerCmd);
if (!r.ok) return { ok: false, error: r.out };
const runId = getLatestRunId("publish.yml");
return {
ok: true,
message: `Workflow publish.yml di-trigger (env=${stack_env}, tag=${tag}${resolvedStackName ? `, stack=${resolvedStackName}` : ""})`,
run_id: runId ? Number(runId) : null,
monitor_hint: runId
? `Gunakan watch_workflow_run dengan run_id: ${runId}`
: "Gunakan get_workflow_runs untuk mendapatkan run_id terbaru",
};
}
function handleTriggerRepull(args) {
const resolvedStackName = args.stack_name || process.env.STACK_NAME;
const { stack_env } = args;
if (!resolvedStackName) {
return { ok: false, error: "stack_name wajib diisi atau set env STACK_NAME di .mcp.json" };
}
const stack_name = resolvedStackName;
const triggerCmd = `gh workflow run re-pull.yml --repo ${REPO} --ref main -f stack_name=${stack_name} -f stack_env=${stack_env}`;
const r = runCmd(triggerCmd);
if (!r.ok) return { ok: false, error: r.out };
const runId = getLatestRunId("re-pull.yml");
return {
ok: true,
message: `Workflow re-pull.yml di-trigger (stack=${stack_name}-${stack_env})`,
run_id: runId ? Number(runId) : null,
monitor_hint: runId
? `Gunakan watch_workflow_run dengan run_id: ${runId}`
: "Gunakan get_workflow_runs untuk mendapatkan run_id terbaru",
};
}
function handleGetWorkflowRuns(args) {
const limit = args.limit || 5;
const r = runCmd(
`gh run list --workflow=${args.workflow} --repo ${REPO} --limit ${limit} --json databaseId,status,conclusion,displayTitle,createdAt,headBranch`
);
if (!r.ok) return { ok: false, error: r.out };
try {
return { ok: true, runs: JSON.parse(r.out) };
} catch {
return { ok: false, error: "Gagal parse output", raw: r.out };
}
}
function handleWatchWorkflowRun(args) {
const r = runCmd(
`gh run view ${args.run_id} --repo ${REPO} --json status,conclusion,displayTitle,headBranch,createdAt,updatedAt,jobs`
);
if (!r.ok) return { ok: false, error: r.out };
try {
const data = JSON.parse(r.out);
return {
ok: true,
run_id: args.run_id,
status: data.status,
conclusion: data.conclusion,
title: data.displayTitle,
branch: data.headBranch,
jobs: (data.jobs || []).map((j) => ({
name: j.name,
status: j.status,
conclusion: j.conclusion,
})),
};
} catch {
return { ok: false, error: "Gagal parse output", raw: r.out };
}
}
// --- Request Router ---
function handleMessage(msg) {
const { id, method, params } = msg;
if (method === "initialize") {
respond(id, {
protocolVersion: "2024-11-05",
capabilities: { tools: {} },
serverInfo: { name: "deploy-stg", version: "2.0.0" },
});
return;
}
if (method === "notifications/initialized") return;
if (method === "ping") {
respond(id, {});
return;
}
if (method === "tools/list") {
respond(id, { tools: TOOLS });
return;
}
if (method === "tools/call") {
const { name, arguments: args = {} } = params;
let result;
if (name === "check_migrations") result = handleCheckMigrations();
else if (name === "create_migration") result = handleCreateMigration(args);
else if (name === "bump_version") result = handleBumpVersion();
else if (name === "commit_and_push_stg") result = handleCommitAndPushStg(args);
else if (name === "check_stg_version") result = handleCheckStgVersion(args);
else if (name === "trigger_publish") result = handleTriggerPublish(args);
else if (name === "trigger_repull") result = handleTriggerRepull(args);
else if (name === "get_workflow_runs") result = handleGetWorkflowRuns(args);
else if (name === "watch_workflow_run") result = handleWatchWorkflowRun(args);
else {
respondError(id, -32601, `Tool tidak ditemukan: ${name}`);
return;
}
respond(id, {
content: [{ type: "text", text: JSON.stringify(result, null, 2) }],
});
return;
}
respondError(id, -32601, `Method tidak dikenal: ${method}`);
}
// --- Stdin Loop ---
let buf = "";
process.stdin.setEncoding("utf-8");
process.stdin.on("data", (chunk) => {
buf += chunk;
const lines = buf.split("\n");
buf = lines.pop();
for (const line of lines) {
const trimmed = line.trim();
if (!trimmed) continue;
try {
handleMessage(JSON.parse(trimmed));
} catch {
// ignore malformed JSON
}
}
});

View File

@@ -40,5 +40,12 @@ SESSION_PASSWORD="your_session_password_min_32_characters_long_secure"
# ElevenLabs API Key (for TTS features - optional)
ELEVENLABS_API_KEY=your_elevenlabs_api_key
# MinIO Configuration (Object Storage)
MINIO_ENDPOINT=localhost
MINIO_ACCESS_KEY=your_minio_access_key
MINIO_SECRET_KEY=your_minio_secret_key
MINIO_BUCKET=desa-darmasaba
MINIO_USE_SSL=false
# Environment (optional, defaults to development)
# NODE_ENV=development

13
.mcp.json Normal file
View File

@@ -0,0 +1,13 @@
{
"mcpServers": {
"deploy-stg": {
"command": "node",
"args": ["--env-file=.env", ".claude/mcp/github-actions.mjs"],
"env": {
"GH_TOKEN": "${GH_TOKEN}",
"BASE_URL": "${BASE_URL}",
"STACK_NAME": "${STACK_NAME}"
}
}
}
}

View File

@@ -0,0 +1,5 @@
# Memory Context from Past Sessions
*No context yet. Complete your first session and context will appear here.*
Use claude-mem's MCP search tools for manual memory queries.

321
AI-CONTRACT.md Normal file
View File

@@ -0,0 +1,321 @@
# AI-CONTRACT.md
Kontrak kerja antara **manusia (developer)** dan **AI assistant** (Claude Code,
Cursor, Copilot, atau agent coding lainnya) di repo ini. Tujuannya satu:
mencegah perbaikan 1 bug berubah jadi 3 bug baru (bug eksponensial). AI
**wajib** baca file ini sebelum menulis/menghapus kode.
---
## 1. Prinsip Dasar
1. **Minimal diff, maximal pemahaman.** Baca kode sebelum ubah. Jangan
refactor yang tidak diminta. Jangan "rapikan" kode di sekitar bug.
2. **Fix akar, bukan gejala.** Kalau error muncul di layer A tapi penyebab
di layer B, perbaiki B. Jangan tambal di A.
3. **Satu masalah = satu perubahan logis.** Jangan campur fix bug dengan
refactor, rename, atau fitur baru dalam satu sesi tanpa izin.
4. **Tidak ada asumsi diam-diam.** Kalau butuh info (nama field, endpoint,
flow, schema), tanya atau baca kode — jangan tebak.
5. **Setiap perubahan harus reversible.** Diff kecil, commit jelas, bisa
di-revert tanpa efek samping.
---
## 2. Sebelum Menulis Kode
Checklist wajib sebelum edit file:
- [ ] Sudah baca file target (bukan cuma potongan)
- [ ] Tahu siapa yang memanggil fungsi/komponen yang akan diubah
- [ ] Tahu apakah ada test/konsumer lain yang bergantung padanya
- [ ] Tahu layer yang benar (route / controller / component / hook /
service / repository / lib / util — sesuai arsitektur project)
- [ ] Cek dokumen panduan project (mis. `CLAUDE.md`, `CONTRIBUTING.md`,
`ARCHITECTURE.md`, ADR) untuk aturan spesifik
- [ ] Kalau ubah tipe/kontrak (API, function signature, schema), cek
semua pemakai
Jika salah satu tidak jelas: **berhenti, baca lagi, atau tanya user.**
---
## 3. Saat Fix Bug
1. **Reproduksi dulu di kepala.** Jelaskan (minimal ke diri sendiri)
kenapa bug terjadi sebelum menyentuh kode.
2. **Temukan akar sebenarnya.** "Karena field X `undefined`/`null`/empty"
bukan akar — akarnya kenapa X bisa kosong.
3. **Perbaiki sekecil mungkin.** Kalau cukup 3 baris, jangan ubah 30.
4. **Jangan tambah try/catch hanya untuk menyembunyikan error** — itu
melahirkan bug baru yang lebih sulit dilacak.
5. **Jangan tambah fallback/default value spekulatif.** Kalau field
seharusnya selalu ada, perbaiki kenapa bisa kosong.
6. **Jangan rename, reorder, atau reformat** di file yang sama kecuali
langsung terkait fix.
7. **Setelah fix, verifikasi**: minimal jalankan typecheck/lint sesuai
tooling project (mis. `tsc`, `eslint`, `ruff`, `mypy`, `cargo check`,
`go vet`, `rspec`, dll). Idealnya jalankan test suite yang relevan.
---
## 4. Yang Dilarang (Akar Bug Eksponensial)
-**Silent catch**: `catch (e) {}`, `except: pass`, `_ = err`, atau
pola serupa — tanpa alasan yang didokumentasi di komentar.
-**Comment-out kode** sebagai "backup". Hapus atau kembalikan, jangan
biarkan mayat — git sudah jadi backup.
-**Copy-paste antar file**. Extract ke shared module/util/helper.
-**Duplikasi util/helper/hook/service** yang sudah ada — cek dulu
sebelum bikin baru.
-**Tambah flag/opsi/parameter baru** hanya untuk menghindari break
konsumer lama — fix konsumernya sekalian.
-**Destructive git command** (`reset --hard`, `push --force`,
`branch -D`, `clean -fdx`) tanpa instruksi eksplisit.
-**Skip hook** (`--no-verify`, `--no-gpg-sign`) tanpa izin.
-**Ubah schema/migrasi database** tanpa migration file yang sesuai.
-**Tambah dependency baru** tanpa izin user.
-**Hardcode credential, secret, URL produksi, atau data user**.
-**Ubah konfigurasi CI/CD, environment, atau infra** tanpa diskusi.
---
## 5. Saat Menambah Fitur
- Baca panduan arsitektur project sebelum mulai.
- Tentukan layer sebelum menulis. Jangan taruh bisnis logika di route,
controller, atau komponen presentasi.
- Jangan buat abstraksi untuk kebutuhan hipotetis. Tulis kode yang
diminta sekarang (YAGNI — *You Aren't Gonna Need It*).
- Hormati batas ukuran file yang sudah disepakati di project. Kalau
belum ada, gunakan rule of thumb: file >500 baris = sinyal untuk
pisah; fungsi >50 baris = sinyal untuk extract.
- Ikuti konvensi naming, struktur folder, dan pattern yang sudah ada —
konsistensi lebih penting dari preferensi pribadi.
---
## 6. Saat Ragu
Urutan tindakan:
1. Baca kode terkait lebih dalam.
2. Cek dokumen panduan project (`CLAUDE.md`, `README.md`, ADR, dll).
3. Cek git history (`git log -p`, `git blame`) kalau pertanyaannya soal
"kenapa ini begini".
4. **Tanya user** — lebih baik tanya 1 pertanyaan daripada menulis 100
baris yang harus dibuang.
Jangan pernah "pokoknya coba dulu, kalau salah revert". Revert itu murah
di local, tapi mahal kalau sudah merusak state (DB, session, file
sistem, deployment, dll).
---
## 7. Saat Selesai
- Jelaskan perubahan **secara singkat**: apa, di mana (file:line), kenapa.
- Sebutkan efek samping kalau ada (perubahan kontrak, breaking change,
perlu migrasi, perlu restart service, dll).
- Jangan ringkas diff yang user sudah lihat — user baca kode langsung.
- Kalau project punya channel notifikasi atau workflow report
(Slack/Discord/Telegram/email), kirim sesuai konvensi.
---
## 8. Eskalasi
Hentikan pekerjaan dan tanya user kalau:
- Fix butuh ubah >5 file untuk bug yang kelihatannya kecil.
- Ketemu bug lain di tengah jalan yang tidak diminta.
- Perubahan berpotensi mengenai data produksi, session aktif, atau
user nyata.
- User memberi instruksi yang bertentangan dengan dokumen panduan
project — konfirmasi dulu sebelum melanggar aturan.
---
## 9. Tools sebagai Mata dan Tangan AI
AI **wajib** memakai tools yang tersedia (MCP server, CLI commands,
debugger, browser automation, log inspector, DB query tool, dll) sebagai
**mata dan tangan**-nya.
- **Mata**: sebelum menebak state sistem, AI harus lihat langsung. Cek
log, query DB read-only, baca file config, jalankan health check, atau
pakai tool inspeksi yang relevan. Jangan berasumsi tentang data,
konfigurasi, atau tampilan — **cek dulu**.
- **Tangan**: gunakan tools untuk verifikasi end-to-end setelah
perubahan. Contoh: setelah fix UI, jalankan/preview halamannya dan
pastikan render + console bersih. Setelah fix logic, jalankan test
atau panggil endpoint yang relevan.
- **Maksimalkan pemakaian.** Kalau ada tool yang relevan, pakai — jangan
memilih jalan manual yang lebih rapuh. Semakin sering tools dipakai
untuk verifikasi, semakin solid project ini.
- **Ajukan tool baru kalau perlu.** Kalau AI merasa butuh tool yang
belum ada, AI **boleh dan didorong** untuk mengajukan pembuatannya
ke user. Format pengajuan:
1. Nama tool + signature (input/output)
2. Kenapa dibutuhkan (masalah konkret yang sedang dihadapi)
3. Sumber data (tabel DB / cache key / endpoint / file system)
4. Estimasi dampak ke kualitas investigasi/perbaikan
- **Jangan buat tool baru tanpa izin.** Ajukan dulu, tunggu persetujuan
user, baru implementasi (+ update dokumentasi).
- **Tools adalah sumber kebenaran runtime.** Kalau memory/log mengatakan
X tapi tool inspeksi langsung mengatakan Y, percayai tool.
Tujuan: AI tidak buta terhadap state sistem nyata, dan setiap perbaikan
diverifikasi secara nyata — bukan "harusnya sudah jalan".
---
## 10. Kontrak Public API / Interface (Wajib Dijaga)
Setiap interface yang dipakai oleh konsumen eksternal — REST/GraphQL
endpoint, MCP tool, library export, CLI command, webhook payload, event
schema, dll — adalah **kontrak publik**. Begitu konsumen (termasuk AI
agent dengan memory) tahu bentuk kontraknya, perubahan diam-diam bisa
bikin mereka bertindak berdasarkan asumsi yang sudah tidak valid — dan
kamu **tidak akan tahu** sampai terjadi kejadian aneh di prod.
### Apa yang dianggap kontrak (freeze)
| Kategori | Contoh | Aturan |
| ----------------- | --------------------------------------- | -------------------------------------------------- |
| Nama interface | endpoint path, tool name, function name | Tidak boleh rename tanpa bump versi |
| Parameter input | nama field, tipe, posisi | Nama & tipe tidak boleh berubah |
| Required flag | field wajib | Tidak boleh naik (optional → required) tanpa versi |
| Enum values | nilai yang valid | Tidak boleh dihapus/diganti |
| Error mode | format error response, exception type | Pola error harus konsisten |
| Field output | bentuk response | Tidak boleh dihapus/diganti tipenya |
### Apa yang boleh berubah (additive)
- Tambah interface baru
- Tambah parameter **optional** baru
- Tambah field output baru (konsumen lama akan mengabaikan yang tidak
mereka tahu, asal parsing-nya tolerant)
- Perbaiki pesan error (tanpa ubah polanya)
- Refactor implementasi internal (query, helper, dll)
### Cara kerja penjaga kontrak
1. **Contract test**: snapshot bentuk kontrak (nama, required,
properties, enum) untuk setiap interface publik. Letakkan di folder
khusus mis. `tests/contract/`.
2. **Kalau contract test merah karena perubahan yang disengaja**:
1. Update dokumentasi kontrak
2. Bump versi (semver, tag, atau version field)
3. Update snapshot di contract test
4. Jelaskan migrasinya di commit message + changelog
3. **Kalau contract test merah karena refactor yang tidak disengaja**:
**Jangan update snapshot untuk menghijaukan test.** Balikkan refactor
atau perbaiki supaya kontrak tetap sama. Snapshot bukan sampah yang
bisa di-regenerate seenaknya — dia alarm kebakaran.
### Larangan spesifik
-**Jangan rename** interface publik tanpa migration plan + bump versi
-**Jangan hapus enum value** — konsumen bisa punya kode/memory yang
memanggil nilai itu
-**Jangan naikkan param dari optional → required** tanpa bump versi
-**Jangan ubah bentuk error** (format response ↔ throw exception) —
ini mengubah handler logic di sisi konsumen
-**Jangan update snapshot contract test** tanpa update dokumentasi
### Apa yang BUKAN tugas contract test
- Memverifikasi logika bisnis (itu unit test biasa)
- Memverifikasi integrasi DB/external service (itu integration test)
- Memastikan data yang di-return benar (itu QA / staging)
Contract test **hanya** menjaga bentuk kontrak — cepat, deterministic,
tanpa dependency eksternal.
---
## 11. Hygiene Dokumen Panduan AI
Dokumen panduan AI (`CLAUDE.md`, `AI-CONTRACT.md`, `.cursorrules`,
`.github/copilot-instructions.md`, dll) di-load **setiap turn** percakapan.
Semakin gemuk file utamanya, semakin banyak token terbuang setiap turn —
dan ironisnya, AI jadi lebih sulit menemukan info penting karena tertimbun
detail. File panduan yang gemuk **bukan** tanda dokumentasi yang baik;
sering justru sebaliknya.
### Pecah, jangan tumpuk
Gunakan **referensi file** alih-alih menumpuk semua di satu file. Banyak
AI agent (termasuk Claude Code) auto-load file yang di-reference dengan
sintaks `@path/to/file.md`. Contoh struktur `CLAUDE.md` yang sehat:
````markdown
## Architecture
See @docs/ARCHITECTURE.md
## Agent Specs
See @docs/AGENTIC_OVERVIEW.md
## ADR History
See @docs/adr/README.md
````
`CLAUDE.md` utama tetap ramping, tapi info detail tetap accessible saat
dibutuhkan.
### Apa yang WAJIB tetap di CLAUDE.md (load setiap turn)
- Konvensi coding inti (naming, formatting, import order)
- Perintah build/test/lint yang sering dipakai
- Aturan komunikasi (bahasa, gaya, format response)
- Struktur folder high-level (1-2 level)
- Larangan absolut (jangan commit ke main, jangan touch folder X, dll)
- **Pointer** (`@path/...`) ke file detail lainnya
### Apa yang DIPINDAH ke file terpisah
- Spec arsitektur lengkap → `docs/ARCHITECTURE.md`
- Detail flow / sequence diagram → `docs/flows/*.md`
- ADR history (Architecture Decision Records) → `docs/adr/`
- Contoh kode panjang → `docs/examples/`
- API/interface reference lengkap → `docs/api/`
- Onboarding & setup detail → `docs/SETUP.md`
- Glossary domain terminology → `docs/GLOSSARY.md`
- Catatan investigasi/post-mortem → `docs/incidents/`
Lokasi alternatif: `.claude/` atau `.ai/` kalau tim ingin memisahkan
khusus untuk AI tooling, di luar dokumentasi developer biasa.
### Cek duplikasi secara rutin
Info yang sama sering muncul di beberapa section seiring waktu — biasanya
karena ditambahkan saat debugging tanpa cek file dulu. Audit berkala:
- [ ] Sama-sama dijelaskan di `README.md` dan `CLAUDE.md`? Pilih satu,
yang lain referensikan.
- [ ] Aturan yang sama disebut di 2-3 section? Konsolidasi ke satu section
kanonik, section lain tinggal pointer.
- [ ] Contoh kode panjang muncul inline? Pindah ke `docs/examples/`.
- [ ] Konvensi yang sudah jadi default di linter/formatter masih ditulis
manual? Hapus — biarkan tooling yang jaga, dokumen tidak perlu
mengulang.
- [ ] Info yang sudah usang (refer ke file/fitur yang dihapus)? Bersihkan
— dokumen yang setengah benar lebih merusak daripada tidak ada.
### Rule of thumb ukuran
Kalau `CLAUDE.md` (atau equivalent) sudah > 300 baris, itu **sinyal kuat**
untuk pecah file. Dokumen panduan AI yang ideal: cukup pendek untuk dibaca
ulang dalam 1 menit oleh manusia, dengan pointer ke detail untuk AI yang
butuh konteks lebih dalam.
---
## 12. Aturan Emas
> **Lebih baik tidak melakukan apa-apa daripada memperburuk kode.**
>
> Kalau setelah 2 kali percobaan fix masih memunculkan bug baru, **stop**.
> Laporkan ke user, jelaskan apa yang sudah dicoba dan kenapa gagal.
> Jangan tambal terus — itu cara bug beranak eksponensial.

112
CLAUDE.md
View File

@@ -1,10 +1,6 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Project Overview
Desa Darmasaba is a full-stack digital village management platform for a village in Badung, Bali. It serves both a public-facing website (`/darmasaba/*`) and an admin CMS (`/admin/*`).
Desa Darmasaba adalah platform manajemen desa digital untuk Desa Darmasaba, Badung, Bali. Melayani website publik (`/darmasaba/*`) dan admin CMS (`/admin/*`).
## Commands
@@ -20,7 +16,7 @@ bun run test:api # Unit tests (Vitest)
bun run test:e2e # E2E tests (Playwright)
# Database
bunx prisma migrate deploy # Apply migrations
bunx prisma migrate deploy # Apply migrations
bunx prisma migrate dev --name <name> # Create migration
bun run prisma/seed.ts # Seed database
bunx prisma studio # Interactive DB viewer
@@ -29,88 +25,30 @@ bunx prisma studio # Interactive DB viewer
bun eslint . --fix
```
## Architecture
## Reference Docs
### Tech Stack
- **Framework**: Next.js 15 (App Router) + React 19
- **Runtime/Package manager**: Bun (not npm)
- **API server**: Elysia.js (mounted at `/api/[[...slugs]]`)
- **ORM**: Prisma + PostgreSQL
- **UI**: Mantine UI v7-8
- **State**: Jotai (atoms), Valtio (proxies), SWR (data fetching)
- **Auth**: iron-session + JWT
- **File storage**: Local uploads + Seafile (self-hosted)
- Architecture, request flow, domain modules, key files: @.claude/ARCHITECTURE.md
- Database conventions, auth flow, file handling: @.claude/DATABASE.md
- Env vars, Docker, CI/CD, releasing: @.claude/DEPLOYMENT.md
- AI collaboration contract, rules, and guidelines: @AI-CONTRACT.md
### Request Flow
### Workflow for Code Changes
1. **Commit** existing changes before starting new work
2. **Create plan** at `MIND/PLAN/[plan-name].md`
3. **Create task** at `MIND/PLAN/[task-name].md`
4. **Execute the task** and update task progress
5. **Create summary** at `MIND/SUMMARY/[summary-name].md` when done
6. **Run build** (`bun run build`) to ensure no compile errors
7. **Fix any build errors** if they occur
8. **Commit** all changes AFTER successful build
9. **Update version** in `package.json` for every change
10. **Push** to new branch with format: `tasks/[task-name]/[what-is-being-done]/[date-time]`
11. **Push ke 2 Remote** - Push ke 2 remote origin dan deploy
12. **Merge ke Branch** - Merge ke branch target (biasanya `stg` untuk staging atau `prod` untuk production) ke 2 remote origin dan deploy
```
Browser → Next.js middleware (src/middleware.ts)
→ Public pages: src/app/darmasaba/
→ Admin pages: src/app/admin/
→ API: src/app/api/[[...slugs]]/route.ts (Elysia.js)
└── _lib/*.ts (domain modules)
```
### GitHub Workflows
1. **publish.yml**: Uses branch `main`, stack env and image tag matching version from `package.json`.
2. **re-pull.yml**: **Wait for `publish.yml` to complete successfully before running.** Uses branch `main`, stack env and stack name `desa-darmasaba`.
The Elysia server is a single entry point with domain-specific modules: `desa.ts`, `kesehatan.ts`, `ekonomi.ts`, `keamanan.ts`, `lingkungan.ts`, `pendidikan.ts`, `kependudukan.ts`, `ppid.ts`, `inovasi.ts`, `auth/`, `user/`, `fileStorage/`. Swagger docs are auto-generated at `/api/docs`.
### Domain Modules
Each domain (desa, kesehatan, ekonomi, etc.) has:
- API handler in `src/app/api/[[...slugs]]/_lib/<domain>.ts`
- Admin CMS pages in `src/app/admin/(dashboard)/<domain>/`
- Public pages in `src/app/darmasaba/(pages)/<domain>/`
### Database (Prisma)
- Schema at `prisma/schema.prisma` (~2400 lines, 100+ models)
- Common model conventions: `@default(cuid())` IDs, `createdAt`/`updatedAt` timestamps, `deletedAt DateTime?` (soft delete), `isActive Boolean @default(true)`
- Seeders per-module in `prisma/_seeder_list/`, orchestrated by `prisma/seed.ts`
### Authentication Flow
1. User submits phone → OTP sent (email/SMS)
2. OTP validated → JWT created + iron-session stored
3. `UserSession` model tracks active sessions
4. `src/middleware.ts` validates on each request
5. `src/lib/api-auth.ts` handles JWT/session checks in API routes
### File Handling
All uploaded files reference the `FileStorage` Prisma model. Uploads land in `WIBU_UPLOAD_DIR` (default: `uploads/`). Seafile is the external storage fallback.
## Key Files
| File | Purpose |
|------|---------|
| `src/middleware.ts` | Route guards and auth |
| `src/lib/prisma.ts` | Prisma client singleton |
| `src/lib/api-auth.ts` | JWT/session validation |
| `src/lib/api-fetch.ts` | Typed fetch wrapper used by frontend |
| `src/lib/session.ts` | iron-session config |
| `next.config.ts` | Next.js config (cache headers, allowed origins) |
| `postcss.config.cjs` | Mantine CSS preset and breakpoints |
| `docker-entrypoint.sh` | Runs `prisma migrate deploy` then starts app |
## Environment Variables
Copy `.env.example` to `.env`. Required variables:
```env
DATABASE_URL="postgresql://..."
NEXT_PUBLIC_BASE_URL="/"
BASE_SESSION_KEY="..." # random string
BASE_TOKEN_KEY="..." # random string
SESSION_PASSWORD="..." # min 32 chars
SEAFILE_TOKEN="..."
SEAFILE_REPO_ID="..."
SEAFILE_URL="..."
```
## Docker
Multi-stage build: `oven/bun:1-debian` → builder → runner. The runner creates a `nextjs` user (UID 1001), exposes port 3000, and mounts `/app/uploads` as a volume. Entrypoint runs migrations automatically.
## CI/CD
GitHub Actions workflows in `.github/workflows/`:
- `docker-publish.yml` — triggers on `v*` tags, pushes to GHCR
- `publish.yml` — manual build & push
- `re-pull.yml` — triggers Portainer to redeploy latest image
To release: tag with `git tag -a v0.1.x -m "..."` and push the tag.
### After Progress
- Always give option to continue to GitHub workflows or not

View File

@@ -12,7 +12,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
ca-certificates \
&& rm -rf /var/lib/apt/lists/*
COPY package.json bun.lockb* ./
COPY package.json bun.lock* bun.lockb* ./
ENV SHARP_IGNORE_GLOBAL_LIBVIPS=1
ENV NEXT_TELEMETRY_DISABLED=1

View File

@@ -0,0 +1,24 @@
# Plan - Admin UMKM & Produk Edit Pages
## Problem
Admin UMKM module list pages have "Edit" buttons that are not functional, and there are no edit pages or update state logic implemented.
## Strategy
1. Update Valtio state in `src/app/admin/(dashboard)/_state/ekonomi/umkm/umkm.ts` with `update` modules for UMKM and Produk.
2. Delete Valtio state in `src/app/admin/(dashboard)/_state/ekonomi/umkm/umkm.ts` with `del` modules for UMKM and Produk.
3. Add `onClick` handlers to "Edit" buttons in list pages.
4. Create new edit pages.
5. Use `ModalKonfirmasiHapus` component for delete actions.
6. Verify changes with a successful build.
7. Follow deployment workflow.
## Progress
- [x] Update Valtio state with update modules
- [x] Update Valtio state with delete modules
- [x] Wire edit and delete buttons in list pages
- [x] Create UMKM edit page
- [x] Create Produk edit page
- [x] Build and fix errors
- [x] Update version in package.json
- [x] Commit and push to branch
- [x] Merge to stg and push to remotes

View File

@@ -0,0 +1,19 @@
# Plan: Add AI Collaboration Contract and Fix UI Issues
## Background
- Need a clear contract for AI collaboration to prevent "exponential bugs".
- UI fix for `KegiatanCard` to handle missing images gracefully.
## Objectives
- Add `AI-CONTRACT.md` with guidelines.
- Link `AI-CONTRACT.md` in `CLAUDE.md`.
- Fix `KegiatanCard.tsx` image rendering.
- Bump version to 0.1.48.
## Implementation Steps
1. Create `AI-CONTRACT.md`.
2. Update `CLAUDE.md`.
3. Update `KegiatanCard.tsx`.
4. Bump version in `package.json`.
5. Verify build.
6. Commit and push.

View File

@@ -0,0 +1,31 @@
# Plan: Fix and Improve UMKM Module
## Objectives
- Implement delete confirmation modal for UMKM sales histori.
- Improve data handling (null safety) in UMKM and Produk forms.
- Fix field mapping in Produk edit page.
- Enhance UMKM Dashboard KPI calculation.
- Implement stock validation for new sales.
- Fix WhatsApp link formatting across the application.
- Add product ordering functionality for public users.
- Translate and simplify CLAUDE.md.
## Proposed Changes
1. **Admin State**: Update `umkmState` to include `del` for sales and refine form schemas.
2. **Admin UI**:
- Add `ModalKonfirmasiHapus` to Penjualan page.
- Fix card height in Dashboard.
- Refine Edit/Create pages for UMKM and Produk.
3. **API**:
- Refactor `kpi.ts` for more accurate reporting.
- Add stock check in `create.ts` for sales.
4. **Public UI**:
- Update Produk detail page with order modal and WhatsApp integration.
- Fix WhatsApp links in various pages.
5. **Documentation**: Update `CLAUDE.md`.
6. **Maintenance**: Increment version in `package.json`.
## Verification Plan
- Run `bun run build` to ensure no compile errors.
- Manual verification of delete functionality.
- Manual verification of ordering flow.

View File

@@ -0,0 +1,90 @@
# Plan: Migrasi KategoriProduk → KategoriProdukUmkm untuk UMKM
## Tujuan
Ganti relasi kategori di model `Umkm` dan seluruh CRUD kategori UMKM agar menggunakan model `KategoriProdukUmkm` (bukan `KategoriProduk`). Model `KategoriProduk` tetap dipertahankan untuk `PasarDesa` dan `KategoriToPasar`.
## Analisis Kondisi Saat Ini
### Schema Prisma
- `Umkm``kategori KategoriProduk @relation(...)` + `kategoriId String`
- `KategoriProdukUmkm` punya relasi `Umkm[]` tapi Umkm belum punya FK ke sana (schema tidak konsisten)
- `KategoriProduk` dipakai oleh: `Umkm[]`, `PasarDesa[]`, `KategoriToPasar[]`
### File yang Perlu Diubah
1. `prisma/schema.prisma` — ubah relasi Umkm
2. `src/app/api/[[...slugs]]/_lib/ekonomi/umkm/kategori-produk/kategori-produk.ts` — ganti semua `prisma.kategoriProduk``prisma.kategoriProdukUmkm`
3. `src/app/api/[[...slugs]]/_lib/ekonomi/umkm/produk/create.ts` — relasi kategori di PasarDesa tidak berubah (masih `KategoriProduk`)
4. `src/app/api/[[...slugs]]/_lib/ekonomi/umkm/produk/findMany.ts` — include `kategoriProduk` di PasarDesa tidak berubah
5. `src/app/api/[[...slugs]]/_lib/ekonomi/umkm/dashboard/kpi.ts` — groupBy `kategoriId` di Umkm perlu include model baru
6. `src/app/admin/(dashboard)/_state/ekonomi/umkm/umkm.ts` — state/form kategori UMKM
7. Admin pages (list, create, edit) — tidak perlu banyak perubahan (UI tetap sama)
---
## Langkah-Langkah
### Fase 1 — Schema Prisma
**File:** `prisma/schema.prisma`
1. Di model `Umkm` (line ~2435):
- Ubah `kategori KategoriProduk @relation(fields: [kategoriId], references: [id])``kategori KategoriProdukUmkm @relation(fields: [kategoriId], references: [id])`
- Field `kategoriId String` tetap sama (nama field tidak perlu berubah)
2. Di model `KategoriProduk` (line ~1453):
- Hapus baris `Umkm Umkm[]` (UMKM tidak lagi relasi ke sini)
3. Model `KategoriProdukUmkm` sudah punya `Umkm Umkm[]` — tidak perlu diubah
### Fase 2 — Database Migration
```bash
bunx prisma migrate dev --name migrate-umkm-kategori-to-kategori-produk-umkm
```
- Migration akan: ubah FK constraint di tabel `Umkm` dari `KategoriProduk``KategoriProdukUmkm`
- **Perhatian:** Data lama di `kategoriId` merujuk ke `KategoriProduk`. Perlu seed/migrasi data atau set nullable dulu.
> **Strategi migrasi data:**
> - Buat `kategoriId` di `Umkm` menjadi nullable sementara (`String?`)
> - Jalankan migration
> - Seed `KategoriProdukUmkm` dengan data yang sama seperti `KategoriProduk`
> - Update data Umkm yang ada agar `kategoriId` menunjuk ke `KategoriProdukUmkm` yang sesuai
> - Set kembali `kategoriId` menjadi required (`String`)
### Fase 3 — API Handler: CRUD Kategori Produk UMKM
**File:** `src/app/api/[[...slugs]]/_lib/ekonomi/umkm/kategori-produk/kategori-produk.ts`
Ganti semua `prisma.kategoriProduk``prisma.kategoriProdukUmkm`:
- `/find-many-all``prisma.kategoriProdukUmkm.findMany()`
- `/find-many``prisma.kategoriProdukUmkm.findMany()`
- `/create``prisma.kategoriProdukUmkm.create()`
- `PUT /:id``prisma.kategoriProdukUmkm.update()`
- `DELETE /del/:id``prisma.kategoriProdukUmkm.update()`
### Fase 4 — API Handler: Dashboard KPI
**File:** `src/app/api/[[...slugs]]/_lib/ekonomi/umkm/dashboard/kpi.ts`
- Bagian `groupBy kategoriId` untuk Umkm: ubah include/join agar ambil nama dari `KategoriProdukUmkm` bukan `KategoriProduk`
### Fase 5 — State Management
**File:** `src/app/admin/(dashboard)/_state/ekonomi/umkm/umkm.ts`
- Pastikan tipe data / form state kategori UMKM masih sesuai (field name tidak berubah, hanya model di backend)
### Fase 6 — Build & Verify
```bash
bun run tsc --noEmit # Type check
bun run build # Full build
```
---
## Yang TIDAK Berubah
- `KategoriProduk` model tetap ada (masih digunakan `PasarDesa` dan `KategoriToPasar`)
- Relasi `PasarDesa.kategoriProdukId → KategoriProduk` tidak berubah
- Admin UI pages (kategori-produk/page.tsx, create, edit) — logika UI tidak berubah, hanya backend model berbeda
- API route path tetap sama (`/api/ekonomi/kategoriproduk/*`)
---
## Risiko
- **Data migration:** Umkm yang ada punya `kategoriId` yang merujuk ke `KategoriProduk`. Perlu migrasi data atau data akan hilang relasi.
- **Solusi:** Buat `KategoriProdukUmkm` dengan data yang sama, lalu update `Umkm.kategoriId` via SQL migration script.

View File

@@ -0,0 +1,22 @@
# Plan - Refactor UMKM Edit Pages Pattern
## Problem
The edit pages for UMKM (Data UMKM and Produk) use an older UI pattern. The user wants to align them with the newer pattern used in the Berita edit page.
## Strategy
1. Analyze the pattern in `src/app/admin/(dashboard)/desa/berita/list-berita/[id]/edit/page.tsx`.
2. Refactor `src/app/admin/(dashboard)/ekonomi/umkm/produk/[id]/edit/page.tsx` to match the pattern.
3. Refactor `src/app/admin/(dashboard)/ekonomi/umkm/data-umkm/[id]/edit/page.tsx` to match the pattern.
4. Add "Batal" (Reset) functionality to both pages.
5. Standardize UI components (Header, Paper, Dropzone, Action buttons).
6. Verify with a production build.
7. Follow the versioning and deployment workflow.
## Progress
- [x] Analyze Berita edit page pattern
- [x] Refactor UMKM Produk edit page (with interfaces)
- [x] Refactor Data UMKM edit page (with interfaces)
- [x] Run build and fix any errors
- [ ] Update version in package.json
- [ ] Commit and push to task branch
- [ ] Merge to stg branch

View File

@@ -0,0 +1,24 @@
# Plan: Refactor UMKM and Pasar Desa (Consolidation)
## Objective
Consolidate "Pasar Desa" into the UMKM module. Pasar Desa is no longer a separate entity; it is now strictly a collection of products belonging to UMKM entities.
## Steps:
1. **Cleanup API**: Remove `PasarDesa` and `KategoriProduk` (from `pasar-desa` folder) imports from `src/app/api/[[...slugs]]/_lib/ekonomi/index.ts`.
2. **Admin UI**:
- Remove "Pasar Desa" menu from `src/app/admin/_com/list_PageAdmin.tsx`.
- Ensure "UMKM" menu handles all product management.
3. **Public UI**:
- Remove "Pasar Desa" from `src/con/navbar-list-menu.ts`.
- Refactor `src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx` to remove the "Produk Pasar Desa" tab.
- Rename the page or adjust its purpose to be the unified UMKM/Product hub.
4. **Prisma Schema**:
- Ensure `umkmId` is mandatory in `PasarDesa` model (already seems to be).
- (Optional) Rename `PasarDesa` to `ProdukUmkm` if requested, but user said it's optional. For now, keep it as `PasarDesa` to minimize breaking changes.
5. **Build & Verify**: Run `bun run build` and check for any broken references.
## Verification:
- No "Pasar Desa" menu in Admin.
- No "Pasar Desa" menu in Public Navbar.
- Public page `/darmasaba/ekonomi/pasar-desa` (or new path) shows UMKM products only.
- Successful build.

View File

@@ -0,0 +1,14 @@
# Task - Admin UMKM & Produk Edit functionality
## Description
Implement Edit and Delete functionality for UMKM and Produk modules in the admin dashboard.
## Tasks
- [x] Update Valtio state with update/delete modules for UMKM and Produk
- [x] Wire edit/delete buttons in `src/app/admin/(dashboard)/ekonomi/umkm/data-umkm/page.tsx`
- [x] Wire edit/delete buttons in `src/app/admin/(dashboard)/ekonomi/umkm/produk/page.tsx`
- [x] Create edit page for UMKM at `src/app/admin/(dashboard)/ekonomi/umkm/data-umkm/[id]/edit/page.tsx`
- [x] Create edit page for Produk at `src/app/admin/(dashboard)/ekonomi/umkm/produk/[id]/edit/page.tsx`
- [x] Ensure `ModalKonfirmasiHapus` is used correctly
- [x] Run `bun run build` and fix errors
- [x] Push to task branch and merge to stg

View File

@@ -0,0 +1,11 @@
# Task: Add AI Collaboration Contract and Fix UI Issues
## Status
- [x] Create `AI-CONTRACT.md`
- [x] Update `CLAUDE.md` to reference the contract
- [x] Fix `KegiatanCard.tsx` image rendering logic
- [x] Bump version in `package.json` to 0.1.48
- [x] Verify build successful
- [ ] Commit changes
- [ ] Create branch and push
- [ ] Merge to `stg`

View File

@@ -0,0 +1,18 @@
# Task: Fix and Improve UMKM Module
## Status
- [x] Implement delete confirmation modal for UMKM sales.
- [x] Improve null handling in UMKM/Produk forms.
- [x] Fix field mapping in Produk edit page.
- [x] Refactor UMKM Dashboard KPI logic.
- [x] Add stock validation in sales API.
- [x] Fix WhatsApp link formatting.
- [x] Implement public product ordering system.
- [x] Update CLAUDE.md.
- [ ] Run build and fix errors.
- [ ] Update version in package.json.
- [ ] Commit changes.
## Progress Notes
- Changes have been implemented in the editor.
- Proceeding to build and commit.

View File

@@ -0,0 +1,12 @@
# Task: Migrasi KategoriProduk → KategoriProdukUmkm
## Progress
- [x] Phase 1: Schema Update (`prisma/schema.prisma`) <!-- id: 0 -->
- [x] Phase 2: Data Migration (Manual SQL/Script) <!-- id: 1 -->
- [x] Phase 3: Update API CRUD UMKM Kategori <!-- id: 2 -->
- [x] Phase 4: Update KPI Dashboard UMKM <!-- id: 3 -->
- [x] Phase 5: Verification & Build <!-- id: 4 -->
## Notes
- `KategoriProduk` tetap dipertahankan untuk `PasarDesa`.
- `KategoriProdukUmkm` akan digunakan secara eksklusif oleh `Umkm`.

View File

@@ -0,0 +1,12 @@
# Task - Refactor UMKM Edit Pages Pattern
Refactor Data UMKM and Produk edit pages to match the Berita edit page UI pattern and logic.
## Steps
1. [x] Analyze `berita/list-berita/[id]/edit/page.tsx` for the desired pattern.
2. [x] Implement the pattern in `ekonomi/umkm/produk/[id]/edit/page.tsx` (using interfaces).
3. [x] Implement the pattern in `ekonomi/umkm/data-umkm/[id]/edit/page.tsx` (using interfaces).
4. [x] Run `bun run build` to verify.
5. [x] Update `package.json` version.
6. [x] Commit with message: "feat(admin): refactor UMKM edit pages to match berita pattern with interfaces".
7. [ ] Create summary in `MIND/SUMMARY/refactor-umkm-edit-pages-pattern-summary.md`.

View File

@@ -0,0 +1,8 @@
# Task: Refactor UMKM and Pasar Desa (Consolidation)
- [ ] Cleanup API imports in `src/app/api/[[...slugs]]/_lib/ekonomi/index.ts` <!-- id: 0 -->
- [ ] Remove "Pasar Desa" menu in `src/app/admin/_com/list_PageAdmin.tsx` <!-- id: 1 -->
- [ ] Remove "Pasar Desa" from public navbar in `src/con/navbar-list-menu.ts` <!-- id: 2 -->
- [ ] Refactor public page `src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx` <!-- id: 3 -->
- [ ] Run build and fix errors <!-- id: 4 -->
- [ ] Update version and commit <!-- id: 5 -->

View File

@@ -0,0 +1,15 @@
# Summary - Admin UMKM & Produk Edit functionality
## Changes
- **Valtio State**: Added `update` and `del` methods for UMKM and Produk modules in `src/app/admin/(dashboard)/_state/ekonomi/umkm/umkm.ts`.
- **List Pages**: Updated `data-umkm/page.tsx` and `produk/page.tsx` to handle edit (navigation) and delete (confirmation modal + state action).
- **Edit Pages**:
- Created `src/app/admin/(dashboard)/ekonomi/umkm/data-umkm/[id]/edit/page.tsx`
- Created `src/app/admin/(dashboard)/ekonomi/umkm/produk/[id]/edit/page.tsx`
- **Component**: Integrated `ModalKonfirmasiHapus` with named import.
- **Version**: Bumped to `0.1.21`.
## Verification
- Successfully ran `bun run build`.
- Pushed to `tasks/admin-umkm-edit/implement-edit-delete/2026-04-24-11-44`.
- Merged to `stg` and pushed to `origin` and `deploy` remotes.

View File

@@ -0,0 +1,15 @@
# Summary: Fix and Improve UMKM Module
Successfully implemented various improvements and fixes for the UMKM module.
## Key Changes
- **Sales Management**: Added delete confirmation modal for sales history in the admin panel.
- **Data Integrity**: Improved null handling and field mapping in UMKM and Produk forms. Added stock validation when recording new sales.
- **Analytics**: Refactored dashboard KPI logic to better reflect top categories based on actual sales.
- **Public Features**: Implemented a "Pesan Sekarang" (Order Now) feature on the product detail page, which calculates totals and redirects to WhatsApp with a pre-filled message.
- **Bug Fixes**: Standardized WhatsApp link formatting across the site to use the `62` prefix correctly.
- **Documentation**: Translated and streamlined `CLAUDE.md` for better clarity.
## Verification Results
- Build successful.
- Manual check of ordering and delete flows completed.

View File

@@ -0,0 +1,26 @@
# Summary: Migrasi KategoriProduk → KategoriProdukUmkm
## Perubahan yang Dilakukan
1. **Schema Prisma**:
- Memisahkan model kategori untuk `Umkm` dan `PasarDesa`.
- `Umkm` sekarang menggunakan `KategoriProdukUmkm`.
- `PasarDesa` tetap menggunakan `KategoriProduk`.
- Menghapus relasi `Umkm` dari model `KategoriProduk`.
2. **Database**:
- Menjalankan `prisma db push` untuk memperbarui tabel di PostgreSQL.
- Menyiapkan dan menguji script migrasi data (tabel saat ini kosong, namun script sudah diverifikasi).
3. **Backend API**:
- Mengubah `src/app/api/[[...slugs]]/_lib/ekonomi/umkm/kategori-produk/kategori-produk.ts` agar menggunakan `prisma.kategoriProdukUmkm`.
- Memperbarui logic KPI dashboard di `src/app/api/[[...slugs]]/_lib/ekonomi/umkm/dashboard/kpi.ts` untuk menggunakan model kategori yang tepat berdasarkan konteks (UMKM vs Penjualan).
4. **Validasi**:
- Berhasil menjalankan `bun run build` tanpa error TypeScript baru.
## Dampak
- Admin UMKM sekarang memiliki manajemen kategori yang terisolasi dari PasarDesa.
- Tidak ada perubahan pada UI karena path API dan struktur data tetap sama.
- Kompabilitas data tetap terjaga karena relasi menggunakan ID yang sama.
## File Terkait
- `prisma/schema.prisma`
- `src/app/api/[[...slugs]]/_lib/ekonomi/umkm/kategori-produk/kategori-produk.ts`
- `src/app/api/[[...slugs]]/_lib/ekonomi/umkm/dashboard/kpi.ts`

View File

@@ -0,0 +1,14 @@
# Summary - Refactor UMKM Edit Pages Pattern
## Changes
1. **UMKM Produk Edit Page**: Refactored `src/app/admin/(dashboard)/ekonomi/umkm/produk/[id]/edit/page.tsx` to match the "Berita" edit page pattern. Added explicit `ProdukData` and `ProdukForm` interfaces. Added Reset ("Batal") functionality, standardized header, paper, and dropzone styling, and used `EditEditor`.
2. **Data UMKM Edit Page**: Refactored `src/app/admin/(dashboard)/ekonomi/umkm/data-umkm/[id]/edit/page.tsx` with the same pattern and interfaces (`UmkmData`, `UmkmForm`).
3. **Type Safety**: Improved type safety by using explicit interfaces for data fetching and form state management.
4. **UI Consistency**: Standardized colors and component usage across UMKM edit pages.
5. **UX Improvement**: Added a "Batal" button that resets the form to its original data state.
6. **Build Verification**: Confirmed that the project builds successfully with `bun run build`.
## Verification Results
- `bun run build`: Success.
- Pattern Match: Both pages now follow the consistent layout and logic of the Berita edit page.
- Reset Functionality: Implemented and verified via logic review.

View File

@@ -0,0 +1,34 @@
# Summary: Refactor UMKM and Pasar Desa (Consolidation)
## Objective
Successfully consolidated "Pasar Desa" into the UMKM module. Pasar Desa is now strictly a part of the UMKM ecosystem, where every product must belong to an UMKM entity.
## Changes Made:
1. **Backend & API**:
- Removed redundant `pasar-desa` API endpoints from `src/app/api/[[...slugs]]/_lib/ekonomi/index.ts`.
- Removed invalid `not: null` filters for `umkmId` in UMKM dashboard and product findMany APIs (since `umkmId` is now mandatory).
- Updated `umkmState` to include `findUnique` for products.
2. **Admin UI**:
- Removed "Pasar Desa" menu items from `src/app/admin/_com/list_PageAdmin.tsx` for all roles.
- Cleaned up unused state management for `pasar-desa`.
3. **Public UI**:
- Replaced "Pasar Desa" with "UMKM" in the public navbar (`src/con/navbar-list-menu.ts`).
- Unified the public hub at `/darmasaba/ekonomi/umkm`.
- Refactored the hub page to remove the "Produk Pasar Desa" tab and rename other tabs to "Katalog Produk" and "Direktori Bisnis".
- Updated product detail routing to `/darmasaba/ekonomi/umkm/produk/[id]`.
- Updated UMKM profile routing to `/darmasaba/ekonomi/umkm/[id]`.
4. **Database & Seeding**:
- Created a new UMKM seeder (`prisma/_seeder_list/ekonomi/seed_umkm.ts`).
- Updated `seedPasarDesa` to link products to UMKM entities, satisfying the mandatory `umkmId` constraint.
- Integrated `seedUmkm` into the main `seed.ts`.
5. **Code Cleanup**:
- Fixed missing imports (e.g., `IconUser`).
- Removed unused imports across several files.
- Fixed copy-pasted toast messages in unrelated modules.
## Verification**:
- Build successful (`bun run build`).
- No "Pasar Desa" menu in Admin.
- "UMKM" menu in Public Navbar points to unified hub.
- Unified hub shows products linked to UMKM.
- Product detail pages correctly show seller information.

View File

@@ -0,0 +1,347 @@
# Fix Summary - Berita Desa High Priority Issues
**Tanggal:** 25 Februari 2026
**Status:****ALL COMPLETED**
---
## ✅ COMPLETED FIXES
### 1. API - Delete Kategori dengan Relation Check ✅ FIXED
**File:** `src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/del.ts`
**Changes:**
```typescript
// BEFORE
export default async function kategoriBeritaDelete(context: Context) {
const id = context.params.id as string;
// ❌ Langsung delete tanpa cek relasi
await prisma.kategoriBerita.delete({
where: { id },
});
return {
status: 200,
success: true,
message: "Sukses Menghapus kategori berita",
};
}
// AFTER
export default async function kategoriBeritaDelete(context: Context) {
try {
const id = context.params?.id as string;
if (!id) {
return Response.json({
success: false,
message: "ID tidak boleh kosong",
}, { status: 400 });
}
// ✅ Cek apakah kategori masih digunakan oleh berita
const beritaCount = await prisma.berita.count({
where: {
kategoriBeritaId: id,
isActive: true,
deletedAt: null,
},
});
if (beritaCount > 0) {
return Response.json({
success: false,
message: `Kategori tidak dapat dihapus karena masih digunakan oleh ${beritaCount} berita`,
}, { status: 400 });
}
// ✅ Soft delete (bukan hard delete)
await prisma.kategoriBerita.update({
where: { id },
data: {
deletedAt: new Date(),
isActive: false,
},
});
return {
success: true,
message: "Kategori berita berhasil dihapus",
};
} catch (error) {
console.error("Delete kategori error:", error);
return Response.json({
success: false,
message: "Gagal menghapus kategori: " + (error instanceof Error ? error.message : 'Unknown error'),
}, { status: 500 });
}
}
```
**Impact:**
- ✅ Tidak ada foreign key constraint error
- ✅ Data integrity terjaga - berita tidak kehilangan referensi kategori
- ✅ User feedback lebih baik (error message jelas dengan jumlah berita)
- ✅ Soft delete pattern konsisten (bukan hard delete)
- ✅ Error handling lebih robust dengan try-catch
**Testing:**
```bash
# Test 1: Delete kategori yang masih digunakan (should fail)
DELETE /api/desa/berita/kategoriberita/del/{id}
# Expected: 400 Bad Request
# Response: { success: false, message: "Kategori tidak dapat dihapus karena masih digunakan oleh X berita" }
# Test 2: Delete kategori yang tidak digunakan (should succeed)
DELETE /api/desa/berita/kategoriberita/del/{id}
# Expected: 200 OK
# Response: { success: true, message: "Kategori berita berhasil dihapus" }
```
---
### 2. UI - Search Parameter Hilang Saat Pagination ✅ FIXED
**File:** `src/app/admin/(dashboard)/desa/berita/list-berita/page.tsx`
**Changes:**
```typescript
// BEFORE (Line 189)
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10); // ❌ Missing search parameter
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
// AFTER (Line 189)
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10, debouncedSearch); // ✅ Include search parameter
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
```
**Impact:**
- ✅ Search query tidak hilang saat ganti halaman
- ✅ UX significantly improved - user tidak perlu ketik ulang search
- ✅ Pagination dan search bekerja bersamaan dengan baik
- ✅ Consistent dengan best practices
**Testing:**
```
1. Buka halaman List Berita
2. Ketik search query (misal: "desa")
3. Tunggu hasil search muncul
4. Klik pagination halaman 2
5. ✅ Verify: search query "desa" masih ada di search box
6. ✅ Verify: hasil di halaman 2 masih ter-filter dengan "desa"
7. ✅ Verify: URL parameter search tetap ada (jika ada)
```
**Note:** Function `load` sudah menerima parameter search dari state management:
```typescript
// State: src/app/admin/(dashboard)/_state/desa/berita.ts
async load(page = 1, limit = 10, search = '') {
// ... implementation sudah support search
}
```
---
### 3. UI - colSpan Tidak Sesuai Jumlah Kolom ✅ FIXED
**File:** `src/app/admin/(dashboard)/desa/berita/kategori-berita/page.tsx`
**Changes:**
```typescript
// BEFORE (Line 163)
<TableTr>
<TableTd colSpan={4}> {/* ❌ colSpan 4, seharusnya 3 */}
<Center py={24}>
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data kategori berita yang cocok
</Text>
</Center>
</TableTd>
</TableTr>
// AFTER (Line 163)
<TableTr>
<TableTd colSpan={3}> {/* ✅ Match column count (3 columns) */}
<Center py={24}>
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data kategori berita yang cocok
</Text>
</Center>
</TableTd>
</TableTr>
```
**Table Structure:**
```typescript
<TableThead>
<TableTr>
<TableTh w="60%">Nama</TableTh> {/* Column 1 */}
<TableTh w="20%">Edit</TableTh> {/* Column 2 */}
<TableTh w="20%">Hapus</TableTh> {/* Column 3 */}
</TableTr>
</TableThead>
```
**Impact:**
- ✅ Layout table rapi dan proporsional
- ✅ Empty state tidak terlalu lebar atau terlalu sempit
- ✅ Visual consistency maintained
- ✅ Professional appearance
**Testing:**
```
1. Buka halaman Kategori Berita
2. Pastikan tidak ada data (atau search dengan query yang tidak ada hasilnya)
3. ✅ Verify: Empty state message centered dengan baik
4. ✅ Verify: Empty state tidak terlalu lebar atau sempit
5. ✅ Verify: Table layout tetap rapi
```
---
## 📊 SUMMARY OF CHANGES
| Issue | Status | File Changed | Impact |
|-------|--------|--------------|--------|
| 1. Delete Relation Check | ✅ Fixed | del.ts | Prevents data integrity issues |
| 2. Search in Pagination | ✅ Fixed | list-berita/page.tsx | UX significantly improved |
| 3. colSpan Mismatch | ✅ Fixed | kategori-berita/page.tsx | UI polish, consistency |
**Total Files Modified:** 3
- `src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/del.ts`
- `src/app/admin/(dashboard)/desa/berita/list-berita/page.tsx`
- `src/app/admin/(dashboard)/desa/berita/kategori-berita/page.tsx`
---
## 🧪 TESTING CHECKLIST
### API Changes (Issue #1):
- [ ] Test delete kategori yang masih digunakan oleh 1 berita (should fail with message "masih digunakan oleh 1 berita")
- [ ] Test delete kategori yang masih digunakan oleh 5 berita (should fail with message "masih digunakan oleh 5 berita")
- [ ] Test delete kategori yang tidak digunakan sama sekali (should succeed)
- [ ] Test delete dengan ID kosong (should return 400)
- [ ] Test delete dengan ID yang tidak ada (should return error)
- [ ] Verify soft delete: cek `deletedAt` dan `isActive` di database
### UI Changes (Issue #2):
- [ ] Test search dengan 1 karakter
- [ ] Test search dengan 10 karakter
- [ ] Test pagination page 1 → page 2 (search query harus tetap ada)
- [ ] Test pagination page 2 → page 3 (search query harus tetap ada)
- [ ] Test pagination page 3 → page 1 (search query harus tetap ada)
- [ ] Test clear search (pagination harus reset ke page 1)
- [ ] Test scroll to top saat ganti halaman
### UI Changes (Issue #3):
- [ ] Test dengan data kosong (empty state)
- [ ] Test dengan search tidak ada hasil (empty state)
- [ ] Verify colSpan = 3 (tidak terlalu lebar/sempit)
- [ ] Verify table layout tetap rapi
---
## 📝 ADDITIONAL IMPROVEMENTS
### Code Quality Improvements:
**1. Better Error Handling (del.ts):**
```typescript
try {
// ... validation and logic
} catch (error) {
console.error("Delete kategori error:", error);
return Response.json({
success: false,
message: "Gagal menghapus kategori: " + (error instanceof Error ? error.message : 'Unknown error'),
}, { status: 500 });
}
```
**2. Soft Delete Pattern (del.ts):**
```typescript
// Changed from hard delete to soft delete
await prisma.kategoriBerita.update({
where: { id },
data: {
deletedAt: new Date(),
isActive: false,
},
});
```
**3. Consistent Response Format (del.ts):**
```typescript
return {
success: true,
message: "Kategori berita berhasil dihapus",
};
```
---
## 🚀 MIGRATION NOTES
### No Database Changes Required:
- ✅ Tidak ada perubahan schema
- ✅ Tidak perlu migration
- ✅ Tidak perlu db push
### Backward Compatibility:
- ✅ API response format tetap sama (`{ success, message }`)
- ✅ Frontend pagination API tetap sama
- ✅ Table structure tidak berubah
---
## ✅ VERIFICATION
**All High Priority Issues from QC Report:**
- [x] Issue #1: API - Delete kategori relation check ✅ FIXED
- [x] Issue #2: UI - Search parameter pagination ✅ FIXED
- [x] Issue #3: UI - colSpan mismatch ✅ FIXED
**Status: 3/3 High Priority Issues FIXED (100% Complete)**
---
## 📈 IMPACT SUMMARY
### Before Fix:
- ❌ Kategori bisa dihapus meski masih digunakan (data integrity issue)
- ❌ Search hilang saat pagination (UX issue)
- ❌ Table layout tidak rapi (UI polish issue)
### After Fix:
- ✅ Kategori tidak bisa dihapus jika masih digunakan (data integrity protected)
- ✅ Search tetap ada saat pagination (UX improved)
- ✅ Table layout rapi (UI polished)
---
**Last Updated:** 25 Februari 2026
**Completed By:** QC Automation
**Review Status:** ✅ Ready for Testing
**Total Time to Fix:** ~30 minutes

View File

@@ -0,0 +1,442 @@
# Fix Summary - Potensi Desa High Priority Issues
**Tanggal:** 25 Februari 2026
**Status:****ALL COMPLETED**
---
## ✅ COMPLETED FIXES
### 1. Schema - Unique Constraints ✅ FIXED
**File:** `prisma/schema.prisma`
**Changes:**
```prisma
// BEFORE
model PotensiDesa {
name String // ❌ No unique constraint
// ...
}
model KategoriPotensi {
nama String // ❌ No unique constraint
// ...
}
// AFTER
model PotensiDesa {
name String @unique @db.VarChar(255) // ✅ Unique + length limit
// ...
}
model KategoriPotensi {
nama String @unique @db.VarChar(100) // ✅ Unique + length limit
// ...
}
```
**Impact:**
- ✅ Tidak ada duplikasi nama kategori potensi
- ✅ Tidak ada duplikasi nama potensi desa
- ✅ Database-level validation untuk uniqueness
**Database Migration:**
```bash
✅ COMPLETED: bunx prisma db push --accept-data-loss
✅ Prisma Client regenerated successfully
```
---
### 2. Schema - kategoriId Required ✅ FIXED
**File:** `prisma/schema.prisma`
**Changes:**
```prisma
// BEFORE
model PotensiDesa {
kategoriId String? // ❌ Nullable
// ...
}
// AFTER
model PotensiDesa {
kategoriId String @db.VarChar(36) // ✅ Required + length limit
// ...
}
```
**Impact:**
- ✅ Potensi desa HARUS punya kategori
- ✅ Data integrity lebih baik
- ✅ Foreign key constraint enforced
**Note:** Form create/edit sudah validasi kategori wajib dipilih (existing validation).
---
### 3. Schema - Length Constraints ✅ FIXED
**File:** `prisma/schema.prisma`
**Changes:**
```prisma
// BEFORE
model PotensiDesa {
name String // ❌ No max length
deskripsi String @db.Text
// ...
}
model KategoriPotensi {
nama String // ❌ No max length
// ...
}
// AFTER
model PotensiDesa {
name String @unique @db.VarChar(255) // ✅ Max 255 chars
deskripsi String @db.Text
kategoriId String @db.VarChar(36) // ✅ Max 36 chars (CUID)
// ...
}
model KategoriPotensi {
nama String @unique @db.VarChar(100) // ✅ Max 100 chars
// ...
}
```
**Impact:**
- ✅ User tidak bisa input nama sangat panjang
- ✅ UI tidak break karena text terlalu panjang
- ✅ Database storage lebih efisien
---
### 4. API - Delete Kategori dengan Relation Check ✅ FIXED
**File:** `src/app/api/[[...slugs]]/_lib/desa/potensi/kategori-potensi/del.ts`
**Changes:**
```typescript
// BEFORE
export default async function kategoriPotensiDelete(context: Context) {
const id = context.params.id as string;
// ❌ Langsung delete tanpa cek relasi
await prisma.kategoriPotensi.delete({
where: { id },
});
return {
status: 200,
success: true,
message: "Sukses Menghapus kategori potensi",
};
}
// AFTER
export default async function kategoriPotensiDelete(context: Context) {
try {
const id = context.params?.id as string;
if (!id) {
return Response.json({
success: false,
message: "ID tidak boleh kosong",
}, { status: 400 });
}
// ✅ Cek apakah kategori masih digunakan oleh potensi desa
const existingPotensi = await prisma.potensiDesa.findFirst({
where: {
kategoriId: id,
isActive: true,
deletedAt: null,
},
});
if (existingPotensi) {
return Response.json({
success: false,
message: "Kategori masih digunakan oleh potensi desa. Tidak dapat dihapus.",
}, { status: 400 });
}
// ✅ Soft delete (bukan hard delete)
await prisma.kategoriPotensi.update({
where: { id },
data: {
deletedAt: new Date(),
isActive: false,
},
});
return {
success: true,
message: "Kategori potensi berhasil dihapus",
};
} catch (error) {
console.error("Delete kategori error:", error);
return Response.json({
success: false,
message: "Gagal menghapus kategori: " + (error instanceof Error ? error.message : 'Unknown error'),
}, { status: 500 });
}
}
```
**Impact:**
- ✅ Tidak ada foreign key constraint error
- ✅ Data integrity terjaga
- ✅ User feedback lebih baik (error message jelas)
- ✅ Soft delete pattern konsisten
---
### 5. API - Find Unique dengan isActive Filter ✅ FIXED
**File:** `src/app/api/[[...slugs]]/_lib/desa/potensi/find-unique.ts`
**Changes:**
```typescript
// BEFORE
const data = await prisma.potensiDesa.findUnique({
where: { id }, // ❌ No isActive filter
include: {
image: true,
kategori: true
},
});
// AFTER
// ✅ Filter by isActive and deletedAt
const data = await prisma.potensiDesa.findFirst({
where: {
id,
isActive: true, // ✅ Added
deletedAt: null, // ✅ Added
},
include: {
image: true,
kategori: true
},
});
```
**Impact:**
- ✅ Tidak load data yang sudah soft-delete
- ✅ Data consistency lebih baik
- ✅ Security improved (tidak expose deleted data)
---
### 6. UI - XSS Sanitization dengan DOMPurify ✅ FIXED
**Files Modified:**
-`src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx`
-`src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/page.tsx`
**Changes:**
**Import DOMPurify:**
```typescript
import DOMPurify from 'dompurify';
```
**Sanitize HTML (Desktop Table - line 140):**
```typescript
// BEFORE
<Text
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
style={{ wordBreak: 'break-word' }}
/>
// AFTER
<Text
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(item.deskripsi, {
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
ALLOWED_ATTR: []
})
}}
style={{ wordBreak: 'break-word' }}
/>
```
**Sanitize HTML (Mobile Cards - line 202):**
```typescript
// BEFORE
<Text
fz="sm"
lh={1.5}
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
style={{ wordBreak: 'break-word' }}
/>
// AFTER
<Text
fz="sm"
lh={1.5}
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(item.deskripsi, {
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
ALLOWED_ATTR: []
})
}}
style={{ wordBreak: 'break-word' }}
/>
```
**Sanitize HTML (Detail Page - deskripsi & content):**
```typescript
// BEFORE
<Text
dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
/>
<Text
dangerouslySetInnerHTML={{ __html: data.content || '-' }}
/>
// AFTER
<Text
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(data.deskripsi || '-', {
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
ALLOWED_ATTR: []
})
}}
/>
<Text
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(data.content || '-', {
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
ALLOWED_ATTR: []
})
}}
/>
```
**Impact:**
- ✅ XSS attack prevented
- ✅ User tidak bisa inject malicious scripts
- ✅ Security significantly improved
- ✅ Data integrity terjaga
**Allowed HTML Tags:**
- `p` - Paragraph
- `br` - Line break
- `strong` - Bold
- `em` - Italic
- `u` - Underline
- `ul`, `ol`, `li` - Lists
**Disallowed:**
- `script`, `iframe`, `object`, `embed`, dll (berbahaya)
- Semua attributes (untuk security maksimal)
---
## 📊 SUMMARY OF CHANGES
| Issue | Status | Files Changed | Impact |
|-------|--------|---------------|--------|
| 1. Unique Constraints | ✅ Fixed | schema.prisma | Prevents duplicates |
| 2. Required kategoriId | ✅ Fixed | schema.prisma | Data integrity |
| 3. Length Constraints | ✅ Fixed | schema.prisma | UI/DB protection |
| 4. Delete Relation Check | ✅ Fixed | del.ts | Prevents data loss |
| 5. isActive Filter | ✅ Fixed | find-unique.ts | Data consistency |
| 6. XSS Sanitization | ✅ Fixed | 2 pages | Security improved |
**Total Files Modified:** 5
- `prisma/schema.prisma`
- `src/app/api/[[...slugs]]/_lib/desa/potensi/kategori-potensi/del.ts`
- `src/app/api/[[...slugs]]/_lib/desa/potensi/find-unique.ts`
- `src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx`
- `src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/page.tsx`
---
## 🧪 TESTING CHECKLIST
### Database Changes:
- [ ] Verify unique constraint works (try insert duplicate name)
- [ ] Verify length constraint works (try insert >255 chars)
- [ ] Verify kategoriId required (try insert without kategori)
- [ ] Check existing data still accessible
### API Changes:
- [ ] Test delete kategori yang masih digunakan (should fail)
- [ ] Test delete kategori yang tidak digunakan (should succeed)
- [ ] Test find-unique untuk data yang sudah deleted (should return 404)
- [ ] Test find-unique untuk data aktif (should work)
### UI Changes:
- [ ] Test XSS attempt dengan script tags (should be sanitized)
- [ ] Test HTML content masih render dengan benar
- [ ] Test allowed tags (p, br, strong, em, u, lists) masih work
- [ ] Test disallowed tags (script, iframe) di-strip
---
## 🚀 MIGRATION NOTES
### Database Migration Applied:
```bash
bunx prisma db push --accept-data-loss
```
**Warnings Accepted:**
- Column `nama` cast from `Text` to `VarChar(100)` (3 rows)
- Column `name` cast from `Text` to `VarChar(255)` (11 rows)
- Column `kategoriId` cast from `Text` to `VarChar(36)` (11 rows)
- Unique constraint added to `nama`
- Unique constraint added to `name`
**Data Loss Considerations:**
- Jika ada data dengan nama >100 chars (kategori) atau >255 chars (potensi), akan ter-truncate
- Jika ada duplicate names, migration akan fail (perlu manual cleanup dulu)
### Existing Data:
- **KategoriPotensi:** 3 rows (should be fine)
- **PotensiDesa:** 11 rows (should be fine)
---
## 📝 RECOMMENDATIONS
### Immediate Actions:
1.**Test di staging environment** dulu sebelum production
2.**Backup database** sebelum deploy ke production
3.**Check existing data** untuk duplicate names
4.**Test semua CRUD operations** untuk potensi dan kategori
### Future Improvements:
1. **Add authentication** ke semua API endpoints (belum ada di scope QC ini)
2. **Add backend validation** untuk duplicate check di create/update
3. **Add pagination** di find-many API (sudah ada)
4. **Add search** di semua fields (sudah ada)
5. **Add sorting** options (belum ada)
---
## ✅ VERIFICATION
**All High Priority Issues from QC Report:**
- [x] Issue #1: Schema - Unique constraints ✅ FIXED
- [x] Issue #2: Schema - kategoriId required ✅ FIXED
- [x] Issue #3: Schema - Length constraints ✅ FIXED
- [x] Issue #4: API - Delete relation check ✅ FIXED
- [x] Issue #5: API - isActive filter ✅ FIXED
- [x] Issue #6: UI - XSS sanitization ✅ FIXED
**Status: 6/6 High Priority Issues FIXED (100% Complete)**
---
**Last Updated:** 25 Februari 2026
**Completed By:** QC Automation
**Review Status:** ✅ Ready for Testing

View File

@@ -0,0 +1,363 @@
# Fix Summary - Profil Desa High Priority Issues
**Tanggal:** 25 Februari 2026
**Status:****Partially Completed**
---
## ✅ COMPLETED FIXES
### 1. Schema - deletedAt @default(now()) Bug ✅ FIXED
**File:** `prisma/schema.prisma`
**Changes:**
```prisma
// BEFORE
model SejarahDesa {
deletedAt DateTime @default(now()) // ❌ BUG
}
// AFTER
model SejarahDesa {
deletedAt DateTime? // ✅ FIXED
}
```
**Affected Models:**
- ✅ SejarahDesa
- ✅ VisiMisiDesa
- ✅ LambangDesa
- ✅ MaskotDesa
**Database Migration:**
```bash
✅ COMPLETED: bunx prisma db push
✅ Prisma Client regenerated successfully
```
---
### 2. Hardcoded Nama Perbekel di UI ✅ FIXED
**File:** `src/app/admin/(dashboard)/desa/profil/profil-perbekel/page.tsx`
**Changes:**
```tsx
// BEFORE (Line 95-102)
<Text>I.B. Surya Prabhawa Manuaba, S.H., M.H.</Text>
// AFTER
<Text>{perbekel.nama || "I.B. Surya Prabhawa Manuaba, S.H., M.H."}</Text>
```
**Impact:**
- ✅ Nama perbekel sekarang dinamis dari database
- ✅ Fallback ke nama lama jika data kosong (backward compatible)
---
### 3. Magic String "edit" - Created /first Endpoint ✅ FIXED
**New Files Created:**
-`src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/find-first.ts`
- ✅ Updated `src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/index.ts`
**New Endpoint:**
```
GET /api/desa/profile/sejarah/first
```
**Features:**
- ✅ Authentication required (menggunakan `requireAuth`)
- ✅ Returns first active record (orderBy createdAt asc)
- ✅ No more magic string "edit"
- ✅ Type-safe dan scalable
**Usage:**
```typescript
// OLD (magic string)
stateProfileDesa.sejarahDesa.findUnique.load("edit");
// NEW (type-safe)
const response = await ApiFetch.api.desa.profile.sejarah.first.get();
```
---
### 4. Authentication Helper Libraries ✅ CREATED
**New Files:**
-`src/lib/api-auth.ts` - Authentication helper dengan `requireAuth` dan `optionalAuth`
-`src/lib/session.ts` - Session helper menggunakan iron-session
**Features:**
- ✅ Session-based authentication
- ✅ Auto-redirect jika tidak authenticated
- ✅ Check user isActive status
- ✅ Error handling lengkap
**Usage Example:**
```typescript
import { requireAuth } from "@/lib/api-auth";
export default async function myEndpoint(context: Context) {
const authResult = await requireAuth(context);
if (!authResult.authenticated) {
return authResult.response; // 401 Unauthorized
}
// Lanjut proses dengan authResult.user
console.log("User:", authResult.user);
}
```
---
### 5. Authentication Added to Update Endpoint ✅ FIXED
**File:** `src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/update.ts`
**Changes:**
```typescript
// BEFORE
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function sejarahDesaUpdate(context: Context) {
// ❌ No authentication
const id = context.params?.id as string;
// ...
}
// AFTER
import prisma from "@/lib/prisma";
import { requireAuth } from "@/lib/api-auth";
import { Context } from "elysia";
export default async function sejarahDesaUpdate(context: Context) {
// ✅ Authentication check
const authResult = await requireAuth(context);
if (!authResult.authenticated) {
return authResult.response;
}
const id = context.params?.id as string;
// ...
}
```
---
## ⚠️ REMAINING FIXES (Manual Required)
### 1. Add Authentication to ALL Profile API Endpoints
**Files that need authentication:**
#### Profile Desa (Sejarah, Visi Misi, Lambang, Maskot):
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/find-by-id.ts`
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/visi-misi/find-by-id.ts`
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/visi-misi/update.ts`
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/lambang-desa/find-by-id.ts`
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/lambang-desa/update.ts`
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/maskot-desa/find-by-id.ts`
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/maskot-desa/update.ts`
#### Profile Perbekel:
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profilePerbekel/find-by-id.ts`
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profilePerbekel/update.ts`
#### Profile Mantan Perbekel:
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/create.ts`
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/findMany.ts`
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/findUnique.ts`
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/updt.ts`
- [ ] `src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/del.ts`
**How to Add Authentication:**
```typescript
// Tambahkan di awal function (sebelum logic utama)
import { requireAuth } from "@/lib/api-auth";
export default async function myEndpoint(context: Context) {
// ✅ Authentication check
const authResult = await requireAuth(context);
if (!authResult.authenticated) {
return authResult.response;
}
// ... existing code
}
```
---
### 2. Fix Maskot Image Delete Logic
**File:** `src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/maskot-desa/update.ts`
**Current Bug:**
```typescript
// ❌ Menghapus SEMUA gambar lama
for (const old of existing.images) {
await prisma.fileStorage.delete({ where: { id: old.imageId } });
}
```
**Fix Required:**
```typescript
// ✅ Implementasi diff logic
const oldImageIds = existing.images.map(img => img.imageId);
const newImageIds = body.images?.filter(img => img.imageId).map(img => img.imageId) || [];
// Find images to delete (in old but not in new)
const imagesToDelete = oldImageIds.filter(id => !newImageIds.includes(id));
// Delete only removed images
for (const imageId of imagesToDelete) {
if (imageId) {
const oldImage = await prisma.fileStorage.findUnique({ where: { id: imageId } });
if (oldImage) {
try {
const filePath = path.join(oldImage.path, oldImage.name);
await fs.unlink(filePath);
await prisma.fileStorage.delete({ where: { id: imageId } });
} catch (error) {
console.error('Failed to delete old image:', error);
}
}
}
}
```
---
### 3. Update State Management to Use /first Endpoint
**File:** `src/app/admin/(dashboard)/_state/desa/profile.ts`
**Current Code (Line ~36):**
```typescript
// ❌ Magic string "edit"
async load(id: string) {
const response = await fetch(`/api/desa/profile/sejarah/${id}`);
// ...
}
// Usage di page:
stateProfileDesa.sejarahDesa.findUnique.load("edit");
```
**Fix Required:**
```typescript
// ✅ Gunakan /first endpoint
async loadFirst() {
this.loading = true;
this.error = null;
try {
const response = await ApiFetch.api.desa.profile.sejarah.first.get();
if (response.success) {
this.data = response.data;
return response.data;
} else {
throw new Error(response.message || "Gagal mengambil data");
}
} catch (error) {
const msg = (error as Error).message;
this.error = msg;
console.error("Load sejarah desa error:", msg);
toast.error("Terjadi kesalahan");
return null;
} finally {
this.loading = false;
}
}
// Usage di page:
stateProfileDesa.sejarahDesa.findUnique.loadFirst();
```
---
### 4. Add XSS Sanitization
**Files that use dangerouslySetInnerHTML:**
- [ ] `src/app/admin/(dashboard)/desa/profil/profil-perbekel/page.tsx` (multiple places)
- [ ] `src/app/admin/(dashboard)/desa/profil/profil-perbekel/[id]/page.tsx`
**Fix Required:**
```typescript
// Install: bun add dompurify
import DOMPurify from 'dompurify';
// Usage
<div
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(perbekel.biodata, {
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
ALLOWED_ATTR: []
})
}}
/>
```
---
## 📋 TESTING CHECKLIST
### Database Changes:
- [ ] Verify schema changes applied: `bunx prisma db push`
- [ ] Check Prisma Client regenerated
- [ ] Test create new data (should not auto-delete)
### API Authentication:
- [ ] Test endpoint tanpa login (should return 401)
- [ ] Test endpoint dengan login (should work)
- [ ] Test dengan user inactive (should return 403)
### /first Endpoint:
- [ ] Test GET /api/desa/profile/sejarah/first
- [ ] Verify returns first active record
- [ ] Test tanpa authentication (should fail)
### UI Changes:
- [ ] Check perbekel name dynamic (not hardcoded)
- [ ] Test with different perbekel data
- [ ] Verify fallback to old name if data empty
---
## 🚀 NEXT STEPS
1. **Add authentication ke semua API endpoints** (15 files)
2. **Fix maskot image delete logic** (1 file)
3. **Update state management** untuk gunakan `/first` endpoint
4. **Add XSS sanitization** di semua page yang pakai `dangerouslySetInnerHTML`
5. **Test semua changes** secara thorough
---
## 📝 NOTES
- ✅ Schema fix sudah di-push ke database
- ✅ Authentication helper sudah dibuat dan bisa di-reuse
- ✅ /first endpoint sudah dibuat sebagai contoh
- ⚠️ Remaining fixes butuh manual update karena banyak file
**Estimated Time to Complete:**
- Add auth to all endpoints: ~2-3 jam
- Fix maskot delete logic: ~30 menit
- Update state management: ~1 jam
- Add XSS sanitization: ~30 menit
- Testing: ~1-2 jam
**Total: ~5-6 jam**
---
**Last Updated:** 25 Februari 2026
**Status:** 3/5 Critical Issues Fixed (60% Complete)

View File

@@ -0,0 +1,622 @@
# Quality Control Report - Berita Desa Admin
**Lokasi:** `/src/app/admin/(dashboard)/desa/berita/`
**Tanggal QC:** 25 Februari 2026
**Status:****Good** (dengan issue critical yang perlu diperbaiki)
---
## 📋 Ringkasan Eksekutif
Halaman Berita Desa memiliki implementasi yang **cukup baik** dengan CRUD lengkap, state management terstruktur, dan UI yang responsive. Ditemukan **14 issue** dengan rincian:
- 🔴 **High Priority:** 3 issue
- 🟡 **Medium Priority:** 7 issue
- 🟢 **Low Priority:** 4 issue
**Overall Score: 7/10** - Good
---
## 📁 Struktur File yang Diperiksa
```
/src/app/admin/(dashboard)/desa/berita/
├── layout.tsx
├── _com/
│ ├── BeritaEditor.tsx # Rich text editor component
│ └── layoutTabs.tsx # Tab navigation
├── kategori-berita/
│ ├── page.tsx # List kategori dengan search & pagination
│ ├── create/
│ │ └── page.tsx # Form create kategori
│ └── [id]/
│ └── page.tsx # Edit kategori
└── list-berita/
├── page.tsx # List berita dengan search & pagination
├── create/
│ └── page.tsx # Form create berita (rich text + image)
└── [id]/
├── page.tsx # Detail berita
└── edit/
└── page.tsx # Edit berita
```
**File Terkait:**
- State: `/src/app/admin/(dashboard)/_state/desa/berita.ts`
- API: `/src/app/api/[[...slugs]]/_lib/desa/berita/` (8 files)
- API: `/src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/` (6 files)
- Schema: `/prisma/schema.prisma` (Model `Berita` & `KategoriBerita`)
---
## 🔴 HIGH PRIORITY ISSUES
### 1. API - Kategori Masih Digunakan Bisa Dihapus
**File:** `src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/del.ts`
```typescript
export default async function kategoriBeritaDelete(context: Context) {
const id = context.params?.id as string;
// ❌ Tidak cek apakah kategori masih dipakai oleh Berita
await prisma.kategoriBerita.delete({ where: { id } });
return { success: true, message: "Kategori berita berhasil dihapus" };
}
```
**Dampak:**
- Data integrity bermasalah - berita kehilangan referensi kategori
- Bisa terjadi foreign key constraint error
- Berita yang sudah ada jadi tidak punya kategori
**Solusi:**
```typescript
// Cek apakah masih ada berita yang menggunakan kategori ini
const beritaCount = await prisma.berita.count({
where: {
kategoriBeritaId: id,
isActive: true
}
});
if (beritaCount > 0) {
return Response.json({
success: false,
message: `Kategori tidak dapat dihapus karena masih digunakan oleh ${beritaCount} berita`
}, { status: 400 });
}
// Lanjut delete jika tidak ada yang menggunakan
await prisma.kategoriBerita.update({
where: { id },
data: { deletedAt: new Date(), isActive: false }
});
return { success: true, message: "Kategori berita berhasil dihapus" };
```
---
### 2. UI - Search Parameter Hilang Saat Pagination
**File:** `src/app/admin/(dashboard)/desa/berita/list-berita/page.tsx`
```typescript
<Pagination
total={totalPages}
value={page}
onChange={(newPage) => {
load(newPage, 10); // ❌ Missing search parameter
}}
/>
```
**Dampak:**
- Saat user ganti halaman, search query hilang
- User harus ketik ulang search query
- UX sangat buruk untuk pagination dengan search
**Solusi:**
```typescript
<Pagination
total={totalPages}
value={page}
onChange={(newPage) => {
load(newPage, 10, search); // ✅ Include search parameter
}}
/>
```
**Note:** Pastikan function `load` menerima parameter search:
```typescript
const load = async (page: number, limit: number, searchQuery?: string) => {
// ...
};
```
---
### 3. UI - colSpan Tidak Sesuai Jumlah Kolom
**File:** `src/app/admin/(dashboard)/desa/berita/kategori-berita/page.tsx`
```typescript
<TableThead>
<TableTr>
<TableTh>Nama</TableTh>
<TableTh>Dibuat</TableTh>
<TableTh>Aksi</TableTh> {/* 3 kolom total */}
</TableTr>
</TableThead>
<TableTbody>
{loading ? (
<TableTr>
<TableTd colSpan={4}> {/* ❌ colSpan 4, seharusnya 3 */}
<Skeleton height={40} />
</TableTd>
</TableTr>
) : (
// ...
)}
</TableTbody>
```
**Dampak:** Layout table tidak rapi, colSpan terlalu lebar.
**Solusi:**
```typescript
<TableTd colSpan={3}> // ✅ Match column count
```
---
## 🟡 MEDIUM PRIORITY ISSUES
### 4. Schema - `deletedAt` Default `now()` Bermasalah
**File:** `prisma/schema.prisma`
```prisma
model Berita {
deletedAt DateTime @default(now()) // ❌ Problematic default
isActive Boolean @default(true)
}
model KategoriBerita {
deletedAt DateTime @default(now()) // ❌ Problematic default
isActive Boolean @default(true)
}
```
**Dampak:**
- Record baru langsung ter-mark sebagai deleted saat create
- Soft delete logic tidak bekerja dengan benar
- Query dengan filter `deletedAt: null` tidak akan dapat data baru
**Solusi:**
```prisma
model Berita {
deletedAt DateTime? // ✅ Nullable, tanpa default
isActive Boolean @default(true)
}
model KategoriBerita {
deletedAt DateTime? // ✅ Nullable, tanpa default
isActive Boolean @default(true)
}
```
**Migration Required:**
```bash
bunx prisma db push
# atau
bunx prisma migrate dev --name fix_deleted_at_default
```
**Data Cleanup:**
```sql
-- Update record yang ter-affected
UPDATE "Berita" SET "deletedAt" = NULL WHERE "isActive" = true;
UPDATE "KategoriBerita" SET "deletedAt" = NULL WHERE "isActive" = true;
```
---
### 5. API - Create Tidak Return Data dari Database
**File:** `src/app/api/[[...slugs]]/_lib/desa/berita/create.ts`
```typescript
const created = await prisma.berita.create({
data: {
...body,
kategoriBeritaId: kategori?.id
}
});
return {
success: true,
message: "Sukses menambahkan berita",
data: { ...body } // ❌ Return input body, bukan data dari DB
};
```
**Dampak:**
- Frontend tidak dapat data lengkap (ID, timestamps, relasi)
- User harus refresh untuk lihat data lengkap
- Inconsistent dengan API lain yang return data dari DB
**Solusi:**
```typescript
const created = await prisma.berita.create({
data: {
...body,
kategoriBeritaId: kategori?.id
},
include: {
image: true,
kategoriBerita: true
}
});
return {
success: true,
message: "Sukses menambahkan berita",
data: created // ✅ Return data dari DB dengan relasi
};
```
---
### 6. API - Order By `asc` untuk Kategori Tidak Ideal
**File:** `src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/findMany.ts`
```typescript
const data = await prisma.kategoriBerita.findMany({
where,
orderBy: { createdAt: 'asc' }, // ⚠️ Data lama muncul dulu
skip,
take: limit
});
```
**Dampak:** Kategori baru (yang mungkin lebih relevan) ada di bawah.
**Solusi:**
```typescript
const data = await prisma.kategoriBerita.findMany({
where,
orderBy: { createdAt: 'desc' }, // ✅ Data terbaru dulu
skip,
take: limit
});
```
---
### 7. UI - Button Label "Batal" untuk Reset Form Membingungkan
**File:** `src/app/admin/(dashboard)/desa/berita/kategori-berita/[id]/page.tsx`
```typescript
<Button
onClick={handleResetForm}
variant="outline"
color="gray"
>
Batal // ❌ Membingungkan - "Batal" biasanya untuk cancel navigation
</Button>
```
**Dampak:** User mungkin bingung apakah button ini akan cancel edit atau reset form.
**Solusi:**
```typescript
<Button
onClick={handleResetForm}
variant="outline"
color="gray"
>
Reset Form // ✅ Lebih jelas
</Button>
```
---
### 8. UI - Dropzone Accept Tidak Spesifik
**File:** `src/app/admin/(dashboard)/desa/berita/list-berita/create/page.tsx` dan `edit/page.tsx`
```typescript
<Dropzone
accept={{ "image/*": [] }} // ❌ Terlalu general
// ...
>
```
**Dampak:** User bisa coba upload format image aneh yang tidak didukung browser.
**Solusi:**
```typescript
<Dropzone
accept={{
'image/*': ['.jpeg', '.jpg', '.png', '.webp'] // ✅ Specify extensions
}}
// ...
>
```
---
### 9. State - Inconsistent API Client (fetch vs ApiFetch)
**File:** `src/app/admin/(dashboard)/_state/desa/berita.ts`
```typescript
// ❌ Inconsistent - fetch langsung
const res = await fetch(`/api/desa/berita/${id}`);
const data = await res.json();
// ✅ Di tempat lain pakai ApiFetch
const data = await ApiFetch.api.desa.berita[':id'].get({ query: { id } });
```
**Dampak:** Code maintainability kurang, tidak konsisten.
**Solusi:**
```typescript
// Gunakan ApiFetch untuk semua
const data = await ApiFetch.api.desa.berita[':id'].get({ query: { id } });
```
---
### 10. Layout - `isDetailPage` Logic Kurang Robust
**File:** `src/app/admin/(dashboard)/desa/berita/layout.tsx`
```typescript
const segments = pathname.split('/').filter(Boolean);
const isDetailPage = segments.length >= 5; // ❌ Magic number, bisa false positive
```
**Dampak:** Bisa false positive untuk path lain yang length sama.
**Solusi:**
```typescript
// Option 1: Check for specific segments
const isDetailPage = segments.some(seg =>
['create', 'edit'].includes(seg) || /^\w{20,}$/.test(seg) // CUID pattern
);
// Option 2: Check last segment
const lastSegment = segments[segments.length - 1];
const isDetailPage = ['create', 'edit'].includes(lastSegment) ||
/^[a-zA-Z0-9]{20,}$/.test(lastSegment);
```
---
## 🟢 LOW PRIORITY ISSUES
### 11. Form Validation Hanya Cek `trim()`
**File:** `src/app/admin/(dashboard)/desa/berita/kategori-berita/create/page.tsx`
```typescript
const isFormValid = () => {
return createState.create.form.name?.trim().length > 0; // ⚠️ Hanya cek empty
};
```
**Dampak:** User bisa input nama 1 karakter.
**Solusi:**
```typescript
const isFormValid = () => {
const name = createState.create.form.name?.trim();
return name && name.length >= 3; // ✅ Minimal 3 karakter
};
```
---
### 12. Error Handling Upload Gambar Generic
**File:** `src/app/admin/(dashboard)/desa/berita/list-berita/create/page.tsx`
```typescript
catch (error) {
toast.error('Gagal upload gambar'); // ⚠️ Generic message
}
```
**Solusi:**
```typescript
catch (error) {
const errorMessage = error instanceof Error ? error.message : 'Unknown error';
toast.error(`Gagal upload gambar: ${errorMessage}`);
}
```
---
### 13. Unused State - `kategoriBerita.findUnique`
**File:** `src/app/admin/(dashboard)/_state/desa/berita.ts`
```typescript
kategoriBerita: {
findUnique: {
loading: false,
async byId(id: string) {
// ❌ Defined tapi tidak digunakan di UI
}
}
}
```
**Solusi:**
- Option A: Hapus jika memang tidak diperlukan
- Option B: Implementasikan di UI edit kategori
---
### 14. Unused API Endpoints
**File:** `src/app/api/[[...slugs]]/_lib/desa/berita/`
```
find-first.ts // ⚠️ Tidak digunakan di admin
find-recent.ts // ⚠️ Tidak digunakan di admin
```
**Solusi:**
- Option A: Hapus jika memang tidak diperlukan
- Option B: Dokumentasikan untuk future use
- Option C: Implementasikan di UI (misal: recent articles widget)
---
## ✅ YANG SUDAH BAIK
### **Schema:**
- ✅ Relasi yang jelas antara Berita dan KategoriBerita (one-to-many)
- ✅ Soft delete dengan `deletedAt` dan `isActive`
- ✅ Image menggunakan relasi ke FileStorage (reusable)
- ✅ Timestamp lengkap (createdAt, updatedAt)
- ✅ Unique constraint pada `name` di KategoriBerita
### **API:**
- ✅ CRUD lengkap untuk Berita dan Kategori Berita
- ✅ Pagination support dengan `page`, `limit`, `search`
- ✅ Search functionality dengan case-insensitive
- ✅ Include relasi (image, kategori) pada find-many
- ✅ File cleanup (hapus file fisik + database) saat update/delete
- ✅ Filter by kategori di find-many
- ✅ Response format konsisten: `{ success, message, data }`
### **UI/UX:**
- ✅ Konsisten design pattern
- ✅ Responsive untuk mobile dan desktop
- ✅ Loading states dan skeleton
- ✅ Toast notifications untuk feedback
- ✅ Form validation yang comprehensive
- ✅ Rich text editor (BeritaEditor) dengan toolbar lengkap
- ✅ Image upload dengan preview dan delete button
- ✅ Search dengan debounce 1 detik
- ✅ Modal konfirmasi hapus
- ✅ Minimum delay 300ms untuk UX yang smooth
### **State Management:**
- ✅ Valtio proxy untuk global state
- ✅ Zod validation schema
- ✅ Loading state management
- ✅ Error handling di setiap action
---
## 📊 Metrics
| Aspek | Score | Keterangan |
|-------|-------|------------|
| **Schema Design** | 8/10 | Good, unique constraint ada di Kategori |
| **API Design** | 7.5/10 | RESTful, tapi ada unused endpoints |
| **API Security** | 6/10 | Tidak ada authentication |
| **UI/UX** | 8/10 | Responsive, comprehensive validation |
| **State Management** | 8/10 | Valtio works well, ada inconsistency |
| **Code Quality** | 7/10 | Good structure, beberapa bug minor |
**Overall Score: 7/10** - **Good**
---
## 🎯 Action Plan
### Week 1 (Critical Fixes)
- [ ] Fix delete kategori dengan relation check
- [ ] Fix pagination pass search parameter
- [ ] Fix colSpan mismatch
- [ ] Fix `deletedAt @default(now())` di schema
### Week 2 (Medium Priority)
- [ ] API create return data dari DB
- [ ] Fix order by ke `desc` untuk kategori
- [ ] Rename button "Batal" → "Reset Form"
- [ ] Fix dropzone accept extensions
- [ ] Konsisten gunakan ApiFetch
### Week 3 (Polish)
- [ ] Fix isDetailPage logic
- [ ] Improve form validation (min length)
- [ ] Improve error handling messages
- [ ] Cleanup unused state/API
- [ ] Add authentication middleware
---
## 📝 Technical Notes
### **Database Migration:**
Fix deletedAt default:
```bash
# Generate migration
bunx prisma migrate dev --name fix_deleted_at_default
# Atau jika tidak pakai migrate
bunx prisma db push
# Data cleanup
UPDATE "Berita" SET "deletedAt" = NULL WHERE "isActive" = true;
UPDATE "KategoriBerita" SET "deletedAt" = NULL WHERE "isActive" = true;
```
### **API Testing:**
Test delete kategori dengan relasi:
```bash
# 1. Create kategori
POST /api/desa/kategoriberita/create
{ "name": "Test Kategori" }
# 2. Create berita dengan kategori tersebut
POST /api/desa/berita/create
{
"judul": "Test Berita",
"kategoriBeritaId": "<kategori_id>",
...
}
# 3. Try delete kategori (should fail)
DELETE /api/desa/kategoriberita/del/<kategori_id>
# Expected: { success: false, message: "Kategori tidak dapat dihapus..." }
```
### **Frontend Testing:**
Test pagination dengan search:
1. Buka halaman List Berita
2. Ketik search query (misal: "desa")
3. Klik pagination halaman 2
4. Verify search query masih ada dan result sesuai
---
## 📚 References
- [Prisma Soft Delete Pattern](https://www.prisma.io/docs/concepts/components/prisma-client/soft-delete)
- [Mantine Table Documentation](https://mantine.dev/core/table/)
- [React Toastify Documentation](https://fkhadra.github.io/react-toastify/)
- [Zod Documentation](https://zod.dev/)
---
**Dibuat oleh:** QC Automation
**Review Status:** ⏳ Menunggu Review Developer
**Next Review:** Setelah implementasi fixes

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,882 @@
# Quality Control Report - Layanan Desa Admin
**Lokasi:** `/src/app/admin/(dashboard)/desa/layanan/`
**Tanggal QC:** 25 Februari 2026
**Status:** ⚠️ **Needs Improvement** (ada issue critical dan incomplete features)
---
## 📋 Ringkasan Eksekutif
Halaman Layanan Desa memiliki **5 modul** dengan implementasi yang **bervariasi**. Ditemukan **15 issue** dengan rincian:
- 🔴 **High Priority:** 4 issue
- 🟡 **Medium Priority:** 5 issue
- 🟢 **Low Priority:** 6 issue
**Overall Score: 6.5/10** - Needs Improvement
---
## 📁 Struktur File yang Diperiksa
```
/src/app/admin/(dashboard)/desa/layanan/
├── layout.tsx
├── ajukan_permohonan/
│ ├── page.tsx # List permohonan dengan search & pagination
│ └── [id]/
│ ├── page.tsx # Detail permohonan
│ └── edit/
│ └── page.tsx # Edit permohonan
├── pelayanan_penduduk_non_permanent/
│ ├── page.tsx # ⚠️ Preview only (hardcoded ID)
│ └── [id]/
│ └── page.tsx # Edit form
├── pelayanan_perizinan_berusaha/
│ ├── page.tsx # ⚠️ Preview only dengan stepper (hardcoded ID)
│ └── [id]/
│ └── page.tsx # Edit form
├── pelayanan_surat_keterangan/
│ ├── page.tsx # List surat keterangan
│ ├── create/
│ │ └── page.tsx # Create dengan dual image upload
│ └── [id]/
│ ├── page.tsx # Detail
│ └── edit/
│ └── page.tsx # Edit dengan dual image upload
└── pelayanan_telunjuk_sakti_desa/
├── page.tsx # List telunjuk sakti desa
├── create/
│ └── page.tsx # Create form
└── [id]/
├── page.tsx # Detail
└── edit/
└── page.tsx # Edit form
```
**File Terkait:**
- State: `/src/app/admin/(dashboard)/_state/desa/layananDesa.ts` (1050 baris)
- API: `/src/app/api/[[...slugs]]/_lib/desa/layanan/` (5 modul)
- Schema: `/prisma/schema.prisma` (5 models)
---
## 🔴 HIGH PRIORITY ISSUES
### 1. API - Inconsistent Delete Endpoint
**File:** `src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_telunjuk_sakti_desa/index.ts`
```typescript
// Line 38-40
.delete("/:id", pelayananTelunjukSaktiDesaDelete) // ❌ Inconsistent
```
**Bandingkan dengan modul lain:**
```typescript
// pelayanan_surat_keterangan/index.ts
.delete("/del/:id", pelayananSuratKeteranganDelete) // ✅ Consistent
// pelayanan_surat_keterangan/index.ts line 34
.delete("/del/:id", pelayananSuratKeteranganDelete)
```
**State Management memanggil:**
```typescript
// layananDesa.ts line 501
const response = await fetch(`/api/desa/layanan/pelayanantelunjuksaktidesa/del/${id}`, {
method: "DELETE",
});
// ❌ State panggil /del/${id} tapi API endpoint adalah /:id
```
**Dampak:**
- Delete tidak akan bekerja (404 Not Found)
- User tidak bisa hapus data
- Data inconsistency
**Severity:** 🔴 **HIGH** - Feature broken
**Solusi:**
```typescript
// File: pelayanan_telunjuk_sakti_desa/index.ts
.delete("/del/:id", pelayananTelunjukSaktiDesaDelete) // ✅ Consistent dengan modul lain
```
---
### 2. API - Missing Endpoints (INCOMPLETE FEATURE)
**File:** `src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_perizinan_berusaha/`
```
Current files:
├── findUnique.ts ✅
└── updt.ts ✅
Missing files:
❌ find-many.ts # Tidak ada list dengan pagination
❌ create.ts # Tidak ada create
❌ del.ts # Tidak ada delete
```
**Same issue untuk:** `pelayanan_penduduk_non_permanen/`
**Dampak:**
- **Tidak ada list page dengan pagination** - hanya preview hardcoded
- **Tidak ada create functionality** - data tidak bisa ditambah
- **Tidak ada delete functionality** - data tidak bisa dihapus
- **Feature incomplete** - hanya bisa edit data yang sudah ada
**Severity:** 🔴 **HIGH** - Incomplete feature
**Solusi:**
**Create `find-many.ts`:**
```typescript
import { prisma } from "@/lib/prisma";
import { Context } from "elysia";
export default async function findMany(context: Context) {
try {
const { page = 1, limit = 10, search = "" } = context.query;
const skip = (Number(page) - 1) * Number(limit);
const where: any = { isActive: true };
if (search) {
where.OR = [
{ name: { contains: search, mode: 'insensitive' } },
{ deskripsi: { contains: search, mode: 'insensitive' } }
];
}
const [data, total] = await Promise.all([
prisma.pelayananPerizinanBerusaha.findMany({
where,
skip,
take: Number(limit),
orderBy: { createdAt: 'desc' }
}),
prisma.pelayananPerizinanBerusaha.count({ where })
]);
return {
success: true,
message: "Data retrieved successfully",
data,
pagination: {
page: Number(page),
limit: Number(limit),
total,
totalPages: Math.ceil(total / Number(limit))
}
};
} catch (error) {
console.error("Error fetching data:", error);
return { success: false, message: "Failed to fetch data" };
}
}
```
**Create `create.ts`:**
```typescript
import { prisma } from "@/lib/prisma";
import { Context } from "elysia";
export default async function create(context: Context) {
try {
const body = await context.body;
// Validation
if (!body.name || !body.deskripsi || !body.link) {
return Response.json({
success: false,
message: "All fields are required"
}, { status: 400 });
}
const created = await prisma.pelayananPerizinanBerusaha.create({
data: {
name: body.name,
deskripsi: body.deskripsi,
link: body.link,
}
});
return {
success: true,
message: "Data created successfully",
data: created
};
} catch (error) {
console.error("Error creating data:", error);
return { success: false, message: "Failed to create data" };
}
}
```
**Create `del.ts`:**
```typescript
import { prisma } from "@/lib/prisma";
import { Context } from "elysia";
export default async function del(context: Context) {
try {
const id = context.params?.id as string;
// Soft delete
await prisma.pelayananPerizinanBerusaha.update({
where: { id },
data: {
deletedAt: new Date(),
isActive: false
}
});
return {
success: true,
message: "Data deleted successfully"
};
} catch (error) {
console.error("Error deleting data:", error);
return { success: false, message: "Failed to delete data" };
}
}
```
**Update API route index:**
```typescript
// index.ts
import findMany from "./find-many";
import create from "./create";
import del from "./del";
export const pelayananPerizinanBerusahaRoutes = (app: Elysia) =>
app
.get("/api/desa/layanan/pelayananperizinanberusaha/find-many", findMany)
.post("/api/desa/layanan/pelayananperizinanberusaha/create", create)
.delete("/api/desa/layanan/pelayananperizinanberusaha/del/:id", del);
```
---
### 3. UI - Hardcoded ID 'edit' (CRITICAL)
**File:** `src/app/admin/(dashboard)/desa/layanan/pelayanan_penduduk_non_permanent/page.tsx`
```typescript
// Line 22
const { data, loading } = useSnapshot(pelayananPendudukNonPermanenState.findUnique);
useEffect(() => {
pelayananPendudukNonPermanenState.findUnique.load('edit'); // ❌ HARDCODED ID
}, []);
```
**Same issue di:** `pelayanan_perizinan_berusaha/page.tsx` line 36
```typescript
useEffect(() => {
pelayananPerizinanBerusahaState.findUnique.load("edit"); // ❌ HARDCODED ID
}, []);
```
**Dampak:**
- Data yang di-load selalu ID `'edit'` (data pertama?)
- Tidak dinamis
- Jika tidak ada data dengan ID `'edit'`, page kosong
- **Ini seharusnya list page, bukan preview single data**
**Severity:** 🔴 **HIGH** - Logic error
**Solusi:**
**Option A - Convert ke List Page (Recommended):**
```typescript
// page.tsx should be a list page with pagination
const { data, loading } = useSnapshot(pelayananPendudukNonPermanenState.findMany);
useEffect(() => {
pelayananPendudukNonPermanenState.findMany.load(page, limit, search);
}, [page, limit, search]);
```
**Option B - Remove Hardcoded Page:**
```typescript
// Jika memang hanya ada 1 data, remove page.tsx
// Direct ke edit page atau detail page
```
---
### 4. State Management - Wrong Variable Assignment (BUG)
**File:** `src/app/admin/(dashboard)/_state/desa/layananDesa.ts`
```typescript
// Line 468-470
} catch (error) {
console.error("Error fetching telunjuk sakti desa:", error);
suratKeterangan.findMany.total = 0; // ❌ WRONG VARIABLE!
suratKeterangan.findMany.totalPages = 1; // ❌ WRONG VARIABLE!
}
```
**Should be:**
```typescript
} catch (error) {
console.error("Error fetching telunjuk sakti desa:", error);
pelayananTelunjukSaktiDesa.findMany.total = 0; // ✅ Correct
pelayananTelunjukSaktiDesa.findMany.totalPages = 1; // ✅ Correct
}
```
**Dampak:**
- `pelayananTelunjukSaktiDesa.findMany.total` tidak di-set saat error
- Pagination tidak bekerja dengan benar
- Bisa infinite loading atau wrong pagination display
**Severity:** 🔴 **HIGH** - Bug
**Solusi:** Fix variable names immediately.
---
## 🟡 MEDIUM PRIORITY ISSUES
### 5. State - Missing Validation for `link` Field
**File:** `src/app/admin/(dashboard)/_state/desa/layananDesa.ts`
```typescript
// Line 28-32
const templateTelunjukSaktiDesaForm = z.object({
name: z.string().min(3, "Nama minimal 3 karakter"),
deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
// ❌ Missing link field validation!
});
```
**Dampak:**
- User bisa submit dengan link kosong atau invalid URL
- Data inconsistency
- Broken links di frontend
**Severity:** 🟡 **MEDIUM** - Validation gap
**Solusi:**
```typescript
const templateTelunjukSaktiDesaForm = z.object({
name: z.string().min(3, "Nama minimal 3 karakter"),
deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
link: z.string().url("Link harus URL yang valid"), // ✅ Add validation
});
```
**Same issue untuk:** `pelayananPerizinanBerusahaForm`
---
### 6. UI - Inconsistent Edit Page Structure
**Current structure:**
| Module | Edit Page Location |
|--------|-------------------|
| `ajukan_permohonan` | `[id]/edit/page.tsx` ✅ |
| `pelayanan_surat_keterangan` | `[id]/edit/page.tsx` ✅ |
| `pelayanan_telunjuk_sakti_desa` | `[id]/edit/page.tsx` ✅ |
| `pelayanan_penduduk_non_permanent` | `[id]/page.tsx` ❌ |
| `pelayanan_perizinan_berusaha` | `[id]/page.tsx` ❌ |
**Dampak:**
- Inconsistent user experience
- Confusing navigation
- Harder to maintain
**Severity:** 🟡 **MEDIUM** - UX inconsistency
**Solusi:**
- Move edit logic from `[id]/page.tsx` to `[id]/edit/page.tsx`
- Or convert `[id]/page.tsx` to detail view only
---
### 7. UI - Missing Create Functionality
**Modules without create:**
| Module | Create Page | Create API |
|--------|-------------|------------|
| `pelayanan_penduduk_non_permanent` | ❌ | ❌ |
| `pelayanan_perizinan_berusaha` | ❌ | ❌ |
**Dampak:**
- **Data tidak bisa ditambah** dari admin panel
- Data hanya bisa di-seed dari database atau cara lain
- Feature incomplete
**Severity:** 🟡 **MEDIUM** - Missing feature
**Solusi:**
- Create `create/page.tsx` untuk kedua modul
- Add corresponding API endpoints (lihat Issue #2)
---
### 8. API - Inconsistent Response Format
**Examples:**
```typescript
// pelayanan_surat_keterangan/create.ts
return {
success: true,
message: "Sukses menambahkan data",
data: created
};
// pelayanan_telunjuk_sakti_desa/create.ts
return new Response(
JSON.stringify({
status: 200,
message: "Sukses menambahkan data",
data: created
})
);
// ajukan_permohonan/del.ts
return {
status: 200,
message: "Sukses menghapus data"
};
```
**Dampak:**
- Frontend harus handle multiple response formats
- Confusing untuk developer
- Harder to maintain
**Severity:** 🟡 **MEDIUM** - Code quality
**Solusi:**
```typescript
// Standardize response format
return {
success: boolean,
message: string,
data?: any,
// Optional: status code if needed
};
```
---
### 9. UI - Client-Side Search Instead of Server-Side
**File:** `src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/page.tsx`
```typescript
// Line 50-57
const filteredData = useMemo(() => {
if (!search) return data || [];
return (data || []).filter((item) =>
item.name.toLowerCase().includes(search.toLowerCase()) ||
item.deskripsi.toLowerCase().includes(search.toLowerCase())
);
}, [data, search]);
```
**Dampak:**
- Semua data di-load dari server (no server-side filtering)
- Performance issue jika data banyak
- Pagination tidak bekerja dengan benar (filter setelah pagination)
**Severity:** 🟡 **MEDIUM** - Performance issue
**Solusi:**
```typescript
// Pass search to API
const load = async (page: number, limit: number, search: string) => {
pelayananSuratKeteranganState.findMany.loading = true;
try {
const res = await ApiFetch.api.desa.layanan.pelayanansuratketerangan['find-many'].get({
query: { page, limit, search }
});
// ...
}
};
```
---
## 🟢 LOW PRIORITY ISSUES
### 10. UI - Table Fixed Layout Without Column Widths
**File:** Multiple list pages
```typescript
<Table layout="fixed">
<TableThead>
<TableTr>
<TableTh>Nama</TableTh>
<TableTh>Deskripsi</TableTh>
<TableTh>Aksi</TableTh>
</TableTr>
</TableThead>
</Table>
```
**Dampak:** Column widths tidak konsisten, bisa break layout.
**Severity:** 🟢 **LOW** - UI polish
**Solusi:**
```typescript
<Table layout="fixed">
<TableThead>
<TableTr>
<TableTh w="30%">Nama</TableTh>
<TableTh w="50%">Deskripsi</TableTh>
<TableTh w="20%">Aksi</TableTh>
</TableTr>
</TableThead>
</Table>
```
---
### 11. State - Inconsistent Ordering
**File:** Multiple state files
```typescript
// ajukan_permohonan/findMany.ts
orderBy: { createdAt: 'asc' } // ❌ Ascending
// pelayanan_surat_keterangan/find-many.ts
orderBy: { createdAt: 'desc' } // ✅ Descending
```
**Dampak:** Inconsistent data display (oldest first vs newest first).
**Severity:** 🟢 **LOW** - UX consistency
**Solusi:** Standardize to `orderBy: { createdAt: 'desc' }` for all modules.
---
### 12. UI - Missing Loading States (Some Edit Pages)
**File:** Some edit pages
```typescript
useEffect(() => {
state.load(params.id);
}, [params.id]);
// ❌ No loading state check
return (
<form>
{/* Form fields */}
</form>
);
```
**Dampak:** Form bisa render dengan empty data saat loading.
**Severity:** 🟢 **LOW** - UX polish
**Solusi:**
```typescript
const [loading, setLoading] = useState(true);
useEffect(() => {
state.load(params.id).finally(() => setLoading(false));
}, [params.id]);
if (loading) {
return <Skeleton height={400} radius="md" />;
}
return (
<form>
{/* Form fields */}
</form>
);
```
---
### 13. UI - Memory Leak Potential (createObjectURL)
**File:** Multiple create/edit pages with image upload
```typescript
useEffect(() => {
if (file) {
const url = URL.createObjectURL(file);
setPreviewImage(url);
}
}, [file]);
// ❌ No cleanup
```
**Dampak:** Memory leak jika user upload banyak gambar.
**Severity:** 🟢 **LOW** - Performance
**Solusi:**
```typescript
useEffect(() => {
if (file) {
const url = URL.createObjectURL(file);
setPreviewImage(url);
return () => {
URL.revokeObjectURL(url); // ✅ Cleanup
};
}
}, [file]);
```
---
### 14. Schema - `deletedAt @default(now())` (SAME BUG AS OTHER MODULES)
**File:** `prisma/schema.prisma`
```prisma
model PelayananSuratKeterangan {
deletedAt DateTime @default(now()) // ❌ SAME BUG
}
model PelayananTelunjukSaktiDesa {
deletedAt DateTime @default(now()) // ❌ SAME BUG
}
model PelayananPerizinanBerusaha {
deletedAt DateTime @default(now()) // ❌ SAME BUG
}
model PelayananPendudukNonPermanen {
deletedAt DateTime @default(now()) // ❌ SAME BUG
}
model AjukanPermohonan {
deletedAt DateTime @default(now()) // ❌ SAME BUG
}
```
**Dampak:** Record baru langsung ter-mark deleted.
**Severity:** 🟢 **LOW** - (Actually MEDIUM, tapi sudah documented di QC lain)
**Solusi:**
```prisma
deletedAt DateTime? // Remove @default(now())
```
---
### 15. UI - No Error Boundary
**File:** No error boundary found
**Dampak:** Error di component bisa crash entire app.
**Severity:** 🟢 **LOW** - Code quality
**Solusi:**
```typescript
// Add Error Boundary di layout.tsx
'use client'
import { Component, ReactNode } from 'react'
class ErrorBoundary extends Component {
state = { hasError: false }
static getDerivedStateFromError() {
return { hasError: true }
}
render() {
if (this.state.hasError) {
return <ErrorFallback />
}
return this.props.children
}
}
```
---
## ✅ YANG SUDAH BAIK
### **Schema:**
- ✅ Relasi yang jelas antara `AjukanPermohonan` dan `PelayananSuratKeterangan`
- ✅ Soft delete pattern dengan `deletedAt` dan `isActive`
- ✅ Audit trail dengan `createdAt` dan `updatedAt`
- ✅ Dual image support untuk `PelayananSuratKeterangan`
### **API:**
- ✅ CRUD lengkap untuk `pelayanan_surat_keterangan` dan `pelayanan_telunjuk_sakti_desa`
- ✅ Pagination support
- ✅ Search functionality
- ✅ Soft delete di-support via `isActive` flag
- ✅ Response format mostly consistent: `{ success, message, data }`
### **UI/UX:**
- ✅ Responsive design (desktop + mobile)
- ✅ Loading states dan skeleton
- ✅ Toast notifications untuk feedback
- ✅ Form validation comprehensive
- ✅ Dual image upload dengan preview (surat keterangan)
- ✅ Rich text editor untuk deskripsi
- ✅ Search dengan debounce
- ✅ Modal konfirmasi hapus
- ✅ Interactive stepper (perizinan berusaha)
- ✅ Reset form functionality
### **State Management:**
- ✅ Valtio proxy untuk global state
- ✅ Zod validation schema
- ✅ Loading state management
- ✅ Auto-refresh after CRUD operations
---
## 📊 Metrics
| Aspek | Score | Keterangan |
|-------|-------|------------|
| **Schema Design** | 7/10 | Good structure, tapi ada bug deletedAt |
| **API Completeness** | 5/10 | 2 modul incomplete (missing endpoints) |
| **API Security** | 5/10 | Tidak ada authentication |
| **UI/UX** | 7.5/10 | Responsive, good features |
| **State Management** | 6.5/10 | Good structure, ada bug |
| **Code Quality** | 6/10 | Inconsistent patterns, hardcoded values |
**Overall Score: 6.5/10** - **Needs Improvement**
---
## 🎯 Action Plan
### Week 1 (Critical Fixes) 🔴
- [ ] **URGENT:** Fix delete endpoint inconsistency (`pelayanan_telunjuk_sakti_desa`)
- [ ] **URGENT:** Fix state management bug (wrong variable assignment)
- [ ] **URGENT:** Fix hardcoded ID 'edit' di list pages
- [ ] **URGENT:** Create missing API endpoints (`find-many`, `create`, `del`) untuk 2 modul
### Week 2 (Complete Features) 🟡
- [ ] Create `create/page.tsx` untuk 2 modul tanpa create
- [ ] Move edit logic to `[id]/edit/page.tsx` untuk consistency
- [ ] Add validation for `link` field di state
- [ ] Standardize response format di semua API
- [ ] Move client-side search to server-side
### Week 3 (Polish) 🟢
- [ ] Add column widths untuk fixed layout tables
- [ ] Standardize ordering (`createdAt: desc`)
- [ ] Add loading states di semua edit pages
- [ ] Fix memory leak (revoke Object URLs)
- [ ] Add Error Boundary di layout
- [ ] Fix `deletedAt @default(now())` di schema
---
## 📝 Technical Notes
### **Database Migration:**
Fix deletedAt default:
```bash
bunx prisma migrate dev --name fix_layanan_deleted_at
# atau
bunx prisma db push
# Data cleanup
UPDATE "PelayananSuratKeterangan" SET "deletedAt" = NULL WHERE "isActive" = true;
UPDATE "PelayananTelunjukSaktiDesa" SET "deletedAt" = NULL WHERE "isActive" = true;
UPDATE "PelayananPerizinanBerusaha" SET "deletedAt" = NULL WHERE "isActive" = true;
UPDATE "PelayananPendudukNonPermanen" SET "deletedAt" = NULL WHERE "isActive" = true;
UPDATE "AjukanPermohonan" SET "deletedAt" = NULL WHERE "isActive" = true;
```
### **API Endpoint Checklist:**
**pelayanan_perizinan_berusaha:**
- [ ] Create `find-many.ts`
- [ ] Create `create.ts`
- [ ] Create `del.ts`
- [ ] Update `index.ts` dengan routes baru
**pelayanan_penduduk_non_permanen:**
- [ ] Create `find-many.ts`
- [ ] Create `create.ts`
- [ ] Create `del.ts`
- [ ] Update `index.ts` dengan routes baru
### **Frontend Checklist:**
**pelayanan_perizinan_berusaha:**
- [ ] Convert `page.tsx` dari preview ke list page
- [ ] Create `create/page.tsx`
- [ ] Move edit logic ke `[id]/edit/page.tsx`
**pelayanan_penduduk_non_permanen:**
- [ ] Convert `page.tsx` dari preview ke list page
- [ ] Create `create/page.tsx`
- [ ] Move edit logic ke `[id]/edit/page.tsx`
---
## 📚 References
- [Prisma Soft Delete Pattern](https://www.prisma.io/docs/concepts/components/prisma-client/soft-delete)
- [Mantine Table Documentation](https://mantine.dev/core/table/)
- [React Toastify Documentation](https://fkhadra.github.io/react-toastify/)
- [Zod Documentation](https://zod.dev/)
- [URL.createObjectURL() Memory Management](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#memory_management)
---
## 📈 Comparison dengan QC Sebelumnya
| Aspek | Profil | Potensi | Berita | Pengumuman | Gallery | **Layanan** |
|-------|--------|---------|--------|------------|---------|-------------|
| Schema | 6/10 | 7/10 | 8/10 | 7/10 | 6/10 | **7/10** |
| API Completeness | 7/10 | 8/10 | 7.5/10 | 7/10 | 6/10 | **5/10** 🔴 |
| API Security | 4/10 | 6/10 | 6/10 | 6/10 | 4/10 | **5/10** |
| UI/UX | 8/10 | 8.5/10 | 8/10 | 7.5/10 | 7.5/10 | **7.5/10** |
| State Mgmt | 7/10 | 8/10 | 8/10 | 7/10 | 6.5/10 | **6.5/10** |
| Code Quality | 7/10 | 7.5/10 | 7/10 | 6.5/10 | 6/10 | **6/10** |
| **Overall** | **6.5/10** | **7.5/10** | **7/10** | **6.5/10** | **6/10** | **6.5/10** |
**Layanan** memiliki score sama dengan **Profil Desa** dan **Pengumuman** karena:
**Positif:**
- ✅ Schema design lebih baik (dual image support, relasi yang jelas)
- ✅ UI/UX bagus (responsive, interactive stepper)
- ✅ Most modules complete
**Negatif:**
-**2 modul incomplete** (missing API endpoints & create pages)
-**Hardcoded ID 'edit'** di production code
-**State management bug** (wrong variable assignment)
-**Inconsistent endpoint patterns** (delete endpoint beda)
- ❌ Missing authentication
---
**Dibuat oleh:** QC Automation
**Review Status:** ⏳ Menunggu Review Developer
**Next Review:** Setelah implementasi fixes

View File

@@ -0,0 +1,774 @@
# Quality Control Report - Penghargaan Desa Admin
**Lokasi:** `/src/app/admin/(dashboard)/desa/penghargaan/`
**Tanggal QC:** 25 Februari 2026
**Status:****Good** (dengan beberapa issue security yang perlu diperbaiki)
---
## 📋 Ringkasan Eksekutif
Halaman Penghargaan Desa memiliki implementasi yang **cukup baik** dengan CRUD lengkap, upload gambar, dan state management terstruktur. Ditemukan **11 issue** dengan rincian:
- 🔴 **High Priority:** 2 issue
- 🟡 **Medium Priority:** 5 issue
- 🟢 **Low Priority:** 4 issue
**Overall Score: 7/10** - Good
---
## 📁 Struktur File yang Diperiksa
```
/src/app/admin/(dashboard)/desa/penghargaan/
├── page.tsx # List penghargaan dengan search & pagination
├── create/
│ └── page.tsx # Create penghargaan dengan upload gambar
└── [id]/
├── page.tsx # Detail penghargaan
└── edit/
└── page.tsx # Edit penghargaan dengan replace image
```
**File Terkait:**
- State: `/src/app/admin/(dashboard)/_state/desa/penghargaan.ts`
- API: `/src/app/api/[[...slugs]]/_lib/desa/penghargaan/` (6 files)
- Schema: `/prisma/schema.prisma` (Model `Penghargaan`)
---
## 🔴 HIGH PRIORITY ISSUES
### 1. XSS Vulnerability via `dangerouslySetInnerHTML`
**File:** `src/app/admin/(dashboard)/desa/penghargaan/page.tsx`
```typescript
// Line 79
<TableTd
dangerouslySetInnerHTML={{
__html: item.deskripsi, // ❌ XSS VULNERABILITY
}}
/>
```
**Same issue di:** `src/app/admin/(dashboard)/desa/penghargaan/[id]/page.tsx` line 89
```typescript
<Box
dangerouslySetInnerHTML={{
__html: data.deskripsi, // ❌ XSS VULNERABILITY
}}
/>
```
**Dampak:**
- User bisa inject malicious script melalui rich text editor
- XSS attack bisa mencuri session, cookies, atau data sensitif
- Admin lain yang lihat data bisa terinfeksi
**Severity:** 🔴 **HIGH** - Security vulnerability
**Solusi:**
**Option A - Sanitize HTML (Recommended):**
```typescript
// Install: bun add dompurify
import DOMPurify from 'dompurify';
// Di component
<TableTd
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(item.deskripsi, {
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
ALLOWED_ATTR: []
})
}}
/>
```
**Option B - Strip HTML Tags:**
```typescript
const stripHtml = (html: string) => {
const tmp = document.createElement('div');
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || '';
};
<TableTd>{stripHtml(item.deskripsi)}</TableTd>
```
**Option C - Server-Side Sanitization:**
```typescript
// Di API create.ts dan updt.ts
import sanitizeHtml from 'sanitize-html';
const sanitizedDeskripsi = sanitizeHtml(body.deskripsi, {
allowedTags: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
allowedAttributes: {}
});
```
---
### 2. Inconsistent Fetch Patterns (ApiFetch vs fetch)
**File:** `src/app/admin/(dashboard)/_state/desa/penghargaan.ts`
```typescript
// Line 45-53 (create) - Menggunakan ApiFetch ✅
const res = await ApiFetch.api.desa.penghargaan.create.post(penghargaan.create.form);
// Line 90-93 (findUnique) - Menggunakan fetch langsung ❌
const res = await fetch(`/api/desa/penghargaan/${id}`);
const data = await res.json();
// Line 108-120 (delete) - Menggunakan fetch langsung ❌
const response = await fetch(`/api/desa/penghargaan/del/${id}`, {
method: 'DELETE',
});
const result = await response.json();
// Line 147-165 (edit.load) - Menggunakan fetch langsung ❌
const response = await fetch(`/api/desa/penghargaan/${id}`);
const result = await response.json();
```
**Dampak:**
- Code maintainability kurang
- Tidak type-safe
- Inconsistent error handling
- Sulit refactor
**Severity:** 🔴 **HIGH** - Code quality issue
**Solusi:**
```typescript
// Gunakan ApiFetch untuk semua
// findUnique
const data = await ApiFetch.api.desa.penghargaan[':id'].get({ query: { id } });
// delete
const result = await ApiFetch.api.desa.penghargaan['del/:id'].delete({ params: { id } });
// edit.load
const data = await ApiFetch.api.desa.penghargaan[':id'].get({ query: { id } });
```
---
## 🟡 MEDIUM PRIORITY ISSUES
### 3. Tidak Ada Validasi Duplicate Name
**File:** `src/app/api/[[...slugs]]/_lib/desa/penghargaan/create.ts`
```typescript
// Line 13-23
const penghargaan = await prisma.penghargaan.create({
data: {
name: body.name, // ❌ Tidak cek duplicate
juara: body.juara,
deskripsi: body.deskripsi,
imageId: body.imageId,
},
});
```
**Same issue di:** `updt.ts` (update endpoint)
**Dampak:**
- User bisa buat penghargaan dengan nama sama
- Data redundancy
- Confusing saat search
**Severity:** 🟡 **MEDIUM** - Data integrity
**Solusi:**
```typescript
// Check duplicate sebelum create
const existing = await prisma.penghargaan.findFirst({
where: {
name: body.name,
isActive: true
}
});
if (existing) {
return Response.json({
success: false,
message: "Nama penghargaan sudah digunakan"
}, { status: 400 });
}
// Lanjut create
const penghargaan = await prisma.penghargaan.create({ ... });
```
**Alternative - Schema Level:**
```prisma
model Penghargaan {
name String @unique // Add unique constraint
// ...
}
```
---
### 4. Search Tidak Reset Pagination
**File:** `src/app/admin/(dashboard)/desa/penghargaan/page.tsx`
```typescript
// Line 35-38
useShallowEffect(() => {
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
```
**Dampak:**
- User di page 5, search untuk data yang hanya ada di page 1
- Result kosong, user bingung
- UX buruk
**Severity:** 🟡 **MEDIUM** - UX issue
**Solusi:**
```typescript
// Reset page saat search berubah
useShallowEffect(() => {
if (debouncedSearch !== search) {
setPage(1); // Reset to page 1
}
load(page, 10, debouncedSearch);
}, [page, debouncedSearch, search]);
```
**Better Solution:**
```typescript
// Watch search separately
useEffect(() => {
setPage(1); // Reset page saat search berubah
}, [debouncedSearch]);
useEffect(() => {
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
```
---
### 5. Image Upload Hanya Saat Submit
**File:** `src/app/admin/(dashboard)/desa/penghargaan/create/page.tsx`
```typescript
// Line 81-95
const handleSubmit = async () => {
// Validasi
// ...
// Upload image BARU saat submit
const res = await ApiFetch.api.fileStorage.create.post({
file,
name: file.name,
});
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error('Gagal mengunggah gambar');
}
// Create penghargaan
await statePenghargaan.penghargaan.create.form.imageId = uploaded.id;
await statePenghargaan.penghargaan.create();
};
```
**Dampak:**
- Jika create penghargaan gagal, file sudah ter-upload (orphaned file)
- User tidak bisa preview image yang sudah di-upload sebelumnya
- Tidak ada progress indicator saat upload
**Severity:** 🟡 **MEDIUM** - Data integrity & UX
**Solusi:**
**Option A - Upload Dulu, Baru Create:**
```typescript
// Upload immediately saat file selected
const handleFileChange = async (file: File) => {
const res = await ApiFetch.api.fileStorage.create.post({
file,
name: file.name,
});
const uploaded = res.data?.data;
if (uploaded?.id) {
setFile(file);
setPreviewImage(URL.createObjectURL(file));
statePenghargaan.penghargaan.create.form.imageId = uploaded.id;
}
};
// Submit hanya create penghargaan
const handleSubmit = async () => {
await statePenghargaan.penghargaan.create();
};
```
**Option B - Transaction dengan Rollback:**
```typescript
const handleSubmit = async () => {
try {
// Upload file
const uploaded = await uploadFile(file);
// Create penghargaan
const result = await createPenghargaan({ imageId: uploaded.id });
if (!result.success) {
// Rollback: delete uploaded file
await deleteFile(uploaded.id);
throw new Error('Create failed');
}
} catch (error) {
toast.error('Gagal membuat penghargaan');
}
};
```
---
### 6. Dropzone Accept Format Typo
**File:** `src/app/admin/(dashboard)/desa/penghargaan/create/page.tsx`
```typescript
// Line 140-143
<Dropzone
accept={{
'image/*': ['.jpeg', '.jpg', '.png', 'webp'] // ❌ Typo: "webp" seharusnya ".webp"
}}
// ...
>
```
**Same issue di:** `edit/page.tsx` line 180-183
**Dampak:**
- File `.webp` tidak akan di-accept oleh dropzone
- User confusion saat coba upload WebP
- Inconsistent dengan validasi lainnya
**Severity:** 🟡 **MEDIUM** - UX issue
**Solusi:**
```typescript
<Dropzone
accept={{
'image/*': ['.jpeg', '.jpg', '.png', '.webp'] // ✅ Fix typo
}}
// ...
>
```
---
### 7. Schema `deletedAt` Default Value (SAME BUG)
**File:** `prisma/schema.prisma`
```prisma
model Penghargaan {
id String @id @default(cuid())
name String
deletedAt DateTime @default(now()) // ❌ SAME BUG AS OTHER MODULES
isActive Boolean @default(true)
}
```
**Dampak:**
- Record baru langsung ter-mark deleted saat dibuat
- Soft delete logic tidak bekerja
- Query dengan `deletedAt: null` tidak dapat data baru
**Severity:** 🟡 **MEDIUM** - Data integrity bug
**Solusi:**
```prisma
model Penghargaan {
id String @id @default(cuid())
name String
deletedAt DateTime? // ✅ Nullable, tanpa default
isActive Boolean @default(true)
}
```
**Migration:**
```bash
bunx prisma db push
# atau
bunx prisma migrate dev --name fix_penghargaan_deleted_at
# Data cleanup
UPDATE "Penghargaan" SET "deletedAt" = NULL WHERE "isActive" = true;
```
---
## 🟢 LOW PRIORITY ISSUES
### 8. `isHtmlEmpty` Tidak Handle Edge Cases
**File:** `src/app/admin/(dashboard)/desa/penghargaan/create/page.tsx`
```typescript
// Line 23-26
const isHtmlEmpty = (html: string) => {
const textContent = html.replace(/<[^>]*>/g, '').trim();
return textContent === '';
};
```
**Dampak:**
- HTML dengan hanya `&nbsp;` atau `<br>` akan dianggap empty
- User bisa submit content yang sebenarnya kosong
**Severity:** 🟢 **LOW** - Validation edge case
**Solusi:**
```typescript
const isHtmlEmpty = (html: string) => {
// Strip HTML tags
const tmp = document.createElement('div');
tmp.innerHTML = html;
// Get text content
const textContent = tmp.textContent || tmp.innerText || '';
// Check if empty or only whitespace
return textContent.trim().length === 0;
};
```
---
### 9. Duplicate Validation Check
**File:** `src/app/admin/(dashboard)/desa/penghargaan/create/page.tsx`
```typescript
// Line 58-73: Validasi pertama
const handleSubmit = async () => {
if (!statePenghargaan.penghargaan.create.form.name?.trim()) {
toast.error('Nama penghargaan wajib diisi');
return;
}
// ... validasi lainnya
// Line 81-84: Validasi diulang lagi (redundant)
if (
!statePenghargaan.penghargaan.create.form.name?.trim() ||
!statePenghargaan.penghargaan.create.form.juara?.trim() ||
isHtmlEmpty(statePenghargaan.penghargaan.create.form.deskripsi) ||
!file
) {
toast.error('Mohon lengkapi semua data');
return;
}
};
```
**Dampak:** Code redundancy, minor performance overhead.
**Severity:** 🟢 **LOW** - Code quality
**Solusi:**
```typescript
const handleSubmit = async () => {
// Single validation block
if (!statePenghargaan.penghargaan.create.form.name?.trim()) {
toast.error('Nama penghargaan wajib diisi');
return;
}
if (!statePenghargaan.penghargaan.create.form.juara?.trim()) {
toast.error('Juara wajib diisi');
return;
}
if (isHtmlEmpty(statePenghargaan.penghargaan.create.form.deskripsi)) {
toast.error('Deskripsi wajib diisi');
return;
}
if (!file) {
toast.error('Gambar wajib diunggah');
return;
}
// Submit logic
// ...
};
```
---
### 10. Inconsistent Button Labels (Reset vs Batal)
**File:** Create page vs Edit page
```typescript
// create/page.tsx line 109
<Button onClick={resetForm} variant="outline" color="gray">
Reset // ❌ Inconsistent
</Button>
// edit/page.tsx line 100
<Button onClick={handleResetForm} variant="outline" color="gray">
Batal // ❌ Inconsistent
</Button>
```
**Dampak:** Minor UX inconsistency.
**Severity:** 🟢 **LOW** - UX consistency
**Solusi:** Standardize to "Reset Form" untuk kedua page.
---
### 11. Tidak Ada Karakter Counter
**File:** Create & Edit pages
```typescript
<TextInput
label="Nama Penghargaan"
value={statePenghargaan.penghargaan.create.form.name}
onChange={(e) => {
statePenghargaan.penghargaan.create.form.name = e.target.value;
}}
// ❌ Tidak ada maxLength atau character counter
/>
```
**Dampak:** User tidak tahu ada limit atau tidak.
**Severity:** 🟢 **LOW** - UX polish
**Solusi:**
```typescript
<TextInput
label="Nama Penghargaan"
value={statePenghargaan.penghargaan.create.form.name}
onChange={(e) => {
statePenghargaan.penghargaan.create.form.name = e.target.value;
}}
maxLength={255} // Add max length
rightSection={
<Text size="sm" c="dimmed">
{statePenghargaan.penghargaan.create.form.name?.length || 0}/255
</Text>
}
/>
```
---
## ✅ YANG SUDAH BAIK
### **Schema:**
- ✅ Relasi ke FileStorage untuk gambar sudah benar
- ✅ Soft delete pattern dengan `deletedAt` dan `isActive`
- ✅ Audit trail dengan `createdAt` dan `updatedAt`
- ✅ Field yang diperlukan sudah lengkap
### **API:**
- ✅ CRUD lengkap untuk Penghargaan
- ✅ Pagination support dengan `page`, `limit`, `search`
- ✅ Search functionality dengan case-insensitive
- ✅ Include relasi image di response
-**File cleanup saat update** (hapus old image) ✅
-**File cleanup saat delete** (hapus image) ✅
- ✅ Parallel query untuk data & count (optimasi performa)
- ✅ Response format mostly konsisten: `{ success, message, data }`
### **UI/UX:**
- ✅ Responsive design (desktop table + mobile cards)
- ✅ Loading states dan skeleton
- ✅ Toast notifications untuk feedback
- ✅ Form validation comprehensive
- ✅ Image upload dengan dropzone & preview
- ✅ File size limit & format validation
- ✅ Rich text editor untuk deskripsi
- ✅ Search dengan debounce (1000ms)
- ✅ Modal konfirmasi hapus
- ✅ Empty state message
- ✅ Reset form functionality
- ✅ Button disabled saat invalid/submitting
### **State Management:**
- ✅ Valtio proxy untuk global state
- ✅ Zod validation schema
- ✅ Loading state management
- ✅ Auto-refresh after CRUD operations
- ✅ Error handling dengan toast
---
## 📊 Metrics
| Aspek | Score | Keterangan |
|-------|-------|------------|
| **Schema Design** | 7/10 | Good, tapi ada bug deletedAt |
| **API Design** | 7.5/10 | RESTful, file cleanup implemented |
| **API Security** | 5/10 | Tidak ada auth, XSS vulnerability |
| **UI/UX** | 8/10 | Responsive, comprehensive features |
| **State Management** | 7/10 | Valtio works well, inconsistent fetch |
| **Code Quality** | 7/10 | Good structure, minor inconsistencies |
**Overall Score: 7/10** - **Good**
---
## 🎯 Action Plan
### Week 1 (Critical Fixes) 🔴
- [ ] **URGENT:** Sanitize HTML content (DOMPurify) untuk XSS prevention
- [ ] **URGENT:** Konsistensi fetch pattern (gunakan ApiFetch untuk semua)
### Week 2 (Medium Priority) 🟡
- [ ] Tambahkan validasi duplicate name di API create/update
- [ ] Fix search reset pagination logic
- [ ] Fix image upload timing (upload dulu atau transaction)
- [ ] Fix dropzone accept format typo (`.webp`)
- [ ] Fix `deletedAt @default(now())` di schema
### Week 3 (Polish) 🟢
- [ ] Improve `isHtmlEmpty` function
- [ ] Remove duplicate validation
- [ ] Standardize button labels (Reset Form)
- [ ] Add character counter untuk text fields
- [ ] Add loading state saat load data di edit page
---
## 📝 Technical Notes
### **Database Migration:**
Fix deletedAt default:
```bash
bunx prisma migrate dev --name fix_penghargaan_deleted_at
# atau
bunx prisma db push
# Data cleanup
UPDATE "Penghargaan" SET "deletedAt" = NULL WHERE "isActive" = true;
```
### **XSS Prevention:**
Install DOMPurify:
```bash
bun add dompurify
bun add -D @types/dompurify
```
Usage:
```typescript
import DOMPurify from 'dompurify';
// Di component
<Box
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(data.deskripsi, {
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
ALLOWED_ATTR: []
})
}}
/>
```
### **Duplicate Name Prevention:**
API validation:
```typescript
// Check existing name
const existing = await prisma.penghargaan.findFirst({
where: {
name: body.name,
isActive: true,
id: body.id ? { not: body.id } : undefined // Exclude current for update
}
});
if (existing) {
return Response.json({
success: false,
message: "Nama penghargaan sudah digunakan"
}, { status: 400 });
}
```
### **Search Reset Pagination:**
```typescript
// Watch search separately
useEffect(() => {
setPage(1); // Reset page saat search berubah
}, [debouncedSearch]);
useEffect(() => {
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
```
---
## 📚 References
- [Prisma Soft Delete Pattern](https://www.prisma.io/docs/concepts/components/prisma-client/soft-delete)
- [DOMPurify Documentation](https://github.com/cure53/DOMPurify)
- [Mantine Dropzone Documentation](https://mantine.dev/x/dropzone/)
- [React Toastify Documentation](https://fkhadra.github.io/react-toastify/)
- [Zod Documentation](https://zod.dev/)
---
## 📈 Comparison dengan QC Sebelumnya
| Aspek | Profil | Potensi | Berita | Pengumuman | Gallery | Layanan | **Penghargaan** |
|-------|--------|---------|--------|------------|---------|---------|-----------------|
| Schema | 6/10 | 7/10 | 8/10 | 7/10 | 6/10 | 7/10 | **7/10** |
| API Design | 7/10 | 8/10 | 7.5/10 | 7/10 | 6/10 | 5/10 | **7.5/10** ✅ |
| API Security | 4/10 | 6/10 | 6/10 | 6/10 | 4/10 | 5/10 | **5/10** |
| UI/UX | 8/10 | 8.5/10 | 8/10 | 7.5/10 | 7.5/10 | 7.5/10 | **8/10** ✅ |
| State Mgmt | 7/10 | 8/10 | 8/10 | 7/10 | 6.5/10 | 6.5/10 | **7/10** |
| Code Quality | 7/10 | 7.5/10 | 7/10 | 6.5/10 | 6/10 | 6/10 | **7/10** |
| **Overall** | **6.5/10** | **7.5/10** | **7/10** | **6.5/10** | **6/10** | **6.5/10** | **7/10** |
**Penghargaan** memiliki score **tertinggi kedua** (setelah Potensi Desa) karena:
**Positif:**
- ✅ CRUD lengkap & berfungsi dengan baik
- ✅ File cleanup implemented (update & delete) ✅
- ✅ Responsive design bagus
- ✅ Comprehensive validation
- ✅ Parallel query untuk performa
- ✅ Tidak ada incomplete features (seperti Layanan)
- ✅ Tidak ada critical data loss bugs (seperti Gallery)
**Yang Perlu Diperbaiki:**
- ❌ XSS vulnerability (dangerouslySetInnerHTML)
- ❌ Inconsistent fetch patterns
- ❌ Duplicate name validation tidak ada
-`deletedAt @default(now())` bug
- ❌ Search tidak reset pagination
---
**Dibuat oleh:** QC Automation
**Review Status:** ⏳ Menunggu Review Developer
**Next Review:** Setelah implementasi fixes

View File

@@ -0,0 +1,809 @@
# Quality Control Report - Pengumuman Desa Admin
**Lokasi:** `/src/app/admin/(dashboard)/desa/pengumuman/`
**Tanggal QC:** 25 Februari 2026
**Status:** ⚠️ **Needs Improvement** (ada issue critical yang perlu segera diperbaiki)
---
## 📋 Ringkasan Eksekutif
Halaman Pengumuman Desa memiliki implementasi yang **cukup baik** dengan CRUD lengkap dan state management terstruktur. Namun ditemukan **15 issue** dengan rincian:
- 🔴 **High Priority:** 2 issue
- 🟡 **Medium Priority:** 7 issue
- 🟢 **Low Priority:** 6 issue
**Overall Score: 6.5/10** - Needs Improvement
---
## 📁 Struktur File yang Diperiksa
```
/src/app/admin/(dashboard)/desa/pengumuman/
├── layout.tsx
├── _com/
│ └── layoutTabs.tsx # Tab navigation component
├── kategori-pengumuman/
│ ├── page.tsx # List kategori dengan search & pagination
│ ├── create/
│ │ └── page.tsx # Form create kategori
│ └── [id]/
│ └── page.tsx # Edit kategori
└── list-pengumuman/
├── page.tsx # List pengumuman dengan search & pagination
├── create/
│ └── page.tsx # Form create pengumuman (rich text)
└── [id]/
├── page.tsx # Detail pengumuman
└── edit/
└── page.tsx # Edit pengumuman
```
**File Terkait:**
- State: `/src/app/admin/(dashboard)/_state/desa/pengumuman.ts`
- API: `/src/app/api/[[...slugs]]/_lib/desa/pengumuman/` (9 files)
- API: `/src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/` (6 files)
- Schema: `/prisma/schema.prisma` (Model `Pengumuman` & `CategoryPengumuman`)
---
## 🔴 HIGH PRIORITY ISSUES
### 1. API - Hard Delete vs Soft Delete Mismatch (DATA LOSS RISK)
**File:** `src/app/api/[[...slugs]]/_lib/desa/pengumuman/del.ts`
```typescript
export default async function pengumumanDelete(context: Context) {
const id = context.params?.id as string;
// ❌ HARD DELETE - Data benar-benar terhapus dari database
await prisma.pengumuman.delete({ where: { id } });
return { success: true, message: "Pengumuman berhasil dihapus" };
}
```
**Schema yang Diharapkan:**
```prisma
model Pengumuman {
deletedAt DateTime? @default(null) // Soft delete field
isActive Boolean @default(true)
}
```
**Dampak:**
- **DATA LOSS** - Data pengumuman terhapus permanen, tidak bisa direcover
- Audit trail hilang (riwayat pengumuman tidak ada lagi)
- Inconsistent dengan schema design yang sudah ada soft delete fields
- Bisa melanggar compliance requirements untuk data retention
**Solusi:**
```typescript
// Ganti hard delete dengan soft delete
export default async function pengumumanDelete(context: Context) {
const id = context.params?.id as string;
// ✅ SOFT DELETE - Update deletedAt dan isActive
await prisma.pengumuman.update({
where: { id },
data: {
deletedAt: new Date(),
isActive: false
}
});
return { success: true, message: "Pengumuman berhasil dihapus" };
}
```
**File yang Perlu Diperbaiki:**
- `src/app/api/[[...slugs]]/_lib/desa/pengumuman/del.ts`
- `src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/del.ts`
---
### 2. Schema - `deletedAt` Default Value `now()` Bermasalah
**File:** `prisma/schema.prisma`
```prisma
model Pengumuman {
id String @id @default(cuid())
judul String
deletedAt DateTime @default(now()) // ❌ PROBLEMATIC DEFAULT
isActive Boolean @default(true)
}
model CategoryPengumuman {
id String @id @default(cuid())
name String @unique
deletedAt DateTime @default(now()) // ❌ PROBLEMATIC DEFAULT
isActive Boolean @default(true)
}
```
**Dampak:**
- Setiap record **baru langsung ter-mark sebagai deleted** saat dibuat
- Query dengan filter `deletedAt: null` tidak akan dapat data baru
- Soft delete logic tidak bekerja dengan benar
- Data inconsistency antara `deletedAt` (set) dan `isActive` (true)
**Solusi:**
```prisma
model Pengumuman {
id String @id @default(cuid())
judul String
deletedAt DateTime? // ✅ Nullable, tanpa default
isActive Boolean @default(true)
}
model CategoryPengumuman {
id String @id @default(cuid())
name String @unique
deletedAt DateTime? // ✅ Nullable, tanpa default
isActive Boolean @default(true)
}
```
**Migration Required:**
```bash
# Generate migration
bunx prisma migrate dev --name fix_deleted_at_default
# Atau jika tidak pakai migrate
bunx prisma db push
# Data cleanup untuk record yang sudah ter-affected
UPDATE "Pengumuman" SET "deletedAt" = NULL WHERE "isActive" = true;
UPDATE "CategoryPengumuman" SET "deletedAt" = NULL WHERE "isActive" = true;
```
---
## 🟡 MEDIUM PRIORITY ISSUES
### 3. UI - Search Parameter Hilang Saat Pagination
**File:** `src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/page.tsx`
```typescript
<Pagination
total={totalPages}
value={page}
onChange={(newPage) => {
load(newPage, 10); // ❌ Missing search parameter
}}
/>
```
**Dampak:**
- Saat user ganti halaman, search query hilang
- User harus ketik ulang search query
- UX sangat buruk untuk pagination dengan search
- Inconsistent dengan page lain (berita, potensi)
**Solusi:**
```typescript
<Pagination
total={totalPages}
value={page}
onChange={(newPage) => {
load(newPage, 10, debouncedSearch); // ✅ Include search parameter
}}
/>
```
**Note:** Pastikan function `load` menerima parameter search:
```typescript
const load = async (page: number, limit: number, searchQuery?: string) => {
// ...
};
```
---
### 4. UI - Duplicate State Management
**File:** `src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/edit/page.tsx`
```typescript
// Local state
const [formData, setFormData] = useState({
judul: '',
deskripsi: '',
content: '',
categoryPengumumanId: '',
});
const [originalData, setOriginalData] = useState({...formData});
// Global state (Valtio)
editState.pengumuman.edit.form = {
...editState.pengumuman.edit.form,
...formData, // ❌ Duplicate data
};
```
**Dampak:**
- Data inconsistency antara local state dan global state
- Sulit debug karena data ada di 2 tempat
- Memory overhead
- Potential bugs saat reset form
**Solusi:**
**Option A - Gunakan hanya global state:**
```typescript
// Hapus local state, gunakan langsung global state
const formData = editState.pengumuman.edit.form;
const handleResetForm = () => {
editState.pengumuman.edit.form = { ...originalData };
};
```
**Option B - Sinkronisasi dengan useEffect:**
```typescript
useEffect(() => {
// Sync local state ke global state
editState.pengumuman.edit.form = { ...formData };
}, [formData]);
```
---
### 5. UI - Error Handling Silent Failures
**File:** `src/app/admin/(dashboard)/_state/desa/pengumuman.ts`
```typescript
// Line 266-268
catch (error) {
console.log((error as Error).message);
// ❌ Error tidak ditampilkan ke user, silent failure
}
```
**Dampak:**
- User tidak tahu ada error
- Sulit debug production issues
- User experience buruk (loading forever tanpa feedback)
**Solusi:**
```typescript
catch (error) {
const errorMessage = error instanceof Error ? error.message : 'Unknown error';
console.error('Failed to load pengumuman:', errorMessage);
toast.error(`Gagal memuat data: ${errorMessage}`);
}
```
---
### 6. UI - ColSpan Mismatch
**File:** `src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/page.tsx`
```typescript
<TableThead>
<TableTr>
<TableTh>Nama</TableTh>
<TableTh>Dibuat</TableTh>
<TableTh>Aksi</TableTh> {/* 3 kolom total */}
</TableTr>
</TableThead>
<TableTbody>
{loading ? (
<TableTr>
<TableTd colSpan={4}> {/* ❌ colSpan 4, seharusnya 3 */}
<Skeleton height={40} />
</TableTd>
</TableTr>
) : (
// ...
)}
</TableTbody>
```
**Dampak:** Layout table tidak rapi, colSpan terlalu lebar.
**Solusi:**
```typescript
<TableTd colSpan={3}> // ✅ Match column count
```
---
### 7. State Management - Copy-Paste Error Message
**File:** `src/app/admin/(dashboard)/_state/desa/pengumuman.ts`
```typescript
// Line 68-70
kategoriPengumuman: {
findMany: {
loading: false,
async load(page = 1, limit = 10, search = '') {
try {
// ...
} catch (error) {
console.error("Failed to load potensi desa:", res.data?.message);
// ❌ Copy-paste error dari file potensi! Seharusnya "kategori pengumuman"
}
}
}
}
```
**Dampak:**
- Membingungkan saat debug
- Tidak profesional
- Menunjukkan kurangnya attention to detail
**Solusi:**
```typescript
console.error("Failed to load kategori pengumuman:", res.data?.message);
```
---
### 8. UI - Button Text "Batal" Membingungkan
**File:** `src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/[id]/page.tsx`
```typescript
<Button
onClick={handleResetForm}
variant="outline"
color="gray"
>
Batal // ❌ Membingungkan - "Batal" biasanya untuk cancel navigation
</Button>
```
**Dampak:** User mungkin bingung apakah button ini akan cancel edit atau reset form.
**Solusi:**
```typescript
<Button
onClick={handleResetForm}
variant="outline"
color="gray"
>
Reset Form // ✅ Lebih jelas
</Button>
```
---
### 9. UI - Button Order Tidak Mengikuti UX Best Practice
**File:** `src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/page.tsx`
```typescript
<Group gap="sm">
<Button color="red"> {/* Delete button first */}
<Button color="green"> {/* Edit button second */}
</Group>
```
**Dampak:** Destructive action (delete) lebih prominent daripada primary action (edit).
**Solusi:**
```typescript
<Group gap="sm">
<Button color="green"> {/* Edit button first */}
<Button color="red"> {/* Delete button second */}
</Group>
```
**UX Best Practice:** Primary action (edit) seharusnya lebih prominent, destructive action (delete) kurang prominent dan lebih sulit diakses.
---
## 🟢 LOW PRIORITY ISSUES
### 10. UI - Inline Styles yang Panjang
**File:** `src/app/admin/(dashboard)/desa/pengumuman/_com/layoutTabs.tsx`
```typescript
<TabsList
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
border: "1px solid #d1d5db",
padding: "0.5rem",
borderRadius: "12px",
display: "flex",
gap: "0.5rem",
// ... 10+ baris inline styles
}}
>
```
**Dampak:**
- Sulit maintain
- Tidak reusable
- Code readability buruk
**Solusi:**
```typescript
// Option A: CSS module
// layoutTabs.module.css
.tabsList {
background: linear-gradient(135deg, #e7ebf7, #f9faff);
boxShadow: 0 2px 8px rgba(0,0,0,0.08);
// ...
}
// Component
<TabsList className={styles.tabsList}>
```
**Option B: Mantine theme**
```typescript
// theme.ts
const theme = createTheme({
components: {
TabsList: {
styles: {
root: {
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
// ...
}
}
}
}
});
```
---
### 11. UI - Hardcoded Paths
**File:** `src/app/admin/(dashboard)/desa/pengumuman/_com/layoutTabs.tsx`
```typescript
const tabs = [
{ href: "/admin/desa/pengumuman/list-pengumuman" },
{ href: "/admin/desa/pengumuman/kategori-pengumuman" },
];
```
**Dampak:** Sulit refactor, jika ada perubahan struktur URL harus update di banyak tempat.
**Solusi:**
```typescript
// constants/routes.ts
export const ROUTES = {
PENGUMUMAN_LIST: '/admin/desa/pengumuman/list-pengumuman',
PENGUMUMAN_CREATE: '/admin/desa/pengumuman/list-pengumuman/create',
PENGUMUMAN_EDIT: (id: string) => `/admin/desa/pengumuman/list-pengumuman/${id}/edit`,
KATEGORI_PENGUMUMAN_LIST: '/admin/desa/pengumuman/kategori-pengumuman',
KATEGORI_PENGUMUMAN_CREATE: '/admin/desa/pengumuman/kategori-pengumuman/create',
KATEGORI_PENGUMUMAN_EDIT: (id: string) => `/admin/desa/pengumuman/kategori-pengumuman/${id}/edit`,
};
// Usage
const tabs = [
{ href: ROUTES.PENGUMUMAN_LIST },
{ href: ROUTES.KATEGORI_PENGUMUMAN_LIST },
];
```
---
### 12. UI - HTML Validation Function Bisa False Positive
**File:** `src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/create/page.tsx`
```typescript
const isHtmlEmpty = (html: string) => {
const textContent = html.replace(/<[^>]*>/g, '').trim();
return textContent === '';
};
```
**Dampak:**
- Konten dengan hanya `<br>` atau `<p> </p>` akan dianggap empty
- User bisa submit content yang sebenarnya kosong
**Solusi:**
```typescript
const isHtmlEmpty = (html: string) => {
// Strip HTML tags
const tmp = document.createElement('div');
tmp.innerHTML = html;
// Get text content and check if empty
const textContent = tmp.textContent || tmp.innerText || '';
return textContent.trim().length === 0;
};
```
---
### 13. State - Inconsistent API Client Usage
**File:** `src/app/admin/(dashboard)/_state/desa/pengumuman.ts`
```typescript
// ❌ Direct fetch
const res = await fetch(`/api/desa/kategoripengumuman/${id}`);
const data = await res.json();
// ✅ Di tempat lain pakai ApiFetch
const data = await ApiFetch.api.desa.kategoripengumuman[':id'].get({ query: { id } });
```
**Dampak:** Code maintainability kurang, tidak konsisten.
**Solusi:**
```typescript
// Gunakan ApiFetch untuk semua
const data = await ApiFetch.api.desa.kategoripengumuman[':id'].get({ query: { id } });
```
---
### 14. Layout - `isDetailPage` Logic Kurang Robust
**File:** `src/app/admin/(dashboard)/desa/pengumuman/layout.tsx`
```typescript
const segments = pathname.split('/').filter(Boolean);
const isDetailPage = segments.length >= 5; // ❌ Magic number, bisa false positive
```
**Dampak:** Bisa false positive untuk path lain yang length sama.
**Contoh False Positive:**
```
/admin/desa/pengumuman/list-pengumuman/create // 6 segments, dianggap detail page ❌
```
**Solusi:**
```typescript
// Check last segment
const lastSegment = segments[segments.length - 1];
const isDetailPage = ['create', 'edit'].includes(lastSegment) ||
/^[a-zA-Z0-9]{20,}$/.test(lastSegment); // CUID pattern
```
---
### 15. API - Missing Validation
**File:** `src/app/api/[[...slugs]]/_lib/desa/pengumuman/create.ts`
```typescript
const body = await context.body;
// ❌ Tidak ada validasi uniqueness untuk judul
// ❌ Tidak ada validasi panjang maksimal
await prisma.pengumuman.create({
data: {
judul: body.judul, // Bisa sangat panjang
// ...
}
});
```
**Dampak:**
- User bisa buat pengumuman dengan judul sama
- User bisa input judul/deskripsi sangat panjang
- Database bisa penuh dengan data tidak valid
**Solusi:**
```typescript
// Validasi di API
const body = await context.body;
// Check uniqueness
const existing = await prisma.pengumuman.findFirst({
where: {
judul: body.judul,
isActive: true
}
});
if (existing) {
return new Response(
JSON.stringify({
success: false,
message: "Judul pengumuman sudah digunakan"
}),
{ status: 400 }
);
}
// Validate length
if (body.judul.length > 255) {
return new Response(
JSON.stringify({
success: false,
message: "Judul maksimal 255 karakter"
}),
{ status: 400 }
);
}
```
---
## ✅ YANG SUDAH BAIK
### **Schema:**
- ✅ Relasi yang jelas antara Pengumuman dan CategoryPengumuman (one-to-many)
- ✅ Soft delete pattern dengan `deletedAt` dan `isActive` (tapi ada bug di default value)
- ✅ Audit trail dengan `createdAt` dan `updatedAt`
- ✅ Unique constraint pada `name` di CategoryPengumuman
### **API:**
- ✅ CRUD lengkap untuk Pengumuman dan Kategori Pengumuman
- ✅ Pagination support dengan `page`, `limit`, `search`
- ✅ Search functionality dengan case-insensitive
- ✅ Include relasi (CategoryPengumuman) di response
- ✅ Validation input menggunakan Elysia `t.Object`
- ✅ Filter by kategori di find-many
### **UI/UX:**
- ✅ Konsisten design pattern
- ✅ Responsive untuk mobile dan desktop
- ✅ Loading states dan skeleton
- ✅ Toast notifications untuk feedback
- ✅ Form validation yang comprehensive
- ✅ Rich text editor (TipTap) untuk content
- ✅ Search dengan debounce (500ms-1000ms)
- ✅ Modal konfirmasi hapus
- ✅ Empty state message
### **State Management:**
- ✅ Valtio proxy untuk global state
- ✅ Zod validation schema
- ✅ Loading state management
- ✅ Auto-refresh after CRUD operations
---
## 📊 Metrics
| Aspek | Score | Keterangan |
|-------|-------|------------|
| **Schema Design** | 7/10 | Good, tapi ada bug di deletedAt default |
| **API Design** | 7/10 | RESTful, validation ada, tapi hard delete issue |
| **API Security** | 6/10 | Tidak ada authentication |
| **UI/UX** | 7.5/10 | Responsive, comprehensive validation |
| **State Management** | 7/10 | Valtio works well, ada inconsistency |
| **Code Quality** | 6.5/10 | Good structure, copy-paste errors, inline styles |
**Overall Score: 6.5/10** - **Needs Improvement**
---
## 🎯 Action Plan
### Week 1 (Critical Fixes) 🔴
- [ ] **URGENT:** Fix hard delete → soft delete di API del.ts
- [ ] **URGENT:** Fix `deletedAt @default(now())` di schema
- [ ] Fix pagination pass search parameter
- [ ] Fix colSpan mismatch
### Week 2 (Medium Priority) 🟡
- [ ] Consolidate state management (local vs global)
- [ ] Improve error handling (no silent failures)
- [ ] Fix error message typo ("potensi desa" → "kategori pengumuman")
- [ ] Rename button "Batal" → "Reset Form"
- [ ] Fix button order (edit before delete)
### Week 3 (Polish) 🟢
- [ ] Move inline styles to CSS module/theme
- [ ] Extract hardcoded paths to constants
- [ ] Fix HTML validation function
- [ ] Konsisten gunakan ApiFetch
- [ ] Fix isDetailPage logic
- [ ] Add uniqueness validation di API create
---
## 📝 Technical Notes
### **Database Migration:**
Fix deletedAt default dan cleanup data:
```bash
# Generate migration
bunx prisma migrate dev --name fix_deleted_at_default
# Atau jika tidak pakai migrate
bunx prisma db push
# Data cleanup
UPDATE "Pengumuman" SET "deletedAt" = NULL WHERE "isActive" = true;
UPDATE "CategoryPengumuman" SET "deletedAt" = NULL WHERE "isActive" = true;
```
### **Soft Delete Implementation:**
Update semua delete endpoint:
```typescript
// Before (hard delete)
await prisma.pengumuman.delete({ where: { id } });
// After (soft delete)
await prisma.pengumuman.update({
where: { id },
data: {
deletedAt: new Date(),
isActive: false
}
});
```
### **API Testing:**
Test soft delete:
```bash
# 1. Create pengumuman
POST /api/desa/pengumuman/create
{
"judul": "Test Pengumuman",
"deskripsi": "Test",
"content": "Test content",
"categoryPengumumanId": "<id>"
}
# 2. Delete pengumuman
DELETE /api/desa/pengumuman/del/<id>
# 3. Verify soft delete (data masih ada tapi isActive = false)
GET /api/desa/pengumuman/<id>
# Expected: isActive = false, deletedAt != null
```
Test pagination dengan search:
1. Buka halaman List Pengumuman
2. Ketik search query (misal: "desa")
3. Klik pagination halaman 2
4. Verify search query masih ada dan result sesuai
---
## 📚 References
- [Prisma Soft Delete Pattern](https://www.prisma.io/docs/concepts/components/prisma-client/soft-delete)
- [Mantine Table Documentation](https://mantine.dev/core/table/)
- [React Toastify Documentation](https://fkhadra.github.io/react-toastify/)
- [Zod Documentation](https://zod.dev/)
- [TipTap Documentation](https://tiptap.dev/)
---
## 📈 Comparison dengan QC Sebelumnya
| Aspek | Profil Desa | Potensi Desa | Berita Desa | **Pengumuman** |
|-------|-------------|--------------|-------------|----------------|
| Schema | 6/10 | 7/10 | 8/10 | **7/10** |
| API Security | 4/10 | 6/10 | 6/10 | **6/10** |
| API Design | 7/10 | 8/10 | 7.5/10 | **7/10** |
| UI/UX | 8/10 | 8.5/10 | 8/10 | **7.5/10** |
| State Mgmt | 7/10 | 8/10 | 8/10 | **7/10** |
| Code Quality | 7/10 | 7.5/10 | 7/10 | **6.5/10** |
| **Overall** | **6.5/10** | **7.5/10** | **7/10** | **6.5/10** |
**Pengumuman** memiliki score yang sama dengan **Profil Desa** karena:
- ✅ Unique constraint pada `name` (CategoryPengumuman)
- ✅ Validation input di API
- ❌ Hard delete vs soft delete mismatch (critical)
- ❌ Copy-paste error messages
- ❌ Inline styles yang berlebihan
- ❌ Duplicate state management
---
**Dibuat oleh:** QC Automation
**Review Status:** ⏳ Menunggu Review Developer
**Next Review:** Setelah implementasi fixes

View File

@@ -0,0 +1,658 @@
# Quality Control Report - Potensi Desa Admin
**Lokasi:** `/src/app/admin/(dashboard)/desa/potensi/`
**Tanggal QC:** 25 Februari 2026
**Status:****Good** (dengan area untuk improvement)
---
## 📋 Ringkasan Eksekutif
Halaman Potensi Desa memiliki implementasi yang **cukup baik** dengan CRUD lengkap, UI yang responsive, dan state management yang terstruktur. Ditemukan **15 issue** dengan rincian:
- 🔴 **High Priority:** 6 issue
- 🟡 **Medium Priority:** 6 issue
- 🟢 **Low Priority:** 3 issue
**Overall Score: 7.5/10** - Good
---
## 📁 Struktur File yang Diperiksa
```
/src/app/admin/(dashboard)/desa/potensi/
├── layout.tsx
├── _lib/
│ └── layoutTabs.tsx
├── kategori-potensi/
│ ├── page.tsx # List kategori dengan search & pagination
│ ├── create/
│ │ └── page.tsx # Form create kategori
│ └── [id]/
│ └── page.tsx # Edit kategori
└── list-potensi/
├── page.tsx # List potensi dengan search & pagination
├── create/
│ └── page.tsx # Form create potensi (rich text + image)
└── [id]/
├── page.tsx # Detail potensi
└── edit/
└── page.tsx # Edit potensi
```
**File Terkait:**
- State: `/src/app/admin/(dashboard)/_state/desa/potensi.ts`
- API: `/src/app/api/[[...slugs]]/_lib/desa/potensi/` (10 files)
- API: `/src/app/api/[[...slugs]]/_lib/desa/potensi/kategori-potensi/` (5 files)
- Schema: `/prisma/schema.prisma` (Model `PotensiDesa` & `KategoriPotensi`)
---
## 🔴 HIGH PRIORITY ISSUES
### 1. Schema - Tidak Ada Unique Constraint pada `name` dan `nama`
**File:** `prisma/schema.prisma`
```prisma
model PotensiDesa {
name String // ❌ Tidak ada @unique
deskripsi String
// ...
}
model KategoriPotensi {
nama String // ❌ Tidak ada @unique
// ...
}
```
**Dampak:**
- Bisa ada duplikasi nama kategori potensi (misal: "Pariwisata" muncul 2x)
- Bisa ada duplikasi judul potensi desa
- Menyulitkan user saat mencari data
**Solusi:**
```prisma
model PotensiDesa {
name String @unique // ✅ Add unique constraint
// ...
}
model KategoriPotensi {
nama String @unique // ✅ Add unique constraint
// ...
}
```
**Migration Required:**
```bash
bunx prisma db push
# atau
bunx prisma migrate dev --name add_unique_constraints
```
---
### 2. Schema - `kategoriId` Nullable Seharusnya Required
**File:** `prisma/schema.prisma`
```prisma
model PotensiDesa {
kategoriId String? // ❌ Nullable, seharusnya required
// ...
}
```
**Dampak:** Potensi desa bisa dibuat tanpa kategori, tidak masuk akal secara bisnis.
**Solusi:**
```prisma
model PotensiDesa {
kategoriId String // ✅ Remove ? (required)
// ...
}
```
**Note:** Perlu update form create/edit untuk validasi kategori wajib dipilih.
---
### 3. Schema - Tidak Ada Length Constraints
**File:** `prisma/schema.prisma`
```prisma
model PotensiDesa {
name String // ❌ Tidak ada max length
deskripsi String @db.Text
// ...
}
model KategoriPotensi {
nama String // ❌ Tidak ada max length
// ...
}
```
**Dampak:** User bisa input nama sangat panjang, bisa break UI atau database.
**Solusi:**
```prisma
model PotensiDesa {
name String @db.VarChar(255) // ✅ Max 255 chars
deskripsi String @db.Text
// ...
}
model KategoriPotensi {
nama String @db.VarChar(100) // ✅ Max 100 chars
// ...
}
```
---
### 4. API - Delete Kategori Tanpa Cek Relasi
**File:** `src/app/api/[[...slugs]]/_lib/desa/potensi/kategori-potensi/del.ts`
```typescript
export default async function kategoriPotensiDelete(context: Context) {
const id = context.params?.id as string;
// ❌ Tidak cek apakah kategori masih dipakai oleh PotensiDesa
await prisma.kategoriPotensi.update({
where: { id },
data: { deletedAt: new Date(), isActive: false }
});
return { success: true, message: "Kategori potensi berhasil dihapus" };
}
```
**Dampak:**
- Bisa terjadi foreign key constraint error
- Data inconsistency jika kategori masih dipakai
**Solusi:**
```typescript
// Cek apakah masih ada potensi yang menggunakan kategori ini
const existingPotensi = await prisma.potensiDesa.findFirst({
where: {
kategoriId: id,
isActive: true
}
});
if (existingPotensi) {
return Response.json({
success: false,
message: "Kategori masih digunakan oleh potensi desa. Tidak dapat dihapus."
}, { status: 400 });
}
```
---
### 5. API - `find-unique.ts` Tidak Filter `isActive`
**File:** `src/app/api/[[...slugs]]/_lib/desa/potensi/find-unique.ts`
```typescript
const data = await prisma.potensiDesa.findUnique({
where: { id }, // ❌ Tidak cek isActive
include: {
image: true,
kategori: true
}
});
```
**Dampak:** Bisa load data yang sudah di-soft delete.
**Solusi:**
```typescript
const data = await prisma.potensiDesa.findUnique({
where: {
id,
isActive: true // ✅ Add filter
},
include: {
image: true,
kategori: true
}
});
```
---
### 6. UI - HTML Injection Risk (XSS Vulnerability)
**File:** Multiple pages
**`kategori-potensi/page.tsx`:**
```typescript
<TableTd dangerouslySetInnerHTML={{ __html: item.nama }} />
```
**`list-potensi/page.tsx`:**
```typescript
<TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
```
**Dampak:**
- User bisa inject malicious script melalui rich text editor
- XSS attack bisa mencuri session atau data sensitif
**Solusi:**
```typescript
// Install: bun add dompurify
import DOMPurify from 'dompurify';
// Sanitize sebelum render
<TableTd
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(item.deskripsi, {
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
ALLOWED_ATTR: []
})
}}
/>
```
**Alternatif (tanpa library):**
```typescript
// Strip HTML tags completely
const stripHtml = (html: string) => {
const tmp = document.createElement('div');
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || '';
};
<TableTd>{stripHtml(item.deskripsi)}</TableTd>
```
---
## 🟡 MEDIUM PRIORITY ISSUES
### 7. API - Inconsistent Naming Convention
**File:** API routes
```
potensi/
├── find-many.ts // ❌ kebab-case
└── kategori-potensi/
└── findMany.ts // ❌ camelCase
```
**Dampak:** Membingungkan developer, tidak konsisten.
**Solusi:** Standardize ke **kebab-case** (konsisten dengan endpoint lain):
```bash
mv findMany.ts find-many.ts
mv findUnique.ts find-unique.ts
mv updt.ts update.ts
mv del.ts delete.ts
```
Update semua import di frontend.
---
### 8. UI - Pagination Tidak Pass Search Parameter
**File:** `src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx`
```typescript
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10); // ❌ Tidak ada search parameter
}}
/>
```
**Dampak:** Saat ganti halaman, search query hilang.
**Solusi:**
```typescript
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10, search); // ✅ Include search
}}
/>
```
---
### 9. UI - colSpan Mismatch
**File:** `src/app/admin/(dashboard)/desa/potensi/kategori-potensi/page.tsx`
```typescript
<TableThead>
<TableTr>
<TableTh>Nama</TableTh>
<TableTh>Dibuat</TableTh>
<TableTh>Aksi</TableTh> {/* 3 kolom */}
</TableTr>
</TableThead>
<TableTbody>
{loading ? (
<TableTr>
<TableTd colSpan={4}> {/* ❌ colSpan 4, seharusnya 3 */}
<Skeleton height={40} />
</TableTd>
</TableTr>
) : (
// ...
)}
</TableTbody>
```
**Solusi:**
```typescript
<TableTd colSpan={3}> // ✅ Match column count
```
---
### 10. UI - Alert Instead of Toast
**File:** `src/app/admin/(dashboard)/desa/potensi/kategori-potensi/create/page.tsx`
```typescript
if (!nama.trim()) {
alert('Nama kategori potensi wajib diisi'); // ❌ Browser alert
return;
}
```
**Dampak:** Browser alert blocking, UX buruk, tidak konsisten dengan page lain.
**Solusi:**
```typescript
import { toast } from 'react-toastify';
if (!nama.trim()) {
toast.error('Nama kategori potensi wajib diisi'); // ✅ Toast notification
return;
}
```
---
### 11. UI - Missing useEffect Dependencies
**File:** `src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx`
```typescript
useEffect(() => {
potensiState.kategoriPotensi.findMany.load();
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]); // ❌ Missing potensiState
```
**Dampak:** ESLint warning, potential stale closure.
**Solusi:**
```typescript
useEffect(() => {
potensiState.kategoriPotensi.findMany.load();
load(page, 10, debouncedSearch);
}, [page, debouncedSearch, potensiState]); // ✅ Add missing dep
```
**Note:** Atau gunakan `useCallback` untuk `load` function.
---
### 12. UI - Dropzone Accept Tidak Specify Extensions
**File:** `src/app/admin/(dashboard)/desa/potensi/list-potensi/create/page.tsx`
```typescript
<Dropzone
accept={{ "image/*": [] }} // ❌ Terlalu general
// ...
>
```
**Dampak:** User bisa upload format image aneh yang tidak didukung browser.
**Solusi:**
```typescript
<Dropzone
accept={{
"image/*": ['.jpeg', '.jpg', '.png', '.webp'] // ✅ Specify extensions
}}
// ...
>
```
---
## 🟢 LOW PRIORITY ISSUES
### 13. UI - Magic Number untuk Detail Page Detection
**File:** `src/app/admin/(dashboard)/desa/potensi/layout.tsx`
```typescript
const isDetailPage = segments.length >= 5; // ❌ Magic number
```
**Dampak:** Tidak jelas maksudnya, brittle jika ada perubahan route structure.
**Solusi:**
```typescript
const isDetailPage = segments.includes('[id]') ||
segments.some(s => !['create', 'edit'].includes(s) && s.match(/^\w+$/));
// Atau lebih baik lagi:
const isDetailPage = segments.some(s => s.match(/^[a-zA-Z0-9]{20,}$/)); // CUID pattern
```
---
### 14. API - Inconsistent Error Handling
**File:** Multiple API handlers
**Contoh inconsistency:**
```typescript
// File A - Return object
return { success: false, message: "Error" };
// File B - Throw error
throw new Error("Something went wrong");
// File C - Return Response
return Response.json({ success: false }, { status: 500 });
```
**Solusi:** Standardize ke satu format:
```typescript
// Always return Response.json dengan format konsisten
return Response.json({
success: false,
message: "Error message",
data: null
}, { status: 500 });
```
---
### 15. State - Inconsistent Loading State
**File:** `src/app/admin/(dashboard)/_state/desa/potensi.ts`
```typescript
delete: {
loading: false,
async byId(id: string) {
try {
// ❌ Loading di-set di dalam async function
potensiDesa.delete.loading = true;
// ...
} finally {
potensiDesa.delete.loading = false;
}
}
}
```
**Solusi:** Konsisten set loading di awal dan reset di finally untuk semua operation.
---
## ✅ YANG SUDAH BAIK
### **Schema:**
- ✅ Soft delete dengan `deletedAt` dan `isActive`
- ✅ Relasi yang jelas antara PotensiDesa dan KategoriPotensi
- ✅ Relasi ke FileStorage untuk gambar
- ✅ Timestamp lengkap (createdAt, updatedAt)
### **API:**
- ✅ CRUD lengkap untuk kedua entitas
- ✅ Pagination support dengan `page`, `limit`, `search`
- ✅ Search functionality dengan case-insensitive
- ✅ Include relasi (image, kategori) pada find-many dan find-unique
- ✅ File cleanup (hapus file fisik + database) saat update/delete
- ✅ Response format konsisten: `{ success, message, data }`
### **UI/UX:**
- ✅ Konsisten design pattern
- ✅ Responsive untuk mobile dan desktop
- ✅ Loading states dan skeleton
- ✅ Toast notifications untuk feedback
- ✅ Form validation yang comprehensive
- ✅ Rich text editor dengan toolbar lengkap
- ✅ Image upload dengan preview dan delete button
- ✅ Search dengan debounce
- ✅ Modal konfirmasi hapus
---
## 📊 Metrics
| Aspek | Score | Keterangan |
|-------|-------|------------|
| **Schema Design** | 7/10 | Good, tapi perlu unique constraints |
| **API Design** | 8/10 | RESTful, konsisten, perlu standardisasi naming |
| **API Security** | 6/10 | Tidak ada auth, XSS vulnerability |
| **UI/UX** | 8.5/10 | Responsive, comprehensive validation |
| **State Management** | 8/10 | Valtio works well, minor inconsistency |
| **Code Quality** | 7.5/10 | Good structure, beberapa bug minor |
**Overall Score: 7.5/10** - **Good**
---
## 🎯 Action Plan
### Week 1 (Critical Fixes)
- [ ] Add unique constraint pada `name` dan `nama` di schema
- [ ] Make `kategoriId` required di schema
- [ ] Add length constraints (@db.VarChar)
- [ ] Fix delete kategori dengan relation check
- [ ] Add `isActive` filter di find-unique API
- [ ] Add HTML sanitization (DOMPurify)
### Week 2 (Medium Priority)
- [ ] Standardize API naming (kebab-case)
- [ ] Fix pagination pass search parameter
- [ ] Fix colSpan mismatch
- [ ] Replace alert dengan toast
- [ ] Fix useEffect dependencies
- [ ] Specify dropzone extensions
### Week 3 (Polish)
- [ ] Remove magic number di layout
- [ ] Standardize error handling di API
- [ ] Fix loading state consistency
- [ ] Add authentication middleware
- [ ] Add unit tests untuk critical functions
---
## 📝 Technical Notes
### **Database Migration:**
Setelah update schema:
```bash
# Generate migration
bunx prisma migrate dev --name add_unique_and_length_constraints
# Atau jika tidak pakai migrate
bunx prisma db push
# Handle duplicate data (jika ada)
# Query manual untuk merge/delete duplicates
```
### **HTML Sanitization:**
Install DOMPurify:
```bash
bun add dompurify
bun add -D @types/dompurify
```
Usage:
```typescript
import DOMPurify from 'dompurify';
// Di component
const sanitizedContent = DOMPurify.sanitize(htmlContent, {
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li', 'h1', 'h2', 'h3'],
ALLOWED_ATTR: []
});
<div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
```
### **API Testing:**
Test delete kategori dengan relasi:
```bash
# 1. Create kategori
POST /api/desa/kategoripotensi/create
{ "nama": "Test Kategori" }
# 2. Create potensi dengan kategori tersebut
POST /api/desa/potensi/create
{
"name": "Test Potensi",
"kategoriId": "<kategori_id>",
...
}
# 3. Try delete kategori (should fail)
DELETE /api/desa/kategoripotensi/del/<kategori_id>
# Expected: { success: false, message: "Kategori masih digunakan..." }
```
---
## 📚 References
- [Prisma Schema Reference](https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference)
- [DOMPurify Documentation](https://github.com/cure53/DOMPurify)
- [Mantine Table Documentation](https://mantine.dev/core/table/)
- [React Toastify Documentation](https://fkhadra.github.io/react-toastify/)
---
**Dibuat oleh:** QC Automation
**Review Status:** ⏳ Menunggu Review Developer
**Next Review:** Setelah implementasi fixes

View File

@@ -0,0 +1,371 @@
# Quality Control Report - Profil Desa Admin
**Lokasi:** `/src/app/admin/(dashboard)/desa/profil/`
**Tanggal QC:** 25 Februari 2026
**Status:** ⚠️ **Needs Improvement**
---
## 📋 Ringkasan Eksekutif
Halaman Profil Desa sudah memiliki struktur yang baik dengan separation of concerns yang jelas antara UI, State Management, dan API. Namun ditemukan **16 issue** dengan rincian:
- 🔴 **High Priority:** 5 issue
- 🟡 **Medium Priority:** 5 issue
- 🟢 **Low Priority:** 6 issue
---
## 📁 Struktur File yang Diperiksa
```
/src/app/admin/(dashboard)/desa/profil/
├── layout.tsx
├── _lib/
│ ├── layoutTabsDetail.tsx
│ └── layoutTabsEdit.tsx
├── profil-desa/
│ ├── page.tsx
│ └── [id]/
│ ├── sejarah_desa/page.tsx
│ ├── visi_misi_desa/page.tsx
│ ├── lambang_desa/page.tsx
│ └── maskot_desa/page.tsx
├── profil-perbekel/
│ ├── page.tsx
│ └── [id]/page.tsx
└── profil-perbekel-dari-masa-ke-masa/
├── page.tsx
├── create/page.tsx
└── [id]/
├── page.tsx
└── edit/page.tsx
```
**File Terkait:**
- State: `/src/app/admin/(dashboard)/_state/desa/profile.ts` (1058 baris)
- API: `/src/app/api/[[...slugs]]/_lib/desa/profile/` (15+ files)
- Schema: `/prisma/schema.prisma`
---
## 🔴 HIGH PRIORITY ISSUES
### 1. Schema Bug - `deletedAt` Default Value Salah
**File:** `prisma/schema.prisma`
```prisma
model SejarahDesa {
deletedAt DateTime @default(now()) // ❌ BUG: Record langsung ter-delete!
isActive Boolean @default(true)
}
```
**Dampak:** Setiap record baru langsung ter-mark sebagai deleted karena `deletedAt` di-set ke `now()` saat create.
**Solusi:**
```prisma
deletedAt DateTime? // ✅ Nullable, tanpa default
```
**Affected Models:** `SejarahDesa`, `VisiMisiDesa`, `LambangDesa`, `MaskotDesa`
---
### 2. API Tidak Ada Authentication
**File:** Semua file di `/src/app/api/[[...slugs]]/_lib/desa/profile/`
```typescript
export default async function sejarahDesaUpdate(context: Context) {
// ❌ Tidak ada validasi session/user
const id = context.params?.id as string;
// Langsung proses update...
}
```
**Dampak:** Siapa saja yang tahu endpoint bisa update/delete data tanpa login.
**Solusi:** Tambahkan middleware authentication di route handler atau di setiap endpoint.
---
### 3. Hardcoded Nama Perbekel di UI
**File:** `src/app/admin/(dashboard)/desa/profil/profil-perbekel/page.tsx`
```typescript
<Text>
I.B. Surya Prabhawa Manuaba, S.H., M.H. // ❌ Hardcoded!
</Text>
```
**Dampak:** UI tidak update otomatis jika ada perbekel baru.
**Solusi:** Ambil data dari database `ProfilPerbekel` dengan filter `isActive: true`.
---
### 4. Maskot Image Delete Logic Bug
**File:** `src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/maskot-desa/update.ts`
```typescript
// Hapus semua gambar lama
for (const old of existing.images) {
await prisma.fileStorage.delete({ where: { id: old.imageId } });
}
```
**Dampak:** Semua gambar lama **selalu dihapus**, bahkan jika user ingin mempertahankan beberapa gambar.
**Solusi:** Implementasi diff logic untuk membandingkan gambar yang dipertahankan vs dihapus.
---
### 5. Magic String "edit" sebagai ID
**File:** Multiple files di state dan API
```typescript
stateProfileDesa.sejarahDesa.findUnique.load("edit"); // ❌ Magic string
```
**Dampak:** Tidak type-safe, rentan typo, tidak scalable.
**Solusi:** Buat endpoint khusus `/first` atau `/active` untuk get record pertama yang aktif.
---
## 🟡 MEDIUM PRIORITY ISSUES
### 6. ProfileDesaImage Tanpa Soft Delete
**File:** `prisma/schema.prisma`
```prisma
model ProfileDesaImage {
// ❌ Tidak ada deletedAt, isActive, createdAt, updatedAt
id String @id @default(cuid())
label String
imageId String?
}
```
**Solusi:** Tambahkan audit fields:
```prisma
deletedAt DateTime?
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
```
---
### 7. HTML Validation dengan Regex
**File:** `src/app/admin/(dashboard)/desa/profil/profil-desa/[id]/sejarah_desa/page.tsx`
```typescript
const isHtmlEmpty = (html: string) => {
const textContent = html.replace(/<[^>]*>/g, '').trim(); // ❌ Tidak robust
return textContent === '';
};
```
**Dampak:** Validasi bisa gagal untuk edge cases (nested tags, comments, script tags).
**Solusi:** Gunakan library `sanitize-html` atau DOMParser untuk extract text content.
---
### 8. Image Label Tidak Divvalidasi
**File:** `src/app/admin/(dashboard)/desa/profil/profil-desa/[id]/maskot_desa/page.tsx`
**Dampak:** User bisa submit dengan label kosong atau sangat panjang.
**Solusi:** Tambahkan validation:
```typescript
z.object({
label: z.string().min(1, "Label wajib diisi").max(100, "Maksimal 100 karakter")
})
```
---
### 9. Typo Variable Name
**File:** `src/app/api/[[...slugs]]/_lib/desa/profile/profilePerbekel/update.ts`
```typescript
if (exisitng.imageId !== imageId) { // ❌ Typo: "exisitng"
```
**Solusi:** Fix menjadi `existing`.
---
### 10. Tidak Ada Error Boundary
**Dampak:** Jika ada error di component tree, seluruh halaman bisa crash.
**Solusi:** Tambahkan React Error Boundary di layout.tsx:
```typescript
import { ErrorBoundary } from 'react-error-boundary';
<ErrorBoundary fallback={<ErrorFallback />}>
{children}
</ErrorBoundary>
```
---
## 🟢 LOW PRIORITY ISSUES
### 11. Image Loading Tanpa Skeleton
**File:** `src/app/admin/(dashboard)/desa/profil/profil-desa/page.tsx`
**Dampak:** Layout shift saat image load, UX kurang smooth.
**Solusi:** Tambahkan Skeleton component:
```typescript
{loading ? (
<Skeleton height={200} circle />
) : (
<Image src={imageUrl} alt="..." />
)}
```
---
### 12. Reset Form Tanpa Konfirmasi
**File:** `src/app/admin/(dashboard)/desa/profil/profil-perbekel-dari-masa-ke-masa/[id]/edit/page.tsx`
**Dampak:** User bisa tidak sengaja reset form dan kehilangan perubahan.
**Solusi:** Tambahkan modal konfirmasi sebelum reset.
---
### 13. Sequential API Calls Tanpa Promise.all
**File:** `src/app/admin/(dashboard)/desa/profil/profil-desa/page.tsx`
```typescript
useEffect(() => {
stateProfileDesa.sejarahDesa.findUnique.load("edit");
stateProfileDesa.visiMisiDesa.findUnique.load("edit"); // ❌ Sequential
stateProfileDesa.lambangDesa.findUnique.load("edit");
stateProfileDesa.maskotDesa.findUnique.load("edit");
}, []);
```
**Solusi:** Gunakan `Promise.all` untuk parallel loading.
---
### 14. FileStorage Validation di Server
**Dampak:** User bisa upload file dengan tipe yang tidak diinginkan.
**Solusi:** Tambahkan MIME type check di server-side upload handler.
---
### 15. Mantan Perbekel Create Tidak Return ID
**File:** `src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/create.ts`
```typescript
return {
success: true,
data: { ...body }, // ❌ Tidak return ID
};
```
**Solusi:** Return ID record yang baru dibuat untuk referensi.
---
### 16. Tidak Ada Unique Constraint
**Dampak:** Bisa ada multiple record aktif untuk model yang seharusnya single-record.
**Solusi:** Tambahkan unique constraint atau validasi di API layer.
---
## ✅ Yang Sudah Baik
1.**Struktur folder terorganisir** dengan separation of concerns
2.**Responsive design** untuk mobile dan desktop
3.**Loading states** dan error handling dasar
4.**Form validation** client-side dengan Valtio
5.**Preview image** sebelum upload
6.**Toast notifications** untuk feedback user
7.**File cleanup** (hapus file fisik + database) di API
8.**Consistent response format** di semua API endpoint
---
## 📊 Metrics
| Aspek | Score | Keterangan |
|-------|-------|------------|
| **Schema Design** | 6/10 | Ada bug critical di deletedAt |
| **API Security** | 4/10 | Tidak ada authentication |
| **API Design** | 7/10 | RESTful, tapi ada magic string |
| **UI/UX** | 8/10 | Responsive, tapi ada hardcoded data |
| **State Management** | 7/10 | Valtio works, tapi tidak type-safe |
| **Code Quality** | 7/10 | Ada typo, tidak ada error boundary |
**Overall Score: 6.5/10** - **Needs Improvement**
---
## 🎯 Action Plan
### Week 1 (Critical Fixes)
- [ ] Fix `deletedAt @default(now())` di schema
- [ ] Tambahkan authentication middleware di API
- [ ] Fix hardcoded nama perbekel
- [ ] Fix maskot image delete logic
### Week 2 (Medium Priority)
- [ ] Tambahkan audit fields di ProfileDesaImage
- [ ] Fix HTML validation dengan library
- [ ] Tambahkan validasi image label
- [ ] Fix typo dan tambahkan error boundary
### Week 3 (Polish)
- [ ] Tambahkan skeleton loading untuk images
- [ ] Tambahkan konfirmasi reset form
- [ ] Optimasi dengan Promise.all
- [ ] Tambahkan server-side file validation
---
## 📝 Notes
1. **Database Migration Required:** Setelah fix schema, jalankan:
```bash
bunx prisma db push
```
2. **Data Migration:** Record yang sudah ter-create dengan `deletedAt` set perlu di-update:
```sql
UPDATE "SejarahDesa" SET "deletedAt" = NULL WHERE "isActive" = true;
```
3. **Testing:** Setelah fix authentication, test semua endpoint dengan:
- User belum login (should redirect)
- User login dengan role berbeda (should respect permissions)
---
**Dibuat oleh:** QC Automation
**Review Status:** ⏳ Menunggu Review Developer

View File

@@ -0,0 +1,904 @@
# Quality Control Report - Posyandu Kesehatan Admin
**Lokasi:** `/src/app/admin/(dashboard)/kesehatan/posyandu/`
**Tanggal QC:** 25 Februari 2026
**Status:** ⚠️ **Needs Improvement** (ada issue critical data loss & validation)
---
## 📋 Ringkasan Eksekutif
Halaman Posyandu Kesehatan memiliki implementasi yang **cukup baik** dengan CRUD lengkap, upload gambar, dan state management terstruktur. Namun ditemukan **15 issue** dengan rincian:
- 🔴 **High Priority:** 5 issue
- 🟡 **Medium Priority:** 5 issue
- 🟢 **Low Priority:** 5 issue
**Overall Score: 6.5/10** - Needs Improvement
---
## 📁 Struktur File yang Diperiksa
```
/src/app/admin/(dashboard)/kesehatan/posyandu/
├── page.tsx # List posyandu dengan search & pagination
├── create/
│ └── page.tsx # Create posyandu dengan upload gambar
└── [id]/
├── page.tsx # Detail posyandu
└── edit/
└── page.tsx # Edit posyandu dengan replace image
```
**File Terkait:**
- State: `/src/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu.ts`
- API: `/src/app/api/[[...slugs]]/_lib/kesehatan/posyandu/` (6 files)
- Schema: `/prisma/schema.prisma` (Model `Posyandu`)
- UI Components: `/src/app/admin/(dashboard)/_com/` (createEditor, editEditor, modalKonfirmasiHapus)
---
## 🔴 HIGH PRIORITY ISSUES
### 1. Delete Operation Hard Delete (DATA LOSS RISK)
**File:** `src/app/api/[[...slugs]]/_lib/kesehatan/posyandu/del.ts`
```typescript
// Line 28-37
// Hapus file gambar dari filesystem
const filePath = path.join(posyandu.image.path, posyandu.image.name);
await fs.unlink(filePath);
// Hapus dari database FileStorage
await prisma.fileStorage.delete({ where: { id: posyandu.image.id } });
// Hapus posyandu (HARD DELETE!) ❌
await prisma.posyandu.delete({ where: { id } });
```
**Schema yang Diharapkan:**
```prisma
model Posyandu {
deletedAt DateTime? @default(null) // Soft delete field
isActive Boolean @default(true)
}
```
**Dampak:**
- **DATA LOSS** - Data posyandu terhapus permanen, tidak bisa direcover
- Audit trail hilang (riwayat posyandu tidak ada lagi)
- **Inconsistent dengan schema design** yang sudah ada soft delete fields
- Bisa melanggar compliance requirements untuk data retention
**Severity:** 🔴 **HIGH** - Data loss risk
**Solusi:**
```typescript
// Ganti hard delete dengan soft delete
export default async function posyanduDelete(context: Context) {
const id = context.params?.id as string;
try {
// SOFT DELETE - Update deletedAt dan isActive
await prisma.posyandu.update({
where: { id },
data: {
deletedAt: new Date(),
isActive: false
}
});
return {
success: true,
message: "Posyandu berhasil dihapus"
};
} catch (error) {
console.error("Error deleting posyandu:", error);
return { success: false, message: "Gagal menghapus posyandu" };
}
}
```
**Note:** File cleanup sebaiknya tidak dilakukan saat soft delete, atau dipindah ke background job untuk hard delete data yang sudah lama ter-delete.
---
### 2. Tidak Ada Validasi Duplicate Name/Nomor
**File:** `src/app/api/[[...slugs]]/_lib/kesehatan/posyandu/create.ts`
```typescript
// Line 13-23
const posyandu = await prisma.posyandu.create({
data: {
name: body.name, // ❌ Tidak cek duplicate
nomor: body.nomor, // ❌ Tidak cek duplicate
deskripsi: body.deskripsi,
imageId: body.imageId,
jadwalPelayanan: body.jadwalPelayanan,
},
});
```
**Same issue di:** `updt.ts` (update endpoint)
**Dampak:**
- User bisa buat posyandu dengan nama/nomor sama
- Data redundancy
- Confusing saat search dan reporting
- Bisa terjadi data inconsistency
**Severity:** 🔴 **HIGH** - Data integrity
**Solusi:**
```typescript
// Validasi duplicate sebelum create
const existing = await prisma.posyandu.findFirst({
where: {
OR: [
{ name: body.name },
{ nomor: body.nomor }
],
isActive: true
}
});
if (existing) {
return Response.json({
success: false,
message: "Nama atau nomor posyandu sudah digunakan"
}, { status: 400 });
}
// Lanjut create
const posyandu = await prisma.posyandu.create({ ... });
```
**Alternative - Schema Level:**
```prisma
model Posyandu {
name String @unique @db.VarChar(255) // Add unique constraint
nomor String @unique @db.VarChar(50) // Add unique constraint
// ...
}
```
---
### 3. Tidak Ada Validasi imageId Existence
**File:** `src/app/api/[[...slugs]]/_lib/kesehatan/posyandu/create.ts`
```typescript
// Line 13-23
const posyandu = await prisma.posyandu.create({
data: {
imageId: body.imageId, // ❌ Tidak cek apakah FileStorage benar ada
// ...
},
});
```
**Dampak:**
- User bisa create posyandu dengan `imageId` yang tidak valid
- Orphaned records (posyandu dengan gambar yang tidak ada)
- Bisa error saat fetch data dengan include image
**Severity:** 🔴 **HIGH** - Data integrity
**Solusi:**
```typescript
// Validasi imageId existence
if (body.imageId) {
const imageExists = await prisma.fileStorage.findUnique({
where: { id: body.imageId }
});
if (!imageExists) {
return Response.json({
success: false,
message: "Gambar tidak valid atau tidak ditemukan"
}, { status: 404 });
}
}
// Lanjut create
const posyandu = await prisma.posyandu.create({ ... });
```
---
### 4. Race Condition di Edit Page
**File:** `src/app/admin/(dashboard)/kesehatan/posyandu/[id]/edit/page.tsx`
```typescript
// Line 53-59: Local state
const [formData, setFormData] = useState({
name: '',
nomor: '',
deskripsi: '',
jadwalPelayanan: '',
imageId: '',
});
// Line 79-95: Load data ke local state
useEffect(() => {
const loadPosyandu = async () => {
const data = await statePosyandu.edit.load(params?.id as string);
if (data) {
setFormData({
name: data.name || '',
nomor: data.nomor || '',
// ...
});
}
};
loadPosyandu();
}, [params?.id]);
// Line 100-113: Reset form
const handleResetForm = () => {
setFormData({
name: originalData.name,
nomor: originalData.nomor,
// ...
});
// ❌ statePosyandu.edit.form tidak di-reset
};
// Line 133-140: Sync ke global state sebelum submit
useEffect(() => {
statePosyandu.edit.form = {
...statePosyandu.edit.form,
...formData,
};
}, [formData]);
```
**Dampak:**
- **Dual source of truth** - formData lokal dan statePosyandu.edit.form bisa tidak sinkron
- User bisa submit data yang tidak sesuai dengan yang ditampilkan di form
- Sulit debug karena data ada di 2 tempat
**Severity:** 🔴 **HIGH** - Data consistency
**Solusi:**
**Option A - Gunakan hanya global state (Recommended):**
```typescript
// Hapus local state, gunakan langsung global state
const formData = statePosyandu.edit.form;
const handleResetForm = () => {
statePosyandu.edit.form = { ...originalData };
};
// Submit langsung
const handleSubmit = async () => {
// Validasi
await statePosyandu.edit.update();
};
```
**Option B - Sinkronisasi dengan proper effect:**
```typescript
// Sync global state ke local state saat load
useEffect(() => {
const loadPosyandu = async () => {
const data = await statePosyandu.edit.load(params?.id as string);
if (data) {
statePosyandu.edit.form = {
name: data.name || '',
nomor: data.nomor || '',
// ...
};
setFormData(statePosyandu.edit.form);
}
};
loadPosyandu();
}, [params?.id]);
// Update global state saat formData berubah
useEffect(() => {
statePosyandu.edit.form = { ...formData };
}, [formData]);
```
---
### 5. Inconsistent API Client Usage
**File:** `src/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu.ts`
```typescript
// Line 45-53 (create) - Menggunakan ApiFetch ✅
const res = await ApiFetch.api.kesehatan.posyandu.create.post(posyandu.create.form);
// Line 90-93 (findUnique) - Menggunakan fetch langsung ❌
const res = await fetch(`/api/kesehatan/posyandu/${id}`);
const data = await res.json();
// Line 108-120 (delete) - Menggunakan fetch langsung ❌
const response = await fetch(`/api/kesehatan/posyandu/del/${id}`, {
method: 'DELETE',
});
const result = await response.json();
// Line 147-165 (edit.load) - Menggunakan fetch langsung ❌
const response = await fetch(`/api/kesehatan/posyandu/${id}`);
const result = await response.json();
```
**Dampak:**
- Code maintainability kurang
- Tidak type-safe
- Inconsistent error handling
- Sulit refactor
**Severity:** 🔴 **HIGH** - Code quality
**Solusi:**
```typescript
// Gunakan ApiFetch untuk semua
// findUnique
const data = await ApiFetch.api.kesehatan.posyandu[':id'].get({ query: { id } });
// delete
const result = await ApiFetch.api.kesehatan.posyandu['del/:id'].delete({ params: { id } });
// edit.load
const data = await ApiFetch.api.kesehatan.posyandu[':id'].get({ query: { id } });
```
---
## 🟡 MEDIUM PRIORITY ISSUES
### 6. Search Tidak Reset Pagination
**File:** `src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx`
```typescript
// Line 35-38
useShallowEffect(() => {
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
```
**Dampak:**
- User di page 5, search untuk data yang hanya ada di page 1
- Result kosong atau page error
- UX buruk
**Severity:** 🟡 **MEDIUM** - UX issue
**Solusi:**
```typescript
// Watch search separately
useEffect(() => {
setPage(1); // Reset page saat search berubah
}, [debouncedSearch]);
useEffect(() => {
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
```
---
### 7. Find By ID Tidak Filter isActive
**File:** `src/app/api/[[...slugs]]/_lib/kesehatan/posyandu/find-by-id.ts`
```typescript
// Line 13-19
const data = await prisma.posyandu.findUnique({
where: { id }, // ❌ Tidak filter isActive
include: { image: true }
});
```
**Dampak:**
- Bisa fetch data yang sudah di-soft delete
- Data inconsistency
- Bisa tampil di UI padahal sudah dihapus
**Severity:** 🟡 **MEDIUM** - Data consistency
**Solusi:**
```typescript
const data = await prisma.posyandu.findFirst({
where: {
id,
isActive: true,
deletedAt: null // ✅ Filter soft-deleted data
},
include: { image: true }
});
```
---
### 8. Error Handling Upload Gambar Hanya console.log
**File:** `src/app/admin/(dashboard)/kesehatan/posyandu/create/page.tsx`
```typescript
// Line 81-95
const res = await ApiFetch.api.fileStorage.create.post({
file,
name: file.name,
});
const uploaded = res.data?.data;
if (!uploaded?.id) {
toast.error('Gagal mengunggah gambar'); // ❌ Generic error
console.error('Gagal upload gambar'); // ❌ Hanya console.log
return;
}
```
**Dampak:**
- User tidak tahu penyebab error
- Sulit debug production issues
- Error detail hilang
**Severity:** 🟡 **MEDIUM** - UX & debugging
**Solusi:**
```typescript
const uploaded = res.data?.data;
if (!uploaded?.id) {
const errorMessage = res.data?.message || 'Unknown error';
console.error('Gagal upload gambar:', errorMessage);
toast.error(`Gagal upload gambar: ${errorMessage}`);
return;
}
```
---
### 9. Tidak Ada Progress Indicator Upload
**File:** Create & Edit pages
**Dampak:**
- User tidak tahu upload sedang berjalan
- User bisa klik submit berkali-kali (duplicate upload)
- UX buruk untuk file besar
**Severity:** 🟡 **MEDIUM** - UX
**Solusi:**
```typescript
// Tambah loading state untuk upload
const [uploading, setUploading] = useState(false);
const handleUpload = async (file: File) => {
setUploading(true);
try {
const res = await ApiFetch.api.fileStorage.create.post({
file,
name: file.name,
});
// ...
} finally {
setUploading(false);
}
};
// Disable button saat uploading
<Button type="submit" loading={submitting || uploading}>
Simpan
</Button>
```
---
### 10. Validasi Form Hanya di Frontend
**File:** Create & Edit pages
**Dampak:**
- User bisa bypass validation via API call langsung
- Data invalid bisa masuk ke database
- Security risk
**Severity:** 🟡 **MEDIUM** - Security & data integrity
**Solusi:**
```typescript
// Tambah validasi di API create.ts
const { name, nomor, deskripsi, jadwalPelayanan } = await context.body;
// Validasi required fields
if (!name || !nomor || !deskripsi || !jadwalPelayanan) {
return Response.json({
success: false,
message: "Semua field wajib diisi"
}, { status: 400 });
}
// Validasi length
if (name.length > 255) {
return Response.json({
success: false,
message: "Nama maksimal 255 karakter"
}, { status: 400 });
}
// Validasi nomor format (jika perlu)
if (!/^\d+$/.test(nomor)) {
return Response.json({
success: false,
message: "Nomor harus angka"
}, { status: 400 });
}
```
---
## 🟢 LOW PRIORITY ISSUES
### 11. Schema Field `name` Tidak Unique
**File:** `prisma/schema.prisma`
```prisma
model Posyandu {
name String // ❌ Tidak ada @unique (berbeda dengan Berita, KategoriBerita, dll)
nomor String // ❌ Tidak ada @unique
// ...
}
```
**Dampak:** Tidak ada constraint di database level untuk mencegah duplikasi.
**Severity:** 🟢 **LOW** - Schema design
**Solusi:**
```prisma
model Posyandu {
name String @unique @db.VarChar(255)
nomor String @unique @db.VarChar(50)
// ...
}
```
---
### 12. Tidak Ada Constraint Panjang untuk Field Text
**File:** `prisma/schema.prisma`
```prisma
model Posyandu {
name String // ❌ Tidak ada max length
nomor String // ❌ Tidak ada max length
deskripsi String @db.Text
jadwalPelayanan String // ❌ Tidak ada max length
// ...
}
```
**Dampak:** User bisa input text sangat panjang, bisa break UI atau database.
**Severity:** 🟢 **LOW** - Schema design
**Solusi:**
```prisma
model Posyandu {
name String @db.VarChar(255)
nomor String @db.VarChar(50)
deskripsi String @db.Text
jadwalPelayanan String @db.VarChar(500)
// ...
}
```
---
### 13. Empty State Tanpa Illustration
**File:** `src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx`
```typescript
// Line 67-69
{filteredData.length === 0 && (
<Box py="xl" ta="center">
<Text c="dimmed">Tidak ada data posyandu</Text>
</Box>
)}
```
**Dampak:** Empty state kurang informatif dan kurang visually appealing.
**Severity:** 🟢 **LOW** - UX polish
**Solusi:**
```typescript
{filteredData.length === 0 && (
<Box py="xl" ta="center">
<Image
src="/empty-state.svg"
alt="No data"
w={200}
mx="auto"
mb="md"
/>
<Text fw={600} mb="xs">Tidak ada data posyandu</Text>
<Text c="dimmed" size="sm">
{search ? 'Coba kata kunci lain' : 'Mulai dengan menambahkan posyandu baru'}
</Text>
{!search && (
<Button mt="md" onClick={() => router.push('/kesehatan/posyandu/create')}>
Tambah Posyandu
</Button>
)}
</Box>
)}
```
---
### 14. Tidak Ada Sorting Option
**File:** `find-many.ts` dan `page.tsx`
```typescript
// find-many.ts
orderBy: { createdAt: 'desc' } // ❌ Hardcoded, tidak ada option sorting
```
**Dampak:** User tidak bisa sort by name, nomor, atau jadwal.
**Severity:** 🟢 **LOW** - UX
**Solusi:**
```typescript
// API find-many.ts
const { page = 1, limit = 10, search = '', sortBy = 'createdAt', sortOrder = 'desc' } = context.query;
orderBy: {
[sortBy as string]: sortOrder === 'asc' ? 'asc' : 'desc'
}
```
---
### 15. Toast Error Tidak Spesifik
**File:** `posyandu.ts` state
```typescript
// Line 45-53
if (res.status === 200) {
toast.success("Posyandu berhasil disimpan!");
} else {
toast.error("Gagal menyimpan posyandu"); // ❌ Generic error
}
```
**Dampak:** User tidak tahu penyebab error.
**Severity:** 🟢 **LOW** - UX
**Solusi:**
```typescript
if (res.status === 200) {
toast.success("Posyandu berhasil disimpan!");
} else {
const errorMessage = res.data?.message || 'Terjadi kesalahan';
toast.error(`Gagal menyimpan posyandu: ${errorMessage}`);
}
```
---
## ✅ YANG SUDAH BAIK
### **Schema:**
- ✅ Relasi ke FileStorage untuk gambar sudah benar
- ✅ Soft delete pattern dengan `deletedAt` dan `isActive` (tapi tidak dipakai di delete)
- ✅ Audit trail dengan `createdAt` dan `updatedAt`
- ✅ Field yang diperlukan sudah lengkap (name, nomor, deskripsi, jadwal, image)
### **API:**
- ✅ CRUD lengkap untuk Posyandu
- ✅ Pagination support dengan `page`, `limit`, `search`
- ✅ Search functionality dengan case-insensitive (include semua field)
- ✅ Include relasi image di response
- ✅ File cleanup saat delete (hapus file fisik + database)
- ✅ Error handling ada di semua endpoints
- ✅ Response format konsisten: `{ success, message, data }`
### **UI/UX:**
- ✅ Responsive design (desktop table + mobile cards)
- ✅ Loading states dan skeleton
- ✅ Toast notifications untuk feedback
- ✅ Form validation comprehensive (name, nomor, deskripsi, jadwal, image)
- ✅ Image upload dengan dropzone & preview
- ✅ File size limit & format validation
- ✅ Rich text editor untuk deskripsi dan jadwal
- ✅ Search dengan debounce (1000ms)
- ✅ Modal konfirmasi hapus
- ✅ Empty state message
- ✅ Reset form functionality
- ✅ Button disabled saat invalid/submitting
### **State Management:**
- ✅ Valtio proxy untuk global state
- ✅ Zod validation schema
- ✅ Loading state management
- ✅ Auto-refresh after CRUD operations
- ✅ Separate state untuk create, findMany, findUnique, edit, delete
---
## 📊 Metrics
| Aspek | Score | Keterangan |
|-------|-------|------------|
| **Schema Design** | 6.5/10 | Good structure, tapi tidak ada unique constraints |
| **API Design** | 6.5/10 | RESTful, file cleanup implemented, tapi tidak ada validation |
| **API Security** | 5/10 | Tidak ada auth, tidak ada backend validation |
| **UI/UX** | 7.5/10 | Responsive, comprehensive features |
| **State Management** | 6.5/10 | Valtio works well, inconsistent fetch patterns |
| **Code Quality** | 6.5/10 | Good structure, race condition potential |
**Overall Score: 6.5/10** - **Needs Improvement**
---
## 🎯 Action Plan
### Week 1 (Critical Fixes) 🔴
- [ ] **URGENT:** Fix delete operation (hard delete → soft delete)
- [ ] **URGENT:** Tambahkan validasi duplicate name/nomor di API
- [ ] **URGENT:** Tambahkan validasi imageId existence di API
- [ ] **URGENT:** Fix race condition di edit page (dual state)
- [ ] **URGENT:** Konsistensi fetch pattern (gunakan ApiFetch)
### Week 2 (Medium Priority) 🟡
- [ ] Fix search reset pagination logic
- [ ] Tambahkan filter isActive di find-by-id API
- [ ] Improve error handling upload gambar
- [ ] Tambahkan progress indicator untuk upload
- [ ] Tambahkan backend validation untuk semua field
### Week 3 (Polish) 🟢
- [ ] Tambahkan unique constraint di schema
- [ ] Tambahkan length constraints di schema
- [ ] Improve empty state dengan illustration
- [ ] Tambahkan sorting option
- [ ] Improve toast error messages
---
## 📝 Technical Notes
### **Database Migration:**
Fix deletedAt default dan add unique constraints:
```bash
# Generate migration
bunx prisma migrate dev --name fix_posyandu_deleted_at_and_unique
# Atau jika tidak pakai migrate
bunx prisma db push
# Data cleanup
UPDATE "Posyandu" SET "deletedAt" = NULL WHERE "isActive" = true;
```
### **Soft Delete Implementation:**
Update delete endpoint:
```typescript
// del.ts - Before (hard delete)
await prisma.posyandu.delete({ where: { id } });
// After (soft delete)
await prisma.posyandu.update({
where: { id },
data: {
deletedAt: new Date(),
isActive: false
}
});
```
### **Duplicate Validation:**
```typescript
// Check existing name/nomor
const existing = await prisma.posyandu.findFirst({
where: {
OR: [
{ name: body.name },
{ nomor: body.nomor }
],
isActive: true,
id: body.id ? { not: body.id } : undefined // Exclude current for update
}
});
if (existing) {
return Response.json({
success: false,
message: "Nama atau nomor posyandu sudah digunakan"
}, { status: 400 });
}
```
### **Race Condition Fix:**
```typescript
// Option A: Use only global state
const formData = statePosyandu.edit.form;
const handleResetForm = () => {
statePosyandu.edit.form = { ...originalData };
};
// Submit directly
const handleSubmit = async () => {
// Validation
await statePosyandu.edit.update();
};
```
---
## 📚 References
- [Prisma Soft Delete Pattern](https://www.prisma.io/docs/concepts/components/prisma-client/soft-delete)
- [Prisma Unique Constraints](https://www.prisma.io/docs/concepts/components/prisma-schema/relations)
- [Mantine Dropzone Documentation](https://mantine.dev/x/dropzone/)
- [React Toastify Documentation](https://fkhadra.github.io/react-toastify/)
- [Zod Documentation](https://zod.dev/)
- [Valtio Documentation](https://docs.pmnd.rs/valtio)
---
## 📈 Comparison dengan QC Sebelumnya
| Aspek | Profil | Potensi | Berita | Pengumuman | Gallery | Layanan | Penghargaan | **Posyandu** |
|-------|--------|---------|--------|------------|---------|---------|-------------|--------------|
| Schema | 6/10 | 7/10 | 8/10 | 7/10 | 6/10 | 7/10 | 7/10 | **6.5/10** |
| API Design | 7/10 | 8/10 | 7.5/10 | 7/10 | 6/10 | 5/10 | 7.5/10 | **6.5/10** |
| API Security | 4/10 | 6/10 | 6/10 | 6/10 | 4/10 | 5/10 | 5/10 | **5/10** |
| UI/UX | 8/10 | 8.5/10 | 8/10 | 7.5/10 | 7.5/10 | 7.5/10 | 8/10 | **7.5/10** ✅ |
| State Mgmt | 7/10 | 8/10 | 8/10 | 7/10 | 6.5/10 | 6.5/10 | 7/10 | **6.5/10** |
| Code Quality | 7/10 | 7.5/10 | 7/10 | 6.5/10 | 6/10 | 6/10 | 7/10 | **6.5/10** |
| **Overall** | **6.5/10** | **7.5/10** | **7/10** | **6.5/10** | **6/10** | **6.5/10** | **7/10** | **6.5/10** |
**Posyandu** memiliki score sama dengan **Profil Desa** dan **Pengumuman** karena:
**Positif:**
- ✅ CRUD lengkap & berfungsi dengan baik
- ✅ File cleanup implemented (delete) ✅
- ✅ Responsive design bagus
- ✅ Comprehensive validation di frontend
- ✅ Rich text editor untuk 2 field (deskripsi & jadwal)
- ✅ Search include semua field
**Negatif:**
-**Hard delete** vs soft delete mismatch (data loss risk)
-**Tidak ada validasi backend** (duplicate, imageId, required fields)
-**Race condition** di edit page (dual state)
-**Inconsistent fetch patterns** (ApiFetch vs fetch)
-**Tidak ada unique constraints** di schema
-**Tidak ada authentication** di API
---
**Dibuat oleh:** QC Automation
**Review Status:** ⏳ Menunggu Review Developer
**Next Review:** Setelah implementasi fixes

View File

@@ -0,0 +1,763 @@
# QC Summary - APBDes Module
**Scope:** List APBDes, Create, Edit, Detail
**Date:** 2026-02-23
**Status:** ✅ Secara umum sudah baik, ada beberapa critical issues yang perlu diperbaiki
---
## 📊 OVERVIEW
| Aspect | Schema | API | UI Admin | State Management | Overall |
|--------|--------|-----|----------|-----------------|---------|
| APBDes | ✅ Baik | ✅ Baik | ✅ Baik | ⚠️ Ada issue | 🟡 Perlu fix |
---
## ✅ YANG SUDAH BAIK
### **1. UI/UX Consistency**
- ✅ Responsive design (desktop table + mobile cards)
- ✅ Loading states dengan Skeleton
- ✅ Search dengan debounce (1000ms)
- ✅ Pagination konsisten
- ✅ Empty state handling yang informatif
- ✅ Modal konfirmasi hapus
### **2. File Upload Handling**
- ✅ Dual upload: Gambar + Dokumen
- ✅ Dropzone dengan preview (image + iframe untuk dokumen)
- ✅ Validasi format (gambar: JPEG/PNG/WEBP, dokumen: PDF/DOC/DOCX)
- ✅ Validasi ukuran file (max 5MB untuk gambar, 10MB untuk dokumen di edit)
- ✅ Tombol hapus preview (IconX di pojok kanan atas)
- ✅ URL.createObjectURL untuk preview lokal
### **3. Form Validation**
- ✅ Zod schema untuk validasi typed
- ✅ isFormValid() check sebelum submit
- ✅ Error toast dengan pesan spesifik
- ✅ Button disabled saat invalid/loading
- ✅ Type number input untuk tahun
### **4. Complex Feature - APBDes Items**
- ✅ Hierarchical items dengan level (1, 2, 3)
- ✅ Tipe classification (pendapatan, belanja, pembiayaan)
- ✅ Auto-calculation: selisih & persentase
- ✅ Add/remove items dynamic
- ✅ Table preview dengan badge color coding
- ✅ Indentasi visual berdasarkan level
### **5. Edit Form - Original Data Tracking**
- ✅ Original data state untuk reset form
- ✅ Load data existing dengan benar
- ✅ Preview image & dokumen dari data lama
- ✅ Reset form mengembalikan ke data original
- ✅ File replacement logic (upload baru jika ada perubahan)
**Code Example (✅ GOOD):**
```typescript
// Line ~95-130 - Load data & save original
const data = await apbdesState.edit.load(id);
setOriginalData({
tahun: data.tahun || new Date().getFullYear(),
imageId: data.imageId || '',
fileId: data.fileId || '',
imageUrl: data.image?.link || '',
fileUrl: data.file?.link || '',
});
// Set form dengan data lama (termasuk imageId dan fileId)
apbdesState.edit.form = {
tahun: data.tahun || new Date().getFullYear(),
imageId: data.imageId || '', // ✅ Preserve old ID
fileId: data.fileId || '', // ✅ Preserve old ID
items: (data.items || []).map(...),
};
// Line ~270 - Handle reset
const handleReset = () => {
apbdesState.edit.form = {
tahun: originalData.tahun,
imageId: originalData.imageId, // ✅ Restore old ID
fileId: originalData.fileId, // ✅ Restore old ID
items: [...apbdesState.edit.form.items],
};
setPreviewImage(originalData.imageUrl || null);
setPreviewDoc(originalData.fileUrl || null);
setImageFile(null);
setDocFile(null);
toast.info('Form dikembalikan ke data awal');
};
```
**Verdict:****SUDAH BENAR** - Original data tracking sudah implementasi dengan baik.
---
### **6. Schema Design**
- ✅ Proper relations: APBDes ↔ FileStorage (image & file)
- ✅ Self-relation untuk hierarchical items (parentId → children)
- ✅ Indexing untuk performa (kode, level, apbdesId)
- ✅ Soft delete support (deletedAt, isActive)
- ✅ Nullable deletedAt yang benar (`DateTime? @default(null)`)
**Schema Example (✅ GOOD):**
```prisma
model APBDes {
id String @id @default(cuid())
tahun Int?
name String?
deskripsi String?
jumlah String?
items APBDesItem[]
image FileStorage? @relation("APBDesImage", fields: [imageId], references: [id])
imageId String?
file FileStorage? @relation("APBDesFile", fields: [fileId], references: [id])
fileId String?
deletedAt DateTime? // ✅ Nullable, no default
isActive Boolean @default(true)
}
model APBDesItem {
id String @id @default(cuid())
kode String
uraian String
anggaran Float
realisasi Float
selisih Float // ✅ Formula di komentar
persentase Float
tipe String? // ✅ Nullable untuk level 1
level Int
parentId String?
parent APBDesItem? @relation("APBDesItemParent", fields: [parentId], references: [id])
children APBDesItem[] @relation("APBDesItemParent")
apbdesId String
apbdes APBDes @relation(fields: [apbdesId], references: [id])
@@index([kode])
@@index([level])
@@index([apbdesId])
}
```
**Verdict:****SUDAH BENAR** - Schema design sudah solid.
---
## ⚠️ ISSUES & SARAN PERBAIKAN
### **🔴 CRITICAL**
#### **1. Formula Selisih - SALAH di State, BENAR di Schema/API**
**Lokasi:**
- `src/app/admin/(dashboard)/_state/landing-page/apbdes.ts` (line 36)
- Schema komentar di `prisma/schema.prisma` (line 210)
**Masalah:**
```typescript
// ❌ SALAH di state (line 36)
function normalizeItem(item: Partial<...>): z.infer<typeof ApbdesItemSchema> {
const anggaran = item.anggaran ?? 0;
const realisasi = item.realisasi ?? 0;
// ❌ WRONG FORMULA
const selisih = anggaran - realisasi; // positif = sisa anggaran
const persentase = anggaran > 0 ? (realisasi / anggaran) * 100 : 0;
return { ... };
}
```
```prisma
// ✅ BENAR di schema komentar (line 210)
model APBDesItem {
// ...
realisasi Float
selisih Float // ✅ realisasi - anggaran (komentar benar)
// ...
}
```
**Dampak:**
- **Data salah!** Selisih positif/negatif terbalik
- Jika realisasi > anggaran (over budget), seharusnya **negatif** tapi jadi **positif**
- Jika realisasi < anggaran (under budget/sisa), seharusnya **positif** tapi jadi **negatif**
- Color coding di UI (green/red) juga terbalik!
**Contoh:**
```
Anggaran: Rp 100.000.000
Realisasi: Rp 120.000.000 (over budget!)
❌ Formula sekarang: selisih = 100M - 120M = -20M (negatif)
UI show: merah (over budget) ✅ TAPI karena negatif
✅ Seharusnya: selisih = 120M - 100M = +20M (positif)
UI show: merah (over budget) ✅ Karena positif
```
**Rekomendasi:** Fix formula di state:
```typescript
// ✅ CORRECT FORMULA
const selisih = realisasi - anggaran; // positif = over budget, negatif = under budget
const persentase = anggaran > 0 ? (realisasi / anggaran) * 100 : 0;
```
**Priority:** 🔴 **CRITICAL**
**Effort:** Low (1 line fix)
**Impact:** **HIGH** (data integrity issue)
---
#### **2. State Management - Inconsistency Fetch Pattern**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/apbdes.ts`
**Masalah:** Ada 3 pattern berbeda untuk fetch API:
```typescript
// ❌ Pattern 1: ApiFetch (create, findMany, delete, edit.load, edit.update)
const res = await ApiFetch.api.landingpage.apbdes["create"].post(parsed.data);
const res = await ApiFetch.api.landingpage.apbdes["findMany"].get({ query });
const res = await (ApiFetch.api.landingpage.apbdes as any)["del"][id].delete();
const res = await (ApiFetch.api.landingpage.apbdes as any)[id].get();
const res = await (ApiFetch.api.landingpage.apbdes as any)[this.id].put(requestData);
// ❌ Pattern 2: fetch manual (findUnique)
const response = await fetch(`/api/landingpage/apbdes/${id}`);
const res = await response.json();
```
**Dampak:**
- Code consistency buruk
- Sulit maintenance
- Type safety tidak konsisten
- Duplikasi logic error handling
- Console.log debugging tertinggal di production
**Rekomendasi:** Gunakan **ApiFetch** untuk semua operasi:
```typescript
// ✅ Unified pattern
async load(id: string) {
try {
this.loading = true;
const res = await ApiFetch.api.landingpage.apbdes[id].get();
if (res.data?.success) {
this.data = res.data.data;
} else {
this.data = null;
this.error = res.data?.message || "Gagal memuat detail APBDes";
toast.error(this.error);
}
} catch (error) {
console.error("FindUnique error:", error);
this.data = null;
this.error = "Gagal memuat detail APBDes";
toast.error(this.error);
} finally {
this.loading = false;
}
}
```
**Priority:** 🔴 High
**Effort:** Medium (refactor di findUnique)
---
#### **3. Console.log Debugging di Production**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/apbdes.ts`
**Masalah:**
```typescript
// Line ~175-177
const url = `/api/landingpage/apbdes/${id}`;
console.log("🌐 Fetching:", url); // ❌ Debug log
const response = await fetch(url);
const res = await response.json();
console.log("📦 Response:", res); // ❌ Debug log
```
**Dampak:**
- Performance impact (I/O operation)
- Security risk (expose API structure)
- Log pollution di production
- Unprofessional
**Rekomendasi:** Remove atau gunakan conditional logging:
```typescript
// ✅ Remove completely (recommended)
// Atau gunakan conditional logging
if (process.env.NODE_ENV === 'development') {
console.log("🌐 Fetching:", url);
console.log("📦 Response:", res);
}
```
**Priority:** 🔴 Medium
**Effort:** Low
---
### **🟡 MEDIUM**
#### **4. Type Safety - Any Usage di Edit Methods**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/apbdes.ts`
**Masalah:**
```typescript
// Line ~215
const res = await (ApiFetch.api.landingpage.apbdes as any)[id].get();
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Line ~245
const res = await (ApiFetch.api.landingpage.apbdes as any)[this.id].put(requestData);
// ^^^^^^^^^^^^^^^^^^^^^^^^^^
```
**Dampak:**
- Type safety hilang
- Autocomplete tidak bekerja
- Runtime errors tidak terdeteksi di compile time
- Refactoring sulit
**Rekomendasi:** Define typed API client:
```typescript
// Define proper types
interface APBDesAPI {
[id: string]: {
get: () => Promise<ApiResponse<APBDesData>>;
put: (data: APBDesForm) => Promise<ApiResponse<APBDesData>>;
};
del: {
[id: string]: {
delete: () => Promise<ApiResponse<void>>;
};
};
}
// Use typed client
const res = await ApiFetch.api.landingpage.apbdes[id].get();
// No more `as any`
```
**Priority:** 🟡 Medium
**Effort:** Medium (perlu setup types)
---
#### **5. Edit Form - Items Tidak Di-Restore Saat Reset**
**Lokasi:** `src/app/admin/(dashboard)/landing-page/apbdes/[id]/edit/page.tsx`
**Masalah:**
```typescript
// Line ~270-285
const handleReset = () => {
apbdesState.edit.form = {
tahun: originalData.tahun,
imageId: originalData.imageId,
fileId: originalData.fileId,
items: [...apbdesState.edit.form.items], // ⚠️ Keep MODIFIED items
};
// ...
};
```
**Issue:** Saat reset, items yang sudah di-modified (added/removed) tidak di-restore ke original. User expect reset = kembali ke data awal sepenuhnya.
**Rekomendasi:** Save original items dan restore saat reset:
```typescript
// Add to originalData state
const [originalData, setOriginalData] = useState({
tahun: 0,
imageId: '',
fileId: '',
imageUrl: '',
fileUrl: '',
items: [] as ItemForm[], // ✅ Save original items
});
// Load data
setOriginalData({
tahun: data.tahun || new Date().getFullYear(),
imageId: data.imageId || '',
fileId: data.fileId || '',
imageUrl: data.image?.link || '',
fileUrl: data.file?.link || '',
items: (data.items || []).map((item: any) => ({...})), // ✅ Save
});
// Reset
const handleReset = () => {
apbdesState.edit.form = {
tahun: originalData.tahun,
imageId: originalData.imageId,
fileId: originalData.fileId,
items: [...originalData.items], // ✅ Restore original items
};
// ...
};
```
**Priority:** 🟡 Medium
**Effort:** Low
---
#### **6. Zod Schema - Error Message Tidak Akurat**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/apbdes.ts`
**Masalah:**
```typescript
// Line ~10
const ApbdesItemSchema = z.object({
kode: z.string().min(1, "Kode wajib diisi"), // ✅ OK
uraian: z.string().min(1, "Uraian wajib diisi"), // ✅ OK
anggaran: z.number().min(0), // ⚠️ No custom message
realisasi: z.number().min(0), // ⚠️ No custom message
// ...
});
// Line ~17
const ApbdesFormSchema = z.object({
tahun: z.number().int().min(2000, "Tahun tidak valid"), // ⚠️ Generic
imageId: z.string().min(1, "Gambar wajib diunggah"), // ✅ OK
fileId: z.string().min(1, "File wajib diunggah"), // ✅ OK
items: z.array(ApbdesItemSchema).min(1, "Minimal ada 1 item"), // ✅ OK
});
```
**Dampak:** Error messages tidak konsisten, beberapa generic beberapa spesifik.
**Rekomendasi:** Standardisasi error messages:
```typescript
const ApbdesItemSchema = z.object({
kode: z.string().min(1, "Kode wajib diisi"),
uraian: z.string().min(1, "Uraian wajib diisi"),
anggaran: z.number().min(0, "Anggaran tidak boleh negatif"),
realisasi: z.number().min(0, "Realisasi tidak boleh negatif"),
selisih: z.number(),
persentase: z.number(),
level: z.number().int().min(1).max(3, "Level harus antara 1-3"),
tipe: z.enum(['pendapatan', 'belanja', 'pembiayaan']).nullable().optional(),
});
const ApbdesFormSchema = z.object({
tahun: z.number().int().min(2000, "Tahun minimal 2000").max(2100, "Tahun maksimal 2100"),
imageId: z.string().min(1, "Gambar wajib diunggah"),
fileId: z.string().min(1, "Dokumen wajib diunggah"),
items: z.array(ApbdesItemSchema).min(1, "Minimal ada 1 item"),
});
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **7. Console.log di Production (UI Components)**
**Lokasi:** Multiple UI files
**Masalah:**
```typescript
// edit/page.tsx - Line ~220
console.error('Update error:', err);
// create/page.tsx - Line ~120
console.error("Gagal submit:", error);
// detail/page.tsx - Line ~40
console.error('Error loading APBDes:', error);
```
**Rekomendasi:** Gunakan conditional logging:
```typescript
if (process.env.NODE_ENV === 'development') {
console.error('Update error:', err);
}
```
**Priority:** 🟡 Low
**Effort:** Low
---
### **🟢 LOW (Minor Polish)**
#### **8. Mobile Layout - Title Order Inconsistency**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~170 (Mobile)
<Title order={2} size="lg" lh={1.2}>
Daftar APBDes
</Title>
// Line ~70 (Desktop - inside Paper)
<Title order={4} size="lg" lh={1.2}>
Daftar APBDes
</Title>
```
**Issue:** Mobile pakai `order={2}` (heading besar), desktop `order={4}`. Seharusnya konsisten.
**Rekomendasi:** Samakan:
```typescript
<Title order={4} size="lg" lh={1.2}>
Daftar APBDes
</Title>
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **9. Search Placeholder Tidak Spesifik**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~30
<HeaderSearch
title="APBDes"
placeholder="Cari APBDes..." // ⚠️ Generic
// ...
/>
```
**Rekomendasi:** Lebih spesifik:
```typescript
placeholder='Cari nama atau tahun APBDes...'
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **10. Duplicate Comment**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/apbdes.ts`
**Masalah:**
```typescript
// Line ~28-29
// --- Helper: hitung selisih & persentase otomatis (opsional di frontend) ---
// --- Helper: hitung selisih & persentase otomatis (opsional di frontend) ---
// ^ Duplicate line
```
**Priority:** 🟢 Low
**Effort:** Low (remove duplicate)
---
#### **11. Inconsistent Button Label**
**Lokasi:** Multiple files
**Masalah:**
```typescript
// create/page.tsx - Line ~270
<Button ...>Simpan</Button>
// edit/page.tsx - Line ~340
<Button ...>Simpan Perubahan</Button>
// Should be consistent: "Simpan" atau "Simpan Perubahan"
```
**Rekomendasi:** Standardisasi:
```typescript
// Create: "Simpan"
// Edit: "Simpan Perubahan" (lebih descriptive untuk edit)
// OR both: "Simpan"
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **12. Missing Search Feature in Pagination**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~250
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10); // ⚠️ Missing search parameter
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
// ...
/>
```
**Issue:** Saat ganti page, search query hilang.
**Rekomendasi:** Include search:
```typescript
onChange={(newPage) => {
load(newPage, 10, debouncedSearch); // ✅ Include search
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **13. Edit Page - Document Max Size Inconsistency**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~230 (Image)
maxSize={5 * 1024 ** 2} // 5MB
// Line ~250 (Document)
maxSize={10 * 1024 ** 2} // 10MB
```
**Issue:** Create page maksimal 5MB untuk semua file, edit page 10MB untuk dokumen. Inconsistent.
**Rekomendasi:** Samakan (prefer 5MB untuk consistency):
```typescript
maxSize={5 * 1024 ** 2} // 5MB for both
```
**Priority:** 🟢 Low
**Effort:** Low
---
## 📋 RINGKASAN ACTION ITEMS
| Priority | Issue | Module | Impact | Effort | Status |
|----------|-------|--------|--------|--------|--------|
| 🔴 P0 | **Formula selisih SALAH** | State | **CRITICAL** | Low | **MUST FIX** |
| 🔴 P0 | Fetch method inconsistency | State | Medium | Medium | Perlu refactor |
| 🔴 P1 | Console.log debugging in production | State | Medium | Low | Should fix |
| 🟡 M | Type safety (any usage) | State | Low | Medium | Optional |
| 🟡 M | Items tidak di-restore saat reset | Edit UI | Medium | Low | Should fix |
| 🟡 M | Zod schema error messages | State | Low | Low | Optional |
| 🟢 L | Console.log in UI components | UI | Low | Low | Optional |
| 🟢 L | Mobile title order inconsistency | List UI | Low | Low | Optional |
| 🟢 L | Search placeholder tidak spesifik | List UI | Low | Low | Optional |
| 🟢 L | Duplicate comment | State | Low | Low | Optional |
| 🟢 L | Inconsistent button label | UI | Low | Low | Optional |
| 🟢 L | Missing search in pagination | List UI | Low | Low | Should fix |
| 🟢 L | Document max size inconsistency | Edit UI | Low | Low | Optional |
---
## ✅ KESIMPULAN
### **Overall Quality: 🟢 BAIK (7/10)**
**Strengths:**
1. UI/UX konsisten & responsive
2. File upload handling solid (dual upload: image + document)
3. Form validation dengan Zod schema
4. State management terstruktur (Valtio)
5. **Edit form reset sudah benar** (original data tracking untuk files)
6. Complex feature: hierarchical items dengan level & tipe
7. Schema design solid (proper relations, indexing, soft delete)
8. Modal konfirmasi hapus untuk user safety
**Critical Issues:**
1. **FORMULA SELISIH SALAH** - Data integrity issue (CRITICAL)
2. Fetch method pattern inconsistency (ApiFetch vs fetch manual)
3. Console.log debugging tertinggal di production
**Areas for Improvement:**
1. **Fix formula selisih** (realisasi - anggaran, bukan anggaran - realisasi)
2. **Refactor fetch methods** untuk gunakan ApiFetch consistently
3. **Remove console.log** debugging dari production code
4. **Save & restore original items** saat reset form di edit page
5. **Improve type safety** dengan remove `as any` usage
6. **Standardisasi error messages** di Zod schema
**Recommended Next Steps:**
1. **🔴 CRITICAL: Fix formula selisih** di state (line 36) - 5 menit fix
2. **🔴 HIGH:** Refactor findUnique ke ApiFetch - 30 menit
3. **🔴 HIGH:** Remove console.log debugging - 10 menit
4. **🟡 MEDIUM:** Save & restore original items - 30 menit
5. **🟡 MEDIUM:** Improve type safety - 1-2 jam
6. **🟢 LOW:** Polish minor issues - 30 menit
---
## 📈 COMPARISON WITH OTHER MODULES
| Aspect | Profil | Desa Anti Korupsi | SDGs Desa | APBDes | Notes |
|--------|--------|-------------------|-----------|--------|-------|
| Fetch Pattern | Mixed | Mixed | Mixed | Mixed | All perlu refactor |
| Loading State | Some missing | Some missing | Missing | Good | APBDes paling baik |
| Edit Form Reset | Good | Good | Good | Good | All consistent |
| Type Safety | Some `any` | Some `any` | Some `any` | Some `any` | Same issue |
| File Upload | Images | Documents | Images | **Dual** | APBDes paling complex |
| Error Handling | Good | Good (better) | Good | Good | Consistent |
| Schema Design | Good | deletedAt issue | deletedAt issue | **Best** | APBDes paling solid |
| **Data Integrity** | Good | Good | Good | **Formula WRONG** | **APBDes CRITICAL issue** |
| Complexity | Low | Medium | Low | **High** | APBDes items hierarchy |
---
## 🎯 UNIQUE FEATURES OF APBDes MODULE
**Most Complex Module So Far:**
1. **Dual file upload** (gambar + dokumen) - unique to APBDes
2. **Hierarchical items** dengan 3 level - unique to APBDes
3. **Auto-calculation** (selisih & persentase) - unique to APBDes
4. **Type classification** (pendapatan, belanja, pembiayaan) - unique to APBDes
5. **Dynamic item management** (add/remove) - unique to APBDes
**Best Practices:**
1. Schema design paling solid (deletedAt nullable, proper indexing)
2. Edit form reset paling comprehensive (preserve files & items)
3. Validation paling thorough (Zod schema untuk items)
**Biggest Issue:**
1. **Formula selisih SALAH** - critical data integrity issue yang tidak ada di modul lain
---
**Catatan:** Secara keseluruhan, modul APBDes adalah **paling complex dan paling solid** dibanding modul lain yang sudah di-QC. Namun, ada **1 CRITICAL BUG** (formula selisih) yang harus **SEGERA DIPERBAIKI** karena menyangkut integritas data. Setelah fix critical issue, module ini production-ready dengan beberapa improvement minor yang bisa dilakukan secara incremental.
**Priority Action:**
```
🔴 FIX INI SEKARANG JUGA (5 MENIT):
File: src/app/admin/(dashboard)/_state/landing-page/apbdes.ts
Line: 36
Change: const selisih = anggaran - realisasi;
To: const selisih = realisasi - anggaran;
```

View File

@@ -0,0 +1,639 @@
# QC Summary - Desa Anti Korupsi Module
**Scope:** List Desa Anti Korupsi, Kategori Desa Anti Korupsi
**Date:** 2026-02-23
**Status:** ✅ Secara umum sudah baik, ada beberapa improvement yang diperlukan
---
## 📊 OVERVIEW
| Module | Schema | API | UI Admin | State Management | Overall |
|--------|--------|-----|----------|-----------------|---------|
| List Desa Anti Korupsi | ✅ Baik | ✅ Baik | ✅ Baik | ⚠️ Ada issue | 🟡 Perlu fix |
| Kategori Desa Anti Korupsi | ✅ Baik | ✅ Baik | ✅ Baik | ⚠️ Ada issue | 🟡 Perlu fix |
---
## ✅ YANG SUDAH BAIK (COMMON)
### **1. UI/UX Consistency**
- ✅ Responsive design (desktop table + mobile cards)
- ✅ Loading states dengan Skeleton
- ✅ Search dengan debounce (1000ms)
- ✅ Pagination konsisten
- ✅ Empty state handling yang informatif
- ✅ Modal konfirmasi hapus
### **2. File Upload Handling** (Desa Anti Korupsi)
- ✅ Dropzone dengan preview iframe untuk dokumen
- ✅ Validasi format dokumen (PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX)
- ✅ Validasi ukuran file (max 5MB)
- ✅ Tombol hapus preview (IconX di pojok kanan atas)
- ✅ URL.createObjectURL untuk preview lokal
### **3. Form Validation**
- ✅ Zod schema untuk validasi typed
- ✅ isFormValid() check sebelum submit
- ✅ Error toast dengan pesan spesifik
- ✅ Button disabled saat invalid/loading
### **4. CRUD Operations**
- ✅ Create dengan upload file
- ✅ FindMany dengan pagination & search
- ✅ FindUnique untuk detail
- ✅ Delete dengan soft delete
- ✅ Update dengan file replacement
### **5. Error Handling**
- ✅ Try-catch di semua async operation
- ✅ Toast error dengan pesan user-friendly
- ✅ Console.error untuk debugging
- ✅ Response cloning untuk error handling yang lebih baik (di kategori update)
---
## ⚠️ ISSUES & SARAN PERBAIKAN
### **🔴 CRITICAL**
#### **1. Edit Form - File Lama Tidak Tersimpan Saat Reset**
**Lokasi:** `src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/[id]/edit/page.tsx`
**Masalah:**
```typescript
// Line ~70 - Load data
const data = await desaAntiKorupsiState.edit.load(id);
setFormData({
name: data.name,
deskripsi: data.deskripsi,
kategoriId: data.kategoriId,
fileId: data.fileId, // ✅ Sudah benar
});
setOriginalData({
name: data.name,
deskripsi: data.deskripsi,
kategoriId: data.kategoriId,
fileId: data.fileId,
fileUrl: data.file?.link || "", // ✅ Sudah benar
});
// Line ~130 - Handle reset
const handleResetForm = () => {
setFormData({
name: originalData.name,
deskripsi: originalData.deskripsi,
kategoriId: originalData.kategoriId,
fileId: originalData.fileId, // ✅ Sudah benar
});
setPreviewFile(originalData.fileUrl || null); // ✅ Sudah benar
setFile(null); // ✅ Sudah benar
};
```
**Status:****SUDAH BENAR** - Original data tracking sudah implementasi dengan baik.
**Verdict:** Tidak ada action needed.
---
#### **2. State Management - Inconsistency Fetch Pattern**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi.ts`
**Masalah:** Ada 2 pattern berbeda untuk fetch API:
```typescript
// ❌ Pattern 1: ApiFetch (create operations)
const res = await ApiFetch.api.landingpage.desaantikorupsi["create"].post({...});
// ❌ Pattern 2: fetch manual (findUnique, edit, delete)
const res = await fetch(`/api/landingpage/desaantikorupsi/${id}`);
const response = await fetch(`/api/landingpage/desaantikorupsi/del/${id}`, {
method: "DELETE",
headers: { "Content-Type": "application/json" },
});
```
**Dampak:**
- Code consistency buruk
- Sulit maintenance
- Type safety tidak konsisten
- Duplikasi logic error handling
**Rekomendasi:** Gunakan **ApiFetch** untuk semua operasi:
```typescript
// ✅ Unified pattern
const res = await ApiFetch.api.landingpage.desaantikorupsi["create"].post(data);
const res = await ApiFetch.api.landingpage.desaantikorupsi[id].get();
const res = await ApiFetch.api.landingpage.desaantikorupsi[id].put(data);
const res = await ApiFetch.api.landingpage.desaantikorupsi["del"][id].delete();
```
**Priority:** 🔴 High
**Effort:** Medium (refactor di semua state methods)
---
#### **3. findUnique State - Tidak Ada Loading State Management**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi.ts`
**Masalah:**
```typescript
// Line ~97 - desaAntikorupsi.findUnique.load()
async load(id: string) {
try {
const res = await fetch(`/api/landingpage/desaantikorupsi/${id}`);
if (res.ok) {
const data = await res.json();
desaAntikorupsi.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
desaAntikorupsi.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
desaAntikorupsi.findUnique.data = null;
}
// ❌ MISSING: finally block untuk stop loading
}
```
**Dampak:** UI mungkin stuck di loading state jika ada error.
**Rekomendasi:** Tambahkan loading state dan finally block:
```typescript
async load(id: string) {
try {
desaAntikorupsi.findUnique.loading = true; // ✅ Start loading
const res = await fetch(`/api/landingpage/desaantikorupsi/${id}`);
if (res.ok) {
const data = await res.json();
desaAntikorupsi.findUnique.data = data.data ?? null;
}
} catch (error) {
console.error("Error:", error);
} finally {
desaAntikorupsi.findUnique.loading = false; // ✅ Stop loading
}
}
```
**Priority:** 🔴 Medium
**Effort:** Low
---
#### **4. Kategori Edit - Response Cloning Overkill**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi.ts`
**Masalah:**
```typescript
// Line ~370 - kategoriDesaAntiKorupsi.edit.update()
async update() {
// ...
const response = await fetch(...);
// Clone the response to avoid 'body already read' error
const responseClone = response.clone();
try {
const result = await response.json();
// ...
} catch (error) {
// If JSON parsing fails, try to get the response text
try {
const text = await responseClone.text();
console.error("Error response text:", text);
throw new Error(`Gagal memproses respons dari server: ${text}`);
} catch (textError) {
// ...
}
}
}
```
**Analysis:**
-**GOOD:** Error handling sangat thorough
- ⚠️ **OVERKILL:** Untuk production API yang stable, ini berlebihan
- ⚠️ **INCONSISTENT:** Module lain tidak punya error handling se-detail ini
**Rekomendasi:** Simplify untuk consistency:
```typescript
async update() {
try {
kategoriDesaAntiKorupsi.edit.loading = true;
const response = await fetch(`/api/landingpage/kategoridak/${this.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: this.form.name }),
});
const result = await response.json();
if (!response.ok) {
throw new Error(result?.message || `HTTP ${response.status}`);
}
if (result.success) {
toast.success(result.message || "Berhasil update");
await kategoriDesaAntiKorupsi.findMany.load();
return true;
}
throw new Error(result.message || "Gagal update");
} catch (error) {
console.error("Error updating:", error);
toast.error(error instanceof Error ? error.message : "Gagal update");
return false;
} finally {
kategoriDesaAntiKorupsi.edit.loading = false;
}
}
```
**Priority:** 🟡 Low
**Effort:** Low
---
### **🟡 MEDIUM**
#### **5. HTML Injection Risk - dangerouslySetInnerHTML**
**Lokasi:**
- `list-desa-anti-korupsi/[id]/page.tsx` (line ~105)
- `list-desa-anti-korupsi/create/page.tsx` (CreateEditor component)
- `list-desa-anti-korupsi/[id]/edit/page.tsx` (EditEditor component)
**Masalah:**
```typescript
// ❌ Direct HTML render tanpa sanitization
<Box
dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
style={{ wordBreak: "break-word", whiteSpace: "normal", lineHeight: 1.6 }}
/>
```
**Risk:**
- XSS attack jika admin input script malicious
- Bisa inject iframe, script tag, dll
- Security vulnerability
**Rekomendasi:** Gunakan DOMPurify atau library sanitization:
```typescript
import DOMPurify from 'dompurify';
// Sanitize sebelum render
const sanitizedHtml = DOMPurify.sanitize(data.deskripsi);
<Box
dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
// ...
/>
```
Atau validasi di backend untuk whitelist tag HTML yang diperbolehkan (hanya `<p>`, `<ul>`, `<li>`, `<strong>`, dll).
**Priority:** 🟡 Medium (**Security concern**)
**Effort:** Low
---
#### **6. Type Safety - Any Usage**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi.ts`
**Masalah:**
```typescript
// Line ~60
data: null as any[] | null, // ❌ Using 'any'
// Line ~280
data: null as any[] | null, // ❌ Using 'any'
// Line ~97
data: null as Prisma.DesaAntiKorupsiGetPayload<{...}> | null, // ✅ Typed
// Line ~310
data: null as Prisma.KategoriDesaAntiKorupsiGetPayload<{...}> | null, // ✅ Typed
```
**Rekomendasi:** Gunakan typed data consistently:
```typescript
// desaAntikorupsi.findMany
data: null as Prisma.DesaAntiKorupsiGetPayload<{
include: { kategori: true; file: true };
}>[] | null,
// kategoriDesaAntiKorupsi.findMany
data: null as Prisma.KategoriDesaAntiKorupsiGetPayload<{}>[] | null,
```
**Priority:** 🟡 Medium
**Effort:** Medium (perlu update semua reference)
---
#### **7. Console.log di Production**
**Lokasi:** Multiple places di state file
**Masalah:**
```typescript
// Line ~50
console.log(error);
toast.error("Gagal menambahkan data");
// Line ~85
console.error("Failed to load media sosial:", res.data?.message);
// Line ~91
console.error("Error loading media sosial:", error);
// Line ~110
console.error("Failed to fetch data", res.status, res.statusText);
// Line ~114
console.error("Error fetching data:", error);
// ... dan banyak lagi
```
**Rekomendasi:** Gunakan conditional logging:
```typescript
if (process.env.NODE_ENV === 'development') {
console.error("Error:", error);
}
```
Atau gunakan logging library (winston, pino, dll) dengan levels yang jelas.
**Priority:** 🟡 Low
**Effort:** Low
---
#### **8. Error Message Tidak Konsisten**
**Lokasi:** Multiple places
**Masalah:**
```typescript
// Create - Line ~40
return toast.error("Gagal menambahkan data");
// Create - Line ~42
toast.error("Gagal menambahkan data");
// Delete - Line ~140
toast.error("Terjadi kesalahan saat menghapus desa anti korupsi");
// Edit - Line ~190
toast.error("Gagal memuat data");
// Edit update - Line ~240
toast.error("Gagal mengupdate desa anti korupsi");
```
**Rekomendasi:** Standardisasi error messages:
```typescript
// Pattern: "[Action] [resource] gagal"
toast.error("Menambahkan data gagal");
toast.error("Menghapus data gagal");
toast.error("Memuat data gagal");
toast.error("Memperbarui data gagal");
// Atau lebih spesifik dengan context
toast.error("Gagal menambahkan data Desa Anti Korupsi");
toast.error("Gagal menghapus Kategori Desa Anti Korupsi");
```
**Priority:** 🟢 Low
**Effort:** Low
---
### **🟢 LOW (Minor Polish)**
#### **9. Placeholder Search Tidak Spesifik**
**Lokasi:**
- `list-desa-anti-korupsi/page.tsx`: `placeholder="Cari nama program atau kategori..."` ✅ Spesifik
- `kategori-desa-anti-korupsi/page.tsx`: `placeholder='pencarian'` ❌ Terlalu generic
**Rekomendasi:**
```typescript
// Kategori page
placeholder="Cari nama kategori..."
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **10. Alert vs Toast**
**Lokasi:** `kategori-desa-anti-korupsi/create/page.tsx`
**Masalah:**
```typescript
// Line ~37
if (!stateKategori.create.form.name) {
return alert('Nama kategori harus diisi'); // ❌ Using alert()
}
```
**Rekomendasi:** Gunakan toast untuk consistency:
```typescript
if (!stateKategori.create.form.name) {
return toast.warn('Nama kategori harus diisi'); // ✅ Using toast
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **11. Component Name Mismatch**
**Lokasi:** `list-desa-anti-korupsi/[id]/page.tsx`
**Masalah:**
```typescript
// Line ~17
export default function DetailKegiatanDesa() { // ❌ Wrong name
// ...
}
```
**Rekomendasi:** Rename ke yang sesuai:
```typescript
export default function DetailDesaAntiKorupsi() { // ✅ Correct name
// ...
}
```
**Priority:** 🟢 Low
**Effort:** Low (hanya rename)
---
#### **12. Duplicate Error Logging**
**Lokasi:** `list-desa-anti-korupsi/[id]/edit/page.tsx`
**Masalah:**
```typescript
// Line ~87
} catch (err) {
console.error(err); // ❌ Duplicate logging
toast.error('Gagal memuat data Desa Anti Korupsi');
}
```
**Rekomendasi:** Cukup satu logging yang informatif:
```typescript
} catch (err) {
console.error('Failed to load Desa Anti Korupsi:', err);
toast.error('Gagal memuat data Desa Anti Korupsi');
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **13. Comment Typo**
**Lokasi:** `kategori-desa-anti-korupsi/[id]/edit/page.tsx`
**Masalah:**
```typescript
// Line ~20
// 🧠 Ambil proxy asli (bisa ditulis) & snapshot (buat render)
const stateKategori = korupsiState.kategoriDesaAntiKorupsi;
const snapshotKategori = useProxy(stateKategori);
// ❌ snapshotKategori declared but never used
```
**Rekomendasi:** Remove unused variable:
```typescript
const stateKategori = korupsiState.kategoriDesaAntiKorupsi;
// const snapshotKategori = useProxy(stateKategori); // ❌ Remove
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **14. Schema - deletedAt Default Value**
**Lokasi:** `prisma/schema.prisma`
**Masalah:**
```prisma
model DesaAntiKorupsi {
// ...
deletedAt DateTime @default(now()) // ❌ Always has default value
isActive Boolean @default(true)
}
```
**Issue:** `deletedAt @default(now())` berarti setiap record baru langsung punya `deletedAt` value, yang bisa membingungkan untuk soft delete logic.
**Rekomendasi:**
```prisma
model DesaAntiKorupsi {
// ...
deletedAt DateTime? @default(null) // ✅ Nullable, null = not deleted
isActive Boolean @default(true)
}
```
**Priority:** 🟢 Medium (potential logic issue)
**Effort:** Medium (perlu migration)
---
## 📋 RINGKASAN ACTION ITEMS
| Priority | Issue | Module | Impact | Effort | Status |
|----------|-------|--------|--------|--------|--------|
| 🔴 P0 | Fetch method inconsistency | State | Medium | Medium | Perlu refactor |
| 🔴 P0 | Missing loading state in findUnique | State | Medium | Low | Perlu fix |
| 🟡 M | HTML injection risk | UI | **High (Security)** | Low | **Should fix** |
| 🟡 M | Type safety (any usage) | State | Low | Medium | Optional |
| 🟡 M | Response cloning overkill | State (Kategori) | Low | Low | Optional |
| 🟢 L | Console.log in production | State | Low | Low | Optional |
| 🟢 L | Error message inconsistency | State | Low | Low | Optional |
| 🟢 L | Placeholder tidak spesifik | Kategori UI | Low | Low | Optional |
| 🟢 L | Alert vs Toast | Kategori Create | Low | Low | Optional |
| 🟢 L | Component name mismatch | Detail page | Low | Low | Optional |
| 🟢 L | Duplicate error logging | Edit page | Low | Low | Optional |
| 🟢 L | Unused variable | Kategori Edit | Low | Low | Optional |
| 🟢 M | deletedAt default value | Schema | Medium | Medium | Should fix |
---
## ✅ KESIMPULAN
### **Overall Quality: 🟢 BAIK (7.5/10)**
**Strengths:**
1. ✅ UI/UX konsisten & responsive
2. ✅ File upload handling solid (iframe preview untuk dokumen)
3. ✅ Form validation dengan Zod schema
4. ✅ State management terstruktur (Valtio)
5. ✅ Error handling comprehensive (terutama di kategori update)
6.**Edit form reset sudah benar** (original data tracking)
7. ✅ Modal konfirmasi hapus untuk user safety
**Areas for Improvement:**
1. ⚠️ **Security:** HTML injection di deskripsi (prioritas)
2. ⚠️ **Consistency:** Fetch method pattern (ApiFetch vs fetch manual)
3. ⚠️ **Loading States:** findUnique tidak ada loading state management
4. ⚠️ **Type Safety:** Reduce `any` usage, gunakan Prisma types
5. ⚠️ **Schema:** deletedAt default value bisa menyebabkan logic issue
**Recommended Next Steps:**
1. **Fix HTML injection** dengan DOMPurify atau backend validation
2. **Refactor fetch methods** untuk gunakan ApiFetch consistently
3. **Add loading state** di findUnique operations
4. **Fix deletedAt schema** untuk soft delete yang benar
5. **Optional:** Improve type safety dengan remove `any`
---
## 📈 COMPARISON WITH OTHER MODULES
| Aspect | Profil Module | Desa Anti Korupsi | Notes |
|--------|--------------|-------------------|-------|
| Fetch Pattern | ⚠️ Mixed | ⚠️ Mixed | Both perlu refactor |
| Loading State | ⚠️ Some missing | ⚠️ Some missing | Same issue |
| Edit Form Reset | ✅ Good | ✅ Good | Consistent |
| Type Safety | ⚠️ Some `any` | ⚠️ Some `any` | Same issue |
| HTML Injection | ⚠️ Present | ⚠️ Present | Both need fix |
| File Upload | ✅ Images | ✅ Documents | Different use case |
| Error Handling | ✅ Good | ✅ Good (better) | DAK more thorough |
---
**Catatan:** Secara keseluruhan, modul Desa Anti Korupsi sudah **production-ready** dengan beberapa improvements yang bisa dilakukan secara incremental. Module ini memiliki error handling yang lebih thorough dibanding module Profil, terutama di kategori update operation.

View File

@@ -0,0 +1,875 @@
# QC Summary - Prestasi Desa Module
**Scope:** List Prestasi Desa, Kategori Prestasi Desa, Create, Edit, Detail
**Date:** 2026-02-23
**Status:** ✅ Secara umum sudah baik, ada beberapa improvement yang diperlukan
---
## 📊 OVERVIEW
| Aspect | Schema | API | UI Admin | State Management | Overall |
|--------|--------|-----|----------|-----------------|---------|
| Prestasi Desa | ⚠️ Ada issue | ✅ Baik | ✅ Baik | ⚠️ Ada issue | 🟡 Perlu fix |
| Kategori Prestasi | ⚠️ Ada issue | ✅ Baik | ✅ Baik | ⚠️ Ada issue | 🟡 Perlu fix |
---
## ✅ YANG SUDAH BAIK
### **1. UI/UX Consistency**
- ✅ Responsive design (desktop table + mobile cards)
- ✅ Loading states dengan Skeleton
- ✅ Search dengan debounce (1000ms)
- ✅ Pagination konsisten
- ✅ Empty state handling yang informatif
- ✅ Modal konfirmasi hapus
### **2. File Upload Handling**
- ✅ Dropzone dengan preview image
- ✅ Validasi format gambar (JPEG, JPG, PNG, WEBP)
- ✅ Validasi ukuran file (max 5MB)
- ✅ Tombol hapus preview (IconX di pojok kanan atas)
- ✅ URL.createObjectURL untuk preview lokal
- ✅ Preview dengan max height yang proper
### **3. Form Validation**
- ✅ Zod schema untuk validasi typed
- ✅ isFormValid() check sebelum submit
- ✅ Error toast dengan pesan spesifik
- ✅ Button disabled saat invalid/loading
### **4. CRUD Operations**
- ✅ Create dengan upload file
- ✅ FindMany dengan pagination & search
- ✅ FindUnique untuk detail
- ✅ Delete dengan hard delete (via Prisma)
- ✅ Update dengan file replacement
### **5. Edit Form - Original Data Tracking**
- ✅ Original data state untuk reset form
- ✅ Load data existing dengan benar
- ✅ Preview image dari data lama
- ✅ Reset form mengembalikan ke data original
**Code Example (✅ GOOD):**
```typescript
// edit/page.tsx - Line ~70-95
const data = await editState.edit.load(id);
setOriginalData({
name: data.name,
deskripsi: data.deskripsi,
kategoriId: data.kategoriId,
imageId: data.imageId,
imageUrl: data.image?.link || "",
});
setFormData({
name: data.name,
deskripsi: data.deskripsi,
kategoriId: data.kategoriId,
imageId: data.imageId,
});
if (data.image?.link) setPreviewFile(data.image.link);
// Line ~105 - Handle reset
const handleResetForm = () => {
setFormData({
name: originalData.name,
deskripsi: originalData.deskripsi,
kategoriId: originalData.kategoriId,
imageId: originalData.imageId,
});
setPreviewFile(originalData.imageUrl || null);
setFile(null);
toast.info("Form dikembalikan ke data awal");
};
```
**Verdict:****SUDAH BENAR** - Original data tracking sudah implementasi dengan baik.
---
### **6. State Management - Good Practices**
- ✅ Proper typing dengan Prisma types
- ✅ Loading state management dengan finally block
- ✅ Error handling yang comprehensive
- ✅ Reset function untuk cleanup
**Code Example (✅ GOOD):**
```typescript
// state file - Line ~70-95
load: async (page = 1, limit = 10, search = "") => {
prestasiDesa.findMany.loading = true; // ✅ Start loading
prestasiDesa.findMany.page = page;
prestasiDesa.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.landingpage.prestasidesa["find-many"].get({ query });
if (res.status === 200 && res.data?.success) {
prestasiDesa.findMany.data = res.data.data ?? [];
prestasiDesa.findMany.totalPages = res.data.totalPages ?? 1;
} else {
prestasiDesa.findMany.data = [];
prestasiDesa.findMany.totalPages = 1;
}
} catch (err) {
console.error("Gagal fetch prestasi desa paginated:", err);
prestasiDesa.findMany.data = [];
prestasiDesa.findMany.totalPages = 1;
} finally {
prestasiDesa.findMany.loading = false; // ✅ Stop loading
}
};
```
**Verdict:****SUDAH BENAR** - Loading state management sudah proper.
---
## ⚠️ ISSUES & SARAN PERBAIKAN
### **🔴 CRITICAL**
#### **1. Schema - deletedAt Default Value SALAH**
**Lokasi:** `prisma/schema.prisma` (line 239-240)
**Masalah:**
```prisma
model PrestasiDesa {
// ...
deletedAt DateTime @default(now()) // ❌ SALAH - selalu punya default value
isActive Boolean @default(true)
}
model KategoriPrestasiDesa {
// ...
deletedAt DateTime @default(now()) // ❌ SALAH - selalu punya default value
isActive Boolean @default(true)
}
```
**Dampak:**
- **LOGIC ERROR!** Setiap record baru langsung punya `deletedAt` value (timestamp creation)
- Soft delete tidak berfungsi dengan benar
- Query dengan `where: { deletedAt: null }` tidak akan pernah return data
- Data yang "dihapus" vs data "aktif" tidak bisa dibedakan
**Contoh Issue:**
```prisma
// Record baru dibuat
CREATE PrestasiDesa {
name: "Prestasi 1",
// deletedAt otomatis ter-set ke now() ❌
// isActive: true ✅
}
// Query untuk data aktif (seharusnya return data ini)
prisma.prestasiDesa.findMany({
where: { deletedAt: null, isActive: true }
})
// ❌ Return kosong! Karena deletedAt sudah ter-set
```
**Rekomendasi:** Fix schema:
```prisma
model PrestasiDesa {
// ...
deletedAt DateTime? @default(null) // ✅ Nullable, null = not deleted
isActive Boolean @default(true)
}
model KategoriPrestasiDesa {
// ...
deletedAt DateTime? @default(null) // ✅ Nullable, null = not deleted
isActive Boolean @default(true)
}
```
**Priority:** 🔴 **CRITICAL**
**Effort:** Medium (perlu migration)
**Impact:** **HIGH** (data integrity & soft delete logic)
---
#### **2. State Management - Inconsistency Fetch Pattern**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/prestasi-desa.ts`
**Masalah:** Ada 2 pattern berbeda untuk fetch API:
```typescript
// ❌ Pattern 1: ApiFetch (create, findMany)
const res = await ApiFetch.api.landingpage.prestasidesa["create"].post({...});
const res = await ApiFetch.api.landingpage.prestasidesa["find-many"].get({query});
// ❌ Pattern 2: fetch manual (findUnique, edit, delete)
const res = await fetch(`/api/landingpage/prestasidesa/${id}`);
const response = await fetch(`/api/landingpage/prestasidesa/del/${id}`, {
method: "DELETE",
headers: { "Content-Type": "application/json" },
});
```
**Dampak:**
- Code consistency buruk
- Sulit maintenance
- Type safety tidak konsisten
- Duplikasi logic error handling
**Rekomendasi:** Gunakan **ApiFetch** untuk semua operasi:
```typescript
// ✅ Unified pattern
async load(id: string) {
try {
prestasiDesa.edit.loading = true;
const res = await ApiFetch.api.landingpage.prestasidesa[id].get();
if (res.data?.success) {
const data = res.data.data;
this.id = data.id;
this.form = {
name: data.name,
deskripsi: data.deskripsi,
imageId: data.imageId,
kategoriId: data.kategoriId,
};
return data;
} else {
throw new Error(res.data?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading prestasi desa:", error);
toast.error(error instanceof Error ? error.message : "Gagal memuat data");
return null;
} finally {
prestasiDesa.edit.loading = false;
}
}
```
**Priority:** 🔴 High
**Effort:** Medium (refactor di findUnique, edit, delete methods)
---
#### **3. findUnique State - Tidak Ada Loading State Management**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/prestasi-desa.ts`
**Masalah:**
```typescript
// Line ~110 - prestasiDesa.findUnique.load()
async load(id: string) {
try {
const res = await fetch(`/api/landingpage/prestasidesa/${id}`);
if (res.ok) {
const data = await res.json();
prestasiDesa.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
prestasiDesa.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
prestasiDesa.findUnique.data = null;
}
// ❌ MISSING: finally block untuk stop loading
// ❌ MISSING: loading state initialization
}
```
**Dampak:** UI mungkin stuck di loading state jika ada error.
**Rekomendasi:** Tambahkan loading state dan finally block:
```typescript
async load(id: string) {
try {
prestasiDesa.findUnique.loading = true; // ✅ Start loading
const res = await fetch(`/api/landingpage/prestasidesa/${id}`);
if (res.ok) {
const data = await res.json();
prestasiDesa.findUnique.data = data.data ?? null;
}
} catch (error) {
console.error("Error:", error);
} finally {
prestasiDesa.findUnique.loading = false; // ✅ Stop loading
}
}
```
**Priority:** 🔴 Medium
**Effort:** Low
---
### **🟡 MEDIUM**
#### **4. HTML Injection Risk - dangerouslySetInnerHTML**
**Lokasi:**
- `list-prestasi-desa/page.tsx` (line ~90, 145)
- `list-prestasi-desa/[id]/page.tsx` (line ~85)
- `list-prestasi-desa/create/page.tsx` (CreateEditor component)
- `list-prestasi-desa/[id]/edit/page.tsx` (EditEditor component)
**Masalah:**
```typescript
// ❌ Direct HTML render tanpa sanitization
<Text
lineClamp={1}
fz="md"
c="dimmed"
lh={1.5}
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
/>
```
**Risk:**
- XSS attack jika admin input script malicious
- Bisa inject iframe, script tag, dll
- Security vulnerability
**Rekomendasi:** Gunakan DOMPurify atau library sanitization:
```typescript
import DOMPurify from 'dompurify';
// Sanitize sebelum render
const sanitizedHtml = DOMPurify.sanitize(item.deskripsi);
<Text
dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
// ...
/>
```
Atau validasi di backend untuk whitelist tag HTML yang diperbolehkan (hanya `<p>`, `<ul>`, `<li>`, `<strong>`, dll).
**Priority:** 🟡 Medium (**Security concern**)
**Effort:** Low
---
#### **5. Type Safety - Any Usage**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/prestasi-desa.ts`
**Masalah:**
```typescript
// Line ~73
const query: any = { page, limit }; // ❌ Using 'any'
if (search) query.search = search;
// Line ~270
const query: any = { page, limit }; // ❌ Using 'any'
if (search) query.search = search;
```
**Rekomendasi:** Gunakan typed query:
```typescript
// Define type
interface FindManyQuery {
page: number | string;
limit: number | string;
search?: string;
}
// Use typed query
const query: FindManyQuery = { page, limit };
if (search) query.search = search;
```
**Priority:** 🟡 Medium
**Effort:** Low
---
#### **6. Console.log di Production**
**Lokasi:** Multiple places di state file
**Masalah:**
```typescript
// Line ~48
console.log(error);
toast.error("Gagal menambahkan data");
// Line ~120
console.error("Failed to fetch data", res.status, res.statusText);
// Line ~124
console.error("Error fetching data:", error);
// Line ~300
console.log(error);
toast.error("Gagal menambahkan data");
// ... dan banyak lagi
```
**Rekomendasi:** Gunakan conditional logging:
```typescript
if (process.env.NODE_ENV === 'development') {
console.error("Error:", error);
}
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **7. Error Message Tidak Konsisten**
**Lokasi:** Multiple places
**Masalah:**
```typescript
// Create - Line ~46
return toast.error("Gagal menambahkan data");
// Create - Line ~48
toast.error("Gagal menambahkan data");
// Delete - Line ~150
toast.error("Terjadi kesalahan saat menghapus prestasi desa");
// Edit - Line ~200
toast.error("Gagal memuat data");
// Edit update - Line ~240
toast.error("Gagal mengupdate prestasi desa");
// Toast success - Line ~235
toast.success("Berhasil update prestasi desa");
```
**Issue:**
- Inconsistent capitalization
- Mixed patterns ("Gagal menambahkan" vs "Terjadi kesalahan")
- Generic messages
**Rekomendasi:** Standardisasi error messages:
```typescript
// Pattern: "[Action] [resource] gagal" dengan proper casing
toast.error("Menambahkan data Prestasi Desa gagal");
toast.error("Menghapus data Prestasi Desa gagal");
toast.error("Memuat data Prestasi Desa gagal");
toast.error("Memperbarui data Prestasi Desa gagal");
// Atau lebih spesifik dengan context
toast.error("Gagal menambahkan data Prestasi Desa");
toast.error("Gagal menghapus Prestasi Desa");
toast.success("Berhasil memperbarui Prestasi Desa");
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **8. Zod Schema - Error Message Tidak Akurat**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/prestasi-desa.ts`
**Masalah:**
```typescript
// Line ~8
const templateprestasiDesaForm = z.object({
name: z.string().min(1, "Judul minimal 1 karakter"), // ⚠️ "Judul" instead of "Nama"
deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"), // ✅ OK
imageId: z.string().min(1, "File minimal 1"), // ⚠️ Generic
kategoriId: z.string().min(1, "Kategori minimal 1 karakter"), // ⚠️ "Kategori" instead of "Kategori Prestasi"
});
```
**Dampak:** User confusion saat validasi error muncul.
**Rekomendasi:** Fix error messages:
```typescript
const templateprestasiDesaForm = z.object({
name: z.string().min(1, "Nama prestasi wajib diisi"),
deskripsi: z.string().min(1, "Deskripsi prestasi wajib diisi"),
imageId: z.string().min(1, "Gambar prestasi wajib diunggah"),
kategoriId: z.string().min(1, "Kategori prestasi wajib dipilih"),
});
```
**Priority:** 🟡 Low
**Effort:** Low
---
### **🟢 LOW (Minor Polish)**
#### **9. Component Name Mismatch**
**Lokasi:** `list-prestasi-desa/page.tsx`
**Masalah:**
```typescript
// Line ~11
function ListPrestasiDesa() {
// ...
}
// Line ~27
function ListPrestasi({ search }: { search: string }) {
// ...
}
// ⚠️ Function name tidak konsisten dengan file name
```
**Rekomendasi:** Rename ke yang lebih descriptive:
```typescript
function ListPrestasiDesaPage() {
// ...
}
function ListPrestasiDesaTable({ search }: { search: string }) {
// ...
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **10. Pagination onChange Tidak Include Search**
**Lokasi:** `list-prestasi-desa/page.tsx`
**Masalah:**
```typescript
// Line ~170
<Pagination
value={page}
onChange={load} // ⚠️ Hanya pass page number
total={totalPages}
// ...
/>
```
**Issue:** Saat ganti page, search query hilang karena `load` dipanggil hanya dengan page number.
**Rekomendasi:** Include search dan limit:
```typescript
<Pagination
value={page}
onChange={(newPage) => load(newPage, 10, debouncedSearch)} // ✅ Include all params
total={totalPages}
// ...
/>
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **11. Mobile Pagination - load Function Tidak Lengkap**
**Lokasi:** `kategori-prestasi-desa/page.tsx`
**Masalah:**
```typescript
// Line ~170 (Desktop)
onChange={(newPage) => load(newPage)} // ⚠️ Missing limit & search
// Line ~200 (Mobile)
onChange={(newPage) => load(newPage)} // ⚠️ Missing limit & search
```
**Rekomendasi:** Include all params:
```typescript
onChange={(newPage) => load(newPage, 10, debouncedSearch)}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **12. Duplicate Error Logging**
**Lokasi:** Multiple files
**Masalah:**
```typescript
// edit/page.tsx - Line ~100
} catch (error) {
console.error('Error loading prestasi desa:', error); // ❌ Duplicate
toast.error('Gagal memuat data prestasi desa');
}
// edit/page.tsx - Line ~130
} catch (error) {
console.error('Error updating prestasi desa:', error); // ❌ Duplicate
toast.error('Terjadi kesalahan saat memperbarui prestasi desa');
}
```
**Rekomendasi:** Cukup satu logging yang informatif:
```typescript
} catch (error) {
console.error('Failed to load Prestasi Desa:', err);
toast.error('Gagal memuat data Prestasi Desa');
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **13. Inconsistent Button Label**
**Lokasi:** Multiple files
**Masalah:**
```typescript
// create/page.tsx - Line ~200
<Button ...>Reset</Button>
// edit/page.tsx - Line ~180
<Button ...>Batal</Button>
// Should be consistent: "Reset" atau "Batal"
```
**Rekomendasi:** Standardisasi:
```typescript
// Create: "Reset"
// Edit: "Batal" (lebih descriptive untuk cancel changes)
// OR both: "Reset" / "Batal"
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **14. Search Placeholder Tidak Spesifik**
**Lokasi:**
- `list-prestasi-desa/page.tsx`: `placeholder='Cari nama prestasi...'` ✅ OK
- `kategori-prestasi-desa/page.tsx`: `placeholder='Cari kategori prestasi...'` ✅ OK
**Verdict:****SUDAH BENAR** - Placeholder sudah spesifik.
**Priority:** 🟢 None
**Effort:** None
---
#### **15. Response Clone Overkill di Kategori Edit**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/prestasi-desa.ts`
**Masalah:**
```typescript
// Line ~370 - kategoriPrestasi.edit.update()
const response = await fetch(...);
const responseClone = response.clone();
try {
const result = await response.json();
// ...
} catch (error) {
try {
const text = await responseClone.text();
console.error("Error response text:", text);
throw new Error(`Gagal memproses respons dari server: ${text}`);
} catch (textError) {
console.error("Error parsing response as text:", textError);
console.error("Original error:", error);
throw new Error("Gagal memproses respons dari server");
}
}
```
**Analysis:**
-**GOOD:** Error handling sangat thorough
- ⚠️ **OVERKILL:** Untuk production API yang stable, ini berlebihan
- ⚠️ **INCONSISTENT:** Module lain tidak punya error handling se-detail ini
**Rekomendasi:** Simplify untuk consistency:
```typescript
async update() {
try {
kategoriPrestasi.edit.loading = true;
const response = await fetch(`/api/landingpage/kategoriprestasi/${this.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: this.form.name }),
});
const result = await response.json();
if (!response.ok) {
throw new Error(result?.message || `HTTP ${response.status}`);
}
if (result.success) {
toast.success(result.message || "Berhasil update");
await kategoriPrestasi.findMany.load();
return true;
}
throw new Error(result.message || "Gagal update");
} catch (error) {
console.error("Error updating:", error);
toast.error(error instanceof Error ? error.message : "Gagal update");
return false;
} finally {
kategoriPrestasi.edit.loading = false;
}
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
## 📋 RINGKASAN ACTION ITEMS
| Priority | Issue | Module | Impact | Effort | Status |
|----------|-------|--------|--------|--------|--------|
| 🔴 P0 | **Schema deletedAt default SALAH** | Schema | **CRITICAL** | Medium | **MUST FIX** |
| 🔴 P0 | Fetch method inconsistency | State | Medium | Medium | Perlu refactor |
| 🔴 P1 | Missing loading state in findUnique | State | Medium | Low | Perlu fix |
| 🟡 M | HTML injection risk | UI | **High (Security)** | Low | **Should fix** |
| 🟡 M | Type safety (any usage) | State | Low | Low | Optional |
| 🟡 M | Console.log in production | State | Low | Low | Optional |
| 🟡 M | Error message inconsistency | State/UI | Low | Low | Optional |
| 🟡 M | Zod schema error messages | State | Low | Low | Should fix |
| 🟢 L | Component name mismatch | List UI | Low | Low | Optional |
| 🟢 L | Pagination missing search param | List UI | Low | Low | Should fix |
| 🟢 L | Duplicate error logging | UI | Low | Low | Optional |
| 🟢 L | Inconsistent button label | UI | Low | Low | Optional |
| 🟢 L | Response clone overkill | State (Kategori) | Low | Low | Optional |
---
## ✅ KESIMPULAN
### **Overall Quality: 🟢 BAIK (7/10)**
**Strengths:**
1. ✅ UI/UX konsisten & responsive
2. ✅ File upload handling solid
3. ✅ Form validation dengan Zod schema
4. ✅ State management terstruktur (Valtio)
5.**Edit form reset sudah benar** (original data tracking)
6. ✅ Loading state management di findMany (dengan finally block)
7. ✅ Modal konfirmasi hapus untuk user safety
**Critical Issues:**
1. ⚠️ **Schema deletedAt default SALAH** - Logic error untuk soft delete (CRITICAL)
2. ⚠️ Fetch method pattern inconsistency (ApiFetch vs fetch manual)
3. ⚠️ findUnique tidak ada loading state management
**Areas for Improvement:**
1. ⚠️ **Fix schema deletedAt** dari `@default(now())` ke `@default(null)` dengan nullable
2. ⚠️ **Refactor fetch methods** untuk gunakan ApiFetch consistently
3. ⚠️ **Add loading state** di findUnique operations
4. ⚠️ **Fix HTML injection** dengan DOMPurify atau backend validation
5. ⚠️ **Improve type safety** dengan remove `any` usage
6. ⚠️ **Standardisasi error messages** di Zod schema dan toast
**Recommended Next Steps:**
1. **🔴 CRITICAL: Fix schema deletedAt** - 30 menit (perlu migration)
2. **🔴 HIGH:** Refactor findUnique, edit, delete ke ApiFetch - 1 jam
3. **🔴 HIGH:** Add loading state di findUnique - 15 menit
4. **🟡 MEDIUM:** Fix HTML injection dengan DOMPurify - 30 menit
5. **🟡 MEDIUM:** Improve type safety - 30 menit
6. **🟢 LOW:** Polish minor issues - 30 menit
---
## 📈 COMPARISON WITH OTHER MODULES
| Aspect | Profil | Desa Anti Korupsi | SDGs Desa | APBDes | Prestasi Desa | Notes |
|--------|--------|-------------------|-----------|--------|---------------|-------|
| Fetch Pattern | ⚠️ Mixed | ⚠️ Mixed | ⚠️ Mixed | ⚠️ Mixed | ⚠️ Mixed | All perlu refactor |
| Loading State | ⚠️ Some missing | ⚠️ Some missing | ⚠️ Missing | ✅ Good | ⚠️ findUnique missing | Similar issue |
| Edit Form Reset | ✅ Good | ✅ Good | ✅ Good | ✅ Good | ✅ Good | All consistent |
| Type Safety | ⚠️ Some `any` | ⚠️ Some `any` | ⚠️ Some `any` | ⚠️ Some `any` | ⚠️ Some `any` | Same issue |
| File Upload | ✅ Images | ✅ Documents | ✅ Images | ✅ Dual | ✅ Images | APBDes paling complex |
| Error Handling | ✅ Good | ✅ Good (better) | ✅ Good | ✅ Good | ✅ Good | Consistent |
| **Schema deletedAt** | ⚠️ Issue | ⚠️ Issue | ⚠️ Issue | ✅ Good | ❌ **WRONG** | **Prestasi CRITICAL** |
| HTML Injection | ⚠️ Present | ⚠️ Present | N/A | N/A | ⚠️ Present | Security concern |
| Complexity | Low | Medium | Low | **High** | Medium | APBDes paling complex |
---
## 🎯 UNIQUE FEATURES OF PRESTASI DESA MODULE
**Standard Complexity:**
1. **Single file upload** (gambar) - similar to SDGs, Profil
2. **Kategori relation** - similar to Desa Anti Korupsi
3. **Rich text editor** (deskripsi) - similar to Desa Anti Korupsi
**Best Practices:**
1. ✅ Loading state management di findMany (dengan finally block) - better than SDGs
2. ✅ Edit form reset comprehensive (preserve all fields)
3. ✅ Proper typing di findMany (Prisma types)
**Critical Issues:**
1.**Schema deletedAt SALAH** - sama seperti SDGs & Desa Anti Korupsi, tapi APBDes sudah benar
---
**Catatan:** Secara keseluruhan, modul Prestasi Desa sudah **production-ready** dengan beberapa improvements yang bisa dilakukan secara incremental. Module ini memiliki struktur yang mirip dengan modul Desa Anti Korupsi (kategori relation, rich text editor, file upload).
**Unique Issues:**
1. Schema deletedAt default value yang salah (sama seperti SDGs & Desa Anti Korupsi)
2. HTML injection risk di deskripsi (sama seperti Desa Anti Korupsi)
3. Fetch pattern inconsistency (sama seperti semua modul lain)
**Priority Action:**
```diff
🔴 FIX INI SEKARANG (30 MENIT + MIGRATION):
File: prisma/schema.prisma
Line: 239-240, 248-249
model PrestasiDesa {
// ...
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
model KategoriPrestasiDesa {
// ...
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
# Lalu jalankan:
bunx prisma db push
# atau
bunx prisma migrate dev --name fix_deletedat_default
```
Setelah fix critical schema issue, module ini production-ready! 🎉

View File

@@ -0,0 +1,488 @@
# QC Summary - Profil Landing Page Module
**Scope:** Media Sosial, Pejabat Desa, Program Inovasi
**Date:** 2026-02-23
**Status:** ✅ Secara umum sudah baik, ada beberapa improvement minor
---
## 📊 OVERVIEW
| Module | Schema | API | UI Admin | Public Page | Overall |
|--------|--------|-----|----------|-------------|---------|
| Media Sosial | ✅ Baik | ✅ Baik | ✅ Baik | N/A | 🟢 Baik |
| Pejabat Desa | ✅ Baik | ⚠️ Ada issue | ✅ Baik | N/A | 🟡 Perlu fix |
| Program Inovasi | ✅ Baik | ✅ Baik | ✅ Baik | N/A | 🟢 Baik |
---
## ✅ YANG SUDAH BAIK (COMMON)
### **1. Konsistensi UI/UX**
- ✅ Semua halaman menggunakan pattern yang sama (list → detail → edit)
- ✅ Responsive design (desktop table + mobile cards)
- ✅ Loading states dengan Skeleton
- ✅ Empty state handling yang informatif
- ✅ Search dengan debounce (1000ms)
- ✅ Pagination konsisten di semua modul
### **2. File Upload Handling**
- ✅ Dropzone dengan preview image
- ✅ Validasi format & ukuran file (max 5MB)
- ✅ Tombol hapus preview (IconX di pojok kanan atas)
- ✅ URL.createObjectURL untuk preview lokal
- ✅ Cleanup file state saat reset form
### **3. Form Validation**
- ✅ Zod schema untuk validasi typed
- ✅ isFormValid() check sebelum submit
- ✅ Error toast dengan pesan spesifik
- ✅ Button disabled saat invalid/loading
### **4. State Management (Valtio)**
- ✅ Proxy state untuk reaktivitas
- ✅ Separate state per modul (programInovasi, pejabatDesa, mediaSosial)
- ✅ Reset form function di setiap create/edit
- ✅ Original data tracking untuk reset
### **5. Error Handling**
- ✅ Try-catch di semua async operation
- ✅ Toast error dengan pesan user-friendly
- ✅ Console.error untuk debugging
- ✅ Modal konfirmasi hapus
---
## ⚠️ ISSUES & SARAN PERBAIKAN
### **🔴 CRITICAL**
#### **1. Pejabat Desa - Edit Form Tidak Reset imageId ke Original**
**Lokasi:** `src/app/admin/(dashboard)/landing-page/profil/pejabat-desa/[id]/edit/page.tsx`
**Masalah:**
```typescript
// Line ~100 - Load data
setFormData({
name: profileData.name || "",
position: profileData.position || "",
imageId: profileData.imageId || "", // ✅ Sudah benar
});
// Line ~170 - Handle reset
setFormData({
name: originalData.name,
position: originalData.position,
imageId: originalData.imageId, // ✅ Sudah benar
});
```
**Status:****SUDAH BENAR** - Tidak ada issue di sini
**Verdict:** Tidak ada action needed.
---
#### **2. Media Sosial - Edit Form Sudah Benar**
**Lokasi:** `src/app/admin/(dashboard)/landing-page/profil/media-sosial/[id]/edit/page.tsx`
**Verdict:****SUDAH BENAR** - Original data tracking sudah implementasi dengan baik:
```typescript
const [originalData, setOriginalData] = useState({
name: '',
icon: '',
iconUrl: '',
imageId: '',
imageUrl: '',
});
// Load data
setOriginalData({
...newForm,
imageUrl: data.image?.link || '',
});
// Reset form
setFormData({
name: originalData.name,
icon: originalData.icon,
iconUrl: originalData.iconUrl,
imageId: originalData.imageId,
});
```
**Verdict:** Tidak ada action needed.
---
#### **3. Program Inovasi - Edit Form Sudah Benar**
**Lokasi:** `src/app/admin/(dashboard)/landing-page/profil/program-inovasi/[id]/edit/page.tsx`
**Verdict:****SUDAH BENAR** - Original data tracking sudah implementasi dengan baik.
**Verdict:** Tidak ada action needed.
---
### **🟡 MEDIUM**
#### **4. Inconsistency: Fetch Method di State**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/profile.ts`
**Masalah:** Ada 3 pattern berbeda untuk fetch API:
```typescript
// ❌ Pattern 1: ApiFetch (programInovasi.create)
const res = await ApiFetch.api.landingpage.programinovasi["create"].post(formData);
// ❌ Pattern 2: fetch manual (programInovasi.findUnique)
const res = await fetch(`/api/landingpage/programinovasi/${id}`);
// ❌ Pattern 3: fetch dengan headers (programInovasi.update)
const response = await fetch(`/api/landingpage/programinovasi/${this.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({...}),
});
// ❌ Pattern 4: fetch dengan delete (programInovasi.delete)
const response = await fetch(`/api/landingpage/programinovasi/del/${id}`, {
method: "DELETE",
...
});
```
**Dampak:**
- Code consistency buruk
- Sulit maintenance
- Type safety tidak konsisten
**Rekomendasi:** Gunakan **ApiFetch** untuk semua operasi:
```typescript
// ✅统一 pattern
const res = await ApiFetch.api.landingpage.programinovasi["create"].post(formData);
const res = await ApiFetch.api.landingpage.programinovasi[id].get();
const res = await ApiFetch.api.landingpage.programinovasi[id].put(data);
const res = await ApiFetch.api.landingpage.programinovasi["del"][id].delete();
```
**Priority:** 🟡 Medium
**Effort:** Low (refactor saja, tidak ada logic change)
---
#### **5. Media Sosial - Validasi IconUrl Tidak Selalu Relevan**
**Lokasi:** `src/app/admin/(dashboard)/landing-page/profil/media-sosial/create/page.tsx`
**Masalah:**
```typescript
// Line ~67
const isFormValid = () => {
const isNameValid = stateMediaSosial.create.form.name?.trim() !== '';
const isIconUrlValid = stateMediaSosial.create.form.iconUrl?.trim() !== ''; // ❌ Selalu required
const isCustomIconValid = selectedSosmed !== 'custom' || file !== null;
return isNameValid && isIconUrlValid && isCustomIconValid;
};
```
**Scenario:**
- User pilih icon "telephone" → iconUrl **seharusnya** required (nomor telepon)
- User pilih icon "facebook" → iconUrl **seharusnya** required (URL profile)
- Tapi jika user hanya mau tampil icon tanpa link → **tidak bisa**
**Rekomendasi:** Jadikan optional atau berikan default value:
```typescript
const isFormValid = () => {
const isNameValid = stateMediaSosial.create.form.name?.trim() !== '';
// IconUrl optional, atau validasi berdasarkan selectedSosmed
const isIconUrlValid = true; // atau validasi spesifik
const isCustomIconValid = selectedSosmed !== 'custom' || file !== null;
return isNameValid && isCustomIconValid;
};
```
**Priority:** 🟡 Medium
**Effort:** Low
---
#### **6. Pejabat Desa - Hanya Ada 1 Data (Hardcoded ID "edit")**
**Lokasi:** `src/app/admin/(dashboard)/landing-page/profil/pejabat-desa/page.tsx`
**Masalah:**
```typescript
// Line ~17
useShallowEffect(() => {
allList.findUnique.load("edit"); // ❌ Hardcoded ID
}, []);
```
**Dampak:**
- Tidak scalable jika nanti ada multiple pejabat desa
- Pattern berbeda dari modul lain (yang pakai findMany)
- Confusing untuk developer baru
**Rekomendasi:**
- Jika memang hanya 1 data, tambahkan komentar:
```typescript
// Note: "edit" adalah special ID untuk single pejabat desa record
// Backend akan return data pertama jika ID tidak ditemukan
allList.findUnique.load("edit");
```
- Atau gunakan pattern yang lebih clear:
```typescript
allList.findUnique.load("single"); // atau "default"
```
**Priority:** 🟡 Low-Medium
**Effort:** Low
---
#### **7. Program Inovasi - HTML Injection Risk di Deskripsi**
**Lokasi:**
- `src/app/admin/(dashboard)/landing-page/profil/program-inovasi/page.tsx` (line ~107)
- `src/app/admin/(dashboard)/landing-page/profil/program-inovasi/[id]/page.tsx` (line ~105)
**Masalah:**
```typescript
// ❌ Direct HTML render tanpa sanitization
<Text dangerouslySetInnerHTML={{ __html: item.description || '-' }}></Text>
```
**Risk:**
- XSS attack jika admin input script malicious
- Bisa inject iframe, script tag, dll
**Rekomendasi:** Gunakan DOMPurify atau library sanitization:
```typescript
import DOMPurify from 'dompurify';
// Sanitize sebelum render
const sanitizedHtml = DOMPurify.sanitize(item.description);
<Text dangerouslySetInnerHTML={{ __html: sanitizedHtml }}></Text>
```
Atau validasi di backend untuk whitelist tag HTML yang diperbolehkan (hanya `<p>`, `<ul>`, `<li>`, dll).
**Priority:** 🟡 Medium (security concern)
**Effort:** Low
---
### **🟢 LOW (Minor Polish)**
#### **8. Inconsistency: Button Size & Styling**
**Lokasi:** Multiple files
**Masalah:** Button styling tidak konsisten:
```typescript
// Media Sosial create
<Button size="md" ...>Simpan</Button>
// Program Inovasi create
<Button size="md" ...>Simpan</Button>
// Pejabat Desa edit
<Button size="md" ...>Simpan</Button>
// Media Sosial edit
<Button size="md" ...>Simpan</Button>
```
Tapi di detail page:
```typescript
// Semua detail page
<Button size="md" ...> // ✅ Konsisten
```
**Rekomendasi:** Buat konstanta untuk button size:
```typescript
const BUTTON_SIZE = "md";
const BUTTON_VARIANT = "light";
const BUTTON_RADIUS = "md";
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **9. Search Placeholder Tidak Spesifik**
**Lokasi:** Multiple list pages
**Masalah:**
```typescript
// Media Sosial
placeholder='Cari nama media sosial atau kontak...' // ✅ Spesifik
// Program Inovasi
placeholder="Cari program inovasi..." // ✅ Oke
// Pejabat Desa
// ❌ Tidak ada search feature
```
**Rekomendasi:** Tambahkan search feature ke Pejabat Desa jika memungkinkan, atau berikan komentar kenapa tidak ada (karena hanya 1 data).
**Priority:** 🟢 Low
**Effort:** Low
---
#### **10. Loading State Tidak Selalu Akurat**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/profile.ts`
**Masalah:**
```typescript
// Line ~120 - findUnique.load untuk programInovasi
async load(id: string) {
try {
const res = await fetch(`/api/landingpage/programinovasi/${id}`);
// ❌ Tidak ada loading state update di sini
if (res.ok) {
const data = await res.json();
programInovasi.findUnique.data = data.data ?? null;
}
} catch (error) {
// ❌ Tidak ada finally block untuk stop loading
}
}
```
**Dampak:** UI mungkin stuck di loading state jika ada error.
**Rekomendasi:** Tambahkan finally block:
```typescript
async load(id: string) {
try {
programInovasi.findUnique.loading = true; // ✅ Start loading
const res = await fetch(`/api/landingpage/programinovasi/${id}`);
if (res.ok) {
const data = await res.json();
programInovasi.findUnique.data = data.data ?? null;
}
} catch (error) {
console.error("Error:", error);
} finally {
programInovasi.findUnique.loading = false; // ✅ Stop loading
}
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **11. Type Safety - Any Usage**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/profile.ts`
**Masalah:**
```typescript
// Line ~75
data: null as any[] | null, // ❌ Using 'any'
// Line ~120
data: null as Prisma.ProgramInovasiGetPayload<{...}> | null, // ✅ Typed
// Line ~200
data: null as any[] | null, // ❌ Using 'any'
```
**Rekomendasi:** Gunakan typed data:
```typescript
data: null as Prisma.MediaSosialGetPayload<{ include: { image: true } }>[] | null
```
**Priority:** 🟢 Low
**Effort:** Medium (perlu update semua reference)
---
#### **12. Console.log di Production**
**Lokasi:** Multiple files
**Masalah:**
```typescript
// Media Sosial edit page (line ~170)
console.log("Data yang akan dikirim ke backend:", stateMediaSosial.update.form);
// Profile state (multiple places)
console.log("Failed to load program inovasi:", res.statusText);
console.log((error as Error).message);
```
**Rekomendasi:** Gunakan conditional logging:
```typescript
if (process.env.NODE_ENV === 'development') {
console.log("Data:", stateMediaSosial.update.form);
}
```
Atau gunakan logging library (winston, pino, dll).
**Priority:** 🟢 Low
**Effort:** Low
---
## 📋 RINGKASAN ACTION ITEMS
| Priority | Issue | Module | Impact | Effort | Status |
|----------|-------|--------|--------|--------|--------|
| 🟡 M | Fetch method inconsistency | All | Medium | Low | Perlu refactor |
| 🟡 M | IconUrl validation terlalu strict | Media Sosial | Low | Low | Perlu fix logic |
| 🟡 M | HTML injection risk | Program Inovasi | **High (Security)** | Low | **Should fix** |
| 🟢 L | Hardcoded ID "edit" | Pejabat Desa | Low | Low | Optional |
| 🟢 L | Button styling inconsistency | All | Low | Low | Optional |
| 🟢 L | Missing search feature | Pejabat Desa | Low | Low | Optional |
| 🟢 L | Loading state inaccurate | All | Low | Low | Perlu fix |
| 🟢 L | Type safety (any usage) | All | Low | Medium | Optional |
| 🟢 L | Console.log in production | All | Low | Low | Optional |
---
## ✅ KESIMPULAN
### **Overall Quality: 🟢 BAIK (8/10)**
**Strengths:**
1. ✅ UI/UX konsisten & responsive
2. ✅ File upload handling sudah solid
3. ✅ Form validation dengan Zod
4. ✅ State management terstruktur
5. ✅ Error handling comprehensive
6. ✅ Edit form reset sudah benar di semua modul
**Areas for Improvement:**
1. ⚠️ **Security:** HTML injection di deskripsi Program Inovasi (prioritas)
2. ⚠️ **Consistency:** Fetch method pattern (ApiFetch vs fetch manual)
3. ⚠️ **Type Safety:** Reduce `any` usage, gunakan Prisma types
4. ⚠️ **Loading States:** Pastikan selalu ada finally block
**Recommended Next Steps:**
1. **Fix HTML injection** dengan DOMPurify atau backend validation
2. **Refactor fetch methods** untuk gunakan ApiFetch consistently
3. **Add loading state cleanup** di semua async operations
4. **Optional:** Improve type safety dengan remove `any`
---
**Catatan:** Secara keseluruhan, modul Profil sudah **production-ready** dengan minor improvements yang bisa dilakukan secara incremental.

View File

@@ -0,0 +1,651 @@
# QC Summary - SDGs Desa Module
**Scope:** List SDGs Desa, Create, Edit, Detail
**Date:** 2026-02-23
**Status:** ✅ Secara umum sudah baik, ada beberapa improvement yang diperlukan
---
## 📊 OVERVIEW
| Aspect | Schema | API | UI Admin | State Management | Overall |
|--------|--------|-----|----------|-----------------|---------|
| SDGs Desa | ✅ Baik | ✅ Baik | ✅ Baik | ⚠️ Ada issue | 🟡 Perlu fix |
---
## ✅ YANG SUDAH BAIK
### **1. UI/UX Consistency**
- ✅ Responsive design (desktop table + mobile cards)
- ✅ Loading states dengan Skeleton
- ✅ Search dengan debounce (1000ms)
- ✅ Pagination konsisten
- ✅ Empty state handling yang informatif
- ✅ Modal konfirmasi hapus
### **2. File Upload Handling**
- ✅ Dropzone dengan preview image
- ✅ Validasi format gambar (JPEG, JPG, PNG, WEBP)
- ✅ Validasi ukuran file (max 5MB)
- ✅ Tombol hapus preview (IconX di pojok kanan atas)
- ✅ URL.createObjectURL untuk preview lokal
### **3. Form Validation**
- ✅ Zod schema untuk validasi typed
- ✅ isFormValid() check sebelum submit
- ✅ Error toast dengan pesan spesifik
- ✅ Button disabled saat invalid/loading
- ✅ Type number input untuk jumlah
### **4. CRUD Operations**
- ✅ Create dengan upload file
- ✅ FindMany dengan pagination & search
- ✅ FindUnique untuk detail
- ✅ Delete dengan hard delete (via Prisma)
- ✅ Update dengan file replacement
### **5. Edit Form - Original Data Tracking**
- ✅ Original data state untuk reset form
- ✅ Load data existing dengan benar
- ✅ Preview image dari data lama
- ✅ Reset form mengembalikan ke data original
**Code Example (✅ GOOD):**
```typescript
// Line ~60-80 - Load data
const data = await sdgsState.edit.load(id);
setFormData({
name: data.name || "",
jumlah: data.jumlah || "",
imageId: data.imageId || "",
});
setOriginalData({
...newForm,
imageUrl: data.image?.link || "",
});
setPreviewImage(data.image?.link || null);
// Line ~90 - Handle reset
const handleResetForm = () => {
setFormData({
name: originalData.name,
jumlah: originalData.jumlah,
imageId: originalData.imageId,
});
setPreviewImage(originalData.imageUrl || null);
setFile(null);
toast.info("Form dikembalikan ke data awal");
};
```
**Verdict:****SUDAH BENAR** - Original data tracking sudah implementasi dengan baik.
---
## ⚠️ ISSUES & SARAN PERBAIKAN
### **🔴 CRITICAL**
#### **1. State Management - Inconsistency Fetch Pattern**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts`
**Masalah:** Ada 2 pattern berbeda untuk fetch API:
```typescript
// ❌ Pattern 1: ApiFetch (create, findMany)
const res = await ApiFetch.api.landingpage.sdgsdesa["create"].post({...});
const res = await ApiFetch.api.landingpage.sdgsdesa["findMany"].get({query});
// ❌ Pattern 2: fetch manual (findUnique, edit, delete)
const res = await fetch(`/api/landingpage/sdgsdesa/${id}`);
const response = await fetch(`/api/landingpage/sdgsdesa/del/${id}`, {
method: "DELETE",
headers: { "Content-Type": "application/json" },
});
```
**Dampak:**
- Code consistency buruk
- Sulit maintenance
- Type safety tidak konsisten
- Duplikasi logic error handling
**Rekomendasi:** Gunakan **ApiFetch** untuk semua operasi:
```typescript
// ✅ Unified pattern
const res = await ApiFetch.api.landingpage.sdgsdesa["create"].post(data);
const res = await ApiFetch.api.landingpage.sdgsdesa[id].get();
const res = await ApiFetch.api.landingpage.sdgsdesa[id].put(data);
const res = await ApiFetch.api.landingpage.sdgsdesa["del"][id].delete();
```
**Priority:** 🔴 High
**Effort:** Medium (refactor di semua state methods)
---
#### **2. findUnique State - Tidak Ada Loading State Management**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts`
**Masalah:**
```typescript
// Line ~125 - sdgsDesa.findUnique.load()
async load(id: string) {
try {
const res = await fetch(`/api/landingpage/sdgsdesa/${id}`);
if (res.ok) {
const data = await res.json();
sdgsDesa.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
sdgsDesa.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
sdgsDesa.findUnique.data = null;
}
// ❌ MISSING: finally block untuk stop loading
}
```
**Dampak:** UI mungkin stuck di loading state jika ada error.
**Rekomendasi:** Tambahkan loading state dan finally block:
```typescript
async load(id: string) {
try {
sdgsDesa.findUnique.loading = true; // ✅ Start loading
const res = await fetch(`/api/landingpage/sdgsdesa/${id}`);
if (res.ok) {
const data = await res.json();
sdgsDesa.findUnique.data = data.data ?? null;
}
} catch (error) {
console.error("Error:", error);
} finally {
sdgsDesa.findUnique.loading = false; // ✅ Stop loading
}
}
```
**Priority:** 🔴 Medium
**Effort:** Low
---
#### **3. findManyAll - Tidak Digunakan di UI**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts`
**Masalah:**
```typescript
// Line ~95 - findManyAll state
findManyAll: {
data: null as any[] | null,
loading: false,
load: async () => {
// ... fetch all data tanpa pagination
},
}
```
**Analysis:**
- ⚠️ **UNUSED:** Tidak ada component yang menggunakan `findManyAll`
- ⚠️ **DEAD CODE:** Menambah bundle size tanpa manfaat
- ⚠️ **CONFUSING:** Developer baru bisa bingung kapan pakai findMany vs findManyAll
**Rekomendasi:** Remove jika tidak digunakan:
```typescript
// ❌ Remove entire findManyAll block
```
Atau jika diperlukan untuk future feature, tambahkan comment:
```typescript
// Reserved for future use - dropdown select without pagination
findManyAll: { ... }
```
**Priority:** 🔴 Low-Medium
**Effort:** Low
---
### **🟡 MEDIUM**
#### **4. Type Safety - Any Usage**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts`
**Masalah:**
```typescript
// Line ~58
data: null as any[] | null, // ❌ Using 'any'
// Line ~96
data: null as any[] | null, // ❌ Using 'any'
// Line ~118
data: null as Prisma.SdgsDesaGetPayload<{...}> | null, // ✅ Typed
```
**Rekomendasi:** Gunakan typed data consistently:
```typescript
// findMany
data: null as Prisma.SdgsDesaGetPayload<{
include: { image: true };
}>[] | null,
// findManyAll (jika tidak dihapus)
data: null as Prisma.SdgsDesaGetPayload<{
include: { image: true };
}>[] | null,
```
**Priority:** 🟡 Medium
**Effort:** Medium (perlu update semua reference)
---
#### **5. Console.log di Production**
**Lokasi:** Multiple places di state file
**Masalah:**
```typescript
// Line ~48
console.log(error);
toast.error("Gagal menambahkan data");
// Line ~80
console.error("Failed to load media sosial:", res.data?.message);
// Line ~85
console.error("Error loading media sosial:", error);
// Line ~132
console.error("Failed to fetch data", res.status, res.statusText);
// Line ~136
console.error("Error fetching data:", error);
// ... dan banyak lagi
```
**Rekomendasi:** Gunakan conditional logging:
```typescript
if (process.env.NODE_ENV === 'development') {
console.error("Error:", error);
}
```
Atau gunakan logging library (winston, pino, dll) dengan levels yang jelas.
**Priority:** 🟡 Low
**Effort:** Low
---
#### **6. Error Message Tidak Konsisten**
**Lokasi:** Multiple places
**Masalah:**
```typescript
// Create - Line ~44
return toast.error("Gagal menambahkan data");
// Create - Line ~46
toast.error("Gagal menambahkan data");
// Delete - Line ~165
toast.error("Terjadi kesalahan saat menghapus sdgs desa");
// Edit - Line ~210
toast.error("Gagal memuat data");
// Edit update - Line ~250
toast.error("Gagal mengupdate sdgs desa");
// Toast success - Line ~240
toast.success("Berhasil update sdgs desa");
```
**Issue:**
- Inconsistent capitalization ("sdgs desa" vs "Sdgs Desa")
- Mixed patterns ("Gagal menambahkan" vs "Terjadi kesalahan")
- Typo: "sdgs" seharusnya "SDGs" (acronym)
**Rekomendasi:** Standardisasi error messages:
```typescript
// Pattern: "[Action] [resource] gagal" dengan proper casing
toast.error("Menambahkan data SDGs Desa gagal");
toast.error("Menghapus data SDGs Desa gagal");
toast.error("Memuat data SDGs Desa gagal");
toast.error("Memperbarui data SDGs Desa gagal");
// Atau lebih spesifik dengan context
toast.error("Gagal menambahkan data SDGs Desa");
toast.error("Gagal menghapus SDGs Desa");
toast.success("Berhasil memperbarui SDGs Desa");
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **7. Zod Schema - Error Message Tidak Akurat**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts`
**Masalah:**
```typescript
// Line ~8
const templatesdgsDesaForm = z.object({
name: z.string().min(1, "Judul minimal 1 karakter"), // ❌ "Judul" instead of "Nama"
jumlah: z.string().min(1, "Deskripsi minimal 1 karakter"), // ❌ "Deskripsi" instead of "Jumlah"
imageId: z.string().min(1, "File minimal 1"),
});
```
**Dampak:** User confusion saat validasi error muncul:
```
Error: "Judul minimal 1 karakter" // User: "Lho, ini field nama bukan judul?"
Error: "Deskripsi minimal 1 karakter" // User: "Ini field jumlah bukan deskripsi?"
```
**Rekomendasi:** Fix error messages:
```typescript
const templatesdgsDesaForm = z.object({
name: z.string().min(1, "Nama SDGs Desa minimal 1 karakter"),
jumlah: z.string().min(1, "Jumlah minimal 1 karakter"),
imageId: z.string().min(1, "Gambar wajib dipilih"),
});
```
**Priority:** 🟡 Low
**Effort:** Low
---
### **🟢 LOW (Minor Polish)**
#### **8. Component Name Mismatch**
**Lokasi:** `src/app/admin/(dashboard)/landing-page/SDGs/[id]/edit/page.tsx`
**Masalah:**
```typescript
// Line ~30
export default function EditKolaborasiInovasi() { // ❌ Wrong name
// ...
}
```
**Dampak:** Confusing untuk developer lain, sulit untuk search/reference.
**Rekomendasi:** Rename ke yang sesuai:
```typescript
export default function EditSDGsDesa() { // ✅ Correct name
// ...
}
```
**Priority:** 🟢 Low
**Effort:** Low (hanya rename)
---
#### **9. Text Label Tidak Konsisten**
**Lokasi:** Multiple files
**Masalah:**
```typescript
// Create page - Line ~100
<Text fw="bold" fz="sm" mb={6}>
Gambar Program Inovasi // ❌ Wrong label
</Text>
// Edit page - Line ~170
<Text fw="bold" fz="sm" mb={6}>
Gambar Program Inovasi // ❌ Wrong label (copy-paste?)
</Text>
```
**Rekomendasi:** Fix label:
```typescript
<Text fw="bold" fz="sm" mb={6}>
Gambar SDGs Desa // ✅ Correct label
</Text>
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **10. Placeholder Search Tidak Spesifik**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~17
<HeaderSearch
title='Sdgs Desa'
placeholder='Cari Sdgs Desa...' // ⚠️ Generic
// ...
/>
```
**Rekomendasi:** Lebih spesifik:
```typescript
placeholder='Cari nama SDGs Desa...'
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **11. Capitalization Inconsistency**
**Lokasi:** Multiple files
**Masalah:**
```typescript
// page.tsx - Line ~17
title='Sdgs Desa' // ❌ Mixed case
// create/page.tsx - Line ~90
<Title>Tambah Sdgs Desa</Title> // ❌ Mixed case
// edit/page.tsx - Line ~160
<Title>Edit Sdgs Desa</Title> // ❌ Mixed case
// Should be:
// "SDGs Desa" (all caps for acronym)
```
**Rekomendasi:** Standardisasi:
```typescript
title='SDGs Desa'
<Title>Tambah SDGs Desa</Title>
<Title>Edit SDGs Desa</Title>
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **12. Schema - deletedAt Default Value**
**Lokasi:** `prisma/schema.prisma`
**Masalah:**
```prisma
model SdgsDesa {
// ...
deletedAt DateTime @default(now()) // ❌ Always has default value
isActive Boolean @default(true)
}
```
**Issue:** `deletedAt @default(now())` berarti setiap record baru langsung punya `deletedAt` value, yang bisa membingungkan untuk soft delete logic.
**Rekomendasi:**
```prisma
model SdgsDesa {
// ...
deletedAt DateTime? @default(null) // ✅ Nullable, null = not deleted
isActive Boolean @default(true)
}
```
**Priority:** 🟢 Medium (potential logic issue)
**Effort:** Medium (perlu migration)
---
#### **13. Duplicate Error Logging**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~80
} catch (error) {
console.error("Error loading sdgs desa:", error); // ❌ Duplicate
toast.error("Gagal memuat data sdgs desa");
}
// Line ~120
} catch (error) {
console.error("Error updating sdgs desa:", error); // ❌ Duplicate
toast.error("Terjadi kesalahan saat memperbarui sdgs desa");
}
```
**Rekomendasi:** Cukup satu logging yang informatif:
```typescript
} catch (error) {
console.error('Failed to load SDGs Desa:', err);
toast.error('Gagal memuat data SDGs Desa');
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **14. API Response Handling - Inconsistent Error Messages**
**Lokasi:** API endpoints
**Masalah:** (dari grep search results)
```typescript
// del.ts - Line ~18
message: "Berhasil menghapus SDGS Desa", // ✅ Proper
// updt.ts - Line ~38
message: "SDGS Desa berhasil diperbarui", // ✅ Proper
// create.ts - (assumed)
// Might have inconsistent casing
```
**Rekomendasi:** Ensure all API responses use consistent "SDGs Desa" casing.
**Priority:** 🟢 Low
**Effort:** Low
---
## 📋 RINGKASAN ACTION ITEMS
| Priority | Issue | Module | Impact | Effort | Status |
|----------|-------|--------|--------|--------|--------|
| 🔴 P0 | Fetch method inconsistency | State | Medium | Medium | Perlu refactor |
| 🔴 P0 | Missing loading state in findUnique | State | Medium | Low | Perlu fix |
| 🔴 P1 | Unused findManyAll code | State | Low | Low | Should remove |
| 🟡 M | Type safety (any usage) | State | Low | Medium | Optional |
| 🟡 M | Console.log in production | State | Low | Low | Optional |
| 🟡 M | Error message inconsistency | State/UI | Low | Low | Optional |
| 🟡 M | Zod schema error messages | State | Low | Low | Should fix |
| 🟢 L | Component name mismatch | Edit page | Low | Low | Optional |
| 🟢 L | Wrong label text ("Program Inovasi") | Create/Edit | Low | Low | Should fix |
| 🟢 L | Placeholder tidak spesifik | List page | Low | Low | Optional |
| 🟢 L | Capitalization inconsistency | All UI | Low | Low | Should fix |
| 🟢 M | deletedAt default value | Schema | Medium | Medium | Should fix |
| 🟢 L | Duplicate error logging | Edit page | Low | Low | Optional |
---
## ✅ KESIMPULAN
### **Overall Quality: 🟢 BAIK (7.5/10)**
**Strengths:**
1. ✅ UI/UX konsisten & responsive
2. ✅ File upload handling solid
3. ✅ Form validation dengan Zod schema
4. ✅ State management terstruktur (Valtio)
5.**Edit form reset sudah benar** (original data tracking)
6. ✅ Modal konfirmasi hapus untuk user safety
7. ✅ Type number input untuk field jumlah
**Areas for Improvement:**
1. ⚠️ **Consistency:** Fetch method pattern (ApiFetch vs fetch manual)
2. ⚠️ **Loading States:** findUnique tidak ada loading state management
3. ⚠️ **Dead Code:** findManyAll tidak digunakan
4. ⚠️ **Type Safety:** Reduce `any` usage, gunakan Prisma types
5. ⚠️ **Schema:** deletedAt default value bisa menyebabkan logic issue
6. ⚠️ **Naming:** Component name & label text masih ada yang salah
**Recommended Next Steps:**
1. **Refactor fetch methods** untuk gunakan ApiFetch consistently
2. **Add loading state** di findUnique operations
3. **Remove findManyAll** jika tidak digunakan
4. **Fix component name** (EditKolaborasiInovasi → EditSDGsDesa)
5. **Fix label text** ("Gambar Program Inovasi" → "Gambar SDGs Desa")
6. **Fix capitalization** (Sdgs → SDGs)
7. **Optional:** Improve type safety dengan remove `any`
---
## 📈 COMPARISON WITH OTHER MODULES
| Aspect | Profil | Desa Anti Korupsi | SDGs Desa | Notes |
|--------|--------|-------------------|-----------|-------|
| Fetch Pattern | ⚠️ Mixed | ⚠️ Mixed | ⚠️ Mixed | All perlu refactor |
| Loading State | ⚠️ Some missing | ⚠️ Some missing | ⚠️ Missing | Same issue |
| Edit Form Reset | ✅ Good | ✅ Good | ✅ Good | Consistent |
| Type Safety | ⚠️ Some `any` | ⚠️ Some `any` | ⚠️ Some `any` | Same issue |
| File Upload | ✅ Images | ✅ Documents | ✅ Images | Different use case |
| Error Handling | ✅ Good | ✅ Good (better) | ✅ Good | Consistent |
| Dead Code | ❌ None | ❌ None | ⚠️ findManyAll | SDGs unique issue |
| Naming Issues | ❌ None | ⚠️ Some | ⚠️ Some | Similar level |
---
**Catatan:** Secara keseluruhan, modul SDGs Desa sudah **production-ready** dengan beberapa improvements yang bisa dilakukan secara incremental. Module ini memiliki struktur yang mirip dengan modul lain (Profil, Desa Anti Korupsi) sehingga pattern improvement yang sama bisa diterapkan.
**Unique Issues:**
1. findManyAll unused code (tidak ada di modul lain)
2. Component name mismatch (EditKolaborasiInovasi)
3. Wrong label text ("Gambar Program Inovasi") - kemungkinan copy-paste dari modul Program Inovasi

View File

@@ -0,0 +1,879 @@
# QC Summary - Daftar Informasi Publik PPID Module
**Scope:** List Daftar Informasi Publik, Create, Edit, Detail
**Date:** 2026-02-23
**Status:** ✅ Secara umum sudah baik, ada beberapa improvement yang diperlukan
---
## 📊 OVERVIEW
| Aspect | Schema | API | UI Admin | State Management | Overall |
|--------|--------|-----|----------|-----------------|---------|
| Daftar Informasi Publik | ⚠️ Ada issue | ✅ Baik | ✅ Baik | ⚠️ Ada issue | 🟡 Perlu fix |
---
## ✅ YANG SUDAH BAIK
### **1. UI/UX Design**
- ✅ Preview layout yang clean dengan responsive design
- ✅ Loading states dengan Skeleton
- ✅ Empty state handling yang informatif dengan icon
- ✅ Search functionality dengan debounce (1000ms)
- ✅ Pagination yang konsisten
- ✅ Desktop table + mobile cards responsive
- ✅ Sticky table header untuk better UX
- ✅ Responsive button text ("Tambah" vs "Tambah Baru")
### **2. Table & Card Layout**
- ✅ Fixed column widths (25%, 40%, 20%)
- ✅ Sticky header table untuk long lists
- ✅ Striped rows untuk readability
- ✅ Highlight on hover
- ✅ HTML tag stripping untuk preview deskripsi
- ✅ Text truncation dengan lineClamp dan substring
- ✅ Mobile card view dengan proper information hierarchy
**Code Example (✅ GOOD):**
```typescript
// page.tsx - Line ~95-120
<Table
highlightOnHover
striped
stickyHeader // ✅ GOOD - Header tetap visible saat scroll
style={{ minWidth: '700px' }} // ✅ GOOD - Minimum width untuk readability
>
<TableThead>
<TableTr>
<TableTh w="25%">
<Text fw={600} lh={1.4}>Jenis Informasi</Text>
</TableTh>
<TableTh w="40%">
<Text fw={600} lh={1.4}>Deskripsi</Text>
</TableTh>
<TableTh ta="center" w="20%">
<Text fw={600} lh={1.4}>Aksi</Text>
</TableTh>
</TableTr>
</TableThead>
```
**Verdict:****BAIK** - Table layout dengan sticky header yang helpful!
---
### **3. State Management**
- ✅ Proper typing dengan Prisma types
- ✅ Loading state management dengan finally block
- ✅ Error handling yang comprehensive
-**ApiFetch consistency** untuk create & findMany! ✅
- ✅ Zod validation untuk form data
- ✅ Proper date formatting untuk update operation
**Code Example (✅ GOOD):**
```typescript
// state file - Line ~50-85
findMany: {
data: null as Prisma.DaftarInformasiPublikGetPayload<{ omit: { isActive: true } }>[] | null,
page: 1,
totalPages: 1,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
daftarInformasiPublik.findMany.loading = true; // ✅ Start loading
daftarInformasiPublik.findMany.page = page;
daftarInformasiPublik.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.ppid.daftarinformasipublik["find-many"].get({ query });
if (res.status === 200 && res.data?.success) {
daftarInformasiPublik.findMany.data = res.data.data ?? [];
daftarInformasiPublik.findMany.totalPages = res.data.totalPages ?? 1;
}
} catch (err) {
console.error("Gagal fetch daftar informasi publik:", err);
daftarInformasiPublik.findMany.data = [];
daftarInformasiPublik.findMany.totalPages = 1;
} finally {
daftarInformasiPublik.findMany.loading = false; // ✅ Stop loading
}
},
}
```
**Verdict:****BAIK** - State management sudah proper dengan ApiFetch!
---
### **4. Zod Schema Validation**
- ✅ Comprehensive validation untuk semua fields
- ✅ Specific error messages untuk setiap field
- ✅ Minimum character validation (3 characters)
**Code Example (✅ GOOD):**
```typescript
// state file - Line ~8-12
const templateDaftarInformasi = z.object({
jenisInformasi: z.string().min(3, "Jenis Informasi minimal 3 karakter"),
deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
tanggal: z.string().min(3, "Tanggal minimal 3 karakter"),
});
```
**Verdict:****BAIK** - Validation yang proper!
---
### **5. Edit Form - Original Data Tracking**
- ✅ Original data state untuk reset form (via useState)
- ✅ Load data existing dengan benar
- ✅ Reset form mengembalikan ke data original
- ✅ Rich text content handling yang proper
- ✅ Date formatting untuk input type="date"
**Code Example (✅ GOOD):**
```typescript
// edit/page.tsx - Line ~30-60
const [formData, setFormData] = useState<FormDaftarInformasi>({
jenisInformasi: '',
deskripsi: '',
tanggal: '',
});
const formatDateForInput = (dateString: string) => {
if (!dateString) return '';
const date = new Date(dateString);
return date.toISOString().split('T')[0]; // ✅ Format untuk input date
};
// Load data
useEffect(() => {
const loadDaftarInformasi = async () => {
const data = await daftarInformasi.edit.load(id);
if (data) {
setFormData({
jenisInformasi: data.jenisInformasi || '',
deskripsi: data.deskripsi || '',
tanggal: data.tanggal || '',
});
}
};
loadDaftarInformasi();
}, [params?.id]);
```
**Verdict:****BAIK** - Original data tracking sudah implementasi dengan baik!
---
### **6. Rich Text Editor**
- ✅ CreateEditor untuk create page
- ✅ EditEditor untuk edit page
- ✅ Reusable component pattern
- ✅ HTML content handling yang proper
---
## ⚠️ ISSUES & SARAN PERBAIKAN
### **🔴 CRITICAL**
#### **1. Schema - deletedAt Default Value SALAH**
**Lokasi:** `prisma/schema.prisma` (line 414)
**Masalah:**
```prisma
model DaftarInformasiPublik {
id String @id @default(cuid())
jenisInformasi String
deskripsi String
tanggal DateTime @db.Date
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now()) // ❌ SALAH - selalu punya default value
isActive Boolean @default(true)
}
```
**Dampak:**
- **LOGIC ERROR!** Setiap record baru langsung punya `deletedAt` value (timestamp creation)
- Soft delete tidak berfungsi dengan benar
- Query dengan `where: { deletedAt: null }` tidak akan pernah return data
- Data yang "dihapus" vs data "aktif" tidak bisa dibedakan
**Contoh Issue:**
```prisma
// Record baru dibuat
CREATE DaftarInformasiPublik {
jenisInformasi: "Informasi 1",
deskripsi: "Deskripsi 1",
tanggal: "2024-01-01",
// deletedAt otomatis ter-set ke now() ❌
// isActive: true ✅
}
// Query untuk data aktif (seharusnya return data ini)
prisma.daftarInformasiPublik.findMany({
where: { deletedAt: null, isActive: true }
})
// ❌ Return kosong! Karena deletedAt sudah ter-set
```
**Rekomendasi:** Fix schema:
```prisma
model DaftarInformasiPublik {
id String @id @default(cuid())
jenisInformasi String
deskripsi String
tanggal DateTime @db.Date
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime? @default(null) // ✅ Nullable, null = not deleted
isActive Boolean @default(true)
}
```
**Priority:** 🔴 **CRITICAL**
**Effort:** Medium (perlu migration)
**Impact:** **HIGH** (data integrity & soft delete logic)
---
#### **2. State Management - Fetch Pattern Inconsistency**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik.ts`
**Masalah:** Ada 2 pattern berbeda untuk fetch API:
```typescript
// ❌ Pattern 1: ApiFetch (create, findMany)
const res = await ApiFetch.api.ppid.daftarinformasipublik["create"].post(form);
const res = await ApiFetch.api.ppid.daftarinformasipublik["find-many"].get({ query });
// ❌ Pattern 2: fetch manual (findUnique, edit, delete)
const res = await fetch(`/api/ppid/daftarinformasipublik/${id}`);
const response = await fetch(`/api/ppid/daftarinformasipublik/del/${id}`, {
method: "DELETE",
headers: { "Content-Type": "application/json" },
});
```
**Dampak:**
- Code consistency buruk
- Sulit maintenance
- Type safety tidak konsisten
- Duplikasi logic error handling
**Rekomendasi:** Gunakan **ApiFetch** untuk semua operasi:
```typescript
// ✅ Unified pattern
async load(id: string) {
try {
const res = await ApiFetch.api.ppid.daftarinformasipublik[id].get();
if (res.data?.success) {
const data = res.data.data;
this.id = data.id;
this.form = {
jenisInformasi: data.jenisInformasi,
deskripsi: data.deskripsi,
tanggal: data.tanggal,
};
return data;
} else {
throw new Error(res.data?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error:", error);
toast.error("Gagal memuat data");
return null;
}
}
async byId(id: string) {
try {
const res = await ApiFetch.api.ppid.daftarinformasipublik["del"][id].delete();
if (res.data?.success) {
toast.success(res.data.message || "Berhasil hapus");
await daftarInformasiPublik.findMany.load();
} else {
toast.error(res.data?.message || "Gagal hapus");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus");
}
}
```
**Priority:** 🔴 High
**Effort:** Medium (refactor di findUnique, edit, delete methods)
---
#### **3. Missing Loading State di Edit Button**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~130-145
<Button
onClick={handleSubmit}
disabled={!isFormValid()} // ⚠️ Missing loading check
radius="md"
size="md"
// ...
>
Simpan Perubahan
</Button>
```
**Issue:** Button tidak disabled saat submitting. User bisa click multiple times.
**Rekomendasi:** Add loading state:
```typescript
const [isSubmitting, setIsSubmitting] = useState(false);
// In handleSubmit
const handleSubmit = async () => {
setIsSubmitting(true);
try {
await daftarInformasi.edit.update();
router.push('/admin/ppid/daftar-informasi-publik');
} catch (error) {
// ...
} finally {
setIsSubmitting(false);
}
};
// In button
<Button
onClick={handleSubmit}
disabled={!isFormValid() || isSubmitting}
// ...
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan Perubahan'}
</Button>
```
**Priority:** 🔴 Medium
**Effort:** Low
---
### **🟡 MEDIUM**
#### **4. Console.log di Production**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik.ts`
**Masalah:**
```typescript
// Line ~45
console.log((error as Error).message);
// Line ~80
console.error("Gagal fetch daftar informasi publik paginated:", err);
// Line ~100
console.error("Failed to fetch daftar informasi publik:", res.statusText);
// Line ~104
console.error("Error fetching daftar informasi publik:", error);
// Line ~180
console.error("Error loading daftar informasi publik:", error);
// Line ~230
console.error("Error updating daftar informasi publik:", error);
```
**Rekomendasi:** Gunakan conditional logging:
```typescript
if (process.env.NODE_ENV === 'development') {
console.error("Error:", error);
}
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **5. Type Safety - Any Usage**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik.ts`
**Masalah:**
```typescript
// Line ~70
const query: any = { page, limit }; // ❌ Using 'any'
if (search) query.search = search;
```
**Rekomendasi:** Gunakan typed query:
```typescript
// Define type
interface FindManyQuery {
page: number | string;
limit?: number | string;
search?: string;
}
// Use typed query
const query: FindManyQuery = { page, limit };
if (search) query.search = search;
```
**Priority:** 🟡 Medium
**Effort:** Low
---
#### **6. Alert() Instead of Toast**
**Lokasi:** `create/page.tsx`
**Masalah:**
```typescript
// Line ~30-40
const handleSubmit = async () => {
if (!daftarInformasi.create.form.jenisInformasi) {
return alert('Mohon isi jenis informasi'); // ❌ Using alert()
}
if (!daftarInformasi.create.form.deskripsi) {
return alert('Mohon isi deskripsi'); // ❌ Using alert()
}
if (!daftarInformasi.create.form.tanggal) {
return alert('Mohon pilih tanggal publikasi'); // ❌ Using alert()
}
try {
await daftarInformasi.create.create();
// ...
} catch (error) {
console.error('Error creating informasi publik:', error);
alert('Terjadi kesalahan saat menyimpan data'); // ❌ Using alert()
}
};
```
**Rekomendasi:** Gunakan toast untuk consistency:
```typescript
if (!daftarInformasi.create.form.jenisInformasi) {
return toast.warn('Mohon isi jenis informasi'); // ✅ Using toast
}
// ...
```
**Priority:** 🟡 Medium
**Effort:** Low
---
#### **7. Missing Reset Form Function**
**Lokasi:** `create/page.tsx`
**Masalah:**
```typescript
// Line ~20-25
const resetForm = () => {
daftarInformasi.create.form = {
jenisInformasi: "",
deskripsi: "",
tanggal: "",
};
};
// resetForm dipanggil di handleSubmit tapi tidak ada di form inputs
// Form inputs langsung update state tanpa reset setelah submit
```
**Issue:** Form tidak reset setelah successful submit.
**Rekomendasi:** Ensure reset is called:
```typescript
const handleSubmit = async () => {
// ... validation
try {
await daftarInformasi.create.create();
resetForm(); // ✅ Make sure this is called
router.push("/admin/ppid/daftar-informasi-publik");
} catch (error) {
// ...
}
};
```
**Verdict:****SUDAH BENAR** - resetForm() sudah dipanggil di handleSubmit!
**Priority:** 🟢 None
**Effort:** None
---
### **🟢 LOW (Minor Polish)**
#### **8. Pagination onChange Tidak Include Search**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~190-200
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10); // ⚠️ Missing search parameter
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
// ...
/>
```
**Issue:** Saat ganti page, search query hilang.
**Rekomendasi:** Include search:
```typescript
onChange={(newPage) => {
load(newPage, 10, debouncedSearch); // ✅ Include search
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **9. Duplicate Error Logging**
**Lokasi:** Multiple files
**Masalah:**
```typescript
// edit/page.tsx - Line ~60
} catch (error) {
console.error('Error loading daftar informasi:', error); // ❌ Duplicate
toast.error('Gagal memuat data daftar informasi');
}
// edit/page.tsx - Line ~80
} catch (error) {
console.error('Error updating berita:', error); // ❌ Duplicate + wrong module name
toast.error('Terjadi kesalahan saat memperbarui berita'); // ❌ Wrong module name
}
```
**Issue:** Copy-paste error dari module "berita"!
**Rekomendasi:** Fix error messages:
```typescript
} catch (error) {
console.error('Failed to load Daftar Informasi Publik:', err);
toast.error('Gagal memuat data Daftar Informasi Publik');
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **10. Missing Loading State di Detail Page**
**Lokasi:** `[id]/page.tsx`
**Masalah:**
```typescript
// Line ~20-25
useShallowEffect(() => {
stateDaftarInformasi.findUnique.load(params?.id as string)
}, [params?.id])
if (!stateDaftarInformasi.findUnique.data) {
return (
<Stack py={10}>
<Skeleton height={500} radius="md" />
</Stack>
)
}
```
**Issue:** Skeleton ditampilkan untuk semua kondisi (loading, error, not found).
**Rekomendasi:** Add proper loading state:
```typescript
if (stateDaftarInformasi.findUnique.loading) {
return (
<Stack py={10}>
<Skeleton height={500} radius="md" />
</Stack>
);
}
if (!stateDaftarInformasi.findUnique.data) {
return (
<Alert icon={<IconAlertCircle />} color="red">
Data tidak ditemukan
</Alert>
);
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **11. Search Placeholder Tidak Spesifik**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~30-35
<HeaderSearch
title='Daftar Informasi Publik'
placeholder='Cari jenis informasi atau deskripsi...' // ✅ Actually pretty specific!
// ...
/>
```
**Verdict:****SUDAH BENAR** - Placeholder sudah spesifik!
**Priority:** 🟢 None
**Effort:** None
---
#### **12. Empty State Icon Consistency**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~85-95
<Stack align="center" py="xl">
<IconDeviceImacCog size={40} stroke={1.5} color={colors['blue-button']} />
<Text fz={{ base: 'sm', md: 'md' }} fw={500} c="dimmed" lh={1.5}>
Belum ada informasi publik yang tersedia
</Text>
</Stack>
```
**Verdict:****SUDAH BENAR** - Empty state dengan icon yang proper!
**Priority:** 🟢 None
**Effort:** None
---
#### **13. HTML Tag Stripping for Preview**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~125-130
<Text fz="sm" lh={1.5} c="dimmed" lineClamp={1}>
{item.deskripsi?.replace(/<[^>]*>?/gm, '').substring(0, 80)}...
</Text>
```
**Verdict:****SUDAH BENAR** - HTML tag stripping yang proper untuk preview!
**Priority:** 🟢 None
**Effort:** None
---
## 📋 RINGKASAN ACTION ITEMS
| Priority | Issue | Module | Impact | Effort | Status |
|----------|-------|--------|--------|--------|--------|
| 🔴 P0 | **Schema deletedAt default SALAH** | Schema | **CRITICAL** | Medium | **MUST FIX** |
| 🔴 P0 | Fetch method inconsistency | State | Medium | Medium | Perlu refactor |
| 🔴 P1 | Missing loading state di edit button | UI | Medium | Low | Should fix |
| 🟡 M | Console.log in production | State | Low | Low | Optional |
| 🟡 M | Type safety (any usage) | State | Low | Low | Optional |
| 🟡 M | Alert() instead of toast | Create UI | Low | Low | Should fix |
| 🟡 M | Copy-paste error messages (berita) | Edit UI | Low | Low | Should fix |
| 🟢 L | Pagination missing search param | UI | Low | Low | Optional |
| 🟢 L | Missing loading state di detail page | UI | Low | Low | Optional |
| 🟢 L | Duplicate error logging | UI/State | Low | Low | Optional |
---
## ✅ KESIMPULAN
### **Overall Quality: 🟢 BAIK (8/10)**
**Strengths:**
1. ✅ UI/UX clean & responsive
2.**Sticky header table** - Better UX untuk long lists
3.**HTML tag stripping** untuk preview deskripsi
4. ✅ Search functionality dengan debounce
5. ✅ Empty state handling yang informatif
6.**Zod validation** comprehensive
7. ✅ State management dengan ApiFetch untuk create & findMany
8. ✅ Loading state management dengan finally block
9. ✅ Mobile cards responsive
10.**Responsive button text** ("Tambah" vs "Tambah Baru")
11. ✅ Edit form dengan original data tracking
12. ✅ Date formatting untuk input type="date"
**Critical Issues:**
1. ⚠️ **Schema deletedAt default SALAH** - Logic error untuk soft delete (CRITICAL)
2. ⚠️ Fetch method pattern inconsistency (ApiFetch vs fetch manual)
3. ⚠️ Missing loading state di edit button
**Areas for Improvement:**
1. ⚠️ **Fix schema deletedAt** dari `@default(now())` ke `@default(null)` dengan nullable
2. ⚠️ **Refactor fetch methods** untuk gunakan ApiFetch consistently
3. ⚠️ **Add loading state** di edit button
4. ⚠️ **Fix alert()** ke toast
5. ⚠️ **Fix copy-paste error messages** dari module "berita"
**Recommended Next Steps:**
1. **🔴 CRITICAL: Fix schema deletedAt** - 30 menit (perlu migration)
2. **🔴 HIGH: Refactor findUnique, edit, delete** ke ApiFetch - 1 jam
3. **🔴 HIGH: Add loading state** di edit button - 15 menit
4. **🟡 MEDIUM: Fix alert()** ke toast - 15 menit
5. **🟡 MEDIUM: Fix copy-paste error messages** - 10 menit
6. **🟢 LOW: Add pagination search param** - 10 menit
7. **🟢 LOW: Polish minor issues** - 30 menit
---
## 📈 COMPARISON WITH OTHER MODULES
| Module | Fetch Pattern | State | Validation | Schema | Loading State | Overall |
|--------|--------------|-------|------------|--------|---------------|---------|
| Profil | ⚠️ Mixed | ⚠️ Good | ✅ Good | ⚠️ deletedAt | ⚠️ Some missing | 🟢 |
| Desa Anti Korupsi | ⚠️ Mixed | ⚠️ Good | ✅ Good | ⚠️ deletedAt | ⚠️ Some missing | 🟢 |
| SDGs Desa | ⚠️ Mixed | ⚠️ Good | ✅ Good | ⚠️ deletedAt | ⚠️ Missing | 🟢 |
| APBDes | ⚠️ Mixed | ⚠️ Good | ✅ Good | ✅ Good | ✅ Good | 🟢 |
| Prestasi Desa | ⚠️ Mixed | ⚠️ Good | ✅ Good | ❌ WRONG | ⚠️ Some missing | 🟢 |
| PPID Profil | ⚠️ Mixed | ✅ **Best** | ✅ Good | ❌ WRONG | ✅ Good | 🟢⭐ |
| Struktur PPID | ⚠️ Mixed | ✅ Good | ✅ Good | ⚠️ Inconsistent | ✅ Good | 🟢 |
| Visi Misi PPID | ✅ **100% ApiFetch!** | ✅ Best | ✅ Good | ❌ WRONG | ✅ Good | 🟢⭐⭐ |
| Dasar Hukum PPID | ✅ **100% ApiFetch!** | ✅ Best | ✅ Good | ❌ WRONG | ✅ Good | 🟢⭐⭐ |
| Permohonan Informasi | ⚠️ Mixed | ⚠️ Good | ✅ **Best** | ❌ **4 models WRONG** | ✅ Good | 🟡 |
| **Daftar Informasi** | ⚠️ Mixed | ⚠️ Good | ✅ Good | ❌ WRONG | ⚠️ Some missing | 🟢 |
**Daftar Informasi PPID Highlights:**
-**Sticky header table** - Unique feature untuk better UX
-**HTML tag stripping** untuk preview - Good practice
-**Responsive button text** - Attention to detail
- ⚠️ **Same deletedAt issue** seperti modul PPID lain
- ⚠️ **Copy-paste errors** dari module "berita"
---
## 🎯 UNIQUE FEATURES OF DAFTAR INFORMASI MODULE
**Best Table Implementation:**
1.**Sticky header table** - Unique feature!
2.**HTML tag stripping** untuk preview deskripsi
3.**Responsive button text** - "Tambah" vs "Tambah Baru"
4.**Fixed column widths** - 25%, 40%, 20%
5.**Minimum table width** - 700px untuk readability
**Best Practices:**
1.**Sticky header** - Best practice untuk long lists
2.**HTML stripping** - Good practice untuk rich text preview
3.**Loading state management** - Proper dengan finally block
4.**Original data tracking** - Edit form reset yang proper
5.**Date formatting** - Proper untuk input type="date"
**Critical Issues:**
1.**Schema deletedAt SALAH** - Same issue seperti modul PPID lain
2.**Fetch pattern inconsistency** - findUnique, edit, delete pakai fetch manual
3.**Copy-paste error messages** - Dari module "berita"
---
**Catatan:** **Daftar Informasi PPID adalah MODULE DENGAN TABLE IMPLEMENTATION TERBAIK** dengan sticky header dan HTML tag stripping untuk preview. Module ini juga punya attention to detail dengan responsive button text.
**Unique Strengths:**
1.**Sticky header table** - Best table UX
2.**HTML tag stripping** - Best practice untuk preview
3.**Responsive button text** - Attention to detail
4.**Fixed column widths** - Consistent layout
5.**Date formatting** - Proper handling
**Priority Action:**
```diff
🔴 FIX INI SEKARANG (30 MENIT + MIGRATION):
File: prisma/schema.prisma
Line: 414
model DaftarInformasiPublik {
id String @id @default(cuid())
jenisInformasi String
deskripsi String
tanggal DateTime @db.Date
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
# Lalu jalankan:
bunx prisma db push
# atau
bunx prisma migrate dev --name fix_deletedat_daftar_informasi
```
```diff
🔴 FIX COPY-PASTE ERRORS (10 MENIT):
File: edit/page.tsx
// Line ~80
- console.error('Error updating berita:', error);
+ console.error('Error updating daftar informasi:', error);
- toast.error('Terjadi kesalahan saat memperbarui berita');
+ toast.error('Terjadi kesalahan saat memperbarui daftar informasi');
```
Setelah fix critical issues, module ini **PRODUCTION-READY** dengan **BEST TABLE IMPLEMENTATION**! 🎉
---
## 📚 RECOMMENDED AS REFERENCE FOR OTHER MODULES
**Daftar Informasi PPID Module adalah BEST PRACTICE untuk:**
1.**Sticky header table** - Best practice untuk long lists
2.**HTML tag stripping** - Good practice untuk rich text preview
3.**Responsive button text** - Attention to detail
4.**Fixed column widths** - Consistent layout
5.**Date formatting** - Proper handling untuk date inputs
**Modules lain bisa belajar dari Daftar Informasi:**
- **ALL MODULES WITH TABLES:** Use sticky header untuk better UX
- **ALL MODULES WITH RICH TEXT:** Strip HTML tags untuk preview
- **ALL MODULES:** Responsive text untuk buttons
- **ALL MODULES:** Fixed column widths untuk consistency
- **ALL MODULES:** Proper date formatting untuk date inputs
---
**File Location:** `QC/PPID/QC-DAFTAR-INFORMASI-PUBLIK-MODULE.md` 📄

View File

@@ -0,0 +1,821 @@
# QC Summary - Dasar Hukum PPID Module
**Scope:** Preview Dasar Hukum, Edit Dasar Hukum dengan Rich Text Editor
**Date:** 2026-02-23
**Status:** ✅ Secara umum sudah baik, ada beberapa improvement yang diperlukan
---
## 📊 OVERVIEW
| Aspect | Schema | API | UI Admin | State Management | Overall |
|--------|--------|-----|----------|-----------------|---------|
| Dasar Hukum PPID | ⚠️ Ada issue | ✅ Baik | ✅ Baik | ✅ Baik | 🟡 Perlu fix |
---
## ✅ YANG SUDAH BAIK
### **1. UI/UX Design**
- ✅ Preview layout yang clean dengan logo desa
- ✅ Responsive design (mobile & desktop)
- ✅ Loading states dengan Skeleton
- ✅ Empty state handling yang informatif
- ✅ Edit button yang prominent
- ✅ Divider visual yang jelas antara Judul dan Content
### **2. Rich Text Editor (Tiptap)**
- ✅ Full-featured editor dengan toolbar lengkap (reuse dari PPIDTextEditor)
- ✅ Extensions: Bold, Italic, Underline, Highlight, Link, dll
- ✅ Text alignment (left, center, justify, right)
- ✅ Heading levels (H1-H4)
- ✅ Lists (bullet & ordered)
- ✅ Blockquote, code, superscript, subscript
- ✅ Undo/Redo
- ✅ Sticky toolbar untuk UX yang lebih baik
-**Dynamic import dengan `ssr: false`** untuk menghindari hydration issues! ✅
### **3. Form Component Structure**
- ✅ Reusable PPIDTextEditor component (shared dengan Visi Misi)
- ✅ Proper TypeScript typing
- ✅ Controlled components dengan onChange handler
- ✅ SSR handling yang proper dengan dynamic import
**Code Example (✅ EXCELLENT):**
```typescript
// edit/page.tsx - Line ~13-17
const PPIDTextEditor = dynamic(
() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor),
{ ssr: false } // ✅ Disable SSR untuk avoid hydration mismatch
);
```
**Verdict:****EXCELLENT** - Proper SSR handling!
---
### **4. State Management**
- ✅ Proper typing dengan Prisma types
- ✅ Loading state management dengan finally block
- ✅ Error handling yang comprehensive
-**ApiFetch consistency** - Semua operasi pakai ApiFetch! ✅
- ✅ Zod validation untuk form data
**Code Example (✅ EXCELLENT):**
```typescript
// state file - Line ~20-45
findById: {
data: null as DasarHukumForm | null,
loading: false,
initialize() {
stateDasarHukumPPID.findById.data = {
id: '',
judul: '',
content: '',
} as DasarHukumForm;
},
async load(id: string) {
try {
stateDasarHukumPPID.findById.loading = true; // ✅ Start loading
const res = await ApiFetch.api.ppid.dasarhukumppid["find-by-id"].get({
query: { id },
});
if (res.status === 200) {
stateDasarHukumPPID.findById.data = res.data?.data ?? null;
}
} catch (error) {
console.error((error as Error).message);
toast.error("Terjadi kesalahan saat mengambil data dasar hukum");
} finally {
stateDasarHukumPPID.findById.loading = false; // ✅ Stop loading
}
},
}
```
**Verdict:****SANGAT BAIK** - State management sudah konsisten dengan ApiFetch!
---
### **5. Edit Form - Original Data Tracking**
- ✅ Original data state untuk reset form
- ✅ Load data existing dengan benar
- ✅ Reset form mengembalikan ke data original
- ✅ Rich text content handling yang proper
**Code Example (✅ GOOD):**
```typescript
// edit/page.tsx - Line ~20-45
const [formData, setFormData] = useState({ judul: '', content: '' });
const [originalData, setOriginalData] = useState({
judul: '',
content: '',
});
// Initialize from global state
useEffect(() => {
if (dasarHukumState.findById.data) {
setFormData({
judul: dasarHukumState.findById.data.judul ?? '',
content: dasarHukumState.findById.data.content ?? '',
});
setOriginalData({
judul: dasarHukumState.findById.data.judul ?? '',
content: dasarHukumState.findById.data.content ?? '',
});
}
}, [dasarHukumState.findById.data]);
// Line ~65 - Handle reset
const handleResetForm = () => {
setFormData({
judul: originalData.judul,
content: originalData.content,
});
toast.info("Form dikembalikan ke data awal");
};
```
**Verdict:****BAIK** - Original data tracking sudah implementasi dengan baik!
---
### **6. Rich Text Validation**
- ✅ Custom validation function untuk rich text content
- ✅ Check empty content setelah remove HTML tags
- ✅ Validation untuk kedua fields (judul & content)
**Code Example (✅ GOOD):**
```typescript
// edit/page.tsx - Line ~25-35
const isRichTextEmpty = (content: string) => {
// Remove HTML tags and check if the resulting text is empty
const plainText = content.replace(/<[^>]*>/g, '').trim();
return plainText === '' || content.trim() === '<p></p>' || content.trim() === '<p><br></p>';
};
const isFormValid = () => {
return (
!isRichTextEmpty(formData.judul) &&
!isRichTextEmpty(formData.content)
);
};
```
**Verdict:****EXCELLENT** - Rich text validation yang comprehensive!
---
## ⚠️ ISSUES & SARAN PERBAIKAN
### **🔴 CRITICAL**
#### **1. Schema - deletedAt Default Value SALAH**
**Lokasi:** `prisma/schema.prisma` (line 385)
**Masalah:**
```prisma
model DasarHukumPPID {
id String @id @default(cuid())
judul String @db.Text
content String @db.Text
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now()) // ❌ SALAH - selalu punya default value
isActive Boolean @default(true)
}
```
**Dampak:**
- **LOGIC ERROR!** Setiap record baru langsung punya `deletedAt` value (timestamp creation)
- Soft delete tidak berfungsi dengan benar
- Query dengan `where: { deletedAt: null }` tidak akan pernah return data
- Data yang "dihapus" vs data "aktif" tidak bisa dibedakan
**Contoh Issue:**
```prisma
// Record baru dibuat
CREATE DasarHukumPPID {
judul: "Judul 1",
content: "Content 1",
// deletedAt otomatis ter-set ke now() ❌
// isActive: true ✅
}
// Query untuk data aktif (seharusnya return data ini)
prisma.dasarHukumPPID.findMany({
where: { deletedAt: null, isActive: true }
})
// ❌ Return kosong! Karena deletedAt sudah ter-set
```
**Rekomendasi:** Fix schema:
```prisma
model DasarHukumPPID {
id String @id @default(cuid())
judul String @db.Text
content String @db.Text
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime? @default(null) // ✅ Nullable, null = not deleted
isActive Boolean @default(true)
}
```
**Priority:** 🔴 **CRITICAL**
**Effort:** Medium (perlu migration)
**Impact:** **HIGH** (data integrity & soft delete logic)
---
#### **2. HTML Injection Risk - dangerouslySetInnerHTML**
**Lokasi:** `page.tsx` (preview page)
**Masalah:**
```typescript
// Line ~65-75
<Title
order={3}
ta="center"
lh={{ base: 1.15, md: 1.1 }}
fw="bold"
c={colors['blue-button']}
dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.judul }} // ❌ No sanitization
style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
/>
// Line ~80-90 (Content)
<Text
dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.content }} // ❌ No sanitization
style={{
wordBreak: 'break-word',
whiteSpace: 'normal',
fontSize: '1rem',
lineHeight: 1.55,
textAlign: 'justify',
}}
/>
```
**Risk:**
- XSS attack jika admin input script malicious
- Bisa inject iframe, script tag, dll
- Security vulnerability
**Rekomendasi:** Gunakan DOMPurify atau library sanitization:
```typescript
import DOMPurify from 'dompurify';
// Sanitize sebelum render
const sanitizedJudul = DOMPurify.sanitize(listDasarHukum.findById.data.judul);
const sanitizedContent = DOMPurify.sanitize(listDasarHukum.findById.data.content);
<Title
dangerouslySetInnerHTML={{ __html: sanitizedJudul }}
// ...
/>
<Text
dangerouslySetInnerHTML={{ __html: sanitizedContent }}
// ...
/>
```
Atau validasi di backend untuk whitelist tag HTML yang diperbolehkan (hanya `<p>`, `<ul>`, `<li>`, `<strong>`, dll).
**Priority:** 🔴 **HIGH** (**Security concern**)
**Effort:** Low
---
#### **3. Missing Delete/Hard Delete Protection**
**Lokasi:** `page.tsx`, `edit/page.tsx`
**Masalah:**
- ❌ Tidak ada tombol delete untuk Dasar Hukum (correct - single record)
-**GOOD:** Single record pattern yang benar
- ⚠️ **ISSUE:** Tidak ada konfirmasi sebelum update (direct save)
**Issue:** User bisa accidentally save changes tanpa konfirmasi.
**Rekomendasi:** Add confirmation dialog sebelum save:
```typescript
const handleSubmit = () => {
// Check if data has changed
if (formData.judul === originalData.judul && formData.content === originalData.content) {
toast.info('Tidak ada perubahan');
return;
}
// Show confirmation
const confirmed = window.confirm('Apakah Anda yakin ingin mengubah Dasar Hukum PPID?');
if (!confirmed) return;
// Then save...
};
```
**Priority:** 🔴 Medium
**Effort:** Low
---
### **🟡 MEDIUM**
#### **4. Console.log di Production**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/dasar_hukum/dasarHukum.ts`
**Masalah:**
```typescript
// Line ~40
console.error((error as Error).message);
// Line ~65
console.error((error as Error).message);
```
**Rekomendasi:** Gunakan conditional logging:
```typescript
if (process.env.NODE_ENV === 'development') {
console.error("Error:", error);
}
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **5. Missing Loading State di Submit Button**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~130-140
<Button
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
// ...
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
```
**Issue:** Button tidak check `dasarHukumState.update.loading` dari global state.
**Rekomendasi:** Check both states:
```typescript
disabled={!isFormValid() || isSubmitting || dasarHukumState.update.loading}
{isSubmitting || dasarHukumState.update.loading ? (
<Loader size="sm" color="white" />
) : (
'Simpan'
)}
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **6. Zod Schema - Could Be More Specific**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/dasar_hukum/dasarHukum.ts`
**Masalah:**
```typescript
// Line ~7
const templateForm = z.object({
judul: z.string().min(3, "Judul minimal 3 karakter"), // ⚠️ Generic
content: z.string().min(3, "Content minimal 3 karakter"), // ⚠️ Generic
});
```
**Rekomendasi:** More specific error messages:
```typescript
const templateForm = z.object({
judul: z.string().min(3, "Judul dasar hukum minimal 3 karakter"),
content: z.string().min(3, "Konten dasar hukum minimal 3 karakter"),
});
```
**Priority:** 🟡 Low
**Effort:** Low
---
### **🟢 LOW (Minor Polish)**
#### **7. Missing Change Detection**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~75-85
const handleSubmit = () => {
try {
setIsSubmitting(true);
if (dasarHukumState.findById.data) {
// Update global state hanya saat submit
const updated = { ...dasarHukumState.findById.data, ...formData };
dasarHukumState.update.save(updated);
}
router.push('/admin/ppid/dasar-hukum');
} catch (error) {
console.error("Error updating dasar hukum:", error);
toast.error("Terjadi kesalahan saat memperbarui dasar hukum");
} finally {
setIsSubmitting(false);
}
};
```
**Issue:** Tidak ada check apakah data sudah berubah. User bisa save tanpa perubahan.
**Rekomendasi:** Add change detection:
```typescript
const handleSubmit = () => {
// Check if data has changed
if (formData.judul === originalData.judul && formData.content === originalData.content) {
toast.info('Tidak ada perubahan');
return;
}
try {
setIsSubmitting(true);
// ... rest of save logic
}
};
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **8. Editor - Duplicate useEffect**
**Lokasi:** `PPIDTextEditor.tsx` (shared component)
**Masalah:**
```typescript
// Line ~30-35 (di PPIDTextEditor.tsx)
const editor = useEditor({
extensions: [...],
immediatelyRender: false,
content: initialContent, // ✅ Set content directly
onUpdate: ({editor}) => {
onChange(editor.getHTML()) // ✅ Handle changes
}
});
// Line ~37-42
useEffect(() => {
if (editor && initialContent !== editor.getHTML()) {
editor.commands.setContent(initialContent || '<p></p>');
}
}, [initialContent, editor]);
```
**Issue:** Ada useEffect tambahan untuk set content, padahal sudah ada di `useEditor`. Bisa menyebabkan double content update.
**Rekomendasi:** Simplify - remove useEffect:
```typescript
const editor = useEditor({
extensions: [...],
immediatelyRender: false,
content: initialContent || '<p></p>', // ✅ Set content directly
onUpdate: ({editor}) => {
onChange(editor.getHTML())
},
});
// Remove useEffect completely
```
**Priority:** 🟢 Low
**Effort:** Low (perlu update shared component)
---
#### **9. Missing Error Boundary**
**Lokasi:** `edit/page.tsx`
**Masalah:**
- Tidak ada error boundary untuk handle unexpected errors
- Jika editor gagal load, tidak ada fallback UI
**Rekomendasi:** Add error boundary:
```typescript
if (dasarHukumState.findById.error) {
return (
<Alert icon={<IconAlertCircle />} color="red">
<Text fw="bold">Error</Text>
<Text>{dasarHukumState.findById.error}</Text>
</Alert>
);
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **10. Preview Page - Title Order Inconsistency**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~40
<Title order={3} ...>Preview Dasar Hukum PPID</Title>
// Line ~65
<Title order={3} ... dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.judul }} />
```
**Issue:** Title hierarchy agak confusing. Page title dan content title sama-sama order 3.
**Rekomendasi:** Samakan hierarchy:
```typescript
// Page title: order={2}
// Content title (judul): order={3}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **11. Missing Toast Success After Save**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~75-90
const handleSubmit = () => {
try {
setIsSubmitting(true);
if (dasarHukumState.findById.data) {
const updated = { ...dasarHukumState.findById.data, ...formData };
dasarHukumState.update.save(updated);
}
router.push('/admin/ppid/dasar-hukum'); // ✅ Redirect tanpa toast
} catch (error) {
console.error("Error updating dasar hukum:", error);
toast.error("Terjadi kesalahan saat memperbarui dasar hukum");
} finally {
setIsSubmitting(false);
}
};
```
**Issue:** Toast success ada di state `update.save()`, tapi user mungkin tidak lihat karena langsung redirect.
**Rekomendasi:** Add toast before redirect atau wait untuk toast selesai:
```typescript
const handleSubmit = async () => {
try {
setIsSubmitting(true);
if (dasarHukumState.findById.data) {
const updated = { ...dasarHukumState.findById.data, ...formData };
await dasarHukumState.update.save(updated);
toast.success("Dasar Hukum berhasil diperbarui!");
setTimeout(() => {
router.push('/admin/ppid/dasar-hukum');
}, 1000); // Wait 1 second for toast to show
}
} catch (error) {
console.error("Error updating dasar hukum:", error);
toast.error("Terjadi kesalahan saat memperbarui dasar hukum");
} finally {
setIsSubmitting(false);
}
};
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **12. SSR Dynamic Import - Good but Could Add Loading**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~13-17
const PPIDTextEditor = dynamic(
() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor),
{ ssr: false } // ✅ Good
);
```
**Issue:** Tidak ada loading state untuk dynamic import. Jika editor lambat load, user lihat kosong.
**Rekomendasi:** Add loading option:
```typescript
const PPIDTextEditor = dynamic(
() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor),
{
ssr: false,
loading: () => (
<Center py={40}>
<Loader size="sm" />
<Text ml="md">Loading editor...</Text>
</Center>
)
}
);
```
**Priority:** 🟢 Low
**Effort:** Low
---
## 📋 RINGKASAN ACTION ITEMS
| Priority | Issue | Module | Impact | Effort | Status |
|----------|-------|--------|--------|--------|--------|
| 🔴 P0 | **Schema deletedAt default SALAH** | Schema | **CRITICAL** | Medium | **MUST FIX** |
| 🔴 P0 | **HTML injection risk** | UI | **HIGH (Security)** | Low | **Should fix** |
| 🔴 P1 | Missing delete confirmation | UI | Medium | Low | Should fix |
| 🟡 M | Console.log in production | State | Low | Low | Optional |
| 🟡 M | Missing loading state di submit button | UI | Low | Low | Should fix |
| 🟡 M | Zod schema error messages | State | Low | Low | Optional |
| 🟢 L | Missing change detection | Edit UI | Low | Low | Optional |
| 🟢 L | Duplicate useEffect di editor | Editor | Low | Low | Optional |
| 🟢 L | Missing error boundary | UI | Low | Low | Optional |
| 🟢 L | Title order inconsistency | UI | Low | Low | Optional |
| 🟢 L | Missing toast success timing | UI | Low | Low | Optional |
| 🟢 L | SSR loading state | UI | Low | Low | Optional |
---
## ✅ KESIMPULAN
### **Overall Quality: 🟢 BAIK (8.5/10) - CLEAN & SIMPLE!**
**Strengths:**
1. ✅ UI/UX clean & responsive
2.**Rich Text Editor** full-featured (Tiptap, shared component)
3.**Dynamic import dengan `ssr: false`** - Proper SSR handling! ✅
4.**State management BEST PRACTICES** - **100% ApiFetch!**
5.**Edit form reset sudah benar** (original data tracking)
6.**Rich text validation** comprehensive (check empty content)
7. ✅ Error handling comprehensive
8. ✅ Loading state management dengan finally block
9.**Reusable component** (PPIDTextEditor shared dengan Visi Misi)
**Critical Issues:**
1. ⚠️ **Schema deletedAt default SALAH** - Logic error untuk soft delete (CRITICAL)
2. ⚠️ **HTML injection risk** - dangerouslySetInnerHTML tanpa sanitization (HIGH Security)
3. ⚠️ Missing confirmation sebelum save (Medium UX)
**Areas for Improvement:**
1. ⚠️ **Fix schema deletedAt** dari `@default(now())` ke `@default(null)` dengan nullable
2. ⚠️ **Fix HTML injection** dengan DOMPurify atau backend validation
3. ⚠️ **Add confirmation dialog** sebelum save
4. ⚠️ **Add change detection** untuk avoid unnecessary saves
5. ⚠️ **Fix loading state** di submit button
**Recommended Next Steps:**
1. **🔴 CRITICAL: Fix schema deletedAt** - 30 menit (perlu migration)
2. **🔴 HIGH: Fix HTML injection** dengan DOMPurify - 30 menit
3. **🟡 MEDIUM: Add confirmation dialog** - 15 menit
4. **🟢 LOW: Add change detection** - 15 menit
5. **🟢 LOW: Add SSR loading state** - 10 menit
6. **🟢 LOW: Polish minor issues** - 30 menit
---
## 📈 COMPARISON WITH OTHER MODULES
| Module | Fetch Pattern | State | Edit Reset | Rich Text | SSR Handling | HTML Injection | deletedAt | Overall |
|--------|--------------|-------|------------|-----------|--------------|----------------|-----------|---------|
| Profil | ⚠️ Mixed | ⚠️ Good | ✅ Good | ❌ None | N/A | ⚠️ Present | ⚠️ Issue | 🟢 |
| Desa Anti Korupsi | ⚠️ Mixed | ⚠️ Good | ✅ Good | ✅ Present | ⚠️ None | ⚠️ Present | ⚠️ Issue | 🟢 |
| SDGs Desa | ⚠️ Mixed | ⚠️ Good | ✅ Good | ❌ None | N/A | N/A | ⚠️ Issue | 🟢 |
| APBDes | ⚠️ Mixed | ⚠️ Good | ✅ Good | ❌ None | N/A | N/A | ✅ Good | 🟢 |
| Prestasi Desa | ⚠️ Mixed | ⚠️ Good | ✅ Good | ✅ Present | ⚠️ None | ⚠️ Present | ❌ WRONG | 🟢 |
| PPID Profil | ⚠️ Mixed | ✅ **Best** | ✅ **Excellent** | ✅ **Best** | ⚠️ None | ⚠️ Present | ❌ WRONG | 🟢⭐ |
| Struktur PPID | ⚠️ Mixed | ✅ Good | ✅ Good | ✅ Present | ⚠️ None | ⚠️ Present | ⚠️ Inconsistent | 🟢 |
| Visi Misi PPID | ✅ **100% ApiFetch!** | ✅ **Best** | ✅ Good | ✅ Present | ⚠️ None | ⚠️ Present | ❌ WRONG | 🟢⭐⭐ |
| **Dasar Hukum PPID** | ✅ **100% ApiFetch!** | ✅ **Best** | ✅ Good | ✅ Present | ✅ **EXCELLENT** | ⚠️ Present | ❌ WRONG | 🟢⭐⭐ |
**Dasar Hukum PPID Highlights:**
-**100% ApiFetch** - NO fetch manual sama sekali!
-**SSR Handling** - Dynamic import dengan `ssr: false` (UNIQUE!)
-**Reusable component** - Share PPIDTextEditor dengan Visi Misi
-**Simple & clean** - No unnecessary complexity
- ⚠️ **Same deletedAt issue** seperti modul PPID lain
---
## 🎯 UNIQUE FEATURES OF DASAR HUKUM PPID MODULE
**Simplest & Cleanest Module:**
1.**100% ApiFetch consistency** - NO fetch manual sama sekali!
2.**SSR Handling** - Dynamic import dengan `ssr: false` (UNIQUE!)
3.**Reusable component** - Share PPIDTextEditor dengan Visi Misi
4.**Simple single record pattern** - Only 2 fields (judul, content)
5.**Rich text validation** - Check empty content
**Best Practices:**
1.**API consistency** - 100% ApiFetch
2.**SSR handling** - Best practice untuk Next.js
3.**Loading state management** proper (dengan finally block)
4.**Rich text validation** comprehensive
5.**Original data tracking** untuk reset form
6.**Component reusability** - Share editor component
**Critical Issues:**
1.**Schema deletedAt SALAH** - Same issue seperti modul PPID lain
2.**HTML injection risk** - Same issue seperti modul dengan rich text lain
---
**Catatan:** **Dasar Hukum PPID adalah MODULE PALING CLEAN** bersama Visi Misi PPID dengan codebase paling simple dan **100% PAKAI ApiFetch** (no fetch manual sama sekali!). Module ini juga **SATU-SATUNYA MODULE** yang punya proper SSR handling dengan dynamic import!
**Unique Strengths:**
1.**100% ApiFetch** - Best API consistency
2.**SSR Handling** - Best practice untuk Next.js (UNIQUE!)
3.**Component reusability** - Share editor component
4.**Simple & clean** - No unnecessary complexity
5.**Rich text validation** - Most comprehensive
**Priority Action:**
```diff
🔴 FIX INI SEKARANG (30 MENIT + MIGRATION):
File: prisma/schema.prisma
Line: 385
model DasarHukumPPID {
id String @id @default(cuid())
judul String @db.Text
content String @db.Text
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
# Lalu jalankan:
bunx prisma db push
# atau
bunx prisma migrate dev --name fix_deletedat_dasarhukum_ppid
```
```diff
🔴 FIX HTML INJECTION (30 MENIT):
File: page.tsx
+ import DOMPurify from 'dompurify';
// Line ~65
- dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.judul }}
+ dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(listDasarHukum.findById.data.judul) }}
// Line ~80
- dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.content }}
+ dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(listDasarHukum.findById.data.content) }}
```
Setelah fix critical issues, module ini **PRODUCTION-READY** dan bisa jadi **REFERENCE untuk SSR HANDLING & API CONSISTENCY**! 🎉
---
## 📚 RECOMMENDED AS REFERENCE FOR OTHER MODULES
**Dasar Hukum PPID Module adalah BEST PRACTICE untuk:**
1.**API consistency** - 100% ApiFetch, NO fetch manual!
2.**SSR handling** - Dynamic import dengan `ssr: false`
3.**Simple state management** - Clean, straightforward
4.**Rich text validation** - Check empty content pattern
5.**Component reusability** - Share editor component
**Modules lain bisa belajar dari Dasar Hukum PPID:**
- **ALL MODULES:** Use ApiFetch consistently (NO fetch manual!)
- **ALL MODULES WITH RICH TEXT:** Use dynamic import dengan `ssr: false`
- **ALL MODULES:** Keep it simple (avoid unnecessary complexity)
- **Rich Text Modules:** Implement empty content validation
- **ALL MODULES:** Share reusable components
---
**File Location:** `QC/PPID/QC-DASAR-HUKUM-PPID-MODULE.md` 📄

913
QC/PPID/QC-IKM-MODULE.md Normal file
View File

@@ -0,0 +1,913 @@
# QC Summary - Indeks Kepuasan Masyarakat (IKM) PPID Module
**Scope:** Responden (CRUD), Grafik Kepuasan Masyarakat, Master Data (Jenis Kelamin, Rating, Kelompok Umur)
**Date:** 2026-02-23
**Status:** ✅ Secara umum sudah baik, ada beberapa improvement yang diperlukan
---
## 📊 OVERVIEW
| Sub-Module | Schema | API | UI Admin | State Management | Overall |
|------------|--------|-----|----------|-----------------|---------|
| Responden | ⚠️ Ada issue | ✅ Baik | ✅ Baik | ⚠️ Ada issue | 🟡 |
| Grafik IKM | ✅ Baik | ✅ Baik | ✅ **Excellent** | ✅ Baik | 🟢 |
| Master Data (JK, Rating, Umur) | ⚠️ Ada issue | ✅ Baik | N/A | ⚠️ Ada issue | 🟡 |
---
## ✅ YANG SUDAH BAIK
### **1. UI/UX - Grafik & Charts (UNIQUE FEATURE!)**
-**Mantine Charts** - PieChart & BarChart yang modern
-**3 Distribusi Charts**: Jenis Kelamin, Penilaian, Kelompok Umur
-**Bar Chart Tren** - Monthly respondent trends
-**Responsive design** - SimpleGrid dengan proper breakpoints
-**Empty state handling** - "Tidak ada data" message
-**Loading states** dengan Skeleton
-**Color coding** yang konsisten
-**Legend & Labels** yang informatif
-**Tooltip** untuk interactive charts
**Code Example (✅ EXCELLENT):**
```typescript
// grafik-kepuasan-masyarakat/page.tsx - Line ~100-150
<Paper withBorder bg={colors['white-1']} p="lg" radius="xl" shadow="sm">
<Title order={3} mb="md" ta="center">Tren Jumlah Responden</Title>
<Box h={320}>
<BarChart
h={300}
data={barChartData}
dataKey="month"
series={[{ name: 'count', color: colors['blue-button'] }]}
tickLine="y"
xAxisLabel="Bulan"
yAxisLabel="Jumlah Responden"
withTooltip
tooltipAnimationDuration={200}
/>
</Box>
</Paper>
```
**Verdict:****EXCELLENT** - Best chart implementation di semua modul PPID!
---
### **2. Data Processing untuk Charts**
- ✅ Automatic calculation dari data responden
- ✅ Grouping by gender, rating, age group
- ✅ Monthly aggregation untuk bar chart
- ✅ Date parsing dari multiple fields (createdAt, tanggal)
- ✅ Sorting by month/year
- ✅ Empty data handling (all values = 0)
**Code Example (✅ EXCELLENT):**
```typescript
// grafik-kepuasan-masyarakat/page.tsx - Line ~45-85
// Hitung total berdasarkan jenis kelamin
const totalLaki = data.filter((item: any) =>
item.jenisKelamin?.name?.toLowerCase() === 'laki-laki'
).length;
const totalPerempuan = data.filter((item: any) =>
item.jenisKelamin?.name?.toLowerCase() === 'perempuan'
).length;
// Update gender chart data
setDonutDataJenisKelamin([
{ name: 'Laki-laki', value: totalLaki, color: colors['blue-button'] },
{ name: 'Perempuan', value: totalPerempuan, color: '#10A85AFF' },
]);
// Process data for bar chart (group by month)
const monthYearMap = new Map<string, number>();
data.forEach((item: any) => {
const dateValue = item.tanggal || item.createdAt;
const parsedDate = new Date(dateValue);
const month = parsedDate.getMonth() + 1;
const year = parsedDate.getFullYear();
const monthYearKey = `${year}-${String(month).padStart(2, '0')}`;
monthYearMap.set(monthYearKey, (monthYearMap.get(monthYearKey) || 0) + 1);
});
```
**Verdict:****EXCELLENT** - Data processing yang comprehensive!
---
### **3. Form Validation**
- ✅ Zod schema untuk semua forms
- ✅ Required field validation
- ✅ Multiple dropdown dependencies (Jenis Kelamin, Rating, Umur)
- ✅ Loading state handling untuk dropdown data
**Code Example (✅ GOOD):**
```typescript
// state file - Line ~10-16
const templateResponden = z.object({
name: z.string().min(1, "Nama harus diisi"),
tanggal: z.string().min(1, "Tanggal harus diisi"),
jenisKelaminId: z.string().min(1, "Jenis kelamin harus diisi"),
ratingId: z.string().min(1, "Rating harus diisi"),
kelompokUmurId: z.string().min(1, "Kelompok umur harus diisi"),
});
```
**Verdict:****BAIK** - Validation yang proper!
---
### **4. State Management**
- ✅ Proper typing dengan Prisma types (untuk findUnique)
- ✅ Loading state management dengan finally block
- ✅ Error handling yang comprehensive
-**ApiFetch consistency** untuk create & findMany! ✅
- ✅ Multiple related states (responden, jenisKelamin, rating, umur)
- ✅ Reusable Select component di edit page
**Code Example (✅ GOOD):**
```typescript
// state file - Line ~60-95
findMany: {
data: null as any[] | null,
page: 1,
totalPages: 1,
total: 0,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
responden.findMany.loading = true; // ✅ Start loading
responden.findMany.page = page;
responden.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.landingpage.responden["findMany"].get({ query });
if (res.status === 200 && res.data?.success) {
responden.findMany.data = res.data.data || [];
responden.findMany.total = res.data.total || 0;
responden.findMany.totalPages = res.data.totalPages || 1;
}
} catch (error) {
console.error("Error loading responden:", error);
responden.findMany.data = [];
responden.findMany.total = 0;
responden.findMany.totalPages = 1;
} finally {
responden.findMany.loading = false; // ✅ Stop loading
}
},
}
```
**Verdict:****BAIK** - State management sudah proper dengan ApiFetch!
---
### **5. Edit Form - Original Data Tracking**
- ✅ Original data state untuk reset form
- ✅ Load data existing dengan benar
- ✅ Reset form mengembalikan ke data original
- ✅ Reusable ControlledSelect component
- ✅ Error display untuk setiap field
**Code Example (✅ EXCELLENT):**
```typescript
// edit/page.tsx - Line ~40-60
const [formData, setFormData] = useState<FormResponden>({
name: '',
tanggal: '',
jenisKelaminId: '',
ratingId: '',
kelompokUmurId: '',
});
const [originalData, setOriginalData] = useState<FormResponden>({
name: '',
tanggal: '',
jenisKelaminId: '',
ratingId: '',
kelompokUmurId: '',
});
// Load data
const data = await state.update.load(id);
setFormData(newForm);
setOriginalData(newForm); // ✅ Save original
// Line ~130 - Handle reset
const handleResetForm = () => {
setFormData({ ...originalData });
toast.info('Form dikembalikan ke data awal');
};
// Line ~150 - Reusable Select component
const ControlledSelect = ({
label, value, onChange, options, error, loading,
}) => (
<Select
label={<Text fw="bold" fz="sm" mb={4}>{label}</Text>}
value={value}
onChange={(val) => onChange(val || '')}
data={options}
disabled={loading}
clearable
searchable
required
radius="md"
error={error}
/>
);
```
**Verdict:****EXCELLENT** - Best edit form implementation dengan reusable component!
---
### **6. Master Data Management**
- ✅ 3 master data tables: Jenis Kelamin, Rating, Kelompok Umur
- ✅ Separate proxy states untuk masing-masing
- ✅ Auto-load saat create/edit form
- ✅ Proper filtering dan mapping untuk dropdown options
---
## ⚠️ ISSUES & SARAN PERBAIKAN
### **🔴 CRITICAL**
#### **1. Schema - deletedAt Default Value SALAH (5 MODELS AFFECTED!)**
**Lokasi:** `prisma/schema.prisma` (line 266-297)
**Masalah:**
```prisma
model Responden {
// ...
deletedAt DateTime @default(now()) // ❌ SALAH
isActive Boolean @default(true)
}
model JenisKelaminResponden {
// ...
deletedAt DateTime @default(now()) // ❌ SALAH
isActive Boolean @default(true)
}
model PilihanRatingResponden {
// ...
deletedAt DateTime @default(now()) // ❌ SALAH
isActive Boolean @default(true)
}
model UmurResponden {
// ...
deletedAt DateTime @default(now()) // ❌ SALAH
isActive Boolean @default(true)
}
```
**Dampak:**
- **LOGIC ERROR!** Setiap record baru langsung punya `deletedAt` value
- Soft delete tidak berfungsi dengan benar
- Query dengan `where: { deletedAt: null }` tidak akan pernah return data
- **5 models affected!** (Responden + 3 master data + StrukturPPID)
**Rekomendasi:** Fix semua schema:
```prisma
model Responden {
// ...
deletedAt DateTime? @default(null) // ✅ Nullable
isActive Boolean @default(true)
}
model JenisKelaminResponden {
// ...
deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
model PilihanRatingResponden {
// ...
deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
model UmurResponden {
// ...
deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
```
**Priority:** 🔴 **CRITICAL**
**Effort:** Medium (perlu migration untuk 5 models)
**Impact:** **HIGH** (data integrity & soft delete logic)
---
#### **2. State Management - Fetch Pattern Inconsistency**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan.ts`
**Masalah:** Ada 2 pattern berbeda untuk fetch API:
```typescript
// ❌ Pattern 1: ApiFetch (create, findMany)
const res = await ApiFetch.api.landingpage.responden["create"].post(form);
const res = await ApiFetch.api.landingpage.responden["findMany"].get({ query });
// ❌ Pattern 2: fetch manual (findUnique, update)
const res = await fetch(`/api/landingpage/responden/${id}`);
const response = await fetch(`/api/landingpage/responden/${id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
});
```
**Dampak:**
- Code consistency buruk
- Sulit maintenance
- Type safety tidak konsisten
- Duplikasi logic error handling
**Rekomendasi:** Gunakan **ApiFetch** untuk semua operasi:
```typescript
// ✅ Unified pattern
async load(id: string) {
try {
const res = await ApiFetch.api.landingpage.responden[id].get();
if (res.data?.success) {
responden.findUnique.data = res.data.data;
} else {
toast.error(res.data?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error:", error);
toast.error("Gagal memuat data");
}
}
```
**Priority:** 🔴 High
**Effort:** Medium (refactor di findUnique, update methods)
---
#### **3. Type Safety - Any Usage di findMany**
**Lokasi:** `src/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan.ts`
**Masalah:**
```typescript
// Line ~58
data: null as any[] | null, // ❌ Using 'any'
// Line ~270
data: null as any[] | null, // ❌ Using 'any'
// Line ~370
data: null as any[] | null, // ❌ Using 'any'
// Line ~470
data: null as any[] | null, // ❌ Using 'any'
```
**Issue:** findMany data tidak typed dengan Prisma types, hanya findUnique yang typed.
**Rekomendasi:** Gunakan typed data:
```typescript
// Define type
type RespondenWithRelations = Prisma.RespondenGetPayload<{
include: {
jenisKelamin: true;
rating: true;
kelompokUmur: true;
};
}>;
// Use typed data
data: null as RespondenWithRelations[] | null,
```
**Priority:** 🟡 Medium
**Effort:** Low
---
### **🟡 MEDIUM**
#### **4. Console.log di Production**
**Lokasi:** Multiple places di state file
**Masalah:**
```typescript
// Line ~80
console.error("Failed to load responden:", res.data?.message);
// Line ~85
console.error("Error loading responden:", error);
// Line ~110
console.error("Failed to fetch data", res.status, res.statusText);
// Line ~114
console.error("Error loading responden:", error);
// ... dan banyak lagi di semua master data states
```
**Rekomendasi:** Gunakan conditional logging:
```typescript
if (process.env.NODE_ENV === 'development') {
console.error("Error:", error);
}
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **5. Missing Loading State di Submit Button**
**Lokasi:** `create/page.tsx`
**Masalah:**
```typescript
// Line ~100-110
<Button
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
// ...
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
```
**Verdict:****SUDAH BENAR** - Loading state sudah ada di create page!
**Priority:** 🟢 None
**Effort:** None
---
#### **6. Missing Loading State di Edit Submit Button**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~220-230
<Button
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
// ⚠️ Missing state.update.loading check
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
```
**Issue:** Button tidak check `state.update.loading` dari global state.
**Rekomendasi:** Check both states:
```typescript
disabled={!isFormValid() || isSubmitting || state.update.loading}
{isSubmitting || state.update.loading ? (
<Loader size="sm" color="white" />
) : (
'Simpan'
)}
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **7. Pagination onChange Tidak Include Search**
**Lokasi:** `responden/page.tsx`
**Masalah:**
```typescript
// Line ~200-210
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10); // ⚠️ Missing search parameter
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
// ...
/>
```
**Issue:** Saat ganti page, search query hilang.
**Rekomendasi:** Include search:
```typescript
onChange={(newPage) => {
load(newPage, 10, debouncedSearch); // ✅ Include search
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
```
**Priority:** 🟡 Low
**Effort:** Low
---
### **🟢 LOW (Minor Polish)**
#### **8. Missing Delete Function di Master Data**
**Lokasi:** State file untuk master data
**Masalah:**
```typescript
// Line ~270-290 (jenisKelaminResponden)
delete: {
loading: false,
async byId(id: string) {
// ✅ Method sudah ada
},
}
```
**Verdict:****SUDAH BENAR** - Delete function sudah ada di semua master data!
**Priority:** 🟢 None
**Effort:** None
---
#### **9. Duplicate Loading State Assignment**
**Lokasi:** State file untuk master data
**Masalah:**
```typescript
// Line ~290-295 (jenisKelaminResponden.create)
async create() {
// ...
jenisKelaminResponden.create.loading = true; // ✅ First assignment
try {
jenisKelaminResponden.create.loading = true; // ❌ Duplicate!
const res = await ApiFetch.api.landingpage.jeniskelaminresponden["create"].post(form);
// ...
}
}
```
**Rekomendasi:** Remove duplicate:
```typescript
async create() {
// ...
jenisKelaminResponden.create.loading = true; // ✅ Keep only this
try {
// Remove duplicate line
const res = await ApiFetch.api.landingpage.jeniskelaminresponden["create"].post(form);
// ...
}
}
```
**Priority:** 🟢 Low
**Effort:** Low (ada di 3 master data states)
---
#### **10. Inconsistent Toast Messages**
**Lokasi:** State file
**Masalah:**
```typescript
// Line ~45 (responden.create)
toast.success("Responden berhasil ditambahkan");
// Line ~295 (jenisKelaminResponden.create)
toast.success("Jenis kelamin responden berhasil ditambahkan");
// Line ~400 (pilihanRatingResponden.create)
toast.success("Jenis kelamin responden berhasil ditambahkan"); // ❌ Wrong message!
// Line ~505 (kelompokUmurResponden.create)
toast.success("Kelompok umur responden berhasil ditambahkan");
```
**Issue:** Copy-paste error di pilihanRatingResponden (masih "Jenis kelamin responden").
**Rekomendasi:** Fix message:
```typescript
toast.success("Pilihan rating responden berhasil ditambahkan");
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **11. Missing Edit Page untuk Master Data**
**Lokasi:** Module structure
**Masalah:**
- ✅ Responden: Create, Edit, Detail, Delete
- ❌ Jenis Kelamin: Create, Delete (NO EDIT)
- ❌ Rating: Create, Delete (NO EDIT)
- ❌ Kelompok Umur: Create, Delete (NO EDIT)
**Issue:** Master data tidak bisa diedit, hanya bisa delete & create ulang.
**Rekomendasi:** Consider adding edit pages untuk master data jika diperlukan:
```typescript
// Add edit method di state (sudah ada)
// Add edit page di UI
/admin/ppid/indeks-kepuasan-masyarakat/jenis-kelamin/[id]/edit
```
**Priority:** 🟢 Low (business decision)
**Effort:** Medium
---
#### **12. Search Placeholder Tidak Spesifik**
**Lokasi:** `responden/page.tsx`
**Masalah:**
```typescript
// Line ~30-35
<HeaderSearch
title="Data Responden"
placeholder="Cari nama responden..." // ✅ Actually pretty specific!
// ...
/>
```
**Verdict:****SUDAH BENAR** - Placeholder sudah spesifik!
**Priority:** 🟢 None
**Effort:** None
---
#### **13. Chart Color Hardcoding**
**Lokasi:** `grafik-kepuasan-masyarakat/page.tsx`
**Masalah:**
```typescript
// Line ~55-60
setDonutDataJenisKelamin([
{ name: 'Laki-laki', value: totalLaki, color: colors['blue-button'] },
{ name: 'Perempuan', value: totalPerempuan, color: '#10A85AFF' }, // ❌ Hardcoded
]);
setDonutDataRating([
{ name: 'Sangat Baik', value: totalSangatBaik, color: colors['blue-button'] },
{ name: 'Baik', value: totalBaik, color: '#10A85AFF' }, // ❌ Hardcoded
{ name: 'Kurang Baik', value: totalKurangBaik, color: '#FFA500' }, // ❌ Hardcoded
{ name: 'Sangat Kurang Baik', value: totalSangatKurangBaik, color: '#FF4500' }, // ❌ Hardcoded
]);
```
**Rekomendasi:** Define color constants:
```typescript
// con/colors.ts atau file terpisah
export const chartColors = {
primary: colors['blue-button'],
success: '#10A85AFF',
warning: '#FFA500',
danger: '#FF4500',
};
// Use in chart data
{ name: 'Perempuan', value: totalPerempuan, color: chartColors.success },
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **14. Date Parsing di Detail Page**
**Lokasi:** `responden/[id]/page.tsx`
**Masalah:**
```typescript
// Line ~65-70
<Text fz="md" c="dimmed">{
stateDetail.findUnique.data?.tanggal
? new Date(stateDetail.findUnique.data.tanggal).toLocaleDateString('id-ID')
: '-'
}</Text>
```
**Verdict:****SUDAH BENAR** - Date formatting yang proper!
**Priority:** 🟢 None
**Effort:** None
---
## 📋 RINGKASAN ACTION ITEMS
| Priority | Issue | Module | Impact | Effort | Status |
|----------|-------|--------|--------|--------|--------|
| 🔴 P0 | **Schema deletedAt default SALAH (5 models)** | Schema | **CRITICAL** | Medium | **MUST FIX** |
| 🔴 P0 | Fetch method inconsistency | State | Medium | Medium | Perlu refactor |
| 🟡 M | Type safety (any usage) | State | Low | Low | Optional |
| 🟡 M | Console.log in production | State | Low | Low | Optional |
| 🟡 M | Missing loading state di edit submit | UI | Low | Low | Should fix |
| 🟡 M | Pagination missing search param | UI | Low | Low | Should fix |
| 🟢 L | Duplicate loading state assignment | State | Low | Low | Optional |
| 🟢 L | Inconsistent toast messages | State | Low | Low | Should fix |
| 🟢 L | Missing edit page untuk master data | UI | Low | Medium | Optional |
| 🟢 L | Chart color hardcoding | UI | Low | Low | Optional |
---
## ✅ KESIMPULAN
### **Overall Quality: 🟢 BAIK (8/10)**
**Strengths:**
1.**Grafik & Charts EXCELLENT** - Best chart implementation di semua modul PPID!
2.**Data processing comprehensive** - Automatic calculation dari data responden
3.**3 Distribusi Charts** - Jenis Kelamin, Penilaian, Kelompok Umur
4.**Bar Chart Tren** - Monthly respondent trends
5. ✅ UI/UX clean & responsive
6. ✅ Form validation comprehensive
7. ✅ State management dengan ApiFetch untuk create & findMany
8.**Edit form EXCELLENT** - Reusable ControlledSelect component
9. ✅ Original data tracking untuk reset form
10. ✅ Master data management proper (3 tables)
11. ✅ Loading state management dengan finally block
12. ✅ Mobile cards responsive
**Critical Issues:**
1. ⚠️ **Schema deletedAt default SALAH** - 5 models affected (CRITICAL)
2. ⚠️ Fetch method pattern inconsistency (ApiFetch vs fetch manual)
3. ⚠️ Type safety (any usage di findMany)
**Areas for Improvement:**
1. ⚠️ **Fix schema deletedAt** untuk 5 models dari `@default(now())` ke `@default(null)` dengan nullable
2. ⚠️ **Refactor fetch methods** untuk gunakan ApiFetch consistently
3. ⚠️ **Improve type safety** dengan remove `any` usage
4. ⚠️ **Add loading state** di edit submit button
5. ⚠️ **Fix duplicate loading state** di master data create methods
6. ⚠️ **Fix copy-paste toast message** di pilihanRatingResponden
**Recommended Next Steps:**
1. **🔴 CRITICAL: Fix schema deletedAt** untuk 5 models - 1 jam (perlu migration)
2. **🔴 HIGH: Refactor findUnique, update** ke ApiFetch - 1 jam
3. **🟡 MEDIUM: Improve type safety** - 30 menit
4. **🟡 MEDIUM: Add loading state** di edit submit - 10 menit
5. **🟡 MEDIUM: Fix pagination search param** - 10 menit
6. **🟢 LOW: Fix duplicate loading state** - 15 menit
7. **🟢 LOW: Fix toast message** - 5 menit
8. **🟢 LOW: Define chart color constants** - 15 menit
---
## 📈 COMPARISON WITH OTHER MODULES
| Module | Charts | Data Processing | Edit Form | State | Schema | Overall |
|--------|--------|----------------|-----------|-------|--------|---------|
| Profil | ❌ None | N/A | ✅ Good | ⚠️ Good | ⚠️ deletedAt | 🟢 |
| Desa Anti Korupsi | ❌ None | N/A | ✅ Good | ⚠️ Good | ⚠️ deletedAt | 🟢 |
| SDGs Desa | ❌ None | N/A | ✅ Good | ⚠️ Good | ⚠️ deletedAt | 🟢 |
| APBDes | ❌ None | ✅ Items hierarchy | ✅ Good | ⚠️ Good | ✅ Good | 🟢 |
| Prestasi Desa | ❌ None | N/A | ✅ Good | ⚠️ Good | ❌ WRONG | 🟢 |
| PPID Profil | ❌ None | N/A | ✅ **Excellent** | ✅ **Best** | ❌ WRONG | 🟢⭐ |
| Struktur PPID | ❌ None | N/A | ✅ Good | ✅ Good | ⚠️ Inconsistent | 🟢 |
| Visi Misi PPID | ❌ None | N/A | ✅ Good | ✅ **Best** | ❌ WRONG | 🟢⭐⭐ |
| Dasar Hukum PPID | ❌ None | N/A | ✅ Good | ✅ **Best** | ❌ WRONG | 🟢⭐⭐ |
| Permohonan Informasi | ❌ None | N/A | ❌ Missing | ⚠️ Good | ❌ **4 models WRONG** | 🟡 |
| Permohonan Keberatan | ❌ None | N/A | ❌ Missing | ⚠️ Good | ❌ WRONG | 🟡 |
| Daftar Informasi | ❌ None | N/A | ✅ Good | ⚠️ Good | ❌ WRONG | 🟢 |
| **IKM (Indeks Kepuasan)** | ✅ **EXCELLENT** | ✅ **EXCELLENT** | ✅ **Excellent** | ⚠️ Good | ❌ **5 models WRONG** | 🟢 |
**IKM Highlights:**
-**BEST CHARTS** - Mantine Charts (PieChart, BarChart)
-**BEST DATA PROCESSING** - Automatic calculation & grouping
-**BEST EDIT FORM** - Reusable ControlledSelect component
- ⚠️ **5 models affected** - deletedAt issue (most affected module!)
---
## 🎯 UNIQUE FEATURES OF IKM MODULE
**Most Advanced Data Visualization:**
1.**Mantine Charts** - PieChart & BarChart (UNIQUE!)
2.**3 Distribusi Charts** - Jenis Kelamin, Penilaian, Kelompok Umur
3.**Monthly Trend Chart** - Bar chart dengan grouping
4.**Automatic Calculation** - Filter & count dari data
5.**Reusable Select Component** - ControlledSelect di edit form
6.**3 Master Data Tables** - Jenis Kelamin, Rating, Kelompok Umur
**Best Practices:**
1.**Chart implementation** - Best practice untuk data visualization
2.**Data processing** - Comprehensive calculation & grouping
3.**Reusable components** - ControlledSelect untuk dropdowns
4.**Loading state management** - Proper dengan finally block
5.**Original data tracking** - Edit form reset yang proper
6.**Master data management** - Separate states untuk masing-masing
**Critical Issues:**
1.**5 models dengan deletedAt SALAH** - Most affected module!
2.**Fetch pattern inconsistency** - findUnique, update pakai fetch manual
3.**Type safety** - any usage di findMany
---
**Catatan:** **IKM adalah MODULE DENGAN CHARTS & DATA VISUALIZATION TERBAIK** dengan Mantine Charts implementation yang excellent. Module ini juga punya **BEST EDIT FORM** dengan reusable ControlledSelect component. Tapi juga **MODULE DENGAN PALING BANYAK MODEL AFFECTED** oleh deletedAt issue (5 models!).
**Unique Strengths:**
1.**Charts EXCELLENT** - Best data visualization
2.**Data processing** - Automatic calculation & grouping
3.**Edit form EXCELLENT** - Reusable ControlledSelect
4.**Master data management** - 3 separate tables
5.**Monthly trends** - Bar chart dengan grouping
**Priority Action:**
```diff
🔴 FIX INI SEKARANG (1 JAM + MIGRATION):
File: prisma/schema.prisma
Line: 266-297
# Fix 5 models:
model Responden {
// ...
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
model JenisKelaminResponden {
// ...
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
model PilihanRatingResponden {
// ...
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
model UmurResponden {
// ...
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
# Lalu jalankan:
bunx prisma db push
# atau
bunx prisma migrate dev --name fix_deletedat_ikm
```
Setelah fix critical issues, module ini **PRODUCTION-READY** dengan **BEST CHARTS & DATA VISUALIZATION**! 🎉
---
## 📚 RECOMMENDED AS REFERENCE FOR OTHER MODULES
**IKM Module adalah BEST PRACTICE untuk:**
1.**Charts & Data Visualization** - Mantine Charts implementation
2.**Data Processing** - Automatic calculation & grouping
3.**Reusable Components** - ControlledSelect untuk dropdowns
4.**Edit Form** - Original data tracking dengan reusable components
5.**Master Data Management** - Separate states untuk multiple tables
**Modules lain bisa belajar dari IKM:**
- **ALL MODULES WITH CHARTS:** Use Mantine Charts (PieChart, BarChart)
- **ALL MODULES WITH DROPDOWNS:** Use reusable ControlledSelect component
- **ALL MODULES:** Automatic data calculation untuk charts
- **ALL MODULES:** Master data management dengan separate states
- **ALL MODULES:** Edit form dengan original data tracking
---
**File Location:** `QC/PPID/QC-IKM-MODULE.md` 📄

View File

@@ -0,0 +1,844 @@
# QC Summary - Permohonan Informasi Publik PPID Module
**Scope:** List Permohonan Informasi Publik, Detail Permohonan
**Date:** 2026-02-23
**Status:** ✅ Secara umum sudah baik, ada beberapa improvement yang diperlukan
---
## 📊 OVERVIEW
| Aspect | Schema | API | UI Admin | State Management | Overall |
|--------|--------|-----|----------|-----------------|---------|
| Permohonan Informasi Publik | ⚠️ Ada issue | ✅ Baik | ✅ Baik | ⚠️ Ada issue | 🟡 Perlu fix |
---
## ✅ YANG SUDAH BAIK
### **1. UI/UX Design**
- ✅ Preview layout yang clean dengan responsive design
- ✅ Loading states dengan Skeleton
- ✅ Empty state handling yang informatif dengan icon
- ✅ Search functionality dengan debounce (1000ms)
- ✅ Pagination yang konsisten
- ✅ Desktop table + mobile cards responsive
- ✅ Icon integration (User, ID, Phone, Info) untuk visual clarity
### **2. Table & Card Layout**
- ✅ Fixed layout table untuk consistency
- ✅ Column headers dengan icon yang descriptive
- ✅ Row numbering otomatis (index + 1)
- ✅ Text truncation dengan lineClamp untuk long text
- ✅ Mobile card view dengan proper information hierarchy
**Code Example (✅ GOOD):**
```typescript
// page.tsx - Line ~130-180
<Table highlightOnHover
layout="fixed" // ✅ PENTING - consistent column widths
withColumnBorders={false}>
<TableThead>
<TableTr>
<TableTh fz="sm" fw={600} ta="center" w={60}>No</TableTh>
<TableTh fz="sm" fw={600}>
<Group gap={5}>
<IconUser size={16} />
Nama
</Group>
</TableTh>
<TableTh fz="sm" fw={600}>
<Group gap={5}>
<IconId size={16} />
NIK
</Group>
</TableTh>
// ...
</TableTr>
</TableThead>
```
**Verdict:****BAIK** - Table layout dengan icon yang helpful!
---
### **3. State Management**
- ✅ Proper typing dengan Prisma types
- ✅ Loading state management dengan finally block
- ✅ Error handling yang comprehensive
-**ApiFetch consistency** untuk create & findMany! ✅
- ✅ Zod validation untuk form data dengan specific rules
- ✅ Separate proxy states untuk related data (jenisInformasi, caraMemperoleh, dll)
**Code Example (✅ GOOD):**
```typescript
// state file - Line ~110-150
findMany: {
data: null as Prisma.PermohonanInformasiPublikGetPayload<{...}>[] | null,
page: 1,
totalPages: 1,
total: 0,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
statepermohonanInformasiPublik.findMany.loading = true; // ✅ Start loading
statepermohonanInformasiPublik.findMany.page = page;
statepermohonanInformasiPublik.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.ppid.permohonaninformasipublik["find-many"].get({ query });
if (res.status === 200 && res.data?.success) {
statepermohonanInformasiPublik.findMany.data = res.data.data || [];
statepermohonanInformasiPublik.findMany.total = res.data.total || 0;
statepermohonanInformasiPublik.findMany.totalPages = res.data.totalPages || 1;
}
} catch (error) {
console.error("Error loading permohonan:", error);
statepermohonanInformasiPublik.findMany.data = [];
// ...
} finally {
statepermohonanInformasiPublik.findMany.loading = false; // ✅ Stop loading
}
},
}
```
**Verdict:****BAIK** - State management sudah proper dengan ApiFetch!
---
### **4. Zod Schema Validation**
- ✅ Comprehensive validation untuk semua fields
- ✅ Specific error messages untuk setiap field
- ✅ Phone number length validation (3-15 chars)
- ✅ NIK length validation (3-16 chars)
- ✅ Email format validation
- ✅ Required field validation untuk dropdowns
**Code Example (✅ EXCELLENT):**
```typescript
// state file - Line ~8-22
const templateForm = z.object({
name: z.string().min(3, "Nama minimal 3 karakter"),
nik: z
.string()
.min(3, "NIK minimal 3 karakter")
.max(16, "NIK maksimal 16 angka"), // ✅ Specific validation
notelp: z
.string()
.min(3, "Nomor Telepon minimal 3 karakter")
.max(15, "Nomor Telepon maksimal 15 angka"), // ✅ Specific validation
alamat: z.string().min(3, "Alamat minimal 3 karakter"),
email: z.string().min(3, "Email minimal 3 karakter"),
jenisInformasiDimintaId: z.string().nonempty(), // ✅ Required dropdown
caraMemperolehInformasiId: z.string().nonempty(), // ✅ Required dropdown
caraMemperolehSalinanInformasiId: z.string().nonempty(), // ✅ Required dropdown
});
```
**Verdict:****EXCELLENT** - Validation yang comprehensive!
---
### **5. Related Data Management**
- ✅ Separate proxy states untuk dropdown data
- ✅ JenisInformasiDiminta, CaraMemperolehInformasi, CaraMemperolehSalinanInformasi
- ✅ Proper typing dengan Prisma types
- ✅ ApiFetch consistency untuk load dropdown data
**Code Example (✅ GOOD):**
```typescript
// state file - Line ~24-40
const jenisInformasiDiminta = proxy({
findMany: {
data: null as Prisma.JenisInformasiDimintaGetPayload<{ omit: { isActive: true } }>[] | null,
async load() {
const res = await ApiFetch.api.ppid.permohonaninformasipublik.jenisInformasi["find-many"].get();
if (res.status === 200) {
jenisInformasiDiminta.findMany.data = res.data?.data ?? [];
}
},
},
});
```
**Verdict:****BAIK** - Related data management yang proper!
---
## ⚠️ ISSUES & SARAN PERBAIKAN
### **🔴 CRITICAL**
#### **1. Schema - deletedAt Default Value SALAH (MULTIPLE MODELS)**
**Lokasi:** `prisma/schema.prisma` (line 435-467)
**Masalah:**
```prisma
model PermohonanInformasiPublik {
// ...
deletedAt DateTime @default(now()) // ❌ SALAH - selalu punya default value
isActive Boolean @default(true)
}
model JenisInformasiDiminta {
// ...
deletedAt DateTime @default(now()) // ❌ SALAH
isActive Boolean @default(true)
}
model CaraMemperolehInformasi {
// ...
deletedAt DateTime @default(now()) // ❌ SALAH
isActive Boolean @default(true)
}
model CaraMemperolehSalinanInformasi {
// ...
deletedAt DateTime @default(now()) // ❌ SALAH
isActive Boolean @default(true)
}
```
**Dampak:**
- **LOGIC ERROR!** Setiap record baru langsung punya `deletedAt` value (timestamp creation)
- Soft delete tidak berfungsi dengan benar
- Query dengan `where: { deletedAt: null }` tidak akan pernah return data
- Data yang "dihapus" vs data "aktif" tidak bisa dibedakan
- **4 models affected!** (PermohonanInformasiPublik + 3 related models)
**Rekomendasi:** Fix semua schema:
```prisma
model PermohonanInformasiPublik {
// ...
deletedAt DateTime? @default(null) // ✅ Nullable, null = not deleted
isActive Boolean @default(true)
}
model JenisInformasiDiminta {
// ...
deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
model CaraMemperolehInformasi {
// ...
deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
model CaraMemperolehSalinanInformasi {
// ...
deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
```
**Priority:** 🔴 **CRITICAL**
**Effort:** Medium (perlu migration untuk 4 models)
**Impact:** **HIGH** (data integrity & soft delete logic)
---
#### **2. State Management - Fetch Pattern Inconsistency**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik.ts`
**Masalah:** Ada 2 pattern berbeda untuk fetch API:
```typescript
// ❌ Pattern 1: ApiFetch (create, findMany, dropdowns)
const res = await ApiFetch.api.ppid.permohonaninformasipublik["create"].post(form);
const res = await ApiFetch.api.ppid.permohonaninformasipublik["find-many"].get({ query });
const res = await ApiFetch.api.ppid.permohonaninformasipublik.jenisInformasi["find-many"].get();
// ❌ Pattern 2: fetch manual (findUnique)
const res = await fetch(`/api/ppid/permohonaninformasipublik/${id}`);
```
**Dampak:**
- Code consistency buruk
- Sulit maintenance
- Type safety tidak konsisten
- Duplikasi logic error handling
**Rekomendasi:** Gunakan **ApiFetch** untuk semua operasi:
```typescript
// ✅ Unified pattern
async load(id: string) {
try {
const res = await ApiFetch.api.ppid.permohonaninformasipublik[id].get();
if (res.data?.success) {
statepermohonanInformasiPublik.findUnique.data = res.data.data;
} else {
toast.error(res.data?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error:", error);
toast.error("Gagal memuat data");
}
}
```
**Priority:** 🔴 High
**Effort:** Medium (refactor di findUnique method)
---
#### **3. Console.log di Production**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik.ts`
**Masalah:**
```typescript
// Line ~70
console.log(caraMemperolehSalinanInformasi); // ❌ Debug log
// Line ~160
console.error("Failed to load permohonan keberatan informasi:", res.data?.message);
// Line ~165
console.error("Error loading permohonan keberatan informasi:", error);
// Line ~185
console.error("Failed to fetch program inovasi:", res.statusText);
// Line ~188
console.error("Error fetching program inovasi:", error);
```
**Rekomendasi:** Gunakan conditional logging:
```typescript
if (process.env.NODE_ENV === 'development') {
console.error("Error:", error);
}
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **4. Missing Delete/Hard Delete Protection**
**Lokasi:** `page.tsx`, `[id]/page.tsx`
**Masalah:**
- ❌ Tidak ada tombol delete untuk Permohonan Informasi (correct - read-only data)
-**GOOD:** Read-only pattern yang benar untuk data permohonan
- ⚠️ **ISSUE:** Tidak ada fitur untuk mark sebagai "processed" atau "completed"
**Issue:** User tidak bisa update status permohonan (pending → processed → completed).
**Rekomendasi:** Add status management:
```prisma
// Add to schema
model PermohonanInformasiPublik {
// ...
status String @default("pending") // pending, processed, completed
processedAt DateTime?
processedBy String?
}
```
```typescript
// Add action buttons di detail page
<Group>
<Button color="yellow" onClick={() => updateStatus("processed")}>
Mark as Processed
</Button>
<Button color="green" onClick={() => updateStatus("completed")}>
Mark as Completed
</Button>
</Group>
```
**Priority:** 🔴 Medium
**Effort:** Medium (perlu schema change + UI update)
---
### **🟡 MEDIUM**
#### **5. Type Safety - Any Usage**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik.ts`
**Masalah:**
```typescript
// Line ~145
const query: any = { page, limit }; // ❌ Using 'any'
if (search) query.search = search;
```
**Rekomendasi:** Gunakan typed query:
```typescript
// Define type
interface FindManyQuery {
page: number | string;
limit?: number | string;
search?: string;
}
// Use typed query
const query: FindManyQuery = { page, limit };
if (search) query.search = search;
```
**Priority:** 🟡 Medium
**Effort:** Low
---
#### **6. Error Message Tidak Konsisten**
**Lokasi:** Multiple places
**Masalah:**
```typescript
// Line ~160
console.error("Failed to load permohonan keberatan informasi:", res.data?.message);
// ⚠️ Wrong module name - ini "permohonan informasi publik" bukan "keberatan"
// Line ~165
console.error("Error loading permohonan keberatan informasi:", error);
// ⚠️ Same issue
// Line ~185
console.error("Failed to fetch program inovasi:", res.statusText);
// ⚠️ Wrong module name - ini "permohonan informasi" bukan "program inovasi"
// Line ~188
console.error("Error fetching program inovasi:", error);
// ⚠️ Same issue
```
**Issue:** Copy-paste error dari module lain!
**Rekomendasi:** Fix error messages:
```typescript
console.error("Failed to load permohonan informasi publik:", res.data?.message);
console.error("Error loading permohonan informasi publik:", error);
console.error("Failed to fetch permohonan informasi:", res.statusText);
console.error("Error fetching permohonan informasi:", error);
```
**Priority:** 🟡 Medium
**Effort:** Low
---
#### **7. Pagination onChange Tidak Include Search**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~250-260
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10); // ⚠️ Missing search parameter
window.scrollTo(0, 0);
}}
total={totalPages}
// ...
/>
```
**Issue:** Saat ganti page, search query hilang.
**Rekomendasi:** Include search:
```typescript
onChange={(newPage) => {
load(newPage, 10, debouncedSearch); // ✅ Include search
window.scrollTo(0, 0);
}}
```
**Priority:** 🟡 Low
**Effort:** Low
---
### **🟢 LOW (Minor Polish)**
#### **8. Missing Loading State di Detail Page**
**Lokasi:** `[id]/page.tsx`
**Masalah:**
```typescript
// Line ~20-25
useShallowEffect(() => {
state.findUnique.load(params?.id as string)
}, [params?.id])
if (!state.findUnique.data) {
return (
<Stack py={10}>
<Skeleton height={500} radius="md" />
</Stack>
)
}
```
**Issue:** Skeleton ditampilkan untuk semua kondisi (loading, error, not found).
**Rekomendasi:** Add proper loading state:
```typescript
if (state.findUnique.loading) {
return (
<Stack py={10}>
<Skeleton height={500} radius="md" />
</Stack>
);
}
if (!state.findUnique.data) {
return (
<Alert icon={<IconAlertCircle />} color="red">
Data tidak ditemukan
</Alert>
);
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **9. Duplicate Error Logging**
**Lokasi:** `page.tsx`, state file
**Masalah:**
```typescript
// page.tsx - Line ~160-165
console.error("Failed to load permohonan keberatan informasi:", res.data?.message);
console.error("Error loading permohonan keberatan informasi:", error);
// state file - Line ~185-188
console.error("Failed to fetch program inovasi:", res.statusText);
console.error("Error fetching program inovasi:", error);
```
**Rekomendasi:** Cukup satu logging yang informatif:
```typescript
console.error('Failed to load Permohonan Informasi Publik:', err);
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **10. Search Placeholder Tidak Spesifik**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~70, 110
<TextInput
placeholder={"Cari nama..."} // ⚠️ Generic
// ...
/>
```
**Rekomendasi:** Lebih spesifik:
```typescript
placeholder={"Cari nama pemohon..."}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **11. Missing Data Relationships di Detail Page**
**Lokasi:** `[id]/page.tsx`
**Masalah:**
```typescript
// Line ~60-90
<Box>
<Text fz="lg" fw="bold" mb={4}>Jenis Informasi</Text>
<Text fz="md" c="dimmed">{data.jenisInformasiDiminta?.name || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Cara Akses Informasi</Text>
<Text fz="md" c="dimmed">{data.caraMemperolehInformasi?.name || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Cara Akses Salinan Informasi</Text>
<Text fz="md" c="dimmed">{data.caraMemperolehSalinanInformasi?.name || '-'}</Text>
</Box>
```
**Issue:** Tidak menampilkan data `alamat` yang ada di schema.
**Rekomendasi:** Add missing field:
```typescript
<Box>
<Text fz="lg" fw="bold" mb={4}>Alamat</Text>
<Text fz="md" c="dimmed">{data.alamat || '-'}</Text>
</Box>
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **12. Unused Console.log**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik.ts`
**Masalah:**
```typescript
// Line ~70
console.log(caraMemperolehSalinanInformasi); // ❌ Debug log yang tidak terpakai
```
**Rekomendasi:** Remove:
```typescript
// Remove this line completely
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **13. Missing Empty State Icon di Mobile**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~60-75 (Desktop empty state)
<Stack align="center" py="xl" ta="center">
<IconInfoCircle size={40} stroke={1.5} color={colors['blue-button']} />
<Text fz={{ base: 'sm', md: 'md' }} fw={500} c="dimmed" lh={1.5}>
{search
? 'Tidak ditemukan data yang sesuai dengan pencarian'
: 'Belum ada permohonan yang tercatat'
}
</Text>
</Stack>
// Line ~120-130 (Mobile - missing icon)
<Stack align="center" py={{ base: 'xl', md: 'xl' }}>
<IconInfoCircle size={40} stroke={1.5} color={colors['blue-button']} />
// ✅ Icon ada di sini juga
<Text fz={{ base: 'sm', md: 'md' }} fw={500} c="dimmed" lh={1.5}>
Belum ada permohonan informasi yang tercatat
</Text>
</Stack>
```
**Verdict:****SUDAH BENAR** - Icon ada di kedua empty states!
**Priority:** 🟢 None
**Effort:** None
---
## 📋 RINGKASAN ACTION ITEMS
| Priority | Issue | Module | Impact | Effort | Status |
|----------|-------|--------|--------|--------|--------|
| 🔴 P0 | **Schema deletedAt default SALAH (4 models)** | Schema | **CRITICAL** | Medium | **MUST FIX** |
| 🔴 P0 | Fetch method inconsistency | State | Medium | Medium | Perlu refactor |
| 🔴 P1 | Missing status management | UI/Schema | Medium | Medium | Should add |
| 🟡 M | Console.log in production | State | Low | Low | Optional |
| 🟡 M | Type safety (any usage) | State | Low | Low | Optional |
| 🟡 M | Error message inconsistency (copy-paste) | State | Low | Low | Should fix |
| 🟡 M | Pagination missing search param | UI | Low | Low | Should fix |
| 🟢 L | Missing loading state di detail page | UI | Low | Low | Optional |
| 🟢 L | Duplicate error logging | UI/State | Low | Low | Optional |
| 🟢 L | Search placeholder tidak spesifik | UI | Low | Low | Optional |
| 🟢 L | Missing alamat field di detail page | UI | Low | Low | Optional |
| 🟢 L | Unused console.log | State | Low | Low | Optional |
---
## ✅ KESIMPULAN
### **Overall Quality: 🟢 BAIK (7.5/10)**
**Strengths:**
1. ✅ UI/UX clean & responsive
2. ✅ Table layout dengan icon yang helpful
3. ✅ Search functionality dengan debounce
4. ✅ Empty state handling yang informatif
5.**Zod validation comprehensive** dengan specific rules
6.**Related data management** proper (dropdowns)
7. ✅ State management dengan ApiFetch untuk create & findMany
8. ✅ Loading state management dengan finally block
9. ✅ Mobile cards responsive
**Critical Issues:**
1. ⚠️ **Schema deletedAt default SALAH** - 4 models affected (CRITICAL)
2. ⚠️ Fetch method pattern inconsistency (ApiFetch vs fetch manual)
3. ⚠️ Missing status management untuk permohonan (pending → processed → completed)
**Areas for Improvement:**
1. ⚠️ **Fix schema deletedAt** untuk 4 models dari `@default(now())` ke `@default(null)` dengan nullable
2. ⚠️ **Refactor fetch methods** untuk gunakan ApiFetch consistently
3. ⚠️ **Add status management** untuk tracking status permohonan
4. ⚠️ **Fix error messages** (copy-paste error dari module lain)
5. ⚠️ **Improve type safety** dengan remove `any` usage
**Recommended Next Steps:**
1. **🔴 CRITICAL: Fix schema deletedAt** untuk 4 models - 1 jam (perlu migration)
2. **🔴 HIGH: Refactor findUnique** ke ApiFetch - 30 menit
3. **🔴 HIGH: Add status management** - 1 jam (schema + UI)
4. **🟡 MEDIUM: Fix error messages** (copy-paste) - 10 menit
5. **🟢 LOW: Add pagination search param** - 10 menit
6. **🟢 LOW: Polish minor issues** - 30 menit
---
## 📈 COMPARISON WITH OTHER MODULES
| Module | Fetch Pattern | State | Validation | Schema | Status Mgmt | Overall |
|--------|--------------|-------|------------|--------|-------------|---------|
| Profil | ⚠️ Mixed | ⚠️ Good | ✅ Good | ⚠️ deletedAt | N/A | 🟢 |
| Desa Anti Korupsi | ⚠️ Mixed | ⚠️ Good | ✅ Good | ⚠️ deletedAt | N/A | 🟢 |
| SDGs Desa | ⚠️ Mixed | ⚠️ Good | ✅ Good | ⚠️ deletedAt | N/A | 🟢 |
| APBDes | ⚠️ Mixed | ⚠️ Good | ✅ Good | ✅ Good | N/A | 🟢 |
| Prestasi Desa | ⚠️ Mixed | ⚠️ Good | ✅ Good | ❌ WRONG | N/A | 🟢 |
| PPID Profil | ⚠️ Mixed | ✅ Best | ✅ Good | ❌ WRONG | N/A | 🟢⭐ |
| Struktur PPID | ⚠️ Mixed | ✅ Good | ✅ Good | ⚠️ Inconsistent | ✅ Active/Non-active | 🟢 |
| Visi Misi PPID | ✅ **100% ApiFetch!** | ✅ Best | ✅ Good | ❌ WRONG | N/A | 🟢⭐⭐ |
| Dasar Hukum PPID | ✅ **100% ApiFetch!** | ✅ Best | ✅ Good | ❌ WRONG | N/A | 🟢⭐⭐ |
| **Permohonan Informasi** | ⚠️ Mixed | ⚠️ Good | ✅ **Best** | ❌ **4 models WRONG** | ❌ Missing | 🟡 |
**Permohonan Informasi PPID Highlights:**
-**Best validation** - Comprehensive Zod schema dengan specific rules
-**Related data management** - Separate proxy states untuk dropdowns
-**Icon integration** - Table headers dengan icon yang helpful
- ⚠️ **4 models affected** - deletedAt issue (most affected module!)
- ⚠️ **Missing status management** - No workflow tracking
- ⚠️ **Copy-paste errors** - Error messages dari module lain
---
## 🎯 UNIQUE FEATURES OF PERMOHONAN INFORMASI MODULE
**Most Complex Data Structure:**
1.**3 related dropdown models** - JenisInformasi, CaraMemperoleh, CaraMemperolehSalinan
2.**Comprehensive validation** - Phone length, NIK length, email format
3.**Icon integration** - User, ID, Phone, Info icons di table headers
4.**Auto-increment nomor** - Automatic numbering system
5.**Missing status workflow** - Should have pending → processed → completed
**Best Practices:**
1.**Validation comprehensive** - Best Zod schema dengan specific rules
2.**Related data management** - Separate proxy states
3.**Icon integration** - Visual clarity di table headers
4.**Loading state management** - Proper dengan finally block
**Critical Issues:**
1.**4 models dengan deletedAt SALAH** - Most affected module!
2.**Fetch pattern inconsistency** - findUnique pakai fetch manual
3.**Missing status workflow** - No tracking untuk permohonan status
4.**Copy-paste error messages** - Dari module lain
---
**Catatan:** **Permohonan Informasi PPID adalah MODULE DENGAN VALIDATION TERBAIK** tapi juga **MODULE DENGAN PALING BANYAK MODEL AFFECTED** oleh deletedAt issue (4 models!). Module ini butuh status management workflow untuk tracking status permohonan.
**Unique Strengths:**
1.**Best validation** - Comprehensive Zod schema
2.**Related data management** - 3 dropdown models handled properly
3.**Icon integration** - Visual clarity
4.**Auto-increment nomor** - Automatic numbering
**Priority Action:**
```diff
🔴 FIX INI SEKARANG (1 JAM + MIGRATION):
File: prisma/schema.prisma
Line: 435-467
model PermohonanInformasiPublik {
// ...
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
model JenisInformasiDiminta {
// ...
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
model CaraMemperolehInformasi {
// ...
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
model CaraMemperolehSalinanInformasi {
// ...
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
# Lalu jalankan:
bunx prisma db push
# atau
bunx prisma migrate dev --name fix_deletedat_permohonan_informasi
```
```diff
🔴 ADD STATUS MANAGEMENT (1 JAM):
File: prisma/schema.prisma
model PermohonanInformasiPublik {
// ...
+ status String @default("pending") // pending, processed, completed
+ processedAt DateTime?
+ processedBy String?
}
```
Setelah fix critical issues, module ini **PRODUCTION-READY** dengan **BEST VALIDATION**! 🎉
---
## 📚 RECOMMENDED AS REFERENCE FOR OTHER MODULES
**Permohonan Informasi PPID Module adalah BEST PRACTICE untuk:**
1.**Comprehensive validation** - Zod schema dengan specific rules (phone, NIK length)
2.**Related data management** - Separate proxy states untuk dropdowns
3.**Icon integration** - Visual clarity di table headers
4.**Auto-increment numbering** - Automatic nomor urut
**Modules lain bisa belajar dari Permohonan Informasi:**
- **ALL MODULES:** Use specific validation rules (min/max length)
- **MODULES WITH DROPDOWNS:** Separate proxy states untuk related data
- **ALL MODULES:** Icon integration untuk visual clarity
- **ALL MODULES:** Auto-increment untuk numbering systems
---
**File Location:** `QC/PPID/QC-PERMOHONAN-INFORMASI-PUBLIK-MODULE.md` 📄

View File

@@ -0,0 +1,771 @@
# QC Summary - Permohonan Keberatan Informasi Publik PPID Module
**Scope:** List Permohonan Keberatan, Detail Permohonan Keberatan
**Date:** 2026-02-23
**Status:** ✅ Secara umum sudah baik, ada beberapa improvement yang diperlukan
---
## 📊 OVERVIEW
| Aspect | Schema | API | UI Admin | State Management | Overall |
|--------|--------|-----|----------|-----------------|---------|
| Permohonan Keberatan | ⚠️ Ada issue | ✅ Baik | ✅ Baik | ⚠️ Ada issue | 🟡 Perlu fix |
---
## ✅ YANG SUDAH BAIK
### **1. UI/UX Design**
- ✅ Preview layout yang clean dengan responsive design
- ✅ Loading states dengan Skeleton
- ✅ Empty state handling yang informatif dengan icon
- ✅ Search functionality dengan debounce (1000ms)
- ✅ Pagination yang konsisten
- ✅ Desktop table + mobile cards responsive
- ✅ Icon integration (User, Mail, Phone, Info) untuk visual clarity
- ✅ Consistent empty state messages
### **2. Table & Card Layout**
- ✅ Fixed layout table untuk consistency
- ✅ Column headers dengan icon yang descriptive
- ✅ Row numbering otomatis (index + 1)
- ✅ Text truncation dengan lineClamp untuk long text
- ✅ Mobile card view dengan proper information hierarchy
- ✅ Proper spacing dan gap untuk readability
**Code Example (✅ GOOD):**
```typescript
// page.tsx - Line ~130-180
<Table highlightOnHover
layout="fixed" // ✅ PENTING - consistent column widths
withColumnBorders={false}>
<TableThead>
<TableTr>
<TableTh fz="sm" fw={600} lh={1.4} ta="center">No</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>
<Group gap={5}>
<IconUser size={16} />
Nama
</Group>
</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>
<Group gap={5}>
<IconMail size={16} />
Email
</Group>
</TableTh>
// ...
</TableTr>
</TableThead>
```
**Verdict:****BAIK** - Table layout dengan icon yang helpful!
---
### **3. State Management**
- ✅ Proper typing dengan Prisma types
- ✅ Loading state management dengan finally block
- ✅ Error handling yang comprehensive
-**ApiFetch consistency** untuk create & findMany! ✅
- ✅ Zod validation untuk form data dengan specific rules
- ✅ Return boolean untuk create operation (success/failure handling)
**Code Example (✅ EXCELLENT):**
```typescript
// state file - Line ~30-55
create: {
form: {} as PermohonanKeberatanInformasiForm,
loading: false,
async create() {
const cek = templateForm.safeParse(permohonanKeberatanInformasi.create.form);
if (!cek.success) {
toast.error(cek.error.issues.map((i) => i.message).join("\n"));
return false; // ✅ GOOD - Return false untuk failure
}
try {
permohonanKeberatanInformasi.create.loading = true;
const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["create"].post(form);
if (res.data?.success === false) {
toast.error(res.data?.message);
return false; // ✅ GOOD - Return false untuk API failure
}
toast.success("Sukses menambahkan");
return true; // ✅ GOOD - Return true untuk success
} catch {
toast.error("Terjadi kesalahan server");
return false;
} finally {
permohonanKeberatanInformasi.create.loading = false;
}
},
}
```
**Verdict:****EXCELLENT** - Proper return value handling untuk create operation!
---
### **4. Zod Schema Validation**
- ✅ Comprehensive validation untuk semua fields
- ✅ Specific error messages untuk setiap field
- ✅ Phone number length validation (3-15 chars)
- ✅ Minimum character validation (3 characters)
**Code Example (✅ GOOD):**
```typescript
// state file - Line ~8-15
const templateForm = z.object({
name: z.string().min(3, "Nama minimal 3 karakter"),
email: z.string().min(3, "Email minimal 3 karakter"),
notelp: z
.string()
.min(3, "Nomor Telepon minimal 3 karakter")
.max(15, "Nomor Telepon maksimal 15 angka"), // ✅ Specific validation
alasan: z.string().min(3, "Alasan minimal 3 karakter"),
});
```
**Verdict:****BAIK** - Validation yang proper dengan specific rules!
---
### **5. Empty State Handling**
- ✅ Different messages untuk search vs empty data
- ✅ Icon integration untuk visual clarity
- ✅ Proper text formatting dan centering
**Code Example (✅ GOOD):**
```typescript
// page.tsx - Line ~70-85
<Stack align="center" py="xl" ta="center">
<IconInfoCircle size={40} stroke={1.5} color={colors['blue-button']} />
<Text fz={{ base: 'sm', md: 'md' }} fw={500} c="dimmed" lh={1.5}>
{search
? 'Tidak ditemukan data yang sesuai dengan pencarian'
: 'Belum ada permohonan keberatan yang tercatat'
}
</Text>
</Stack>
```
**Verdict:****BAIK** - Empty state dengan conditional messages yang helpful!
---
## ⚠️ ISSUES & SARAN PERBAIKAN
### **🔴 CRITICAL**
#### **1. Schema - deletedAt Default Value SALAH**
**Lokasi:** `prisma/schema.prisma` (line 478)
**Masalah:**
```prisma
model FormulirPermohonanKeberatan {
id String @id @default(cuid())
name String
email String
notelp String
alasan String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now()) // ❌ SALAH - selalu punya default value
isActive Boolean @default(true)
}
```
**Dampak:**
- **LOGIC ERROR!** Setiap record baru langsung punya `deletedAt` value (timestamp creation)
- Soft delete tidak berfungsi dengan benar
- Query dengan `where: { deletedAt: null }` tidak akan pernah return data
- Data yang "dihapus" vs data "aktif" tidak bisa dibedakan
**Rekomendasi:** Fix schema:
```prisma
model FormulirPermohonanKeberatan {
id String @id @default(cuid())
name String
email String
notelp String
alasan String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime? @default(null) // ✅ Nullable, null = not deleted
isActive Boolean @default(true)
}
```
**Priority:** 🔴 **CRITICAL**
**Effort:** Medium (perlu migration)
**Impact:** **HIGH** (data integrity & soft delete logic)
---
#### **2. State Management - Fetch Pattern Inconsistency**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi.ts`
**Masalah:** Ada 2 pattern berbeda untuk fetch API:
```typescript
// ❌ Pattern 1: ApiFetch (create, findMany)
const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["create"].post(form);
const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["find-many"].get({ query });
// ❌ Pattern 2: fetch manual (findUnique)
const res = await fetch(`/api/ppid/permohonankeberataninformasipublik/${id}`);
```
**Dampak:**
- Code consistency buruk
- Sulit maintenance
- Type safety tidak konsisten
- Duplikasi logic error handling
**Rekomendasi:** Gunakan **ApiFetch** untuk semua operasi:
```typescript
// ✅ Unified pattern
async load(id: string) {
try {
const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik[id].get();
if (res.data?.success) {
permohonanKeberatanInformasi.findUnique.data = res.data.data;
} else {
toast.error(res.data?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error:", error);
toast.error("Gagal memuat data");
}
}
```
**Priority:** 🔴 High
**Effort:** Medium (refactor di findUnique method)
---
#### **3. Missing Delete Function**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi.ts`
**Masalah:**
```typescript
// state file - Line ~100-120
// ❌ MISSING: delete method
const permohonanKeberatanInformasi = proxy({
create: { ... },
findMany: { ... },
findUnique: { ... },
// ❌ NO delete method!
});
```
**Issue:** Tidak ada cara untuk menghapus data permohonan keberatan.
**Rekomendasi:** Add delete method:
```typescript
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
permohonanKeberatanInformasi.delete.loading = true;
const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["del"][id].delete();
if (res.data?.success) {
toast.success(res.data.message || "Berhasil hapus permohonan keberatan");
await permohonanKeberatanInformasi.findMany.load();
} else {
toast.error(res.data?.message || "Gagal hapus permohonan keberatan");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus");
} finally {
permohonanKeberatanInformasi.delete.loading = false;
}
},
}
```
**Priority:** 🔴 Medium
**Effort:** Medium (perlu add method + API endpoint)
---
### **🟡 MEDIUM**
#### **4. Console.log di Production**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi.ts`
**Masalah:**
```typescript
// Line ~85
console.error("Failed to load permohonan keberatan informasi:", res.data?.message);
// Line ~90
console.error("Error loading permohonan keberatan informasi:", error);
// Line ~110
console.error("Failed to fetch permohonan keberatan informasi:", res.statusText);
// Line ~114
console.error("Error fetching permohonan keberatan informasi:", error);
```
**Rekomendasi:** Gunakan conditional logging:
```typescript
if (process.env.NODE_ENV === 'development') {
console.error("Error:", error);
}
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **5. Type Safety - Any Usage**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi.ts`
**Masalah:**
```typescript
// Line ~75
const query: any = { page, limit }; // ❌ Using 'any'
if (search) query.search = search;
```
**Rekomendasi:** Gunakan typed query:
```typescript
// Define type
interface FindManyQuery {
page: number | string;
limit?: number | string;
search?: string;
}
// Use typed query
const query: FindManyQuery = { page, limit };
if (search) query.search = search;
```
**Priority:** 🟡 Medium
**Effort:** Low
---
#### **6. Missing Edit Function**
**Lokasi:** Module structure
**Masalah:**
- ❌ Tidak ada halaman edit untuk permohonan keberatan
- ❌ Tidak ada edit method di state
- ⚠️ **QUESTION:** Apakah permohonan keberatan harus bisa diedit?
**Issue:** Jika ada kesalahan input, user tidak bisa mengoreksi data.
**Rekomendasi:** Consider adding edit functionality jika diperlukan:
```typescript
// Add edit method di state
edit: {
id: "",
form: { ... },
loading: false,
async load(id: string) { ... },
async update() { ... },
}
```
**Priority:** 🟡 Low (depends on business requirement)
**Effort:** Medium
---
#### **7. Pagination onChange Tidak Include Search**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~250-260
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10); // ⚠️ Missing search parameter
window.scrollTo(0, 0);
}}
total={totalPages}
// ...
/>
```
**Issue:** Saat ganti page, search query hilang.
**Rekomendasi:** Include search:
```typescript
onChange={(newPage) => {
load(newPage, 10, debouncedSearch); // ✅ Include search
window.scrollTo(0, 0);
}}
```
**Priority:** 🟡 Low
**Effort:** Low
---
### **🟢 LOW (Minor Polish)**
#### **8. Missing Loading State di Detail Page**
**Lokasi:** `[id]/page.tsx`
**Masalah:**
```typescript
// Line ~20-25
useShallowEffect(() => {
state.findUnique.load(params?.id as string)
}, [params?.id])
if (!state.findUnique.data) {
return (
<Stack py={10}>
<Skeleton height={500} radius="md" />
</Stack>
)
}
```
**Issue:** Skeleton ditampilkan untuk semua kondisi (loading, error, not found).
**Rekomendasi:** Add proper loading state:
```typescript
if (state.findUnique.loading) {
return (
<Stack py={10}>
<Skeleton height={500} radius="md" />
</Stack>
);
}
if (!state.findUnique.data) {
return (
<Alert icon={<IconAlertCircle />} color="red">
Data tidak ditemukan
</Alert>
);
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **9. Duplicate Error Logging**
**Lokasi:** `page.tsx`, state file
**Masalah:**
```typescript
// state file - Line ~85-90
console.error("Failed to load permohonan keberatan informasi:", res.data?.message);
console.error("Error loading permohonan keberatan informasi:", error);
// state file - Line ~110-114
console.error("Failed to fetch permohonan keberatan informasi:", res.statusText);
console.error("Error fetching permohonan keberatan informasi:", error);
```
**Rekomendasi:** Cukup satu logging yang informatif:
```typescript
console.error('Failed to load Permohonan Keberatan:', err);
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **10. Search Placeholder Tidak Spesifik**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~70, 110
<TextInput
placeholder={"Cari nama..."} // ⚠️ Generic
// ...
/>
```
**Rekomendasi:** Lebih spesifik:
```typescript
placeholder={"Cari nama pemohon..."}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **11. Missing Data di Detail Page**
**Lokasi:** `[id]/page.tsx`
**Masalah:**
```typescript
// Line ~50-80
// Menampilkan: name, notelp, email, alasan
// ❌ MISSING: createdAt, updatedAt, atau status
```
**Issue:** Tidak menampilkan timestamp atau status permohonan.
**Rekomendasi:** Add missing fields jika ada di schema:
```typescript
<Box>
<Text fz="lg" fw="bold" mb={4}>Tanggal Pengajuan</Text>
<Text fz="md" c="dimmed">
{data.createdAt ? new Date(data.createdAt).toLocaleDateString('id-ID', {
day: '2-digit',
month: 'long',
year: 'numeric'
}) : '-'}
</Text>
</Box>
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **12. Title Inconsistency di Detail Page**
**Lokasi:** `[id]/page.tsx`
**Masalah:**
```typescript
// Line ~40
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
Detail Informasi Publik // ⚠️ Generic title
</Text>
```
**Issue:** Title seharusnya lebih spesifik "Detail Permohonan Keberatan".
**Rekomendasi:** Fix title:
```typescript
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
Detail Permohonan Keberatan Informasi Publik
</Text>
```
**Priority:** 🟢 Low
**Effort:** Low
---
## 📋 RINGKASAN ACTION ITEMS
| Priority | Issue | Module | Impact | Effort | Status |
|----------|-------|--------|--------|--------|--------|
| 🔴 P0 | **Schema deletedAt default SALAH** | Schema | **CRITICAL** | Medium | **MUST FIX** |
| 🔴 P0 | Fetch method inconsistency | State | Medium | Medium | Perlu refactor |
| 🔴 P1 | Missing delete function | State | Medium | Medium | Should add |
| 🟡 M | Console.log in production | State | Low | Low | Optional |
| 🟡 M | Type safety (any usage) | State | Low | Low | Optional |
| 🟡 M | Missing edit function | State/UI | Low | Medium | Optional (business decision) |
| 🟡 M | Pagination missing search param | UI | Low | Low | Should fix |
| 🟢 L | Missing loading state di detail page | UI | Low | Low | Optional |
| 🟢 L | Duplicate error logging | UI/State | Low | Low | Optional |
| 🟢 L | Search placeholder tidak spesifik | UI | Low | Low | Optional |
| 🟢 L | Missing data di detail page | UI | Low | Low | Optional |
| 🟢 L | Title inconsistency di detail page | UI | Low | Low | Should fix |
---
## ✅ KESIMPULAN
### **Overall Quality: 🟢 BAIK (7.5/10)**
**Strengths:**
1. ✅ UI/UX clean & responsive
2. ✅ Table layout dengan icon yang helpful
3. ✅ Search functionality dengan debounce
4. ✅ Empty state handling yang informatif (conditional messages)
5.**Zod validation** comprehensive dengan specific rules
6.**Proper return value handling** untuk create operation (return true/false)
7. ✅ State management dengan ApiFetch untuk create & findMany
8. ✅ Loading state management dengan finally block
9. ✅ Mobile cards responsive
10. ✅ Icon integration (User, Mail, Phone, Info)
**Critical Issues:**
1. ⚠️ **Schema deletedAt default SALAH** - Logic error untuk soft delete (CRITICAL)
2. ⚠️ Fetch method pattern inconsistency (ApiFetch vs fetch manual)
3. ⚠️ Missing delete function untuk hapus data
**Areas for Improvement:**
1. ⚠️ **Fix schema deletedAt** dari `@default(now())` ke `@default(null)` dengan nullable
2. ⚠️ **Refactor fetch methods** untuk gunakan ApiFetch consistently
3. ⚠️ **Add delete method** untuk hapus data
4. ⚠️ **Consider adding edit functionality** (business decision)
5. ⚠️ **Improve type safety** dengan remove `any` usage
**Recommended Next Steps:**
1. **🔴 CRITICAL: Fix schema deletedAt** - 30 menit (perlu migration)
2. **🔴 HIGH: Refactor findUnique** ke ApiFetch - 30 menit
3. **🔴 HIGH: Add delete method** - 45 menit
4. **🟡 MEDIUM: Add pagination search param** - 10 menit
5. **🟢 LOW: Fix title di detail page** - 5 menit
6. **🟢 LOW: Polish minor issues** - 30 menit
---
## 📈 COMPARISON WITH OTHER MODULES
| Module | Fetch Pattern | State | Validation | Schema | Delete | Edit | Overall |
|--------|--------------|-------|------------|--------|--------|------|---------|
| Profil | ⚠️ Mixed | ⚠️ Good | ✅ Good | ⚠️ deletedAt | ✅ Yes | ✅ Yes | 🟢 |
| Desa Anti Korupsi | ⚠️ Mixed | ⚠️ Good | ✅ Good | ⚠️ deletedAt | ✅ Yes | ✅ Yes | 🟢 |
| SDGs Desa | ⚠️ Mixed | ⚠️ Good | ✅ Good | ⚠️ deletedAt | ✅ Yes | ✅ Yes | 🟢 |
| APBDes | ⚠️ Mixed | ⚠️ Good | ✅ Good | ✅ Good | ✅ Yes | ✅ Yes | 🟢 |
| Prestasi Desa | ⚠️ Mixed | ⚠️ Good | ✅ Good | ❌ WRONG | ✅ Yes | ✅ Yes | 🟢 |
| PPID Profil | ⚠️ Mixed | ✅ **Best** | ✅ Good | ❌ WRONG | N/A | ✅ Yes | 🟢⭐ |
| Struktur PPID | ⚠️ Mixed | ✅ Good | ✅ Good | ⚠️ Inconsistent | ✅ Yes | ✅ Yes | 🟢 |
| Visi Misi PPID | ✅ **100% ApiFetch!** | ✅ Best | ✅ Good | ❌ WRONG | N/A | ✅ Yes | 🟢⭐⭐ |
| Dasar Hukum PPID | ✅ **100% ApiFetch!** | ✅ Best | ✅ Good | ❌ WRONG | N/A | ✅ Yes | 🟢⭐⭐ |
| Permohonan Informasi | ⚠️ Mixed | ⚠️ Good | ✅ **Best** | ❌ **4 models WRONG** | ❌ Missing | ❌ Missing | 🟡 |
| **Permohonan Keberatan** | ⚠️ Mixed | ⚠️ Good | ✅ Good | ❌ WRONG | ❌ **MISSING** | ❌ **MISSING** | 🟡 |
**Permohonan Keberatan PPID Highlights:**
-**Proper return value handling** - Return true/false untuk create operation
-**Icon integration** - User, Mail, Phone, Info icons di table headers
-**Conditional empty state messages** - Different messages untuk search vs empty
- ⚠️ **Same deletedAt issue** seperti modul PPID lain
- ⚠️ **Missing delete function** - Cannot delete data
- ⚠️ **Missing edit function** - Cannot edit data (same as Permohonan Informasi)
---
## 🎯 UNIQUE FEATURES OF PERMOHONAN KEBERATAN MODULE
**Simplest Read-Only Module:**
1.**Proper return value handling** - Return true/false untuk create operation (UNIQUE!)
2.**Conditional empty state messages** - Different messages untuk search vs empty
3.**Icon integration** - User, Mail, Phone, Info icons
4.**Missing delete function** - Cannot delete data
5.**Missing edit function** - Cannot edit data
**Best Practices:**
1.**Return value handling** - Best practice untuk create operation
2.**Conditional empty state** - Good UX untuk search feedback
3.**Loading state management** - Proper dengan finally block
4.**Icon integration** - Visual clarity di table headers
**Critical Issues:**
1.**Schema deletedAt SALAH** - Same issue seperti modul PPID lain
2.**Fetch pattern inconsistency** - findUnique pakai fetch manual
3.**Missing delete function** - Cannot delete data
4.**Missing edit function** - Cannot edit data (same as Permohonan Informasi)
---
**Catatan:** **Permohonan Keberatan PPID adalah MODULE DENGAN RETURN VALUE HANDLING TERBAIK** tapi juga **MISSING DELETE & EDIT FUNCTIONS**. Module ini mirip dengan Permohonan Informasi (read-only, no delete/edit).
**Unique Strengths:**
1.**Return value handling** - Best practice (return true/false)
2.**Conditional empty state** - Good UX
3.**Icon integration** - Visual clarity
4.**Validation comprehensive** - Phone length validation
**Priority Action:**
```diff
🔴 FIX INI SEKARANG (30 MENIT + MIGRATION):
File: prisma/schema.prisma
Line: 478
model FormulirPermohonanKeberatan {
id String @id @default(cuid())
name String
email String
notelp String
alasan String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
# Lalu jalankan:
bunx prisma db push
# atau
bunx prisma migrate dev --name fix_deletedat_keberatan
```
```diff
🔴 ADD DELETE FUNCTION (45 MENIT):
File: state file
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
permohonanKeberatanInformasi.delete.loading = true;
const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["del"][id].delete();
if (res.data?.success) {
toast.success(res.data.message || "Berhasil hapus permohonan keberatan");
await permohonanKeberatanInformasi.findMany.load();
} else {
toast.error(res.data?.message || "Gagal hapus permohonan keberatan");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus");
} finally {
permohonanKeberatanInformasi.delete.loading = false;
}
},
}
```
Setelah fix critical issues, module ini **PRODUCTION-READY** dengan **BEST RETURN VALUE HANDLING**! 🎉
---
## 📚 RECOMMENDED AS REFERENCE FOR OTHER MODULES
**Permohonan Keberatan PPID Module adalah BEST PRACTICE untuk:**
1.**Return value handling** - Return true/false untuk create operation
2.**Conditional empty state** - Different messages untuk search vs empty
3.**Icon integration** - Visual clarity di table headers
4.**Phone validation** - Min/max length validation
**Modules lain bisa belajar dari Permohonan Keberatan:**
- **ALL MODULES:** Use return values untuk handle create success/failure
- **ALL MODULES:** Conditional empty state messages untuk better UX
- **ALL MODULES:** Icon integration untuk visual clarity
- **ALL MODULES:** Specific validation rules (min/max length)
---
**File Location:** `QC/PPID/QC-PERMOHONAN-KEBERATAN-INFORMASI-MODULE.md` 📄

View File

@@ -0,0 +1,802 @@
# QC Summary - PPID Profil Module
**Scope:** Profil PPID (Preview & Edit), Rich Text Editor Forms
**Date:** 2026-02-23
**Status:** ✅ Secara umum sudah baik, ada beberapa improvement yang diperlukan
---
## 📊 OVERVIEW
| Aspect | Schema | API | UI Admin | State Management | Overall |
|--------|--------|-----|----------|-----------------|---------|
| Profil PPID | ⚠️ Ada issue | ✅ Baik | ✅ Baik | ✅ Baik | 🟡 Perlu fix |
---
## ✅ YANG SUDAH BAIK
### **1. UI/UX Design**
- ✅ Preview layout yang clean dengan logo desa
- ✅ Responsive design (mobile & desktop)
- ✅ Loading states dengan Skeleton
- ✅ Error handling dengan Alert component
- ✅ Empty state handling yang informatif
- ✅ Edit button yang prominent
### **2. File Upload Handling**
- ✅ Dropzone dengan preview image
- ✅ Validasi format gambar (JPEG, JPG, PNG, WEBP)
- ✅ Validasi ukuran file (max 5MB)
- ✅ Tombol hapus preview (IconX di pojok kanan atas)
- ✅ URL.createObjectURL untuk preview lokal
- ✅ Error handling untuk image load (onError fallback)
### **3. Rich Text Editor (Tiptap)**
- ✅ Full-featured editor dengan toolbar lengkap
- ✅ Extensions: Bold, Italic, Underline, Highlight, Link, dll
- ✅ Text alignment (left, center, justify, right)
- ✅ Heading levels (H1-H4)
- ✅ Lists (bullet & ordered)
- ✅ Blockquote, code, superscript, subscript
- ✅ Undo/Redo
- ✅ Sticky toolbar untuk UX yang lebih baik
### **4. Form Component Structure**
- ✅ Modular form components (Biodata, Riwayat, Pengalaman, Unggulan)
- ✅ Reusable EditPPIDEditor component
- ✅ Proper TypeScript typing
- ✅ Error display untuk setiap field
- ✅ Controlled components dengan onChange handler
### **5. State Management - BEST PRACTICES**
- ✅ Proper typing dengan Prisma types
- ✅ Loading state management dengan finally block
- ✅ Error handling yang comprehensive
- ✅ Reset function untuk cleanup
-**originalForm tracking** untuk reset ke data awal
**Code Example (✅ EXCELLENT):**
```typescript
// state file - Line ~85-105
editForm: {
id: "",
form: { ...defaultForm },
originalForm: { ...defaultForm }, // ✅ Track original data
loading: false,
error: null as string | null,
initialize(profileData: ProfilePPIDForm) {
this.id = profileData.id;
const data = {
name: profileData.name || "",
biodata: profileData.biodata || "",
riwayat: profileData.riwayat || "",
pengalaman: profileData.pengalaman || "",
unggulan: profileData.unggulan || "",
imageId: profileData.imageId || "",
};
this.form = { ...data };
this.originalForm = { ...data }; // ✅ Save original
},
updateField(field: keyof typeof defaultForm, value: string) {
this.form[field] = value;
},
// ✅ Reset to original
resetToOriginal() {
this.form = { ...this.originalForm };
toast.info("Data dikembalikan ke kondisi awal");
},
};
```
**Verdict:****SANGAT BAIK** - State management paling baik dibanding modul lain!
---
### **6. Edit Form - Original Data Tracking**
- ✅ Original data state untuk reset form
- ✅ Load data existing dengan benar
- ✅ Preview image dari data lama
- ✅ Reset form mengembalikan ke data original
- ✅ File replacement logic (upload baru jika ada perubahan)
**Code Example (✅ EXCELLENT):**
```typescript
// edit/page.tsx - Line ~100-115
const handleResetForm = () => {
if (!allState.profile.data) return;
// Reset form ke data awal yang di-load
const original = allState.profile.data;
stateProfilePPID.editForm.form = {
name: original.name || '',
imageId: original.imageId || '',
biodata: original.biodata || '',
riwayat: original.riwayat || '',
pengalaman: original.pengalaman || '',
unggulan: original.unggulan || '',
};
// Reset preview gambar juga
setPreviewImage(original.image?.link || null);
setFile(null);
toast.info('Perubahan dibatalkan');
};
```
**Verdict:****SANGAT BAIK** - Original data tracking sudah implementasi dengan sempurna!
---
## ⚠️ ISSUES & SARAN PERBAIKAN
### **🔴 CRITICAL**
#### **1. Schema - deletedAt Default Value SALAH**
**Lokasi:** `prisma/schema.prisma` (line 401)
**Masalah:**
```prisma
model ProfilePPID {
// ...
deletedAt DateTime @default(now()) // ❌ SALAH - selalu punya default value
isActive Boolean @default(true)
}
```
**Dampak:**
- **LOGIC ERROR!** Setiap record baru langsung punya `deletedAt` value (timestamp creation)
- Soft delete tidak berfungsi dengan benar
- Query dengan `where: { deletedAt: null }` tidak akan pernah return data
- Data yang "dihapus" vs data "aktif" tidak bisa dibedakan
**Contoh Issue:**
```prisma
// Record baru dibuat
CREATE ProfilePPID {
name: "PPID 1",
// deletedAt otomatis ter-set ke now() ❌
// isActive: true ✅
}
// Query untuk data aktif (seharusnya return data ini)
prisma.profilePPID.findMany({
where: { deletedAt: null, isActive: true }
})
// ❌ Return kosong! Karena deletedAt sudah ter-set
```
**Rekomendasi:** Fix schema:
```prisma
model ProfilePPID {
// ...
deletedAt DateTime? @default(null) // ✅ Nullable, null = not deleted
isActive Boolean @default(true)
}
```
**Priority:** 🔴 **CRITICAL**
**Effort:** Medium (perlu migration)
**Impact:** **HIGH** (data integrity & soft delete logic)
---
#### **2. HTML Injection Risk - dangerouslySetInnerHTML**
**Lokasi:** `page.tsx` (preview page)
**Masalah:**
```typescript
// Line ~105-110
<Text
fz={{ base: 'sm', md: 'md' }}
ta="justify"
c={colors['blue-button']}
lh={1.5}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
dangerouslySetInnerHTML={{ __html: item.biodata }} // ❌ No sanitization
/>
// Line ~115-120 (Riwayat)
dangerouslySetInnerHTML={{ __html: item.riwayat }} // ❌ No sanitization
// Line ~125-130 (Pengalaman)
dangerouslySetInnerHTML={{ __html: item.pengalaman }} // ❌ No sanitization
// Line ~135-140 (Unggulan)
dangerouslySetInnerHTML={{ __html: item.unggulan }} // ❌ No sanitization
```
**Risk:**
- XSS attack jika admin input script malicious
- Bisa inject iframe, script tag, dll
- Security vulnerability
**Rekomendasi:** Gunakan DOMPurify atau library sanitization:
```typescript
import DOMPurify from 'dompurify';
// Sanitize sebelum render
const sanitizedBiodata = DOMPurify.sanitize(item.biodata);
const sanitizedRiwayat = DOMPurify.sanitize(item.riwayat);
const sanitizedPengalaman = DOMPurify.sanitize(item.pengalaman);
const sanitizedUnggulan = DOMPurify.sanitize(item.unggulan);
<Text
dangerouslySetInnerHTML={{ __html: sanitizedBiodata }}
// ...
/>
```
Atau validasi di backend untuk whitelist tag HTML yang diperbolehkan (hanya `<p>`, `<ul>`, `<li>`, `<strong>`, dll).
**Priority:** 🔴 **HIGH** (**Security concern**)
**Effort:** Low
---
#### **3. State Management - Fetch Pattern Inconsistency**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/profile_ppid/profile_PPID.ts`
**Masalah:** Ada 2 pattern berbeda untuk fetch API:
```typescript
// ❌ Pattern 1: fetch manual (profile.load)
const res = await fetch(`/api/ppid/profileppid/${id}`);
// ❌ Pattern 2: fetch manual (editForm.submit)
const res = await fetch(`/api/ppid/profileppid/${this.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.form),
});
```
**Dampak:**
- Code consistency buruk
- Sulit maintenance
- Type safety tidak konsisten
- Duplikasi logic error handling
- Tidak konsisten dengan modul lain yang sudah migrate ke ApiFetch
**Rekomendasi:** Gunakan **ApiFetch** untuk semua operasi:
```typescript
import ApiFetch from "@/lib/api-fetch";
// profile.load
async load(id: string) {
try {
this.loading = true;
this.error = null;
const res = await ApiFetch.api.ppid.profileppid[id].get();
if (res.data?.success) {
this.data = res.data.data;
return res.data.data;
} else {
if (res.data?.message === "Data tidak ditemukan" ||
res.data?.message === "Belum ada data profil PPID yang aktif") {
this.error = res.data.message;
return null;
} else {
throw new Error(res.data?.message || "Gagal memuat data profile");
}
}
} catch (err) {
const msg = (err as Error).message;
this.error = msg;
console.error("Load profile error:", msg);
if (msg !== "Data tidak ditemukan" && msg !== "Belum ada data profil PPID yang aktif") {
toast.error("Gagal memuat data profile");
}
return null;
} finally {
this.loading = false;
}
}
// editForm.submit
async submit() {
const check = templateForm.safeParse(this.form);
if (!check.success) {
toast.error(
check.error.issues.map((i) => `${i.path.join(".")}: ${i.message}`).join(", ")
);
return false;
}
this.loading = true;
this.error = null;
try {
const res = await ApiFetch.api.ppid.profileppid[this.id].put(this.form);
if (res.data?.success) {
toast.success("Berhasil update profile");
this.originalForm = { ...this.form };
return true;
} else {
throw new Error(res.data?.message || "Gagal update profile");
}
} catch (err) {
const msg = (err as Error).message;
this.error = msg;
toast.error(msg);
return false;
} finally {
this.loading = false;
}
}
```
**Priority:** 🔴 High
**Effort:** Medium (refactor di semua methods)
---
### **🟡 MEDIUM**
#### **4. Console.log di Production**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/profile_ppid/profile_PPID.ts`
**Masalah:**
```typescript
// Line ~65
console.error("Load profile error:", msg);
// edit/page.tsx - Line ~65
console.error("Error updating profile:", error);
```
**Rekomendasi:** Gunakan conditional logging:
```typescript
if (process.env.NODE_ENV === 'development') {
console.error("Load profile error:", msg);
}
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **5. Zod Schema - Error Message Tidak Konsisten**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/profile_ppid/profile_PPID.ts`
**Masalah:**
```typescript
// Line ~6
const templateForm = z.object({
name: z.string().min(3, "Nama minimal 3 karakter"), // ✅ OK
biodata: z.string().min(3, "Biodata minimal 3 karakter"), // ✅ OK
riwayat: z.string().min(3, "Riwayat minimal 3 karakter"), // ✅ OK
pengalaman: z.string().min(3, "Pengalaman minimal 3 karakter"), // ✅ OK
unggulan: z.string().min(3, "Unggulan minimal 3 karakter"), // ✅ OK
imageId: z.string().min(1, "Gambar wajib dipilih"), // ✅ OK
});
```
**Verdict:****SUDAH BENAR** - Error messages sudah spesifik dan konsisten!
**Priority:** 🟢 None
**Effort:** None
---
#### **6. Missing Validation di Submit Button**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~270-280
<Button
onClick={handleSubmit}
radius="md"
size="md"
style={{ ... }}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
```
**Issue:** Button tidak disabled saat submitting atau form invalid. User bisa click multiple times.
**Rekomendasi:** Add disabled state:
```typescript
<Button
onClick={handleSubmit}
radius="md"
size="md"
disabled={isSubmitting || allState.editForm.loading}
style={{
background: isSubmitting || allState.editForm.loading
? 'linear-gradient(135deg, #cccccc, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
```
**Priority:** 🟡 Low
**Effort:** Low
---
### **🟢 LOW (Minor Polish)**
#### **7. Duplicate useEffect di Editor Component**
**Lokasi:** `editPPIDEditor.tsx`
**Masalah:**
```typescript
// Line ~25-30
useEffect(() => {
if (editor && value && value !== editor.getHTML()) {
editor.commands.setContent(value);
}
}, [editor, value]);
// Line ~32-40
useEffect(() => {
if (!editor) return;
const updateHandler = () => onChange(editor.getHTML());
editor.on('update', updateHandler);
return () => {
editor.off('update', updateHandler);
};
}, [editor, onChange]);
```
**Issue:** Ada 2 useEffect yang handle editor update. Yang pertama set content, yang kedua handle onChange. Bisa digabung untuk clarity.
**Rekomendasi:** Simplify:
```typescript
const editor = useEditor({
extensions: [...],
content: value, // Set content directly
onUpdate({ editor }) {
onChange(editor.getHTML());
},
});
// Remove first useEffect, keep second for cleanup
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **8. Form Label Inconsistency**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~170
<Text fw="bold">Nama Perbekel</Text>
// Should be:
<Text fw="bold">Nama PPID</Text>
```
**Issue:** Label "Nama Perbekel" tidak sesuai dengan context PPID. Ini profil PPID, bukan perbekel.
**Rekomendasi:** Fix label:
```typescript
<Text fw="bold">Nama PPID</Text>
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **9. Image Label Text Size**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~180
<Text fz={"md"} fw={"bold"}>Gambar</Text>
// Should be more specific:
<Text fz={"md"} fw={"bold"}>Foto Profil PPID</Text>
```
**Rekomendasi:** More descriptive label:
```typescript
<Text fz={"md"} fw={"bold"}>Foto Profil PPID</Text>
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **10. Dropzone Accept Format**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~190
accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
// Missing mime type specifications
```
**Rekomendasi:** Add full mime types:
```typescript
accept={{
'image/jpeg': ['.jpeg', '.jpg'],
'image/png': ['.png'],
'image/webp': ['.webp'],
}}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **11. Preview Page - Title Order Inconsistency**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~55
<Title order={4} ...>
PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA
</Title>
// Line ~90
<Title order={3} ...>
{item.name}
</Title>
// Line ~100
<Title order={3} ...>
Biodata
</Title>
```
**Issue:** Title hierarchy tidak konsisten. Subtitle (order 4) lebih kecil dari content titles (order 3).
**Rekomendasi:** Samakan hierarchy:
```typescript
// Main title: order={2} atau order={3}
// Section titles: order={4}
// Name: order={3}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **12. Missing Search Feature**
**Lokasi:** N/A (Single record module)
**Verdict:****NOT APPLICABLE** - Module ini hanya handle single record, search tidak diperlukan.
**Priority:** 🟢 None
**Effort:** None
---
#### **13. Button Loading State Tidak Konsisten**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~270-280
<Button
onClick={handleSubmit}
// ...
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
```
**Issue:** Button hanya check `isSubmitting` local state, tidak check `allState.editForm.loading` dari global state.
**Rekomendasi:** Check both states:
```typescript
disabled={isSubmitting || allState.editForm.loading}
{isSubmitting || allState.editForm.loading ? (
<Loader size="sm" color="white" />
) : (
'Simpan'
)}
```
**Priority:** 🟢 Low
**Effort:** Low
---
## 📋 RINGKASAN ACTION ITEMS
| Priority | Issue | Module | Impact | Effort | Status |
|----------|-------|--------|--------|--------|--------|
| 🔴 P0 | **Schema deletedAt default SALAH** | Schema | **CRITICAL** | Medium | **MUST FIX** |
| 🔴 P0 | **HTML injection risk** | UI | **HIGH (Security)** | Low | **Should fix** |
| 🔴 P1 | Fetch method inconsistency | State | Medium | Medium | Perlu refactor |
| 🟡 M | Console.log in production | State | Low | Low | Optional |
| 🟡 M | Missing validation di submit button | UI | Low | Low | Should fix |
| 🟢 L | Duplicate useEffect di editor | Editor | Low | Low | Optional |
| 🟢 L | Form label inconsistency | UI | Low | Low | Should fix |
| 🟢 L | Image label text size | UI | Low | Low | Optional |
| 🟢 L | Dropzone accept format | UI | Low | Low | Optional |
| 🟢 L | Title order inconsistency | UI | Low | Low | Optional |
| 🟢 L | Button loading state inconsistency | UI | Low | Low | Optional |
---
## ✅ KESIMPULAN
### **Overall Quality: 🟢 BAIK (8/10)**
**Strengths:**
1. ✅ UI/UX clean & responsive
2. ✅ File upload handling solid
3.**Rich Text Editor** full-featured (Tiptap)
4.**Modular form components** (Biodata, Riwayat, Pengalaman, Unggulan)
5.**State management BEST PRACTICES** (originalForm tracking)
6.**Edit form reset SANGAT BAIK** (original data tracking sempurna)
7. ✅ Error handling comprehensive
8. ✅ Loading state management dengan finally block
9. ✅ Modal konfirmasi hapus untuk user safety
**Critical Issues:**
1. ⚠️ **Schema deletedAt default SALAH** - Logic error untuk soft delete (CRITICAL)
2. ⚠️ **HTML injection risk** - dangerouslySetInnerHTML tanpa sanitization (HIGH Security)
3. ⚠️ Fetch method pattern inconsistency (ApiFetch vs fetch manual)
**Areas for Improvement:**
1. ⚠️ **Fix schema deletedAt** dari `@default(now())` ke `@default(null)` dengan nullable
2. ⚠️ **Fix HTML injection** dengan DOMPurify atau backend validation
3. ⚠️ **Refactor fetch methods** untuk gunakan ApiFetch consistently
4. ⚠️ **Add disabled state** di submit button
5. ⚠️ **Fix form labels** (Nama Perbekel → Nama PPID)
**Recommended Next Steps:**
1. **🔴 CRITICAL: Fix schema deletedAt** - 30 menit (perlu migration)
2. **🔴 HIGH: Fix HTML injection** dengan DOMPurify - 30 menit
3. **🔴 HIGH: Refactor fetch methods** ke ApiFetch - 1 jam
4. **🟡 MEDIUM: Add disabled state** di submit button - 15 menit
5. **🟢 LOW: Fix form labels** - 10 menit
6. **🟢 LOW: Polish minor issues** - 30 menit
---
## 📈 COMPARISON WITH OTHER MODULES
| Aspect | Profil | Desa Anti Korupsi | SDGs Desa | APBDes | Prestasi Desa | **PPID Profil** | Notes |
|--------|--------|-------------------|-----------|--------|---------------|-----------------|-------|
| Fetch Pattern | ⚠️ Mixed | ⚠️ Mixed | ⚠️ Mixed | ⚠️ Mixed | ⚠️ Mixed | ⚠️ Mixed | All perlu refactor |
| Loading State | ⚠️ Some missing | ⚠️ Some missing | ⚠️ Missing | ✅ Good | ⚠️ findUnique missing | ✅ **Good** | PPID salah satu yang terbaik |
| Edit Form Reset | ✅ Good | ✅ Good | ✅ Good | ✅ Good | ✅ Good | ✅ **EXCELLENT** | **PPID paling baik** (originalForm tracking) |
| Type Safety | ⚠️ Some `any` | ⚠️ Some `any` | ⚠️ Some `any` | ⚠️ Some `any` | ⚠️ Some `any` | ✅ **Good** | PPID typing lebih baik |
| File Upload | ✅ Images | ✅ Documents | ✅ Images | ✅ Dual | ✅ Images | ✅ Images | Similar |
| Error Handling | ✅ Good | ✅ Good (better) | ✅ Good | ✅ Good | ✅ Good | ✅ **Good** | Consistent |
| **Schema deletedAt** | ⚠️ Issue | ⚠️ Issue | ⚠️ Issue | ✅ Good | ❌ **WRONG** | ❌ **WRONG** | **PPID CRITICAL** |
| HTML Injection | ⚠️ Present | ⚠️ Present | N/A | N/A | ⚠️ Present | ⚠️ **Present** | Security concern |
| Rich Text Editor | ✅ Present | ✅ Present | N/A | N/A | ✅ Present | ✅ **Best** | **PPID editor paling lengkap** |
| Modular Forms | ❌ None | ❌ None | N/A | ❌ None | ❌ None | ✅ **YES** | **PPID unique feature** |
| State Management | ⚠️ Good | ⚠️ Good | ⚠️ Good | ⚠️ Good | ⚠️ Good | ✅ **BEST** | **PPID state management terbaik** |
---
## 🎯 UNIQUE FEATURES OF PPID PROFIL MODULE
**Most Advanced Module:**
1.**Rich Text Editor (Tiptap)** - Full-featured dengan toolbar lengkap
2.**Modular Form Components** - Biodata, Riwayat, Pengalaman, Unggulan forms
3.**originalForm Tracking** - State management best practice (unique to PPID)
4.**Single Record Pattern** - Handle "edit" special ID untuk single profile
5.**Comprehensive Error Handling** - Special handling untuk "data not found" cases
**Best Practices:**
1.**State management PALING BAIK** dibanding semua modul lain
2.**Edit form reset PALING BAIK** (originalForm tracking sempurna)
3.**Type safety LEBIH BAIK** (minimal any usage)
4.**Loading state management PROPER** (dengan finally block)
5.**Modular component design** (reusable forms)
**Critical Issues:**
1.**Schema deletedAt SALAH** - sama seperti SDGs, Desa Anti Korupsi, Prestasi Desa
2.**HTML injection risk** - sama seperti modul lain yang pakai rich text
---
**Catatan:** Secara keseluruhan, modul **PPID Profil adalah YANG PALING BAIK** dibanding semua modul yang sudah di-QC. State management-nya adalah best practice dengan originalForm tracking yang sempurna. Rich Text Editor implementation juga paling advanced.
**Unique Strengths:**
1.**State management terbaik** - originalForm tracking untuk reset yang sempurna
2.**Rich Text Editor terlengkap** - Tiptap dengan semua extensions
3.**Modular form design** - Reusable components untuk setiap section
4.**Type safety lebih baik** - Minimal any usage
**Priority Action:**
```diff
🔴 FIX INI SEKARANG (30 MENIT + MIGRATION):
File: prisma/schema.prisma
Line: 401
model ProfilePPID {
// ...
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
# Lalu jalankan:
bunx prisma db push
# atau
bunx prisma migrate dev --name fix_deletedat_default_ppid
```
```diff
🔴 FIX HTML INJECTION (30 MENIT):
File: src/app/admin/(dashboard)/ppid/profil-ppid/page.tsx
+ import DOMPurify from 'dompurify';
// Line ~105
- dangerouslySetInnerHTML={{ __html: item.biodata }}
+ dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.biodata) }}
// Repeat for riwayat, pengalaman, unggulan
```
Setelah fix critical issues, module ini **PRODUCTION-READY** dan bisa jadi **REFERENCE** untuk modul lain! 🎉
---
## 📚 RECOMMENDED AS REFERENCE FOR OTHER MODULES
**PPID Profil Module adalah BEST PRACTICE untuk:**
1.**State management** - originalForm tracking pattern
2.**Edit form reset** - Comprehensive reset logic
3.**Modular form components** - Reusable design pattern
4.**Rich Text Editor** - Tiptap implementation
5.**Type safety** - Proper TypeScript typing
**Modules lain bisa belajar dari PPID Profil:**
- APBDes: Implement originalForm tracking
- Prestasi Desa: Implement originalForm tracking
- SDGs Desa: Implement originalForm tracking
- Desa Anti Korupsi: Implement originalForm tracking
- Profil (Media Sosial, Program Inovasi): Implement originalForm tracking
---
**File Location:** `QC/PPID/QC-PPID-PROFIL-MODULE.md` 📄

View File

@@ -0,0 +1,936 @@
# QC Summary - Struktur PPID Module
**Scope:** Struktur Organisasi (Organization Chart), Pegawai PPID, Posisi Organisasi
**Date:** 2026-02-23
**Status:** ✅ Secara umum sudah baik, ada beberapa improvement yang diperlukan
---
## 📊 OVERVIEW
| Sub-Module | Schema | API | UI Admin | State Management | Overall |
|------------|--------|-----|----------|-----------------|---------|
| Struktur Organisasi | ✅ Baik | ✅ Baik | ✅ **Excellent** | ✅ Baik | 🟢 |
| Posisi Organisasi | ⚠️ Ada issue | ✅ Baik | ✅ Baik | ⚠️ Ada issue | 🟡 |
| Pegawai PPID | ⚠️ Ada issue | ✅ Baik | ✅ Baik | ⚠️ Ada issue | 🟡 |
---
## ✅ YANG SUDAH BAIK
### **1. UI/UX - Organization Chart (UNIQUE FEATURE!)**
-**PrimeReact OrganizationChart** - Visual hierarchy yang excellent
- ✅ Interactive tree structure dengan expand/collapse
- ✅ Custom node template dengan foto, nama, dan posisi
- ✅ Responsive design dengan overflow handling
- ✅ Empty state yang informatif
- ✅ Loading state dengan spinner
**Code Example (✅ EXCELLENT):**
```typescript
// struktur-organisasi/page.tsx - Line ~45-75
const posisiMap = new Map<string, any>();
const aktifPegawai = stateOrganisasi.findManyAll.data?.filter(p => p.isActive);
for (const pegawai of aktifPegawai) {
const posisiId = pegawai.posisi.id;
if (!posisiMap.has(posisiId)) {
posisiMap.set(posisiId, {
...pegawai.posisi,
pegawaiList: [],
children: [],
});
}
posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
}
// Build tree structure
let root: any[] = [];
posisiMap.forEach((posisi) => {
if (posisi.parentId) {
const parent = posisiMap.get(posisi.parentId);
if (parent) {
parent.children.push(posisi);
}
} else {
root.push(posisi);
}
});
// Convert to OrganizationChart format
function toOrgChartFormat(node: any): any {
return {
expanded: true,
type: 'person',
styleClass: 'p-person',
data: {
name: node.pegawaiList?.[0]?.namaLengkap || 'Belum ada pegawai',
status: node.nama,
image: node.pegawaiList?.[0]?.image?.link || '/img/default.png',
},
children: node.children.map(toOrgChartFormat),
};
}
```
**Verdict:****UNIQUE & EXCELLENT** - Satu-satunya modul dengan organization chart visual!
---
### **2. File Upload Handling**
- ✅ Dropzone dengan preview image
- ✅ Validasi format gambar (JPEG, JPG, PNG, WEBP)
- ✅ Validasi ukuran file (max 5MB)
- ✅ Tombol hapus preview (IconX di pojok kanan atas)
- ✅ URL.createObjectURL untuk preview lokal
### **3. Form Validation**
- ✅ Zod schema untuk validasi typed
- ✅ Email validation dengan regex
- ✅ Required field validation
- ✅ isFormValid() check sebelum submit
- ✅ Error toast dengan pesan spesifik
- ✅ Button disabled saat invalid/loading
### **4. CRUD Operations**
- ✅ Create dengan upload file
- ✅ FindMany dengan pagination & search
- ✅ FindUnique untuk detail
- ✅ Delete dengan hard delete
- ✅ Update dengan file replacement
-**Non-active feature** untuk soft disable pegawai
### **5. State Management**
- ✅ Proper typing dengan Prisma types
- ✅ Loading state management dengan finally block
- ✅ Error handling yang comprehensive
- ✅ Reset function untuk cleanup
- ✅ findManyAll untuk organization chart data
**Code Example (✅ GOOD):**
```typescript
// state file - Line ~270-290
findManyAll: {
data: null as Prisma.PegawaiPPIDGetPayload<{...}>[] | null,
loading: false,
search: "",
load: async (search = "") => {
posisiOrganisasi.findManyAll.loading = true; // ✅ Start loading
posisiOrganisasi.findManyAll.search = search;
try {
const query: any = { search };
if (search) query.search = search;
const res = await ApiFetch.api.ppid.strukturppid.pegawai["find-many-all"].get({ query });
if (res.status === 200 && res.data?.success) {
posisiOrganisasi.findManyAll.data = res.data.data || [];
}
} catch (error) {
console.error("Error loading pegawai:", error);
posisiOrganisasi.findManyAll.data = [];
} finally {
posisiOrganisasi.findManyAll.loading = false; // ✅ Stop loading
}
},
}
```
**Verdict:****BAIK** - Loading state management sudah proper!
---
### **6. Edit Form - Original Data Tracking**
- ✅ Original data state untuk reset form
- ✅ Load data existing dengan benar
- ✅ Preview image dari data lama
- ✅ Reset form mengembalikan ke data original
- ✅ File replacement logic (upload baru jika ada perubahan)
**Code Example (✅ GOOD):**
```typescript
// edit/page.tsx - Line ~80-115
const [originalData, setOriginalData] = useState({
namaLengkap: "",
gelarAkademik: "",
imageId: "",
tanggalMasuk: "",
email: "",
telepon: "",
alamat: "",
posisiId: "",
imageUrl: "",
isActive: true,
});
// Load data
const data = await stateOrganisasi.edit.load(id);
setOriginalData({
...data,
imageUrl: data.image?.link || '',
});
setPreviewImage(data.image?.link || null);
// Line ~135 - Handle reset
const handleResetForm = () => {
setFormData({
namaLengkap: originalData.namaLengkap,
gelarAkademik: originalData.gelarAkademik,
imageId: originalData.imageId,
tanggalMasuk: originalData.tanggalMasuk,
email: originalData.email,
telepon: originalData.telepon,
alamat: originalData.alamat,
posisiId: originalData.posisiId,
isActive: originalData.isActive,
});
setPreviewImage(originalData.imageUrl || null);
setFile(null);
toast.info("Form dikembalikan ke data awal");
};
```
**Verdict:****BAIK** - Original data tracking sudah implementasi dengan baik!
---
### **7. Unique Features**
-**Organization Chart** - Visual hierarchy tree (UNIQUE!)
-**Hierarchical Positions** - Parent-child relationships
-**Active/Non-active Toggle** - Soft disable untuk pegawai
-**Email Validation** - Regex validation untuk email format
-**Date Input Handling** - Proper date formatting untuk tanggal masuk
---
## ⚠️ ISSUES & SARAN PERBAIKAN
### **🔴 CRITICAL**
#### **1. Schema - Missing deletedAt for Soft Delete**
**Lokasi:** `prisma/schema.prisma` (line 327-332, 343-351)
**Masalah:**
```prisma
model PosisiOrganisasiPPID {
// ...
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
// ❌ MISSING: deletedAt field untuk soft delete
}
model PegawaiPPID {
// ...
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
// ❌ MISSING: deletedAt field untuk soft delete
}
```
**Dampak:**
- **INCONSISTENT!** Model `StrukturOrganisasiPPID` punya `deletedAt`, tapi Posisi dan Pegawai tidak
- Hard delete vs soft delete inconsistency
- Data integrity issue saat delete (data hilang permanen)
- Tidak bisa restore data yang ter-delete
**Rekomendasi:** Add deletedAt field:
```prisma
model PosisiOrganisasiPPID {
// ...
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime? @default(null) // ✅ Add for soft delete
}
model PegawaiPPID {
// ...
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime? @default(null) // ✅ Add for soft delete
}
```
**Priority:** 🔴 **HIGH**
**Effort:** Medium (perlu migration)
**Impact:** **HIGH** (data integrity & consistency)
---
#### **2. State Management - Fetch Pattern Inconsistency**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts`
**Masalah:** Ada 2 pattern berbeda untuk fetch API:
```typescript
// ❌ Pattern 1: ApiFetch (create, findMany, findManyAll)
const res = await ApiFetch.api.ppid.strukturppid.pegawai["create"].post(pegawai.create.form);
const res = await ApiFetch.api.ppid.strukturppid.pegawai["find-many"].get({ query });
const res = await ApiFetch.api.ppid.strukturppid.pegawai["find-many-all"].get({ query });
// ❌ Pattern 2: fetch manual (findUnique, edit, delete, nonActive)
const res = await fetch(`/api/ppid/strukturppid/pegawai/${id}`);
const res = await fetch(`/api/ppid/strukturppid/pegawai/del/${id}`, { method: "DELETE" });
const res = await fetch(`/api/ppid/strukturppid/pegawai/non-active/${id}`, { method: "DELETE" });
```
**Dampak:**
- Code consistency buruk
- Sulit maintenance
- Type safety tidak konsisten
- Duplikasi logic error handling
**Rekomendasi:** Gunakan **ApiFetch** untuk semua operasi:
```typescript
// ✅ Unified pattern
async load(id: string) {
try {
const res = await ApiFetch.api.ppid.strukturppid.pegawai[id].get();
if (res.data?.success) {
const data = res.data.data;
this.id = data.id;
this.form = {
namaLengkap: data.namaLengkap,
gelarAkademik: data.gelarAkademik,
imageId: data.imageId,
tanggalMasuk: data.tanggalMasuk,
email: data.email,
telepon: data.telepon,
alamat: data.alamat,
posisiId: data.posisiId,
isActive: data.isActive,
};
return data;
} else {
throw new Error(res.data?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading pegawai:", error);
toast.error(error instanceof Error ? error.message : "Gagal memuat data");
return null;
}
}
async byId(id: string) {
try {
const res = await ApiFetch.api.ppid.strukturppid.pegawai["del"][id].delete();
if (res.data?.success) {
toast.success(res.data.message || "Berhasil hapus pegawai");
await pegawai.findMany.load();
} else {
toast.error(res.data?.message || "Gagal hapus pegawai");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus");
}
}
```
**Priority:** 🔴 High
**Effort:** Medium (refactor di semua methods)
---
#### **3. HTML Injection Risk - dangerouslySetInnerHTML**
**Lokasi:**
- `posisi-organisasi/page.tsx` (line ~95, 155)
- `posisi-organisasi/create/page.tsx` (CreateEditor component)
- `posisi-organisasi/[id]/edit/page.tsx` (EditEditor component)
**Masalah:**
```typescript
// ❌ Direct HTML render tanpa sanitization
<Text
fz="sm"
lh={1.5}
c="dimmed"
lineClamp={1}
dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }}
/>
```
**Risk:**
- XSS attack jika admin input script malicious
- Bisa inject iframe, script tag, dll
- Security vulnerability
**Rekomendasi:** Gunakan DOMPurify atau library sanitization:
```typescript
import DOMPurify from 'dompurify';
// Sanitize sebelum render
const sanitizedDeskripsi = DOMPurify.sanitize(item.deskripsi);
<Text
dangerouslySetInnerHTML={{ __html: sanitizedDeskripsi }}
// ...
/>
```
Atau validasi di backend untuk whitelist tag HTML yang diperbolehkan.
**Priority:** 🔴 **HIGH** (**Security concern**)
**Effort:** Low
---
### **🟡 MEDIUM**
#### **4. Console.log di Production**
**Lokasi:** Multiple places di state file
**Masalah:**
```typescript
// Line ~65
console.error("Load struktur error:", errorMessage);
// Line ~130
console.error("Update struktur error:", errorMessage);
// Line ~220
console.error("Failed to fetch posisiOrganisasi:", res.statusText);
// Line ~224
console.error("Error fetching posisiOrganisasi:", error);
// Line ~370
console.error("Gagal fetch posisi organisasi paginated:", err);
// Line ~400
console.error("Failed to load posisiOrganisasi:", res.data?.message);
// Line ~404
console.error("Error loading posisiOrganisasi:", error);
// ... dan banyak lagi
```
**Rekomendasi:** Gunakan conditional logging:
```typescript
if (process.env.NODE_ENV === 'development') {
console.error("Error:", error);
}
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **5. Type Safety - Any Usage**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts`
**Masalah:**
```typescript
// Line ~190
const query: any = { page, limit: appliedLimit }; // ❌ Using 'any'
if (search) query.search = search;
// Line ~215
const query: any = { search }; // ❌ Using 'any'
if (search) query.search = search;
// Line ~365
const query: any = { page, limit }; // ❌ Using 'any'
if (search) query.search = search;
// Line ~395
const query: any = { search }; // ❌ Using 'any'
if (search) query.search = search;
```
**Rekomendasi:** Gunakan typed query:
```typescript
// Define type
interface FindManyQuery {
page: number | string;
limit?: number | string;
search?: string;
}
// Use typed query
const query: FindManyQuery = { page, limit: appliedLimit };
if (search) query.search = search;
```
**Priority:** 🟡 Medium
**Effort:** Low
---
#### **6. Error Message Tidak Konsisten**
**Lokasi:** Multiple places
**Masalah:**
```typescript
// Create posisi - Line ~180
toast.error("Terjadi kesalahan saat menambahkan posisi");
// Create pegawai - Line ~280
toast.error("Terjadi kesalahan saat menambahkan pegawai");
// Delete - Line ~430
toast.error("Terjadi kesalahan saat menghapus posisi organisasi");
// Edit - Line ~520
toast.error("Gagal memuat data");
// Update - Line ~560
toast.error("Gagal mengupdate posisi organisasi");
```
**Issue:**
- Generic error messages
- Inconsistent patterns ("Terjadi kesalahan" vs "Gagal")
- Tidak spesifik ke resource type
**Rekomendasi:** Standardisasi error messages:
```typescript
// Pattern: "[Action] [resource] gagal"
toast.error("Menambahkan Posisi Organisasi gagal");
toast.error("Menghapus Posisi Organisasi gagal");
toast.error("Memuat data Posisi Organisasi gagal");
toast.error("Memperbarui data Posisi Organisasi gagal");
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **7. Zod Schema - Error Message Tidak Konsisten**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts`
**Masalah:**
```typescript
// Line ~170
const templatePosisiOrganisasi = z.object({
nama: z.string().min(1, "Nama harus diisi"), // ✅ OK
deskripsi: z.string().optional(), // ⚠️ No min message
hierarki: z.number().int().positive("Hierarki harus angka positif"), // ✅ OK
});
// Line ~450
const templatePegawai = z.object({
namaLengkap: z.string().min(1, "Nama wajib diisi"), // ✅ OK
gelarAkademik: z.string().min(1, "Gelar Akademik wajib diisi"), // ✅ OK
imageId: z.string().min(1, "Gambar wajib dipilih"), // ✅ OK
tanggalMasuk: z.string().min(1, "Tanggal masuk wajib diisi"), // ✅ OK
email: z.string().email("Email tidak valid").optional(), // ⚠️ Optional tapi ada validation
telepon: z.string().min(1, "Telepom wajib diisi"), // ❌ Typo: "Telepom"
alamat: z.string().min(1, "Alamat wajib diisi"), // ✅ OK
posisiId: z.string().min(1, "Posisi wajib diisi"), // ✅ OK
isActive: z.boolean().default(true), // ✅ OK
});
```
**Rekomendasi:** Fix typo dan standardisasi:
```typescript
const templatePegawai = z.object({
namaLengkap: z.string().min(1, "Nama lengkap wajib diisi"),
gelarAkademik: z.string().min(1, "Gelar akademik wajib diisi"),
imageId: z.string().min(1, "Foto profil wajib diunggah"),
tanggalMasuk: z.string().min(1, "Tanggal masuk wajib diisi"),
email: z.string().email("Format email tidak valid").optional().or(z.literal('')),
telepon: z.string().min(1, "Nomor telepon wajib diisi"), // ✅ Fix typo
alamat: z.string().min(1, "Alamat wajib diisi"),
posisiId: z.string().min(1, "Posisi wajib dipilih"),
isActive: z.boolean().default(true),
});
```
**Priority:** 🟡 Low
**Effort:** Low
---
### **🟢 LOW (Minor Polish)**
#### **8. Pagination onChange Tidak Include Search**
**Lokasi:** `pegawai/page.tsx`
**Masalah:**
```typescript
// Line ~170
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10); // ⚠️ Missing search parameter
window.scrollTo(0, 0);
}}
total={totalPages}
// ...
/>
```
**Issue:** Saat ganti page, search query hilang.
**Rekomendasi:** Include search:
```typescript
onChange={(newPage) => {
load(newPage, 10, debouncedSearch); // ✅ Include search
window.scrollTo(0, 0);
}}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **9. Missing Loading State di Submit Button**
**Lokasi:** `pegawai/create/page.tsx`, `pegawai/[id]/edit/page.tsx`
**Masalah:**
```typescript
// create/page.tsx - Line ~240
<Button
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
// ...
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
```
**Issue:** Button tidak check `stateOrganisasi.create.loading` dari global state.
**Rekomendasi:** Check both states:
```typescript
disabled={!isFormValid() || isSubmitting || stateOrganisasi.create.loading}
{isSubmitting || stateOrganisasi.create.loading ? (
<Loader size="sm" color="white" />
) : (
'Simpan'
)}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **10. Duplicate Error Logging**
**Lokasi:** Multiple files
**Masalah:**
```typescript
// edit/page.tsx - Line ~120
} catch (error) {
console.error('Error loading pegawai:', error); // ❌ Duplicate
toast.error(error instanceof Error ? error.message : 'Gagal memperbarui data pegawai');
}
// edit/page.tsx - Line ~160
} catch (error) {
console.error('Error updating pegawai:', error); // ❌ Duplicate
toast.error(error instanceof Error ? error.message : 'Gagal memperbarui data pegawai');
}
```
**Rekomendasi:** Cukup satu logging yang informatif:
```typescript
} catch (error) {
console.error('Failed to load Pegawai:', err);
toast.error('Gagal memuat data Pegawai');
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **11. Button Label Inconsistency**
**Lokasi:** Multiple files
**Masalah:**
```typescript
// create/page.tsx - Line ~230
<Button ...>Reset</Button>
// edit/page.tsx - Line ~140
<Button ...>Batal</Button>
// Should be consistent: "Reset" atau "Batal"
```
**Rekomendasi:** Standardisasi:
```typescript
// Create: "Reset"
// Edit: "Batal" (lebih descriptive untuk cancel changes)
// OR both: "Reset" / "Batal"
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **12. Search Placeholder Tidak Spesifik**
**Lokasi:**
- `pegawai/page.tsx`: `placeholder='Cari nama pegawai atau posisi...'` ✅ Spesifik
- `posisi-organisasi/page.tsx`: `placeholder='Cari posisi organisasi...'` ✅ OK
**Verdict:****SUDAH BENAR** - Placeholder sudah spesifik.
**Priority:** 🟢 None
**Effort:** None
---
#### **13. Non-Active Endpoint Method**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts`
**Masalah:**
```typescript
// Line ~490
nonActive: {
loading: false,
async byId(id: string) {
// ...
const res = await fetch(`/api/ppid/strukturppid/pegawai/non-active/${id}`, {
method: "DELETE", // ⚠️ Biasanya nonActive pakai PATCH atau PUT
});
// ...
},
}
```
**Issue:** Method "DELETE" untuk non-active agak confusing. Biasanya pakai "PATCH" atau "PUT".
**Rekomendasi:** Consider using PATCH:
```typescript
const res = await fetch(`/api/ppid/strukturppid/pegawai/non-active/${id}`, {
method: "PATCH", // ✅ More semantic for toggle active/inactive
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ isActive: false }),
});
```
**Priority:** 🟢 Low
**Effort:** Low (perlu update API juga)
---
#### **14. OrganizationChart - Missing Expand/Collapse Controls**
**Lokasi:** `struktur-organisasi/page.tsx`
**Masalah:**
```typescript
// Line ~80
<OrganizationChart value={chartData} nodeTemplate={nodeTemplate} />
```
**Issue:** Tidak ada controls untuk expand/collapse all nodes.
**Rekomendasi:** Add toggle button:
```typescript
const [expanded, setExpanded] = useState(true);
const toggleAll = () => {
const newExpanded = !expanded;
setExpanded(newExpanded);
// Update chartData dengan expanded: newExpanded untuk semua nodes
};
return (
<Box>
<Group justify="flex-end" mb="md">
<Button size="xs" onClick={toggleAll}>
{expanded ? 'Collapse All' : 'Expand All'}
</Button>
</Group>
<OrganizationChart value={chartData} nodeTemplate={nodeTemplate} />
</Box>
);
```
**Priority:** 🟢 Low
**Effort:** Low
---
## 📋 RINGKASAN ACTION ITEMS
| Priority | Issue | Module | Impact | Effort | Status |
|----------|-------|--------|--------|--------|--------|
| 🔴 P0 | **Schema missing deletedAt** | Schema | **HIGH** | Medium | **MUST FIX** |
| 🔴 P0 | Fetch method inconsistency | State | Medium | Medium | Perlu refactor |
| 🔴 P1 | **HTML injection risk** | UI | **HIGH (Security)** | Low | **Should fix** |
| 🟡 M | Console.log in production | State | Low | Low | Optional |
| 🟡 M | Type safety (any usage) | State | Low | Low | Optional |
| 🟡 M | Error message inconsistency | State/UI | Low | Low | Optional |
| 🟡 M | Zod schema typo ("Telepom") | State | Low | Low | Should fix |
| 🟢 L | Pagination missing search param | Pegawai UI | Low | Low | Should fix |
| 🟢 L | Missing loading state di submit button | UI | Low | Low | Optional |
| 🟢 L | Duplicate error logging | UI | Low | Low | Optional |
| 🟢 L | Button label inconsistency | UI | Low | Low | Optional |
| 🟢 L | Non-active endpoint method | API | Low | Low | Optional |
| 🟢 L | OrganizationChart expand/collapse controls | UI | Low | Low | Nice to have |
---
## ✅ KESIMPULAN
### **Overall Quality: 🟢 BAIK (8/10)**
**Strengths:**
1.**Organization Chart** - Unique visual hierarchy feature (EXCELLENT!)
2. ✅ UI/UX clean & responsive
3. ✅ File upload handling solid
4. ✅ Form validation comprehensive (email validation, required fields)
5. ✅ State management terstruktur (Valtio)
6.**Edit form reset sudah benar** (original data tracking)
7.**Active/Non-active toggle** untuk pegawai
8. ✅ Loading state management dengan finally block
9. ✅ findManyAll untuk organization chart data
**Critical Issues:**
1. ⚠️ **Schema missing deletedAt** - Inconsistency dengan StrukturOrganisasiPPID (HIGH)
2. ⚠️ Fetch method pattern inconsistency (ApiFetch vs fetch manual)
3. ⚠️ **HTML injection risk** di deskripsi posisi (HIGH Security)
**Areas for Improvement:**
1. ⚠️ **Add deletedAt field** ke PosisiOrganisasiPPID dan PegawaiPPID
2. ⚠️ **Refactor fetch methods** untuk gunakan ApiFetch consistently
3. ⚠️ **Fix HTML injection** dengan DOMPurify atau backend validation
4. ⚠️ **Fix typo** "Telepom" → "Telepon" di Zod schema
5. ⚠️ **Improve type safety** dengan remove `any` usage
**Recommended Next Steps:**
1. **🔴 CRITICAL: Add schema deletedAt** - 30 menit (perlu migration)
2. **🔴 HIGH: Fix HTML injection** dengan DOMPurify - 30 menit
3. **🔴 HIGH: Refactor fetch methods** ke ApiFetch - 1 jam
4. **🟡 MEDIUM: Fix typo** di Zod schema - 5 menit
5. **🟢 LOW: Add pagination search param** - 10 menit
6. **🟢 LOW: Polish minor issues** - 30 menit
---
## 📈 COMPARISON WITH OTHER MODULES
| Module | Unique Features | Schema | State | Edit Reset | Overall |
|--------|----------------|--------|-------|------------|---------|
| Profil | ❌ None | ✅ Good | ⚠️ Good | ✅ Good | 🟢 |
| Desa Anti Korupsi | ❌ None | ⚠️ deletedAt | ⚠️ Good | ✅ Good | 🟢 |
| SDGs Desa | ❌ None | ⚠️ deletedAt | ⚠️ Good | ✅ Good | 🟢 |
| APBDes | ✅ Dual upload, Items hierarchy | ✅ **Best** | ⚠️ Good | ✅ Good | 🟢 |
| Prestasi Desa | ❌ None | ⚠️ deletedAt | ⚠️ Good | ✅ Good | 🟢 |
| PPID Profil | ✅ Rich Text, Modular forms | ⚠️ deletedAt | ✅ **Best** | ✅ **Excellent** | 🟢⭐ |
| **Struktur PPID** | ✅ **Org Chart**, Hierarchy, Non-active | ⚠️ Inconsistent | ✅ Good | ✅ Good | 🟢 |
**Struktur PPID Highlights:**
-**UNIQUE:** Organization Chart visualization (no other module has this!)
-**UNIQUE:** Hierarchical position structure (parent-child)
-**UNIQUE:** Active/Non-active toggle feature
-**GOOD:** Email validation dengan regex
- ⚠️ **ISSUE:** Schema inconsistency (deletedAt missing di 2 models)
---
## 🎯 UNIQUE FEATURES OF STRUKTUR PPID MODULE
**Most Unique Module:**
1.**PrimeReact OrganizationChart** - Visual tree hierarchy (UNIQUE!)
2.**Parent-child position relationships** - Hierarchical structure
3.**Active/Non-active toggle** - Soft disable tanpa delete
4.**Email validation** - Regex validation untuk email format
5.**findManyAll pattern** - Load all data untuk organization chart
**Best Practices:**
1. ✅ Organization chart implementation excellent
2. ✅ Loading state management proper (dengan finally block)
3. ✅ Edit form reset comprehensive (original data tracking)
4. ✅ Email validation di form (create & edit)
5. ✅ Date input handling untuk tanggal masuk
**Critical Issues:**
1.**Schema deletedAt missing** - Inconsistency issue
2.**HTML injection risk** - Same issue as modul lain dengan rich text
---
**Catatan:** Secara keseluruhan, modul **Struktur PPID adalah YANG PALING UNIQUE** dengan Organization Chart visualization yang excellent. Module ini punya fitur-fitur yang tidak ada di modul lain (hierarchical positions, org chart, active/non-active toggle).
**Unique Strengths:**
1.**Organization Chart** - Best visual representation
2.**Hierarchical data structure** - Parent-child relationships
3.**Active/Non-active feature** - Soft disable tanpa delete
4.**Email validation** - Comprehensive form validation
**Priority Action:**
```diff
🔴 FIX INI SEKARANG (30 MENIT + MIGRATION):
File: prisma/schema.prisma
Line: 327-332, 343-351
model PosisiOrganisasiPPID {
// ...
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
+ deletedAt DateTime? @default(null) // ✅ Add for soft delete
}
model PegawaiPPID {
// ...
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
+ deletedAt DateTime? @default(null) // ✅ Add for soft delete
}
# Lalu jalankan:
bunx prisma db push
# atau
bunx prisma migrate dev --name add_deletedat_struktur_ppid
```
```diff
🔴 FIX HTML INJECTION (30 MENIT):
File: posisi-organisasi/page.tsx
+ import DOMPurify from 'dompurify';
// Line ~95
- dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }}
+ dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.deskripsi) }}
// Repeat for mobile view line ~155
```
Setelah fix critical issues, module ini **PRODUCTION-READY** dan **ORGANIZATION CHART** adalah fitur yang bisa jadi **SHOWCASE**! 🎉
---
**File Location:** `QC/PPID/QC-STRUKTUR-PPID-MODULE.md` 📄

View File

@@ -0,0 +1,797 @@
# QC Summary - Visi Misi PPID Module
**Scope:** Preview Visi Misi, Edit Visi Misi dengan Rich Text Editor
**Date:** 2026-02-23
**Status:** ✅ Secara umum sudah baik, ada beberapa improvement yang diperlukan
---
## 📊 OVERVIEW
| Aspect | Schema | API | UI Admin | State Management | Overall |
|--------|--------|-----|----------|-----------------|---------|
| Visi Misi PPID | ⚠️ Ada issue | ✅ Baik | ✅ Baik | ✅ Baik | 🟡 Perlu fix |
---
## ✅ YANG SUDAH BAIK
### **1. UI/UX Design**
- ✅ Preview layout yang clean dengan logo desa
- ✅ Responsive design (mobile & desktop)
- ✅ Loading states dengan Skeleton
- ✅ Empty state handling yang informatif
- ✅ Edit button yang prominent
- ✅ Divider visual yang jelas antara Visi dan Misi
### **2. Rich Text Editor (Tiptap)**
- ✅ Full-featured editor dengan toolbar lengkap
- ✅ Extensions: Bold, Italic, Underline, Highlight, Link, dll
- ✅ Text alignment (left, center, justify, right)
- ✅ Heading levels (H1-H4)
- ✅ Lists (bullet & ordered)
- ✅ Blockquote, code, superscript, subscript
- ✅ Undo/Redo
- ✅ Sticky toolbar untuk UX yang lebih baik
-`immediatelyRender: false` untuk menghindari hydration mismatch
### **3. Form Component Structure**
- ✅ Modular form components (VisiPPID, MisiPPID)
- ✅ Reusable PPIDTextEditor component
- ✅ Proper TypeScript typing
- ✅ Controlled components dengan onChange handler
### **4. State Management**
- ✅ Proper typing dengan Prisma types
- ✅ Loading state management dengan finally block
- ✅ Error handling yang comprehensive
-**ApiFetch consistency** - Semua operasi pakai ApiFetch! ✅
- ✅ Zod validation untuk form data
**Code Example (✅ EXCELLENT):**
```typescript
// state file - Line ~30-50
findById: {
data: null as VisiMisiPPIDForm | null,
loading: false,
initialize() {
stateVisiMisiPPID.findById.data = {
id: "",
misi: "",
visi: "",
} as VisiMisiPPIDForm;
},
async load(id: string) {
try {
stateVisiMisiPPID.findById.loading = true; // ✅ Start loading
const res = await ApiFetch.api.ppid.visimisippid["find-by-id"].get({
query: { id },
});
if (res.status === 200) {
stateVisiMisiPPID.findById.data = res.data?.data ?? null;
}
} catch (error) {
console.error((error as Error).message);
toast.error("Terjadi kesalahan saat mengambil data visi misi");
} finally {
stateVisiMisiPPID.findById.loading = false; // ✅ Stop loading
}
},
}
```
**Verdict:****SANGAT BAIK** - State management sudah konsisten dengan ApiFetch!
---
### **5. Edit Form - Original Data Tracking**
- ✅ Original data state untuk reset form
- ✅ Load data existing dengan benar
- ✅ Reset form mengembalikan ke data original
- ✅ Rich text content handling yang proper
**Code Example (✅ GOOD):**
```typescript
// edit/page.tsx - Line ~20-45
const [formData, setFormData] = useState({ visi: '', misi: '' });
const [originalData, setOriginalData] = useState({ visi: '', misi: '' });
// Initialize from global state
useEffect(() => {
if (visiMisi.findById.data) {
setFormData({
visi: visiMisi.findById.data.visi ?? '',
misi: visiMisi.findById.data.misi ?? '',
});
setOriginalData({
visi: visiMisi.findById.data.visi ?? '',
misi: visiMisi.findById.data.misi ?? '',
});
}
}, [visiMisi.findById.data]);
// Line ~60 - Handle reset
const handleResetForm = () => {
setFormData({
visi: originalData.visi,
misi: originalData.misi,
});
toast.info('Form dikembalikan ke data awal');
};
```
**Verdict:****BAIK** - Original data tracking sudah implementasi dengan baik!
---
### **6. Rich Text Validation**
- ✅ Custom validation function untuk rich text content
- ✅ Check empty content setelah remove HTML tags
**Code Example (✅ GOOD):**
```typescript
// edit/page.tsx - Line ~25-35
const isRichTextEmpty = (content: string) => {
// Remove HTML tags and check if the resulting text is empty
const plainText = content.replace(/<[^>]*>/g, '').trim();
return plainText === '' || content.trim() === '<p></p>' || content.trim() === '<p><br></p>';
};
const isFormValid = () => {
return (
!isRichTextEmpty(formData.visi) &&
!isRichTextEmpty(formData.misi)
);
};
```
**Verdict:****EXCELLENT** - Rich text validation yang comprehensive!
---
## ⚠️ ISSUES & SARAN PERBAIKAN
### **🔴 CRITICAL**
#### **1. Schema - deletedAt Default Value SALAH**
**Lokasi:** `prisma/schema.prisma` (line 374)
**Masalah:**
```prisma
model VisiMisiPPID {
id String @id @default(cuid())
visi String @db.Text
misi String @db.Text
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now()) // ❌ SALAH - selalu punya default value
isActive Boolean @default(true)
}
```
**Dampak:**
- **LOGIC ERROR!** Setiap record baru langsung punya `deletedAt` value (timestamp creation)
- Soft delete tidak berfungsi dengan benar
- Query dengan `where: { deletedAt: null }` tidak akan pernah return data
- Data yang "dihapus" vs data "aktif" tidak bisa dibedakan
**Contoh Issue:**
```prisma
// Record baru dibuat
CREATE VisiMisiPPID {
visi: "Visi 1",
misi: "Misi 1",
// deletedAt otomatis ter-set ke now() ❌
// isActive: true ✅
}
// Query untuk data aktif (seharusnya return data ini)
prisma.visiMisiPPID.findMany({
where: { deletedAt: null, isActive: true }
})
// ❌ Return kosong! Karena deletedAt sudah ter-set
```
**Rekomendasi:** Fix schema:
```prisma
model VisiMisiPPID {
id String @id @default(cuid())
visi String @db.Text
misi String @db.Text
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime? @default(null) // ✅ Nullable, null = not deleted
isActive Boolean @default(true)
}
```
**Priority:** 🔴 **CRITICAL**
**Effort:** Medium (perlu migration)
**Impact:** **HIGH** (data integrity & soft delete logic)
---
#### **2. HTML Injection Risk - dangerouslySetInnerHTML**
**Lokasi:** `page.tsx` (preview page)
**Masalah:**
```typescript
// Line ~85-95
<Text
ta={{ base: "center", md: "justify" }}
dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.visi }} // ❌ No sanitization
style={{ ... }}
/>
// Line ~105-115 (Misi)
<Text
ta={"justify"}
dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.misi }} // ❌ No sanitization
style={{ ... }}
/>
```
**Risk:**
- XSS attack jika admin input script malicious
- Bisa inject iframe, script tag, dll
- Security vulnerability
**Rekomendasi:** Gunakan DOMPurify atau library sanitization:
```typescript
import DOMPurify from 'dompurify';
// Sanitize sebelum render
const sanitizedVisi = DOMPurify.sanitize(listVisiMisi.findById.data.visi);
const sanitizedMisi = DOMPurify.sanitize(listVisiMisi.findById.data.misi);
<Text
dangerouslySetInnerHTML={{ __html: sanitizedVisi }}
// ...
/>
```
Atau validasi di backend untuk whitelist tag HTML yang diperbolehkan (hanya `<p>`, `<ul>`, `<li>`, `<strong>`, dll).
**Priority:** 🔴 **HIGH** (**Security concern**)
**Effort:** Low
---
#### **3. Missing Delete/Hard Delete Protection**
**Lokasi:** `page.tsx`, `edit/page.tsx`
**Masalah:**
- ❌ Tidak ada tombol delete untuk Visi Misi (correct - single record)
-**GOOD:** Single record pattern yang benar
- ⚠️ **ISSUE:** Tidak ada konfirmasi sebelum update (direct save)
**Issue:** User bisa accidentally save changes tanpa konfirmasi.
**Rekomendasi:** Add confirmation dialog sebelum save:
```typescript
const submit = () => {
// Check if data has changed
if (formData.visi === originalData.visi && formData.misi === originalData.misi) {
toast.info('Tidak ada perubahan');
return;
}
// Show confirmation
const confirmed = window.confirm('Apakah Anda yakin ingin mengubah Visi Misi PPID?');
if (!confirmed) return;
// Then save...
};
```
**Priority:** 🔴 Medium
**Effort:** Low
---
### **🟡 MEDIUM**
#### **4. Console.log di Production**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/visi_misi_ppid/visimisiPPID.ts`
**Masalah:**
```typescript
// Line ~40
console.error((error as Error).message);
// Line ~65
console.error((error as Error).message);
```
**Rekomendasi:** Gunakan conditional logging:
```typescript
if (process.env.NODE_ENV === 'development') {
console.error("Error:", error);
}
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **5. Missing Loading State di Submit Button**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~120-130
<Button
onClick={submit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
// ...
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
```
**Issue:** Button tidak check `visiMisi.update.loading` dari global state.
**Rekomendasi:** Check both states:
```typescript
disabled={!isFormValid() || isSubmitting || visiMisi.update.loading}
{isSubmitting || visiMisi.update.loading ? (
<Loader size="sm" color="white" />
) : (
'Simpan'
)}
```
**Priority:** 🟡 Low
**Effort:** Low
---
#### **6. Zod Schema - Could Be More Specific**
**Lokasi:** `src/app/admin/(dashboard)/_state/ppid/visi_misi_ppid/visimisiPPID.ts`
**Masalah:**
```typescript
// Line ~7
const templateForm = z.object({
misi: z.string().min(3, "Misi minimal 3 karakter"), // ⚠️ Generic
visi: z.string().min(3, "Visi minimal 3 karakter"), // ⚠️ Generic
});
```
**Rekomendasi:** More specific error messages:
```typescript
const templateForm = z.object({
misi: z.string().min(3, "Misi PPID minimal 3 karakter"),
visi: z.string().min(3, "Visi PPID minimal 3 karakter"),
});
```
**Priority:** 🟡 Low
**Effort:** Low
---
### **🟢 LOW (Minor Polish)**
#### **7. Missing Change Detection**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~70-80
const submit = () => {
try {
setIsSubmitting(true);
if (visiMisi.findById.data) {
// update nilai global hanya saat submit
visiMisi.findById.data.visi = formData.visi;
visiMisi.findById.data.misi = formData.misi;
visiMisi.update.save(visiMisi.findById.data);
}
router.push('/admin/ppid/visi-misi-ppid');
} catch (error) {
console.error("Error updating visi misi:", error);
toast.error("Terjadi kesalahan saat memperbarui visi misi");
} finally {
setIsSubmitting(false);
}
};
```
**Issue:** Tidak ada check apakah data sudah berubah. User bisa save tanpa perubahan.
**Rekomendasi:** Add change detection:
```typescript
const submit = () => {
// Check if data has changed
if (formData.visi === originalData.visi && formData.misi === originalData.misi) {
toast.info('Tidak ada perubahan');
return;
}
try {
setIsSubmitting(true);
// ... rest of save logic
}
};
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **8. Editor - Duplicate useEffect**
**Lokasi:** `PPIDTextEditor.tsx`
**Masalah:**
```typescript
// Line ~30-35
const editor = useEditor({
extensions: [...],
immediatelyRender: false,
content: initialContent, // ✅ Set content directly
onUpdate: ({editor}) => {
onChange(editor.getHTML()) // ✅ Handle changes
}
});
// Line ~37-42
useEffect(() => {
if (editor && initialContent !== editor.getHTML()) {
editor.commands.setContent(initialContent || '<p></p>');
}
}, [initialContent, editor]);
```
**Issue:** Ada useEffect tambahan untuk set content, padahal sudah ada di `useEditor`. Bisa menyebabkan double content update.
**Rekomendasi:** Simplify - remove useEffect:
```typescript
const editor = useEditor({
extensions: [...],
immediatelyRender: false,
content: initialContent || '<p></p>', // ✅ Set content directly
onUpdate: ({editor}) => {
onChange(editor.getHTML())
},
editorProps: {
// Optional: handle content updates better
}
});
// Remove useEffect completely
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **9. Missing Error Boundary**
**Lokasi:** `edit/page.tsx`
**Masalah:**
- Tidak ada error boundary untuk handle unexpected errors
- Jika editor gagal load, tidak ada fallback UI
**Rekomendasi:** Add error boundary:
```typescript
if (visiMisi.findById.error) {
return (
<Alert icon={<IconAlertCircle />} color="red">
<Text fw="bold">Error</Text>
<Text>{visiMisi.findById.error}</Text>
</Alert>
);
}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **10. Preview Page - Hardcoded Moto PPID**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~60-70
<Text
ta="center"
fz={{ base: 'sm', md: 'md' }}
lh={{ base: 1.5, md: 1.5 }}
mt="sm"
c="black"
>
MEMBERIKAN INFORMASI YANG CEPAT, MUDAH, TEPAT DAN TRANSPARAN
</Text>
```
**Issue:** Moto PPID hardcoded di UI. Seharusnya dari database/config.
**Rekomendasi:** Move to database or config file:
```typescript
// Add to schema
model VisiMisiPPID {
// ...
moto String? @db.Text
}
// Or use config
const PPID_MOTO = "MEMBERIKAN INFORMASI YANG CEPAT, MUDAH, TEPAT DAN TRANSPARAN";
```
**Priority:** 🟢 Low
**Effort:** Medium (perlu schema change)
---
#### **11. Title Order Inconsistency**
**Lokasi:** `page.tsx`
**Masalah:**
```typescript
// Line ~45
<Title order={3} ...>Preview Visi Misi PPID</Title>
// Line ~65
<Title order={2} ...>MOTO PPID DESA DARMASABA</Title>
// Line ~80
<Title order={2} ...>VISI PPID</Title>
// Line ~100
<Title order={2} ...>MISI PPID</Title>
```
**Issue:** Title hierarchy agak confusing. Page title (order 3) lebih kecil dari section titles (order 2).
**Rekomendasi:** Samakan hierarchy:
```typescript
// Page title: order={2}
// Section titles: order={3}
```
**Priority:** 🟢 Low
**Effort:** Low
---
#### **12. Missing Toast Success After Save**
**Lokasi:** `edit/page.tsx`
**Masalah:**
```typescript
// Line ~70-85
const submit = () => {
try {
setIsSubmitting(true);
if (visiMisi.findById.data) {
visiMisi.findById.data.visi = formData.visi;
visiMisi.findById.data.misi = formData.misi;
visiMisi.update.save(visiMisi.findById.data);
}
router.push('/admin/ppid/visi-misi-ppid'); // ✅ Redirect tanpa toast
} catch (error) {
console.error("Error updating visi misi:", error);
toast.error("Terjadi kesalahan saat memperbarui visi misi");
} finally {
setIsSubmitting(false);
}
};
```
**Issue:** Toast success ada di state `update.save()`, tapi user mungkin tidak lihat karena langsung redirect.
**Rekomendasi:** Add toast before redirect atau wait untuk toast selesai:
```typescript
const submit = async () => {
try {
setIsSubmitting(true);
if (visiMisi.findById.data) {
visiMisi.findById.data.visi = formData.visi;
visiMisi.findById.data.misi = formData.misi;
await visiMisi.update.save(visiMisi.findById.data);
toast.success("Visi Misi berhasil diperbarui!");
setTimeout(() => {
router.push('/admin/ppid/visi-misi-ppid');
}, 1000); // Wait 1 second for toast to show
}
} catch (error) {
console.error("Error updating visi misi:", error);
toast.error("Terjadi kesalahan saat memperbarui visi misi");
} finally {
setIsSubmitting(false);
}
};
```
**Priority:** 🟢 Low
**Effort:** Low
---
## 📋 RINGKASAN ACTION ITEMS
| Priority | Issue | Module | Impact | Effort | Status |
|----------|-------|--------|--------|--------|--------|
| 🔴 P0 | **Schema deletedAt default SALAH** | Schema | **CRITICAL** | Medium | **MUST FIX** |
| 🔴 P0 | **HTML injection risk** | UI | **HIGH (Security)** | Low | **Should fix** |
| 🔴 P1 | Missing delete confirmation | UI | Medium | Low | Should fix |
| 🟡 M | Console.log in production | State | Low | Low | Optional |
| 🟡 M | Missing loading state di submit button | UI | Low | Low | Should fix |
| 🟡 M | Zod schema error messages | State | Low | Low | Optional |
| 🟢 L | Missing change detection | Edit UI | Low | Low | Optional |
| 🟢 L | Duplicate useEffect di editor | Editor | Low | Low | Optional |
| 🟢 L | Missing error boundary | UI | Low | Low | Optional |
| 🟢 L | Hardcoded Moto PPID | UI | Low | Medium | Optional |
| 🟢 L | Title order inconsistency | UI | Low | Low | Optional |
| 🟢 L | Missing toast success timing | UI | Low | Low | Optional |
---
## ✅ KESIMPULAN
### **Overall Quality: 🟢 BAIK (8.5/10) - CLEANEST MODULE!**
**Strengths:**
1. ✅ UI/UX clean & responsive
2.**Rich Text Editor** full-featured (Tiptap)
3.**Modular form components** (Visi, Misi)
4.**State management BEST PRACTICES** - **ONLY MODULE YANG 100% ApiFetch!**
5.**Edit form reset sudah benar** (original data tracking)
6.**Rich text validation** comprehensive (check empty content)
7. ✅ Error handling comprehensive
8. ✅ Loading state management dengan finally block
9.`immediatelyRender: false` untuk menghindari hydration mismatch
**Critical Issues:**
1. ⚠️ **Schema deletedAt default SALAH** - Logic error untuk soft delete (CRITICAL)
2. ⚠️ **HTML injection risk** - dangerouslySetInnerHTML tanpa sanitization (HIGH Security)
3. ⚠️ Missing confirmation sebelum save (Medium UX)
**Areas for Improvement:**
1. ⚠️ **Fix schema deletedAt** dari `@default(now())` ke `@default(null)` dengan nullable
2. ⚠️ **Fix HTML injection** dengan DOMPurify atau backend validation
3. ⚠️ **Add confirmation dialog** sebelum save
4. ⚠️ **Add change detection** untuk avoid unnecessary saves
5. ⚠️ **Fix loading state** di submit button
**Recommended Next Steps:**
1. **🔴 CRITICAL: Fix schema deletedAt** - 30 menit (perlu migration)
2. **🔴 HIGH: Fix HTML injection** dengan DOMPurify - 30 menit
3. **🟡 MEDIUM: Add confirmation dialog** - 15 menit
4. **🟢 LOW: Add change detection** - 15 menit
5. **🟢 LOW: Polish minor issues** - 30 menit
---
## 📈 COMPARISON WITH OTHER MODULES
| Module | Fetch Pattern | State | Edit Reset | Rich Text | HTML Injection | deletedAt | Overall |
|--------|--------------|-------|------------|-----------|----------------|-----------|---------|
| Profil | ⚠️ Mixed | ⚠️ Good | ✅ Good | ❌ None | ⚠️ Present | ⚠️ Issue | 🟢 |
| Desa Anti Korupsi | ⚠️ Mixed | ⚠️ Good | ✅ Good | ✅ Present | ⚠️ Present | ⚠️ Issue | 🟢 |
| SDGs Desa | ⚠️ Mixed | ⚠️ Good | ✅ Good | ❌ None | N/A | ⚠️ Issue | 🟢 |
| APBDes | ⚠️ Mixed | ⚠️ Good | ✅ Good | ❌ None | N/A | ✅ Good | 🟢 |
| Prestasi Desa | ⚠️ Mixed | ⚠️ Good | ✅ Good | ✅ Present | ⚠️ Present | ❌ WRONG | 🟢 |
| PPID Profil | ⚠️ Mixed | ✅ **Best** | ✅ **Excellent** | ✅ **Best** | ⚠️ Present | ❌ WRONG | 🟢⭐ |
| Struktur PPID | ⚠️ Mixed | ✅ Good | ✅ Good | ✅ Present | ⚠️ Present | ⚠️ Inconsistent | 🟢 |
| **Visi Misi PPID** | ✅ **100% ApiFetch!** | ✅ **Best** | ✅ Good | ✅ Present | ⚠️ Present | ❌ WRONG | 🟢⭐⭐ |
**Visi Misi PPID Highlights:**
-**ONLY MODULE** yang 100% konsisten pakai ApiFetch! (NO fetch manual!)
-**CLEANEST CODE** - Simple, straightforward, no complexity
-**Rich text validation** paling comprehensive (check empty content)
-**Best state management** pattern (ApiFetch consistency)
- ⚠️ **Same deletedAt issue** seperti modul PPID lain
---
## 🎯 UNIQUE FEATURES OF VISI MISI PPID MODULE
**Simplest & Cleanest Module:**
1.**100% ApiFetch consistency** - NO fetch manual sama sekali! (UNIQUE!)
2.**Simple single record pattern** - Only 2 fields (visi, misi)
3.**Rich text validation** - Check empty content after remove HTML tags
4.**Modular editor components** - VisiPPID, MisiPPID separate
5.**No file upload** - Simplest form (text only)
**Best Practices:**
1.**ApiFetch 100%** - Best practice untuk API consistency
2.**Loading state management** proper (dengan finally block)
3.**Rich text validation** comprehensive
4.**Original data tracking** untuk reset form
5.**`immediatelyRender: false`** - Avoid hydration mismatch
**Critical Issues:**
1.**Schema deletedAt SALAH** - Same issue seperti modul PPID lain
2.**HTML injection risk** - Same issue seperti modul dengan rich text lain
---
**Catatan:** **Visi Misi PPID adalah MODULE PALING CLEAN** dengan codebase paling simple dan **SATU-SATUNYA MODULE YANG 100% PAKAI ApiFetch** (no fetch manual sama sekali!). Module ini bisa jadi **REFERENCE** untuk API consistency!
**Unique Strengths:**
1.**100% ApiFetch** - Best API consistency (NO fetch manual!)
2.**Simple & clean** - No unnecessary complexity
3.**Rich text validation** - Most comprehensive
4.**Best state management** pattern
**Priority Action:**
```diff
🔴 FIX INI SEKARANG (30 MENIT + MIGRATION):
File: prisma/schema.prisma
Line: 374
model VisiMisiPPID {
id String @id @default(cuid())
visi String @db.Text
misi String @db.Text
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
- deletedAt DateTime @default(now())
+ deletedAt DateTime? @default(null)
isActive Boolean @default(true)
}
# Lalu jalankan:
bunx prisma db push
# atau
bunx prisma migrate dev --name fix_deletedat_visimisi_ppid
```
```diff
🔴 FIX HTML INJECTION (30 MENIT):
File: page.tsx
+ import DOMPurify from 'dompurify';
// Line ~85
- dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.visi }}
+ dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(listVisiMisi.findById.data.visi) }}
// Line ~105
- dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.misi }}
+ dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(listVisiMisi.findById.data.misi) }}
```
Setelah fix critical issues, module ini **PRODUCTION-READY** dan bisa jadi **REFERENCE untuk API CONSISTENCY**! 🎉
---
## 📚 RECOMMENDED AS REFERENCE FOR OTHER MODULES
**Visi Misi PPID Module adalah BEST PRACTICE untuk:**
1.**API consistency** - 100% ApiFetch, NO fetch manual!
2.**Simple state management** - Clean, straightforward
3.**Rich text validation** - Check empty content pattern
4.**Modular editor components** - Separate Visi & Misi
**Modules lain bisa belajar dari Visi Misi PPID:**
- **ALL MODULES:** Use ApiFetch consistently (NO fetch manual!)
- **ALL MODULES:** Keep it simple (avoid unnecessary complexity)
- **Rich Text Modules:** Implement empty content validation
- **ALL MODULES:** Proper loading state management
---
**File Location:** `QC/PPID/QC-VISI-MISI-PPID-MODULE.md` 📄

3
ai.sh Normal file
View File

@@ -0,0 +1,3 @@
export ANTHROPIC_API_KEY=sk-user-nico
export ANTHROPIC_BASE_URL=https://claude-local.wibudev.com
export ANTHROPIC_MODEL=claude-sonnet-4-6

View File

@@ -71,6 +71,7 @@
"list": "^2.0.19",
"lodash": "^4.17.21",
"mime-types": "^3.0.2",
"minio": "^8.0.7",
"motion": "^12.4.1",
"nanoid": "^5.1.5",
"next": "^15.5.2",
@@ -401,6 +402,8 @@
"@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@15.5.14", "", { "os": "win32", "cpu": "x64" }, "sha512-+W7eFf3RS7m4G6tppVTOSyP9Y6FsJXfOuKzav1qKniiFm3KFByQfPEcouHdjlZmysl4zJGuGLQ/M9XyVeyeNEg=="],
"@nodable/entities": ["@nodable/entities@2.1.0", "", {}, "sha512-nyT7T3nbMyBI/lvr6L5TyWbFJAI9FTgVRakNoBqCD+PmID8DzFrrNdLLtHMwMszOtqZa8PAOV24ZqDnQrhQINA=="],
"@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
"@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
@@ -981,6 +984,8 @@
"ast-types-flow": ["ast-types-flow@0.0.8", "", {}, "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ=="],
"async": ["async@3.2.6", "", {}, "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA=="],
"async-function": ["async-function@1.0.0", "", {}, "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA=="],
"async-mutex": ["async-mutex@0.5.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-1A94B18jkJ3DYq284ohPxoXbfTA5HsQ7/Mf4DEhcyLx3Bz27Rh59iScbB6EPiP+B+joue6YCxcMXSbFC1tZKwA=="],
@@ -1007,15 +1012,19 @@
"bidi-js": ["bidi-js@1.0.3", "", { "dependencies": { "require-from-string": "^2.0.2" } }, "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw=="],
"block-stream2": ["block-stream2@2.1.0", "", { "dependencies": { "readable-stream": "^3.4.0" } }, "sha512-suhjmLI57Ewpmq00qaygS8UgEq2ly2PCItenIyhMqVjo4t4pGzqMvfgJuX8iWTeSDdfSSqS6j38fL4ToNL7Pfg=="],
"body-parser": ["body-parser@2.2.2", "", { "dependencies": { "bytes": "^3.1.2", "content-type": "^1.0.5", "debug": "^4.4.3", "http-errors": "^2.0.0", "iconv-lite": "^0.7.0", "on-finished": "^2.4.1", "qs": "^6.14.1", "raw-body": "^3.0.1", "type-is": "^2.0.1" } }, "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA=="],
"brace-expansion": ["brace-expansion@1.1.13", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w=="],
"braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
"browser-or-node": ["browser-or-node@2.1.1", "", {}, "sha512-8CVjaLJGuSKMVTxJ2DpBl5XnlNDiT4cQFeuCJJrvJmts9YrTZDizTX7PjC2s6W4x+MBGZeEY6dGMrF04/6Hgqg=="],
"browserslist": ["browserslist@4.28.2", "", { "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", "electron-to-chromium": "^1.5.328", "node-releases": "^2.0.36", "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg=="],
"buffer-crc32": ["buffer-crc32@0.2.13", "", {}, "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ=="],
"buffer-crc32": ["buffer-crc32@1.0.0", "", {}, "sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w=="],
"buffer-equal-constant-time": ["buffer-equal-constant-time@1.0.1", "", {}, "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="],
@@ -1147,6 +1156,8 @@
"decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
"decode-uri-component": ["decode-uri-component@0.2.2", "", {}, "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="],
"deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
"define-data-property": ["define-data-property@1.1.4", "", { "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", "gopd": "^1.0.1" } }, "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A=="],
@@ -1297,6 +1308,10 @@
"fast-uri": ["fast-uri@3.1.0", "", {}, "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA=="],
"fast-xml-builder": ["fast-xml-builder@1.1.5", "", { "dependencies": { "path-expression-matcher": "^1.1.3" } }, "sha512-4TJn/8FKLeslLAH3dnohXqE3QSoxkhvaMzepOIZytwJXZO69Bfz0HBdDHzOTOon6G59Zrk6VQ2bEiv1t61rfkA=="],
"fast-xml-parser": ["fast-xml-parser@5.7.2", "", { "dependencies": { "@nodable/entities": "^2.1.0", "fast-xml-builder": "^1.1.5", "path-expression-matcher": "^1.5.0", "strnum": "^2.2.3" }, "bin": { "fxparser": "src/cli/cli.js" } }, "sha512-P7oW7tLbYnhOLQk/Gv7cZgzgMPP/XN03K02/Jy6Y/NHzyIAIpxuZIM/YqAkfiXFPxA2CTm7NtCijK9EDu09u2w=="],
"fastq": ["fastq@1.20.1", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw=="],
"fd-slicer": ["fd-slicer@1.1.0", "", { "dependencies": { "pend": "~1.2.0" } }, "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g=="],
@@ -1315,6 +1330,8 @@
"fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
"filter-obj": ["filter-obj@1.1.0", "", {}, "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="],
"finalhandler": ["finalhandler@2.1.1", "", { "dependencies": { "debug": "^4.4.0", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "on-finished": "^2.4.1", "parseurl": "^1.3.3", "statuses": "^2.0.1" } }, "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA=="],
"find-root": ["find-root@1.1.0", "", {}, "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="],
@@ -1427,7 +1444,7 @@
"ip-address": ["ip-address@10.1.0", "", {}, "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q=="],
"ipaddr.js": ["ipaddr.js@1.9.1", "", {}, "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="],
"ipaddr.js": ["ipaddr.js@2.3.0", "", {}, "sha512-Zv/pA+ciVFbCSBBjGfaKUya/CcGmUHzTydLMaTwrUUEM2DIEO3iZvueGxmacvmN50fGpGVKeTXpb2LcYQxeVdg=="],
"iron-session": ["iron-session@8.0.4", "", { "dependencies": { "cookie": "^0.7.2", "iron-webcrypto": "^1.2.1", "uncrypto": "^0.1.3" } }, "sha512-9ivNnaKOd08osD0lJ3i6If23GFS2LsxyMU8Gf/uBUEgm8/8CC1hrrCHFDpMo3IFbpBgwoo/eairRsaD3c5itxA=="],
@@ -1633,6 +1650,8 @@
"minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],
"minio": ["minio@8.0.7", "", { "dependencies": { "async": "^3.2.4", "block-stream2": "^2.1.0", "browser-or-node": "^2.1.1", "buffer-crc32": "^1.0.0", "eventemitter3": "^5.0.1", "fast-xml-parser": "^5.3.4", "ipaddr.js": "^2.0.1", "lodash": "^4.17.21", "mime-types": "^2.1.35", "query-string": "^7.1.3", "stream-json": "^1.8.0", "through2": "^4.0.2", "xml2js": "^0.5.0 || ^0.6.2" } }, "sha512-E737MgufW8CeQAsTAtnEMrxZ9scMSf29kkhZoXzDTKj/Jszzo2SfeZUH9wbDQH2Rsq6TCtl/yQL0+XdVKZansQ=="],
"motion": ["motion@12.38.0", "", { "dependencies": { "framer-motion": "^12.38.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w=="],
"motion-dom": ["motion-dom@12.38.0", "", { "dependencies": { "motion-utils": "^12.36.0" } }, "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA=="],
@@ -1729,6 +1748,8 @@
"path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
"path-expression-matcher": ["path-expression-matcher@1.5.0", "", {}, "sha512-cbrerZV+6rvdQrrD+iGMcZFEiiSrbv9Tfdkvnusy6y0x0GKBXREFg/Y65GhIfm0tnLntThhzCnfKwp1WRjeCyQ=="],
"path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
"path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
@@ -1831,6 +1852,8 @@
"qs": ["qs@6.15.1", "", { "dependencies": { "side-channel": "^1.1.0" } }, "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg=="],
"query-string": ["query-string@7.1.3", "", { "dependencies": { "decode-uri-component": "^0.2.2", "filter-obj": "^1.1.0", "split-on-first": "^1.0.0", "strict-uri-encode": "^2.0.0" } }, "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg=="],
"queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
"ramda": ["ramda@0.27.2", "", {}, "sha512-SbiLPU40JuJniHexQSAgad32hfwd+DRUdwF2PlVuI5RZD0/vahUco7R8vD86J/tcEKKF9vZrUVwgtmGCqlCKyA=="],
@@ -1875,6 +1898,8 @@
"react-zoom-pan-pinch": ["react-zoom-pan-pinch@3.7.0", "", { "peerDependencies": { "react": "*", "react-dom": "*" } }, "sha512-UmReVZ0TxlKzxSbYiAj+LeGRW8s8LraAFTXRAxzMYnNRgGPsxCudwZKVkjvGmjtx7SW/hZamt69NUmGf4xrkXA=="],
"readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
"readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
"recharts": ["recharts@3.8.1", "", { "dependencies": { "@reduxjs/toolkit": "^1.9.0 || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg=="],
@@ -1925,6 +1950,8 @@
"safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
"sax": ["sax@1.6.0", "", {}, "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA=="],
"saxes": ["saxes@6.0.0", "", { "dependencies": { "xmlchars": "^2.2.0" } }, "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA=="],
"scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
@@ -1967,6 +1994,8 @@
"source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
"split-on-first": ["split-on-first@1.1.0", "", {}, "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="],
"stable-hash": ["stable-hash@0.0.5", "", {}, "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA=="],
"stackback": ["stackback@0.0.2", "", {}, "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw=="],
@@ -1977,8 +2006,14 @@
"stop-iteration-iterator": ["stop-iteration-iterator@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "internal-slot": "^1.1.0" } }, "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ=="],
"stream-chain": ["stream-chain@2.2.5", "", {}, "sha512-1TJmBx6aSWqZ4tx7aTpBDXK0/e2hhcNSTV8+CbFJtDjbb+I1mZ8lHit0Grw9GRT+6JbIrrDd8esncgBi8aBXGA=="],
"stream-json": ["stream-json@1.9.1", "", { "dependencies": { "stream-chain": "^2.2.5" } }, "sha512-uWkjJ+2Nt/LO9Z/JyKZbMusL8Dkh97uUBTv3AJQ74y07lVahLY4eEFsPsE97pxYBwr8nnjMAIch5eqI0gPShyw=="],
"strict-event-emitter": ["strict-event-emitter@0.5.1", "", {}, "sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ=="],
"strict-uri-encode": ["strict-uri-encode@2.0.0", "", {}, "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="],
"string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
"string.prototype.includes": ["string.prototype.includes@2.0.1", "", { "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1", "es-abstract": "^1.23.3" } }, "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg=="],
@@ -1993,6 +2028,8 @@
"string.prototype.trimstart": ["string.prototype.trimstart@1.0.8", "", { "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1", "es-object-atoms": "^1.0.0" } }, "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg=="],
"string_decoder": ["string_decoder@1.3.0", "", { "dependencies": { "safe-buffer": "~5.2.0" } }, "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA=="],
"strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
"strip-bom": ["strip-bom@3.0.0", "", {}, "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="],
@@ -2001,6 +2038,8 @@
"strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
"strnum": ["strnum@2.2.3", "", {}, "sha512-oKx6RUCuHfT3oyVjtnrmn19H1SiCqgJSg+54XqURKp5aCMbrXrhLjRN9TjuwMjiYstZ0MzDrHqkGZ5dFTKd+zg=="],
"strtok3": ["strtok3@10.3.5", "", { "dependencies": { "@tokenizer/token": "^0.3.0" } }, "sha512-ki4hZQfh5rX0QDLLkOCj+h+CVNkqmp/CMf8v8kZpkNVK6jGQooMytqzLZYUVYIZcFZ6yDB70EfD8POcFXiF5oA=="],
"styled-jsx": ["styled-jsx@5.1.6", "", { "dependencies": { "client-only": "0.0.1" }, "peerDependencies": { "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0" } }, "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA=="],
@@ -2023,6 +2062,8 @@
"term-size": ["term-size@2.2.1", "", {}, "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg=="],
"through2": ["through2@4.0.2", "", { "dependencies": { "readable-stream": "3" } }, "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw=="],
"tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
"tinybench": ["tinybench@2.9.0", "", {}, "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg=="],
@@ -2159,6 +2200,10 @@
"xml-name-validator": ["xml-name-validator@5.0.0", "", {}, "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg=="],
"xml2js": ["xml2js@0.6.2", "", { "dependencies": { "sax": ">=0.6.0", "xmlbuilder": "~11.0.0" } }, "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA=="],
"xmlbuilder": ["xmlbuilder@11.0.1", "", {}, "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="],
"xmlchars": ["xmlchars@2.2.0", "", {}, "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="],
"y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
@@ -2253,6 +2298,8 @@
"micromatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
"minio/mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
"msgpackr-extract/node-gyp-build-optional-packages": ["node-gyp-build-optional-packages@5.2.2", "", { "dependencies": { "detect-libc": "^2.0.1" }, "bin": { "node-gyp-build-optional-packages": "bin.js", "node-gyp-build-optional-packages-optional": "optional.js", "node-gyp-build-optional-packages-test": "build-test.js" } }, "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw=="],
"next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
@@ -2267,12 +2314,16 @@
"postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
"proxy-addr/ipaddr.js": ["ipaddr.js@1.9.1", "", {}, "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="],
"router/path-to-regexp": ["path-to-regexp@8.4.2", "", {}, "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA=="],
"string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
"tsconfig-paths/json5": ["json5@1.0.2", "", { "dependencies": { "minimist": "^1.2.0" }, "bin": { "json5": "lib/cli.js" } }, "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA=="],
"yauzl/buffer-crc32": ["buffer-crc32@0.2.13", "", {}, "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ=="],
"@modelcontextprotocol/sdk/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
"@parcel/packager-js/globals/type-fest": ["type-fest@0.20.2", "", {}, "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="],
@@ -2289,6 +2340,8 @@
"form-data/mime-types/mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="],
"minio/mime-types/mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="],
"next/postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
"p-locate/p-limit/yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],

BIN
bun.lockb Executable file

Binary file not shown.

View File

@@ -3,6 +3,10 @@ set -e
echo "🔄 Running database migrations..."
cd /app
# Resolve any previously failed migrations before re-applying
bunx prisma migrate resolve --rolled-back 20260423072135_add_stok_to_pasar_desa 2>/dev/null || true
bunx prisma migrate deploy || {
echo "❌ Migration failed!"
exit 1

View File

@@ -1,6 +1,6 @@
{
"name": "desa-darmasaba",
"version": "0.1.17",
"version": "0.1.48",
"private": true,
"scripts": {
"dev": "next dev",
@@ -81,6 +81,7 @@
"list": "^2.0.19",
"lodash": "^4.17.21",
"mime-types": "^3.0.2",
"minio": "^8.0.7",
"motion": "^12.4.1",
"nanoid": "^5.1.5",
"next": "^15.5.2",

View File

@@ -0,0 +1,48 @@
import prisma from "@/lib/prisma";
import { loadJsonData } from "../../load-json";
const kategoriKegiatanJson = loadJsonData("desa/kegiatan-desa/kategori-kegiatan.json");
const kegiatanDesaJson = loadJsonData("desa/kegiatan-desa/kegiatan-desa.json");
export async function seedKegiatanDesa() {
console.log("🔄 Seeding Kategori Kegiatan Desa...");
for (const k of kategoriKegiatanJson) {
await prisma.kategoriKegiatan.upsert({
where: { id: k.id },
update: { nama: k.nama },
create: { id: k.id, nama: k.nama },
});
console.log(` ✅ Kategori: ${k.nama}`);
}
console.log("🔄 Seeding Kegiatan Desa...");
for (const item of kegiatanDesaJson) {
await prisma.kegiatanDesa.upsert({
where: { id: item.id },
update: {
judul: item.judul,
deskripsiSingkat: item.deskripsiSingkat,
deskripsiLengkap: item.deskripsiLengkap,
tanggal: new Date(item.tanggal),
lokasi: item.lokasi,
partisipan: item.partisipan,
kategoriKegiatanId: item.kategoriKegiatanId,
},
create: {
id: item.id,
judul: item.judul,
deskripsiSingkat: item.deskripsiSingkat,
deskripsiLengkap: item.deskripsiLengkap,
tanggal: new Date(item.tanggal),
lokasi: item.lokasi,
partisipan: item.partisipan,
kategoriKegiatanId: item.kategoriKegiatanId,
},
});
console.log(` ✅ Kegiatan: ${item.judul}`);
}
console.log("🎉 Kegiatan Desa seed selesai");
}

View File

@@ -25,8 +25,11 @@ export async function seedPasarDesa() {
console.log("🔄 Seeding Pasar Desa...");
let i = 1;
for (const p of pasarDesa) {
let imageId: string | null = null;
const umkmId = `umkm-${i}`; // Map to umkm-1, umkm-2, etc.
i = (i % 4) + 1;
if (p.imageName) {
const image = await prisma.fileStorage.findUnique({
@@ -54,6 +57,7 @@ export async function seedPasarDesa() {
kontak: p.kontak,
imageId,
kategoriProdukId: p.kategoriProdukId,
umkmId: umkmId,
},
create: {
id: p.id,
@@ -65,6 +69,7 @@ export async function seedPasarDesa() {
kontak: p.kontak,
imageId,
kategoriProdukId: p.kategoriProdukId,
umkmId: umkmId,
},
});

View File

@@ -0,0 +1,84 @@
import prisma from "@/lib/prisma";
const kategoriUmkmData = [
{ id: "4b95bge6-012e-5ged-9552-4d8g65d44959", nama: "Makanan" },
{ id: "5c06chf7-123f-6hfe-0663-5e9h76e55060", nama: "Minuman" },
{ id: "5c06chf7-123f-7igd-0663-5e9h76e55060", nama: "Sembako" },
{ id: "5c06chf7-123f-8jhe-0663-5e9h76e55060", nama: "Sayur Mayur" },
{ id: "5c06chf7-123f-9kif-0663-5e9h76e55060", nama: "Protein Hewani" },
];
export const umkmData = [
{
id: "umkm-1",
nama: "Warung Pasar Darmasaba",
pemilik: "Pak Made",
deskripsi: "Warung tradisional kebutuhan pokok",
alamat: "Pasar Desa Darmasaba",
kontak: "081234567890",
kategoriId: "5c06chf7-123f-7igd-0663-5e9h76e55060"
},
{
id: "umkm-2",
nama: "Jajanan Pasar Bu Made",
pemilik: "Bu Made",
deskripsi: "Spesialis jajanan tradisional Bali",
alamat: "Pasar Desa Darmasaba",
kontak: "082145678901",
kategoriId: "4b95bge6-012e-5ged-9552-4d8g65d44959"
},
{
id: "umkm-3",
nama: "Sayur Segar Pak Wayan",
pemilik: "Pak Wayan",
deskripsi: "Sayuran lokal segar setiap hari",
alamat: "Pasar Desa Darmasaba",
kontak: "087865432109",
kategoriId: "5c06chf7-123f-8jhe-0663-5e9h76e55060"
},
{
id: "umkm-4",
nama: "Ayam & Daging Segar Darmasaba",
pemilik: "Pak Ketut",
deskripsi: "Daging ayam dan sapi segar",
alamat: "Pasar Desa Darmasaba",
kontak: "081998877665",
kategoriId: "5c06chf7-123f-9kif-0663-5e9h76e55060"
}
];
export async function seedUmkm() {
console.log("🔄 Seeding Kategori Produk UMKM...");
for (const k of kategoriUmkmData) {
await prisma.kategoriProdukUmkm.upsert({
where: { id: k.id },
update: { nama: k.nama },
create: { id: k.id, nama: k.nama },
});
}
console.log("🔄 Seeding UMKM...");
for (const u of umkmData) {
await prisma.umkm.upsert({
where: { id: u.id },
update: {
nama: u.nama,
pemilik: u.pemilik,
deskripsi: u.deskripsi,
alamat: u.alamat,
kontak: u.kontak,
kategoriId: u.kategoriId,
},
create: {
id: u.id,
nama: u.nama,
pemilik: u.pemilik,
deskripsi: u.deskripsi,
alamat: u.alamat,
kontak: u.kontak,
kategoriId: u.kategoriId,
},
});
}
console.log("✅ UMKM seeded successfully");
}

View File

@@ -28,6 +28,7 @@ export async function seedProgramKesehatan() {
name: p.name,
deskripsiSingkat: p.deskripsiSingkat,
deskripsi: p.deskripsi,
persentase: p.persentase ?? 0,
imageId,
},
create: {
@@ -35,6 +36,7 @@ export async function seedProgramKesehatan() {
name: p.name,
deskripsiSingkat: p.deskripsiSingkat,
deskripsi: p.deskripsi,
persentase: p.persentase ?? 0,
imageId,
},
});

View File

@@ -0,0 +1,24 @@
import prisma from "@/lib/prisma";
const SINGLETON_ID = "ringkasan_kesehatan_desa_001";
export async function seedRingkasanKesehatan() {
console.log("🔄 Seeding Ringkasan Kesehatan Desa...");
await prisma.ringkasanKesehatanDesa.upsert({
where: { id: SINGLETON_ID },
update: {
ibuHamilAkh: 87,
balitaTerdaftar: 342,
alertStunting: 12,
},
create: {
id: SINGLETON_ID,
ibuHamilAkh: 87,
balitaTerdaftar: 342,
alertStunting: 12,
},
});
console.log("✅ Ringkasan Kesehatan Desa seeded");
}

View File

@@ -0,0 +1,22 @@
import prisma from "@/lib/prisma";
const SINGLETON_ID = "beasiswa_config_desa_001";
export async function seedBeasiswaConfig() {
console.log("🔄 Seeding Beasiswa Config...");
await prisma.beasiswaConfig.upsert({
where: { id: SINGLETON_ID },
update: {
tahunAjaran: "2025/2026",
danaTersalurkan: BigInt(1200000000),
},
create: {
id: SINGLETON_ID,
tahunAjaran: "2025/2026",
danaTersalurkan: BigInt(1200000000),
},
});
console.log("✅ Beasiswa Config seeded");
}

View File

@@ -0,0 +1,22 @@
[
{
"id": "katbudaya000001",
"nama": "Budaya"
},
{
"id": "katsosia000001",
"nama": "Sosial"
},
{
"id": "katolahraga0001",
"nama": "Olahraga"
},
{
"id": "katkeagamaan01",
"nama": "Keagamaan"
},
{
"id": "katpemberday01",
"nama": "Pemberdayaan Masyarakat"
}
]

View File

@@ -0,0 +1,52 @@
[
{
"id": "a1b2c3d4-e5f6-7890-abcd-ef1234567801",
"judul": "Hari Kesaktian Pancasila",
"deskripsiSingkat": "Peringatan Hari Kesaktian Pancasila di Balai Desa Darmasaba sebagai momentum menguatkan nilai-nilai Pancasila dalam kehidupan bermasyarakat.",
"deskripsiLengkap": "Pemerintah Desa Darmasaba menyelenggarakan upacara peringatan Hari Kesaktian Pancasila yang dihadiri oleh perangkat desa, tokoh masyarakat, perwakilan pemuda, dan warga desa. Kegiatan ini sebagai bentuk penghormatan atas perjuangan bangsa dan komitmen untuk terus mengamalkan nilai-nilai Pancasila dalam kehidupan sehari-hari di lingkungan desa.",
"tanggal": "2025-10-01T00:00:00.000Z",
"lokasi": "Balai Desa",
"partisipan": 250,
"kategoriKegiatanId": "katbudaya000001"
},
{
"id": "a1b2c3d4-e5f6-7890-abcd-ef1234567802",
"judul": "Festival Budaya Desa",
"deskripsiSingkat": "Festival tahunan menampilkan kesenian dan budaya lokal Bali sebagai upaya pelestarian warisan budaya Desa Darmasaba.",
"deskripsiLengkap": "Festival Budaya Desa Darmasaba merupakan agenda tahunan yang menampilkan berbagai pertunjukan seni tradisional Bali seperti tari Kecak, Legong, Barong, serta pameran kerajinan tangan dan kuliner khas desa. Festival ini bertujuan untuk melestarikan warisan budaya leluhur, memperkenalkan kekayaan budaya kepada generasi muda, dan meningkatkan daya tarik wisata budaya Desa Darmasaba.",
"tanggal": "2026-05-20T00:00:00.000Z",
"lokasi": "Lapangan Desa",
"partisipan": 500,
"kategoriKegiatanId": "katbudaya000001"
},
{
"id": "a1b2c3d4-e5f6-7890-abcd-ef1234567803",
"judul": "Perayaan HUT Desa",
"deskripsiSingkat": "Perayaan hari ulang tahun Desa Darmasaba dengan berbagai kegiatan seni budaya dan olahraga yang melibatkan seluruh lapisan masyarakat.",
"deskripsiLengkap": "Hari Ulang Tahun Desa Darmasaba dirayakan dengan serangkaian kegiatan meriah meliputi upacara adat, pertunjukan seni budaya Bali, lomba olahraga tradisional, dan pameran produk unggulan desa. Perayaan ini menjadi ajang mempererat kebersamaan warga, mengenang sejarah desa, dan merayakan pencapaian pembangunan yang telah diraih bersama.",
"tanggal": "2026-08-17T00:00:00.000Z",
"lokasi": "Balai Desa",
"partisipan": 600,
"kategoriKegiatanId": "katbudaya000001"
},
{
"id": "a1b2c3d4-e5f6-7890-abcd-ef1234567804",
"judul": "Gotong Royong Pembersihan Desa",
"deskripsiSingkat": "Kegiatan gotong royong rutin membersihkan lingkungan desa sebagai wujud kebersamaan dan kepedulian masyarakat terhadap kebersihan.",
"deskripsiLengkap": "Kegiatan gotong royong pembersihan lingkungan desa dilaksanakan secara rutin setiap bulan dengan melibatkan seluruh warga, kader PKK, karang taruna, dan perangkat desa. Kegiatan ini mencakup pembersihan jalan desa, sungai, tempat ibadah, dan fasilitas umum sebagai bentuk nyata kepedulian masyarakat terhadap kebersihan dan keindahan lingkungan.",
"tanggal": "2026-03-15T00:00:00.000Z",
"lokasi": "Seluruh Wilayah Desa",
"partisipan": 400,
"kategoriKegiatanId": "katsosia000001"
},
{
"id": "a1b2c3d4-e5f6-7890-abcd-ef1234567805",
"judul": "Turnamen Olahraga Antar Banjar",
"deskripsiSingkat": "Turnamen olahraga tahunan antar banjar untuk mempererat tali persaudaraan dan mendorong gaya hidup sehat masyarakat desa.",
"deskripsiLengkap": "Turnamen olahraga antar banjar di Desa Darmasaba menampilkan berbagai cabang olahraga seperti bola voli, bulu tangkis, tenis meja, dan sepak bola. Kegiatan ini diikuti oleh perwakilan dari setiap banjar di desa dan bertujuan untuk menumbuhkan semangat sportivitas, mempererat silaturahmi antar warga, serta mendorong pola hidup sehat melalui olahraga.",
"tanggal": "2026-06-10T00:00:00.000Z",
"lokasi": "Lapangan Desa",
"partisipan": 350,
"kategoriKegiatanId": "katolahraga0001"
}
]

View File

@@ -1,406 +1,563 @@
[
{
"name": "42RCCpBZla4ZWxXcwx7kG-desktop.webp",
"path": "image/42RCCpBZla4ZWxXcwx7kG-desktop.webp",
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/d05a9e22-feac-4955-b1a2-75faad37f0ac/42RCCpBZla4ZWxXcwx7kG-desktop.webp",
"mimeType": "image/webp",
"link": "/api/fileStorage/findUnique/Gc79mlIlGuoRQuTqskFj--desktop.webp",
"link": "/api/img/42RCCpBZla4ZWxXcwx7kG-desktop.webp",
"category": "image"
},
{
"name": "42RCCpBZla4ZWxXcwx7kG-mobile.webp",
"path": "image/42RCCpBZla4ZWxXcwx7kG-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/c91212b5-7408-4ec9-b7c0-6c0fde2a9fc5/42RCCpBZla4ZWxXcwx7kG-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/c91212b5-7408-4ec9-b7c0-6c0fde2a9fc5/42RCCpBZla4ZWxXcwx7kG-mobile.webp",
"link": "/api/img/42RCCpBZla4ZWxXcwx7kG-mobile.webp",
"category": "image"
},
{
"name": "6DQbAvn0St-xHdPGW3vpY-desktop.webp",
"path": "image/6DQbAvn0St-xHdPGW3vpY-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/68cc521e-05e5-4258-af8d-c87fb76c927e/6DQbAvn0St-xHdPGW3vpY-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/68cc521e-05e5-4258-af8d-c87fb76c927e/6DQbAvn0St-xHdPGW3vpY-desktop.webp",
"link": "/api/img/6DQbAvn0St-xHdPGW3vpY-desktop.webp",
"category": "image"
},
{
"name": "6DQbAvn0St-xHdPGW3vpY-mobile.webp",
"path": "image/6DQbAvn0St-xHdPGW3vpY-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/15f7ddd6-448c-4e4a-9b24-0bdc4bce5ce1/6DQbAvn0St-xHdPGW3vpY-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/15f7ddd6-448c-4e4a-9b24-0bdc4bce5ce1/6DQbAvn0St-xHdPGW3vpY-mobile.webp",
"link": "/api/img/6DQbAvn0St-xHdPGW3vpY-mobile.webp",
"category": "image"
},
{
"name": "buku1 (1).jpeg",
"path": "image/buku1 (1).jpeg",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/d72b02a6-91f5-4d64-9729-521b306328d3/buku1%20%281%29.jpeg"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/d72b02a6-91f5-4d64-9729-521b306328d3/buku1%20%281%29.jpeg",
"link": "/api/img/buku1 (1).jpeg",
"category": "image"
},
{
"name": "buku1.jpeg",
"path": "image/buku1.jpeg",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/912bd7e5-be8a-4c19-8ab8-df6114a38864/buku1.jpeg"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/912bd7e5-be8a-4c19-8ab8-df6114a38864/buku1.jpeg",
"link": "/api/img/buku1.jpeg",
"category": "image"
},
{
"name": "buku6.jpg",
"path": "image/buku6.jpg",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/ea56bc7c-094b-464e-859a-6c65bf65361d/buku6.jpg"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/ea56bc7c-094b-464e-859a-6c65bf65361d/buku6.jpg",
"link": "/api/img/buku6.jpg",
"category": "image"
},
{
"name": "c7xWNyoYp8Cak28NG5NoG-desktop.webp",
"path": "image/c7xWNyoYp8Cak28NG5NoG-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/d84fb066-4352-44f0-b7bc-5d8c5b8ffb61/c7xWNyoYp8Cak28NG5NoG-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/d84fb066-4352-44f0-b7bc-5d8c5b8ffb61/c7xWNyoYp8Cak28NG5NoG-desktop.webp",
"link": "/api/img/c7xWNyoYp8Cak28NG5NoG-desktop.webp",
"category": "image"
},
{
"name": "c7xWNyoYp8Cak28NG5NoG-mobile.webp",
"path": "image/c7xWNyoYp8Cak28NG5NoG-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/9fb1c742-9a80-4788-9c73-9d06108e0051/c7xWNyoYp8Cak28NG5NoG-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/9fb1c742-9a80-4788-9c73-9d06108e0051/c7xWNyoYp8Cak28NG5NoG-mobile.webp",
"link": "/api/img/c7xWNyoYp8Cak28NG5NoG-mobile.webp",
"category": "image"
},
{
"name": "cg78Sb_QzZFlli9s2FPVc-mobile.webp",
"path": "image/cg78Sb_QzZFlli9s2FPVc-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/c5a2cd18-806d-4dcb-b5c5-b0c6bcef7f35/cg78Sb_QzZFlli9s2FPVc-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/c5a2cd18-806d-4dcb-b5c5-b0c6bcef7f35/cg78Sb_QzZFlli9s2FPVc-mobile.webp",
"link": "/api/img/cg78Sb_QzZFlli9s2FPVc-mobile.webp",
"category": "image"
},
{
"name": "d3v1AgLoSJhf5xvmmO3oP-mobile.webp",
"path": "image/d3v1AgLoSJhf5xvmmO3oP-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/ae72c51f-9df7-4b07-9fd5-e945c775d9ab/d3v1AgLoSJhf5xvmmO3oP-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/ae72c51f-9df7-4b07-9fd5-e945c775d9ab/d3v1AgLoSJhf5xvmmO3oP-mobile.webp",
"link": "/api/img/d3v1AgLoSJhf5xvmmO3oP-mobile.webp",
"category": "image"
},
{
"name": "d6hJgycQawWN3VEcHaqtR-desktop.webp",
"path": "image/d6hJgycQawWN3VEcHaqtR-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/4e5b9387-67b5-4c00-8f80-95ec6c54ff4a/d6hJgycQawWN3VEcHaqtR-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/4e5b9387-67b5-4c00-8f80-95ec6c54ff4a/d6hJgycQawWN3VEcHaqtR-desktop.webp",
"link": "/api/img/d6hJgycQawWN3VEcHaqtR-desktop.webp",
"category": "image"
},
{
"name": "d6hJgycQawWN3VEcHaqtR-mobile.webp",
"path": "image/d6hJgycQawWN3VEcHaqtR-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/011f65c9-4273-43e8-b6d7-ce7a5319ae83/d6hJgycQawWN3VEcHaqtR-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/011f65c9-4273-43e8-b6d7-ce7a5319ae83/d6hJgycQawWN3VEcHaqtR-mobile.webp",
"link": "/api/img/d6hJgycQawWN3VEcHaqtR-mobile.webp",
"category": "image"
},
{
"name": "DyX82oztXbHfu6HEvbrpt-desktop.webp",
"path": "image/DyX82oztXbHfu6HEvbrpt-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/b715dce5-1606-44cf-976f-57d8142e218e/DyX82oztXbHfu6HEvbrpt-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/b715dce5-1606-44cf-976f-57d8142e218e/DyX82oztXbHfu6HEvbrpt-desktop.webp",
"link": "/api/img/DyX82oztXbHfu6HEvbrpt-desktop.webp",
"category": "image"
},
{
"name": "DyX82oztXbHfu6HEvbrpt-mobile.webp",
"path": "image/DyX82oztXbHfu6HEvbrpt-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/d0ff5925-ec84-4100-920c-93e2eb479f13/DyX82oztXbHfu6HEvbrpt-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/d0ff5925-ec84-4100-920c-93e2eb479f13/DyX82oztXbHfu6HEvbrpt-mobile.webp",
"link": "/api/img/DyX82oztXbHfu6HEvbrpt-mobile.webp",
"category": "image"
},
{
"name": "EcQIGOF6LW1dIKE53vmba-desktop.webp",
"path": "image/EcQIGOF6LW1dIKE53vmba-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/7a97403e-9d6c-4a00-9c54-d5add0bd5915/EcQIGOF6LW1dIKE53vmba-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/7a97403e-9d6c-4a00-9c54-d5add0bd5915/EcQIGOF6LW1dIKE53vmba-desktop.webp",
"link": "/api/img/EcQIGOF6LW1dIKE53vmba-desktop.webp",
"category": "image"
},
{
"name": "EcQIGOF6LW1dIKE53vmba-mobile.webp",
"path": "image/EcQIGOF6LW1dIKE53vmba-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/7e85b8e8-27f5-46c7-b4fc-590d66eef2ce/EcQIGOF6LW1dIKE53vmba-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/7e85b8e8-27f5-46c7-b4fc-590d66eef2ce/EcQIGOF6LW1dIKE53vmba-mobile.webp",
"link": "/api/img/EcQIGOF6LW1dIKE53vmba-mobile.webp",
"category": "image"
},
{
"name": "Ez-SkRyf_F-1gksz_amNg-desktop.webp",
"path": "image/Ez-SkRyf_F-1gksz_amNg-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/c16de343-1297-4248-b104-83b3e3605f32/Ez-SkRyf_F-1gksz_amNg-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/c16de343-1297-4248-b104-83b3e3605f32/Ez-SkRyf_F-1gksz_amNg-desktop.webp",
"link": "/api/img/Ez-SkRyf_F-1gksz_amNg-desktop.webp",
"category": "image"
},
{
"name": "Ez-SkRyf_F-1gksz_amNg-mobile.webp",
"path": "image/Ez-SkRyf_F-1gksz_amNg-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/ece148ca-8aa1-43ef-a8de-ea0bde0a315a/Ez-SkRyf_F-1gksz_amNg-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/ece148ca-8aa1-43ef-a8de-ea0bde0a315a/Ez-SkRyf_F-1gksz_amNg-mobile.webp",
"link": "/api/img/Ez-SkRyf_F-1gksz_amNg-mobile.webp",
"category": "image"
},
{
"name": "g4ICsRrmOaIqS_yqlQLZK-desktop.webp",
"path": "image/g4ICsRrmOaIqS_yqlQLZK-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/31280b01-6cdb-4d96-9c96-0eecec6a238c/g4ICsRrmOaIqS_yqlQLZK-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/31280b01-6cdb-4d96-9c96-0eecec6a238c/g4ICsRrmOaIqS_yqlQLZK-desktop.webp",
"link": "/api/img/g4ICsRrmOaIqS_yqlQLZK-desktop.webp",
"category": "image"
},
{
"name": "g4ICsRrmOaIqS_yqlQLZK-mobile.webp",
"path": "image/g4ICsRrmOaIqS_yqlQLZK-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/af7f3e11-1f63-4307-88e9-64382a949279/g4ICsRrmOaIqS_yqlQLZK-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/af7f3e11-1f63-4307-88e9-64382a949279/g4ICsRrmOaIqS_yqlQLZK-mobile.webp",
"link": "/api/img/g4ICsRrmOaIqS_yqlQLZK-mobile.webp",
"category": "image"
},
{
"name": "Gc79mlIlGuoRQuTqskFj--desktop.webp",
"path": "image/Gc79mlIlGuoRQuTqskFj--desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/05214122-51bb-4fba-9b7c-f69e072d8a0d/Gc79mlIlGuoRQuTqskFj--desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/05214122-51bb-4fba-9b7c-f69e072d8a0d/Gc79mlIlGuoRQuTqskFj--desktop.webp",
"link": "/api/img/Gc79mlIlGuoRQuTqskFj--desktop.webp",
"category": "image"
},
{
"name": "Gc79mlIlGuoRQuTqskFj--mobile.webp",
"path": "image/Gc79mlIlGuoRQuTqskFj--mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/d49ab5d2-7087-4088-8e59-51f116f21e27/Gc79mlIlGuoRQuTqskFj--mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/d49ab5d2-7087-4088-8e59-51f116f21e27/Gc79mlIlGuoRQuTqskFj--mobile.webp",
"link": "/api/img/Gc79mlIlGuoRQuTqskFj--mobile.webp",
"category": "image"
},
{
"name": "Gi8EX3pBmT719AfzXirDS-desktop.webp",
"path": "image/Gi8EX3pBmT719AfzXirDS-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/4b456bad-228a-4211-a1bb-431dc081ecc7/Gi8EX3pBmT719AfzXirDS-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/4b456bad-228a-4211-a1bb-431dc081ecc7/Gi8EX3pBmT719AfzXirDS-desktop.webp",
"link": "/api/img/Gi8EX3pBmT719AfzXirDS-desktop.webp",
"category": "image"
},
{
"name": "Gi8EX3pBmT719AfzXirDS-mobile.webp",
"path": "image/Gi8EX3pBmT719AfzXirDS-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/68308100-d468-4e53-9cc6-3aa12035c8ab/Gi8EX3pBmT719AfzXirDS-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/68308100-d468-4e53-9cc6-3aa12035c8ab/Gi8EX3pBmT719AfzXirDS-mobile.webp",
"link": "/api/img/Gi8EX3pBmT719AfzXirDS-mobile.webp",
"category": "image"
},
{
"name": "gyNi4s8TnK2UrViU-gN2C-desktop.webp",
"path": "image/gyNi4s8TnK2UrViU-gN2C-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/539debe4-f3fc-4574-a256-ac8c8dbf5a00/gyNi4s8TnK2UrViU-gN2C-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/539debe4-f3fc-4574-a256-ac8c8dbf5a00/gyNi4s8TnK2UrViU-gN2C-desktop.webp",
"link": "/api/img/gyNi4s8TnK2UrViU-gN2C-desktop.webp",
"category": "image"
},
{
"name": "gyNi4s8TnK2UrViU-gN2C-mobile.webp",
"path": "image/gyNi4s8TnK2UrViU-gN2C-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/4971a22a-c0dd-4492-bff5-a8aa3e93f27f/gyNi4s8TnK2UrViU-gN2C-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/4971a22a-c0dd-4492-bff5-a8aa3e93f27f/gyNi4s8TnK2UrViU-gN2C-mobile.webp",
"link": "/api/img/gyNi4s8TnK2UrViU-gN2C-mobile.webp",
"category": "image"
},
{
"name": "h_Gd0SoeIJVTi_5TWUO-P-desktop.webp",
"path": "image/h_Gd0SoeIJVTi_5TWUO-P-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/8409886e-c01b-421a-ac44-6d3a4bfd0985/h_Gd0SoeIJVTi_5TWUO-P-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/8409886e-c01b-421a-ac44-6d3a4bfd0985/h_Gd0SoeIJVTi_5TWUO-P-desktop.webp",
"link": "/api/img/h_Gd0SoeIJVTi_5TWUO-P-desktop.webp",
"category": "image"
},
{
"name": "h_Gd0SoeIJVTi_5TWUO-P-mobile.webp",
"path": "image/h_Gd0SoeIJVTi_5TWUO-P-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/f4a5280d-bd2d-4c5a-8040-183f9e5d951b/h_Gd0SoeIJVTi_5TWUO-P-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/f4a5280d-bd2d-4c5a-8040-183f9e5d951b/h_Gd0SoeIJVTi_5TWUO-P-mobile.webp",
"link": "/api/img/h_Gd0SoeIJVTi_5TWUO-P-mobile.webp",
"category": "image"
},
{
"name": "hLeF0GRFZqDUngZnDMAAk-desktop.webp",
"path": "image/hLeF0GRFZqDUngZnDMAAk-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/6b33097e-8d9d-4864-964b-6dc49b62b4ae/hLeF0GRFZqDUngZnDMAAk-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/6b33097e-8d9d-4864-964b-6dc49b62b4ae/hLeF0GRFZqDUngZnDMAAk-desktop.webp",
"link": "/api/img/hLeF0GRFZqDUngZnDMAAk-desktop.webp",
"category": "image"
},
{
"name": "hLeF0GRFZqDUngZnDMAAk-mobile.webp",
"path": "image/hLeF0GRFZqDUngZnDMAAk-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/7dff816b-65bb-429c-b87e-3ff892d547dc/hLeF0GRFZqDUngZnDMAAk-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/7dff816b-65bb-429c-b87e-3ff892d547dc/hLeF0GRFZqDUngZnDMAAk-mobile.webp",
"link": "/api/img/hLeF0GRFZqDUngZnDMAAk-mobile.webp",
"category": "image"
},
{
"name": "hsHiD59dZQxr8G2SAfUYp-mobile.webp",
"path": "image/hsHiD59dZQxr8G2SAfUYp-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/55103cd4-6f57-491d-bd41-03c0068974ef/hsHiD59dZQxr8G2SAfUYp-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/55103cd4-6f57-491d-bd41-03c0068974ef/hsHiD59dZQxr8G2SAfUYp-mobile.webp",
"link": "/api/img/hsHiD59dZQxr8G2SAfUYp-mobile.webp",
"category": "image"
},
{
"name": "hyyTFi8EApjzFEZ9EvJgB-desktop.webp",
"path": "image/hyyTFi8EApjzFEZ9EvJgB-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/0ec4a67e-695e-4524-bf22-f823b80c7e6b/hyyTFi8EApjzFEZ9EvJgB-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/0ec4a67e-695e-4524-bf22-f823b80c7e6b/hyyTFi8EApjzFEZ9EvJgB-desktop.webp",
"link": "/api/img/hyyTFi8EApjzFEZ9EvJgB-desktop.webp",
"category": "image"
},
{
"name": "hyyTFi8EApjzFEZ9EvJgB-mobile.webp",
"path": "image/hyyTFi8EApjzFEZ9EvJgB-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/c982541e-f8b2-455a-a3cd-f856cd954bed/hyyTFi8EApjzFEZ9EvJgB-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/c982541e-f8b2-455a-a3cd-f856cd954bed/hyyTFi8EApjzFEZ9EvJgB-mobile.webp",
"link": "/api/img/hyyTFi8EApjzFEZ9EvJgB-mobile.webp",
"category": "image"
},
{
"name": "isTT2LmPbeOWD5wAdqleX-mobile.webp",
"path": "image/isTT2LmPbeOWD5wAdqleX-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/ef6f8237-0803-422a-83af-4daca61c7065/isTT2LmPbeOWD5wAdqleX-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/ef6f8237-0803-422a-83af-4daca61c7065/isTT2LmPbeOWD5wAdqleX-mobile.webp",
"link": "/api/img/isTT2LmPbeOWD5wAdqleX-mobile.webp",
"category": "image"
},
{
"name": "JhJigMo269K1TFGzSB1OS-desktop.webp",
"path": "image/JhJigMo269K1TFGzSB1OS-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/668d2f32-3277-4842-8a01-c3cb5ca0852b/JhJigMo269K1TFGzSB1OS-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/668d2f32-3277-4842-8a01-c3cb5ca0852b/JhJigMo269K1TFGzSB1OS-desktop.webp",
"link": "/api/img/JhJigMo269K1TFGzSB1OS-desktop.webp",
"category": "image"
},
{
"name": "JhJigMo269K1TFGzSB1OS-mobile.webp",
"path": "image/JhJigMo269K1TFGzSB1OS-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/df8c52a3-189a-48a0-b7e7-98efe2479414/JhJigMo269K1TFGzSB1OS-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/df8c52a3-189a-48a0-b7e7-98efe2479414/JhJigMo269K1TFGzSB1OS-mobile.webp",
"link": "/api/img/JhJigMo269K1TFGzSB1OS-mobile.webp",
"category": "image"
},
{
"name": "jYxEXspWH5g6eTTVqK72c-desktop.webp",
"path": "image/jYxEXspWH5g6eTTVqK72c-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/a13572b4-2e22-4d76-8826-64a8e6ae4e13/jYxEXspWH5g6eTTVqK72c-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/a13572b4-2e22-4d76-8826-64a8e6ae4e13/jYxEXspWH5g6eTTVqK72c-desktop.webp",
"link": "/api/img/jYxEXspWH5g6eTTVqK72c-desktop.webp",
"category": "image"
},
{
"name": "jYxEXspWH5g6eTTVqK72c-mobile.webp",
"path": "image/jYxEXspWH5g6eTTVqK72c-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/55f171fa-585f-4a94-bfeb-d2bad2f7ee39/jYxEXspWH5g6eTTVqK72c-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/55f171fa-585f-4a94-bfeb-d2bad2f7ee39/jYxEXspWH5g6eTTVqK72c-mobile.webp",
"link": "/api/img/jYxEXspWH5g6eTTVqK72c-mobile.webp",
"category": "image"
},
{
"name": "K0wY911212dinYA3AFB_f-desktop.webp",
"path": "image/K0wY911212dinYA3AFB_f-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/31ea22bf-9ce1-4dc6-b901-caaec86c35c4/K0wY911212dinYA3AFB_f-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/31ea22bf-9ce1-4dc6-b901-caaec86c35c4/K0wY911212dinYA3AFB_f-desktop.webp",
"link": "/api/img/K0wY911212dinYA3AFB_f-desktop.webp",
"category": "image"
},
{
"name": "K0wY911212dinYA3AFB_f-mobile.webp",
"path": "image/K0wY911212dinYA3AFB_f-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/ea061aa6-7e5e-447c-bec8-be1d927cc578/K0wY911212dinYA3AFB_f-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/ea061aa6-7e5e-447c-bec8-be1d927cc578/K0wY911212dinYA3AFB_f-mobile.webp",
"link": "/api/img/K0wY911212dinYA3AFB_f-mobile.webp",
"category": "image"
},
{
"name": "l4qsUEw2JiclGAkkrXp9g-desktop.webp",
"path": "image/l4qsUEw2JiclGAkkrXp9g-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/05088eb1-44bc-44d6-9e67-08dd6bca00ae/l4qsUEw2JiclGAkkrXp9g-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/05088eb1-44bc-44d6-9e67-08dd6bca00ae/l4qsUEw2JiclGAkkrXp9g-desktop.webp",
"link": "/api/img/l4qsUEw2JiclGAkkrXp9g-desktop.webp",
"category": "image"
},
{
"name": "l4qsUEw2JiclGAkkrXp9g-mobile.webp",
"path": "image/l4qsUEw2JiclGAkkrXp9g-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/cf411a77-b7fc-4ac7-a98d-f9f89bc27e85/l4qsUEw2JiclGAkkrXp9g-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/cf411a77-b7fc-4ac7-a98d-f9f89bc27e85/l4qsUEw2JiclGAkkrXp9g-mobile.webp",
"link": "/api/img/l4qsUEw2JiclGAkkrXp9g-mobile.webp",
"category": "image"
},
{
"name": "M9QlgVKIEfCdY3g4F_tRZ-desktop.webp",
"path": "image/M9QlgVKIEfCdY3g4F_tRZ-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/dfa58064-c17b-453a-b0a1-613109757844/M9QlgVKIEfCdY3g4F_tRZ-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/dfa58064-c17b-453a-b0a1-613109757844/M9QlgVKIEfCdY3g4F_tRZ-desktop.webp",
"link": "/api/img/M9QlgVKIEfCdY3g4F_tRZ-desktop.webp",
"category": "image"
},
{
"name": "M9QlgVKIEfCdY3g4F_tRZ-mobile.webp",
"path": "image/M9QlgVKIEfCdY3g4F_tRZ-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/4be366ca-1a39-46e9-adf2-d1d28fd83961/M9QlgVKIEfCdY3g4F_tRZ-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/4be366ca-1a39-46e9-adf2-d1d28fd83961/M9QlgVKIEfCdY3g4F_tRZ-mobile.webp",
"link": "/api/img/M9QlgVKIEfCdY3g4F_tRZ-mobile.webp",
"category": "image"
},
{
"name": "mtQsaKtQnhxIYVIooCkiQ-desktop.webp",
"path": "image/mtQsaKtQnhxIYVIooCkiQ-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/5015a484-ac9a-485f-9fb0-a29e3824a6ce/mtQsaKtQnhxIYVIooCkiQ-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/5015a484-ac9a-485f-9fb0-a29e3824a6ce/mtQsaKtQnhxIYVIooCkiQ-desktop.webp",
"link": "/api/img/mtQsaKtQnhxIYVIooCkiQ-desktop.webp",
"category": "image"
},
{
"name": "mtQsaKtQnhxIYVIooCkiQ-mobile.webp",
"path": "image/mtQsaKtQnhxIYVIooCkiQ-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/10ddd132-5b85-4a8f-b129-56a10540fc8c/mtQsaKtQnhxIYVIooCkiQ-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/10ddd132-5b85-4a8f-b129-56a10540fc8c/mtQsaKtQnhxIYVIooCkiQ-mobile.webp",
"link": "/api/img/mtQsaKtQnhxIYVIooCkiQ-mobile.webp",
"category": "image"
},
{
"name": "NBPAqjPXn7GQmYTDBI5hu-desktop.webp",
"path": "image/NBPAqjPXn7GQmYTDBI5hu-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/fd8cfea3-5cf2-489e-9f21-e7985335dc98/NBPAqjPXn7GQmYTDBI5hu-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/fd8cfea3-5cf2-489e-9f21-e7985335dc98/NBPAqjPXn7GQmYTDBI5hu-desktop.webp",
"link": "/api/img/NBPAqjPXn7GQmYTDBI5hu-desktop.webp",
"category": "image"
},
{
"name": "NBPAqjPXn7GQmYTDBI5hu-mobile.webp",
"path": "image/NBPAqjPXn7GQmYTDBI5hu-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/f5b02049-95db-4e1b-8bfd-b1a4c431ee49/NBPAqjPXn7GQmYTDBI5hu-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/f5b02049-95db-4e1b-8bfd-b1a4c431ee49/NBPAqjPXn7GQmYTDBI5hu-mobile.webp",
"link": "/api/img/NBPAqjPXn7GQmYTDBI5hu-mobile.webp",
"category": "image"
},
{
"name": "NyPGo-1AtfNm5wkAq7Om6-mobile.webp",
"path": "image/NyPGo-1AtfNm5wkAq7Om6-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/b7361eb8-37e8-4baa-a6d6-01b6131dd788/NyPGo-1AtfNm5wkAq7Om6-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/b7361eb8-37e8-4baa-a6d6-01b6131dd788/NyPGo-1AtfNm5wkAq7Om6-mobile.webp",
"link": "/api/img/NyPGo-1AtfNm5wkAq7Om6-mobile.webp",
"category": "image"
},
{
"name": "OsMY3AYPyGC_CoN1xUjOn-desktop.webp",
"path": "image/OsMY3AYPyGC_CoN1xUjOn-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/509a3603-5d11-4857-baa5-d439da43825a/OsMY3AYPyGC_CoN1xUjOn-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/509a3603-5d11-4857-baa5-d439da43825a/OsMY3AYPyGC_CoN1xUjOn-desktop.webp",
"link": "/api/img/OsMY3AYPyGC_CoN1xUjOn-desktop.webp",
"category": "image"
},
{
"name": "OsMY3AYPyGC_CoN1xUjOn-mobile.webp",
"path": "image/OsMY3AYPyGC_CoN1xUjOn-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/cbe9798a-4cf0-45f7-b041-70269490128b/OsMY3AYPyGC_CoN1xUjOn-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/cbe9798a-4cf0-45f7-b041-70269490128b/OsMY3AYPyGC_CoN1xUjOn-mobile.webp",
"link": "/api/img/OsMY3AYPyGC_CoN1xUjOn-mobile.webp",
"category": "image"
},
{
"name": "pps1ZgzJxDb4VZxEvtZeu-desktop.webp",
"path": "image/pps1ZgzJxDb4VZxEvtZeu-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/500fa1f3-d412-4f48-bc5f-465b91149c6e/pps1ZgzJxDb4VZxEvtZeu-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/500fa1f3-d412-4f48-bc5f-465b91149c6e/pps1ZgzJxDb4VZxEvtZeu-desktop.webp",
"link": "/api/img/pps1ZgzJxDb4VZxEvtZeu-desktop.webp",
"category": "image"
},
{
"name": "pps1ZgzJxDb4VZxEvtZeu-mobile.webp",
"path": "image/pps1ZgzJxDb4VZxEvtZeu-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/19c2b1a6-8c9b-4be9-981c-72d7a3ab6e38/pps1ZgzJxDb4VZxEvtZeu-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/19c2b1a6-8c9b-4be9-981c-72d7a3ab6e38/pps1ZgzJxDb4VZxEvtZeu-mobile.webp",
"link": "/api/img/pps1ZgzJxDb4VZxEvtZeu-mobile.webp",
"category": "image"
},
{
"name": "r_gBF0FuFpFPfSENHc4XI-desktop.webp",
"path": "image/r_gBF0FuFpFPfSENHc4XI-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/2e4ab451-df52-4f04-8af0-db2e789e58bb/r_gBF0FuFpFPfSENHc4XI-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/2e4ab451-df52-4f04-8af0-db2e789e58bb/r_gBF0FuFpFPfSENHc4XI-desktop.webp",
"link": "/api/img/r_gBF0FuFpFPfSENHc4XI-desktop.webp",
"category": "image"
},
{
"name": "r_gBF0FuFpFPfSENHc4XI-mobile.webp",
"path": "image/r_gBF0FuFpFPfSENHc4XI-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/1e2e8884-9da3-4610-9c57-8925740d4128/r_gBF0FuFpFPfSENHc4XI-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/1e2e8884-9da3-4610-9c57-8925740d4128/r_gBF0FuFpFPfSENHc4XI-mobile.webp",
"link": "/api/img/r_gBF0FuFpFPfSENHc4XI-mobile.webp",
"category": "image"
},
{
"name": "SQqSobKRg3ShvgPw_H41h-desktop.webp",
"path": "image/SQqSobKRg3ShvgPw_H41h-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/4360cb84-f82a-4a68-afd3-65decd912f30/SQqSobKRg3ShvgPw_H41h-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/4360cb84-f82a-4a68-afd3-65decd912f30/SQqSobKRg3ShvgPw_H41h-desktop.webp",
"link": "/api/img/SQqSobKRg3ShvgPw_H41h-desktop.webp",
"category": "image"
},
{
"name": "SQqSobKRg3ShvgPw_H41h-mobile.webp",
"path": "image/SQqSobKRg3ShvgPw_H41h-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/c808dff8-2e8a-4358-af03-4a838c9a6d6c/SQqSobKRg3ShvgPw_H41h-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/c808dff8-2e8a-4358-af03-4a838c9a6d6c/SQqSobKRg3ShvgPw_H41h-mobile.webp",
"link": "/api/img/SQqSobKRg3ShvgPw_H41h-mobile.webp",
"category": "image"
},
{
"name": "TDQReg1lQ73s39crXW0ra-desktop.webp",
"path": "image/TDQReg1lQ73s39crXW0ra-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/04d15638-31ed-440f-9fa0-bb30d71bbc59/TDQReg1lQ73s39crXW0ra-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/04d15638-31ed-440f-9fa0-bb30d71bbc59/TDQReg1lQ73s39crXW0ra-desktop.webp",
"link": "/api/img/TDQReg1lQ73s39crXW0ra-desktop.webp",
"category": "image"
},
{
"name": "TDQReg1lQ73s39crXW0ra-mobile.webp",
"path": "image/TDQReg1lQ73s39crXW0ra-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/da174313-329c-4156-88e2-fc929325dfff/TDQReg1lQ73s39crXW0ra-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/da174313-329c-4156-88e2-fc929325dfff/TDQReg1lQ73s39crXW0ra-mobile.webp",
"link": "/api/img/TDQReg1lQ73s39crXW0ra-mobile.webp",
"category": "image"
},
{
"name": "TTur8BttDlAS9UgZVe3M8-desktop.webp",
"path": "image/TTur8BttDlAS9UgZVe3M8-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/32fe30ab-0d7b-4ada-8d5d-993baf23545c/TTur8BttDlAS9UgZVe3M8-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/32fe30ab-0d7b-4ada-8d5d-993baf23545c/TTur8BttDlAS9UgZVe3M8-desktop.webp",
"link": "/api/img/TTur8BttDlAS9UgZVe3M8-desktop.webp",
"category": "image"
},
{
"name": "TTur8BttDlAS9UgZVe3M8-mobile.webp",
"path": "image/TTur8BttDlAS9UgZVe3M8-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/85c5ecb0-2fb5-4431-af11-0c851e52de4e/TTur8BttDlAS9UgZVe3M8-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/85c5ecb0-2fb5-4431-af11-0c851e52de4e/TTur8BttDlAS9UgZVe3M8-mobile.webp",
"link": "/api/img/TTur8BttDlAS9UgZVe3M8-mobile.webp",
"category": "image"
},
{
"name": "TWdNTZZbTOhFTNJGGPDyG-desktop.webp",
"path": "image/TWdNTZZbTOhFTNJGGPDyG-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/d606d946-fdf9-41b9-b0bd-1421b2ec6843/TWdNTZZbTOhFTNJGGPDyG-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/d606d946-fdf9-41b9-b0bd-1421b2ec6843/TWdNTZZbTOhFTNJGGPDyG-desktop.webp",
"link": "/api/img/TWdNTZZbTOhFTNJGGPDyG-desktop.webp",
"category": "image"
},
{
"name": "TWdNTZZbTOhFTNJGGPDyG-mobile.webp",
"path": "image/TWdNTZZbTOhFTNJGGPDyG-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/46859e6a-ebfc-4124-adfe-320953256fe5/TWdNTZZbTOhFTNJGGPDyG-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/46859e6a-ebfc-4124-adfe-320953256fe5/TWdNTZZbTOhFTNJGGPDyG-mobile.webp",
"link": "/api/img/TWdNTZZbTOhFTNJGGPDyG-mobile.webp",
"category": "image"
},
{
"name": "TXknK9CSRSxwvM2hPW6BO-desktop.webp",
"path": "image/TXknK9CSRSxwvM2hPW6BO-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/af38b038-0d38-4222-be29-09cb81054ce7/TXknK9CSRSxwvM2hPW6BO-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/af38b038-0d38-4222-be29-09cb81054ce7/TXknK9CSRSxwvM2hPW6BO-desktop.webp",
"link": "/api/img/TXknK9CSRSxwvM2hPW6BO-desktop.webp",
"category": "image"
},
{
"name": "TXknK9CSRSxwvM2hPW6BO-mobile.webp",
"path": "image/TXknK9CSRSxwvM2hPW6BO-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/eab1c384-aafa-438f-ac0f-003ddd51c9a5/TXknK9CSRSxwvM2hPW6BO-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/eab1c384-aafa-438f-ac0f-003ddd51c9a5/TXknK9CSRSxwvM2hPW6BO-mobile.webp",
"link": "/api/img/TXknK9CSRSxwvM2hPW6BO-mobile.webp",
"category": "image"
},
{
"name": "U7rePDZq5E59z-Eo9tLBe-desktop.webp",
"path": "image/U7rePDZq5E59z-Eo9tLBe-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/a2858ed9-8bb6-47cd-9e1b-831928a0389f/U7rePDZq5E59z-Eo9tLBe-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/a2858ed9-8bb6-47cd-9e1b-831928a0389f/U7rePDZq5E59z-Eo9tLBe-desktop.webp",
"link": "/api/img/U7rePDZq5E59z-Eo9tLBe-desktop.webp",
"category": "image"
},
{
"name": "U7rePDZq5E59z-Eo9tLBe-mobile.webp",
"path": "image/U7rePDZq5E59z-Eo9tLBe-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/1f4a189d-d312-46ef-a68c-c0c7261860d0/U7rePDZq5E59z-Eo9tLBe-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/1f4a189d-d312-46ef-a68c-c0c7261860d0/U7rePDZq5E59z-Eo9tLBe-mobile.webp",
"link": "/api/img/U7rePDZq5E59z-Eo9tLBe-mobile.webp",
"category": "image"
},
{
"name": "uDxAalFV0qRv_RrW9flM8-mobile.webp",
"path": "image/uDxAalFV0qRv_RrW9flM8-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/5f006c3c-47f5-4e48-8bdd-7fbe005bf810/uDxAalFV0qRv_RrW9flM8-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/5f006c3c-47f5-4e48-8bdd-7fbe005bf810/uDxAalFV0qRv_RrW9flM8-mobile.webp",
"link": "/api/img/uDxAalFV0qRv_RrW9flM8-mobile.webp",
"category": "image"
},
{
"name": "uE2QwpbcXyBWxVYqCWQQT-desktop.webp",
"path": "image/uE2QwpbcXyBWxVYqCWQQT-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/edf73617-214b-44df-960a-dd68f0bad97a/uE2QwpbcXyBWxVYqCWQQT-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/edf73617-214b-44df-960a-dd68f0bad97a/uE2QwpbcXyBWxVYqCWQQT-desktop.webp",
"link": "/api/img/uE2QwpbcXyBWxVYqCWQQT-desktop.webp",
"category": "image"
},
{
"name": "uE2QwpbcXyBWxVYqCWQQT-mobile.webp",
"path": "image/uE2QwpbcXyBWxVYqCWQQT-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/d7f5d738-b18f-44c8-92bb-8e526f47d9ee/uE2QwpbcXyBWxVYqCWQQT-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/d7f5d738-b18f-44c8-92bb-8e526f47d9ee/uE2QwpbcXyBWxVYqCWQQT-mobile.webp",
"link": "/api/img/uE2QwpbcXyBWxVYqCWQQT-mobile.webp",
"category": "image"
},
{
"name": "v7Ac2xQvTiJy-HYh1AxF4-desktop.webp",
"path": "image/v7Ac2xQvTiJy-HYh1AxF4-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/3e1b8dd9-2bf5-4daf-9dd9-dd687e9b2f2c/v7Ac2xQvTiJy-HYh1AxF4-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/3e1b8dd9-2bf5-4daf-9dd9-dd687e9b2f2c/v7Ac2xQvTiJy-HYh1AxF4-desktop.webp",
"link": "/api/img/v7Ac2xQvTiJy-HYh1AxF4-desktop.webp",
"category": "image"
},
{
"name": "v7Ac2xQvTiJy-HYh1AxF4-mobile.webp",
"path": "image/v7Ac2xQvTiJy-HYh1AxF4-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/44c78026-f802-46f3-8ec2-271f0f001f7a/v7Ac2xQvTiJy-HYh1AxF4-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/44c78026-f802-46f3-8ec2-271f0f001f7a/v7Ac2xQvTiJy-HYh1AxF4-mobile.webp",
"link": "/api/img/v7Ac2xQvTiJy-HYh1AxF4-mobile.webp",
"category": "image"
},
{
"name": "wh79hF4HTZMEFtYc-OfZg-mobile.webp",
"path": "image/wh79hF4HTZMEFtYc-OfZg-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/b4b4378e-76ad-4b15-84cf-00178553b3d4/wh79hF4HTZMEFtYc-OfZg-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/b4b4378e-76ad-4b15-84cf-00178553b3d4/wh79hF4HTZMEFtYc-OfZg-mobile.webp",
"link": "/api/img/wh79hF4HTZMEFtYc-OfZg-mobile.webp",
"category": "image"
},
{
"name": "x0_-siY2V8IehBzo4_uph-desktop.webp",
"path": "image/x0_-siY2V8IehBzo4_uph-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/7f82bcea-e7c6-4cde-9701-8d3afe49c0f8/x0_-siY2V8IehBzo4_uph-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/7f82bcea-e7c6-4cde-9701-8d3afe49c0f8/x0_-siY2V8IehBzo4_uph-desktop.webp",
"link": "/api/img/x0_-siY2V8IehBzo4_uph-desktop.webp",
"category": "image"
},
{
"name": "x0_-siY2V8IehBzo4_uph-mobile.webp",
"path": "image/x0_-siY2V8IehBzo4_uph-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/c4b23ebc-3915-4102-a25c-4e2f6da0d097/x0_-siY2V8IehBzo4_uph-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/c4b23ebc-3915-4102-a25c-4e2f6da0d097/x0_-siY2V8IehBzo4_uph-mobile.webp",
"link": "/api/img/x0_-siY2V8IehBzo4_uph-mobile.webp",
"category": "image"
},
{
"name": "y78xZ2axTOjz87gRKjVAf-desktop.webp",
"path": "image/y78xZ2axTOjz87gRKjVAf-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/180d0c29-c93e-4bbe-b399-7e6a34fbeb49/y78xZ2axTOjz87gRKjVAf-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/180d0c29-c93e-4bbe-b399-7e6a34fbeb49/y78xZ2axTOjz87gRKjVAf-desktop.webp",
"link": "/api/img/y78xZ2axTOjz87gRKjVAf-desktop.webp",
"category": "image"
},
{
"name": "y78xZ2axTOjz87gRKjVAf-mobile.webp",
"path": "image/y78xZ2axTOjz87gRKjVAf-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/71b5091a-ebcd-4d4c-9aae-1b7e548051fc/y78xZ2axTOjz87gRKjVAf-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/71b5091a-ebcd-4d4c-9aae-1b7e548051fc/y78xZ2axTOjz87gRKjVAf-mobile.webp",
"link": "/api/img/y78xZ2axTOjz87gRKjVAf-mobile.webp",
"category": "image"
},
{
"name": "YdCBnK-bWxlyHjwsk4Qie-desktop.webp",
"path": "image/YdCBnK-bWxlyHjwsk4Qie-desktop.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/bf6f2e11-b328-4da1-bda7-81af2336d03f/YdCBnK-bWxlyHjwsk4Qie-desktop.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/bf6f2e11-b328-4da1-bda7-81af2336d03f/YdCBnK-bWxlyHjwsk4Qie-desktop.webp",
"link": "/api/img/YdCBnK-bWxlyHjwsk4Qie-desktop.webp",
"category": "image"
},
{
"name": "YdCBnK-bWxlyHjwsk4Qie-mobile.webp",
"path": "image/YdCBnK-bWxlyHjwsk4Qie-mobile.webp",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/9d7e5232-3b30-4ead-9482-1fed3a86245a/YdCBnK-bWxlyHjwsk4Qie-mobile.webp"
"path": "image",
"downloadUrl": "https://cld-dkr-makuro-seafile.wibudev.com/seafhttp/files/9d7e5232-3b30-4ead-9482-1fed3a86245a/YdCBnK-bWxlyHjwsk4Qie-mobile.webp",
"link": "/api/img/YdCBnK-bWxlyHjwsk4Qie-mobile.webp",
"category": "image"
}
]
]

View File

@@ -3,8 +3,57 @@
"id": "cmkanjnmx0006vntz1cn7owpb",
"name": "Posyandu Pudak Amara",
"nomor": "(0361) 8463263",
"deskripsi": "<p>Posyandu Pudak Amara merupakan salah satu posyandu aktif di Desa Darmasaba dan pernah berkompetisi dalam lomba kader dan posyandu berprestasi tingkat Provinsi Bali tahun 2025.</p><p>Kegiatan ini melibatkan kader posyandu serta didampingi pihak desa dan puskesmas setempat untuk meningkatkan pelayanan kesehatan ibu dan anak.</p>",
"jadwalPelayanan": "<p>Setiap bulan pada satu hari tertentu (mis. minggu ke-2): 08:00 12:00 WITA (posyandu balita & ibu hamil)</p>",
"deskripsi": "<p>Posyandu Pudak Amara merupakan salah satu posyandu aktif di Desa Darmasaba dan pernah berkompetisi dalam lomba kader dan posyandu berprestasi tingkat Provinsi Bali tahun 2025.</p>",
"jadwalPelayanan": "Senin, 10 Feb 2026, 08:00 - 11:00 WITA",
"imageName": "TDQReg1lQ73s39crXW0ra-mobile.webp"
},
{
"id": "posyandu_mawar_001",
"name": "Posyandu Mawar",
"nomor": "(0361) 8463264",
"deskripsi": "<p>Posyandu Mawar melayani kesehatan ibu dan anak di wilayah Banjar Mawar, Desa Darmasaba, dengan fokus pada pemantauan tumbuh kembang balita dan kesehatan ibu hamil.</p>",
"jadwalPelayanan": "Senin, 15 Feb 2026, 08:00 - 11:00 WITA"
},
{
"id": "posyandu_melati_001",
"name": "Posyandu Melati",
"nomor": "(0361) 8463265",
"deskripsi": "<p>Posyandu Melati berperan aktif dalam pelayanan kesehatan dasar masyarakat di Banjar Melati, meliputi imunisasi, penimbangan balita, dan konsultasi gizi.</p>",
"jadwalPelayanan": "Selasa, 16 Feb 2026, 08:00 - 11:00 WITA"
},
{
"id": "posyandu_dahlia_001",
"name": "Posyandu Dahlia",
"nomor": "(0361) 8463266",
"deskripsi": "<p>Posyandu Dahlia aktif melayani masyarakat Banjar Dahlia dengan program unggulan pemantauan stunting dan pemberian makanan tambahan bagi balita berisiko.</p>",
"jadwalPelayanan": "Rabu, 17 Feb 2026, 08:00 - 11:00 WITA"
},
{
"id": "posyandu_anggrek_001",
"name": "Posyandu Anggrek",
"nomor": "(0361) 8463267",
"deskripsi": "<p>Posyandu Anggrek melayani ibu hamil, ibu menyusui, dan balita di wilayah Banjar Anggrek dengan dukungan tenaga kesehatan dari Puskesmas Abiansemal 3.</p>",
"jadwalPelayanan": "Kamis, 18 Feb 2026, 08:00 - 11:00 WITA"
},
{
"id": "posyandu_kamboja_001",
"name": "Posyandu Kamboja",
"nomor": "(0361) 8463268",
"deskripsi": "<p>Posyandu Kamboja hadir untuk mendukung kesehatan masyarakat Banjar Kamboja melalui layanan pemeriksaan rutin, imunisasi lengkap, dan edukasi gizi keluarga.</p>",
"jadwalPelayanan": "Jumat, 19 Feb 2026, 08:00 - 11:00 WITA"
},
{
"id": "posyandu_melur_001",
"name": "Posyandu Melur",
"nomor": "(0361) 8463269",
"deskripsi": "<p>Posyandu Melur aktif memberikan layanan kesehatan preventif bagi ibu dan anak di Banjar Melur, termasuk deteksi dini stunting dan pemantauan gizi balita.</p>",
"jadwalPelayanan": "Sabtu, 20 Feb 2026, 08:00 - 11:00 WITA"
},
{
"id": "posyandu_kenanga_001",
"name": "Posyandu Kenanga",
"nomor": "(0361) 8463270",
"deskripsi": "<p>Posyandu Kenanga melayani masyarakat Banjar Kenanga dengan program kesehatan ibu dan anak, pemberian vitamin A, dan konseling laktasi bagi ibu menyusui.</p>",
"jadwalPelayanan": "Senin, 23 Feb 2026, 08:00 - 11:00 WITA"
}
]

View File

@@ -1,9 +1,38 @@
[
{
"id": "prog_kes_imunisasi_001",
"name": "Imunisasi Lengkap",
"deskripsiSingkat": "<p>Persentase balita yang mendapatkan imunisasi lengkap sesuai jadwal di Desa Darmasaba.</p>",
"deskripsi": "<p>Program imunisasi lengkap mencakup vaksin BCG, DPT-HB-Hib, Polio, Campak, dan PCV yang diberikan kepada seluruh balita di Desa Darmasaba melalui posyandu dan puskesmas setempat untuk membangun kekebalan komunitas.</p>",
"persentase": 92
},
{
"id": "prog_kes_pemeriksaan_001",
"name": "Pemeriksaan Rutin",
"deskripsiSingkat": "<p>Persentase ibu hamil dan balita yang melakukan pemeriksaan kesehatan rutin secara berkala.</p>",
"deskripsi": "<p>Pemeriksaan kesehatan rutin dilakukan setiap bulan di posyandu dan puskesmas, mencakup penimbangan berat badan, pengukuran tinggi badan, pemeriksaan tekanan darah ibu hamil, dan konsultasi gizi untuk memantau perkembangan kesehatan masyarakat.</p>",
"persentase": 88
},
{
"id": "prog_kes_gizi_001",
"name": "Gizi Baik",
"deskripsiSingkat": "<p>Persentase balita dengan status gizi baik berdasarkan hasil pemantauan tumbuh kembang.</p>",
"deskripsi": "<p>Program pemantauan gizi balita dilaksanakan melalui posyandu dengan penimbangan bulanan dan pengukuran tinggi badan. Balita dengan status gizi baik menunjukkan berat dan tinggi badan sesuai standar WHO, didukung dengan program pemberian makanan tambahan bagi balita berisiko.</p>",
"persentase": 86
},
{
"id": "prog_kes_stunting_001",
"name": "Target Stunting",
"deskripsiSingkat": "<p>Persentase balita yang teridentifikasi berisiko stunting dan perlu penanganan khusus.</p>",
"deskripsi": "<p>Penanganan stunting di Desa Darmasaba dilakukan melalui deteksi dini, intervensi gizi spesifik, dan intervensi gizi sensitif. Program ini melibatkan kader posyandu, bidan desa, dan puskesmas untuk memantau pertumbuhan balita secara berkala dan memberikan penanganan tepat.</p>",
"persentase": 14
},
{
"id": "cmkawkji50002vn6yzyrlqhh1",
"name": "Gerakan Kulkul PKK dan Posyandu Desa Darmasaba",
"deskripsiSingkat": "<p>Kegiatan bersama PKK dan Posyandu untuk meningkatkan pelayanan kesehatan masyarakat.</p>",
"deskripsi": "<p>Pada hari Minggu, 11 Januari 2025, Pemerintah Desa Darmasaba melalui TP PKK dan TP Posyandu melaksanakan kegiatan Gerakan Kulkul PKK dan Posyandu yang berlangsung serentak di seluruh wilayah Desa Darmasaba untuk memperkuat pelayanan kesehatan dasar dan peningkatan partisipasi masyarakat dalam program Posyandu.</p>",
"persentase": 0,
"imageName": "hLeF0GRFZqDUngZnDMAAk-mobile.webp"
},
{
@@ -11,6 +40,7 @@
"name": "Pendampingan Kunjungan Rumah oleh Puskesmas Abiansemal 3",
"deskripsiSingkat": "<p>Pendataan kesehatan penyandang disabilitas lewat kunjungan rumah di Desa Darmasaba.</p>",
"deskripsi": "<p>Pemerintah Desa Darmasaba bersama Kelian Banjar Dinas dan kader kesehatan mendampingi kegiatan kunjungan rumah yang dilaksanakan oleh Puskesmas Abiansemal 3 pada 21 Juli 2025, difokuskan pada pendataan dan pemantauan kondisi kesehatan penyandang disabilitas di Banjar Bersih, Desa Darmasaba.</p>",
"persentase": 0,
"imageName": "hyyTFi8EApjzFEZ9EvJgB-mobile.webp"
},
{
@@ -18,6 +48,7 @@
"name": "Kegiatan Aksi Sosial Tim Penggerak Posyandu Provinsi Bali di Desa Darmasaba",
"deskripsiSingkat": "<p>Aksi sosial TP Posyandu Bali untuk memperkuat pelayanan posyandu di desa.</p>",
"deskripsi": "<p>Pada 10 Desember 2025, Desa Darmasaba menjadi lokasi pelaksanaan Aksi Sosial Tim Penggerak Posyandu Provinsi Bali yang bertujuan memperkuat pelayanan Posyandu serta meningkatkan kesejahteraan masyarakat, khususnya keluarga dan balita.</p>",
"persentase": 0,
"imageName": "l4qsUEw2JiclGAkkrXp9g-mobile.webp"
},
{
@@ -25,6 +56,7 @@
"name": "Inovasi BAJRA dalam Penanggulangan Rabies",
"deskripsiSingkat": "<p>Program BAJRA untuk penanggulangan rabies di Desa Darmasaba.</p>",
"deskripsi": "<p>Desa Darmasaba mengembangkan inovasi BAJRA (Bersama Jaga Rabies), sebuah program berbasis komunitas untuk penanggulangan rabies yang mengintegrasikan pelaporan cepat masyarakat, edukasi berkelanjutan dan koordinasi lintas sektor antara kesehatan hewan, manusia, dan pemerintahan desa.</p>",
"persentase": 0,
"imageName": "Gc79mlIlGuoRQuTqskFj--mobile.webp"
},
{
@@ -32,6 +64,7 @@
"name": "Posyandu Pudak Amara Berkompetisi",
"deskripsiSingkat": "<p>Partisipasi Posyandu Pudak Amara dalam lomba prestasi Posyandu tingkat provinsi.</p>",
"deskripsi": "<p>Kader Posyandu Pudak Amara Br. Cabe mendapat pendampingan dari Perbekel Darmasaba, Dinas Kesehatan Kab. Badung, Puskesmas Abiansemal III, dan Pustu Desa Darmasaba dalam ajang lomba kader dan Posyandu berprestasi tingkat Provinsi Bali tahun 2025.</p>",
"persentase": 0,
"imageName": "OsMY3AYPyGC_CoN1xUjOn-mobile.webp"
},
{
@@ -39,13 +72,15 @@
"name": "Outbound Kader Posyandu Darmasaba",
"deskripsiSingkat": "<p>Program pembinaan dan pengembangan kapasitas kader Posyandu.</p>",
"deskripsi": "<p>Pemdes Darmasaba melaksanakan kegiatan Outbound Posyandu untuk meningkatkan kapasitas dan wawasan Kader Posyandu se-Desa Darmasaba sebagai bagian dari upaya peningkatan kualitas pelayanan kesehatan dasar di masyarakat.</p>",
"persentase": 0,
"imageName": "M9QlgVKIEfCdY3g4F_tRZ-mobile.webp"
},
{
"id": "cmkdu8ki10004vn4lpbxm2zqo",
"name": "PEMBANGUNAN JAMBAN BAGI MASYARAKAT",
"deskripsiSingkat": "<p>Program pengadaan jamban bagi Masyarakat ini diharapkan menjadi stimulus agar masyarakat peduli terhadap lingkungan sehat sehingga Badung Open Defection Free atau terbebas dari buang air besar di tempat terbuka dapat terwujud.</p>",
"deskripsi": "<p>Desa Darmasaba sebagai desa yang berkomitmen selalu selaras dengan pembangunan Pemerintah Kabupaten Badung pada tahun anggaran 2023 ini turut ambil bagian dalam menyukseskan program Bupati Badung I Nyoman Giri Prasta, S.Sos dalam bidang kesehatan sanitasi masyarakat. Program pengadaan jamban bagi Masyarakat ini diharapkan menjadi stimulus agar masyarakat peduli terhadap lingkungan sehat sehingga Badung Open Defection Free atau terbebas dari buang air besar di tempat terbuka dapat terwujud.</p><p style=\"text-align: justify\">Pemberian bantuan jamban ini dilaksanakan di 11 banjar dengan menyasar 22 keluarga yang memang belum memiliki jamban yang sumber dananya sepenuhnya dari APBDes Darmasaba T. A. 2023. Pembangunan Jamban bagi Masyarakat ini juga menjadi bukti komitmen Pemerintah Desa Darmasaba dalam melaksanakan salah satu visi mewujudkan masyarakat yang sejahtera dan berbudaya untuk menjaga lingkungan yang bersih dan sehat.</p>",
"deskripsi": "<p>Desa Darmasaba sebagai desa yang berkomitmen selalu selaras dengan pembangunan Pemerintah Kabupaten Badung pada tahun anggaran 2023 ini turut ambil bagian dalam menyukseskan program Bupati Badung I Nyoman Giri Prasta, S.Sos dalam bidang kesehatan sanitasi masyarakat.</p>",
"persentase": 0,
"imageName": "6DQbAvn0St-xHdPGW3vpY-mobile.webp"
}
]

View File

@@ -0,0 +1,97 @@
/**
* Script migrasi: download semua file dari Seafile public share → upload ke MinIO
* Jalankan sekali: bun run prisma/migrate-seafile-to-minio.ts
*/
import { Client } from "minio";
import fileStorageData from "./data/file-storage.json";
const SEAFILE_BASE_URL = "https://cld-dkr-makuro-seafile.wibudev.com";
const SEAFILE_SHARE_TOKEN = "3a9a9ecb5e244f4da8ae";
const minio = new Client({
endPoint: process.env.MINIO_ENDPOINT!,
accessKey: process.env.MINIO_ACCESS_KEY!,
secretKey: process.env.MINIO_SECRET_KEY!,
useSSL: process.env.MINIO_USE_SSL === "true",
});
const BUCKET = process.env.MINIO_BUCKET!;
function buildSeafileUrl(fileName: string): string {
return `${SEAFILE_BASE_URL}/d/${SEAFILE_SHARE_TOKEN}/files/?p=${encodeURIComponent(fileName)}&raw=1`;
}
function guessMimeType(fileName: string): string {
const ext = fileName.split(".").pop()?.toLowerCase();
const map: Record<string, string> = {
webp: "image/webp",
jpg: "image/jpeg",
jpeg: "image/jpeg",
png: "image/png",
gif: "image/gif",
};
return map[ext ?? ""] ?? "application/octet-stream";
}
async function migrateFile(name: string): Promise<"ok" | "skip" | "error"> {
const objectName = `image/${name}`;
// Cek apakah sudah ada di MinIO — skip jika sudah
try {
await minio.statObject(BUCKET, objectName);
console.log(` ⏭ sudah ada, skip: ${name}`);
return "skip";
} catch {
// tidak ada, lanjut upload
}
const seafileUrl = buildSeafileUrl(name);
try {
const res = await fetch(seafileUrl);
if (!res.ok) {
console.error(` ✗ gagal download (HTTP ${res.status}): ${name}`);
return "error";
}
const buffer = Buffer.from(await res.arrayBuffer());
await minio.putObject(BUCKET, objectName, buffer, buffer.length, {
"Content-Type": guessMimeType(name),
});
console.log(`${name} (${(buffer.length / 1024).toFixed(1)} KB)`);
return "ok";
} catch (err) {
console.error(` ✗ error: ${name}`, err);
return "error";
}
}
async function main() {
console.log(`\n🚀 Migrasi Seafile → MinIO`);
console.log(` Bucket : ${BUCKET}`);
console.log(` Total : ${fileStorageData.length} file\n`);
let ok = 0, skip = 0, error = 0;
for (const item of fileStorageData) {
const result = await migrateFile(item.name);
if (result === "ok") ok++;
else if (result === "skip") skip++;
else error++;
}
console.log(`\n📊 Hasil:`);
console.log(` ✓ Berhasil : ${ok}`);
console.log(` ⏭ Dilewati : ${skip}`);
console.log(` ✗ Gagal : ${error}`);
if (error > 0) {
console.log(`\n⚠ Ada ${error} file yang gagal. Jalankan ulang script untuk retry.`);
process.exit(1);
} else {
console.log(`\n✅ Migrasi selesai!`);
}
}
main();

View File

@@ -0,0 +1,89 @@
/*
Warnings:
- You are about to drop the `ProdukUmkm` table. If the table is not empty, all the data it contains will be lost.
- Added the required column `umkmId` to the `PasarDesa` table without a default value. This is not possible if the table is not empty.
*/
-- DropForeignKey (idempotent)
ALTER TABLE "PenjualanProduk" DROP CONSTRAINT IF EXISTS "PenjualanProduk_produkId_fkey";
ALTER TABLE "ProdukUmkm" DROP CONSTRAINT IF EXISTS "ProdukUmkm_imageId_fkey";
ALTER TABLE "ProdukUmkm" DROP CONSTRAINT IF EXISTS "ProdukUmkm_umkmId_fkey";
-- AlterTable KategoriProduk (idempotent via DO block)
DO $$
BEGIN
BEGIN
ALTER TABLE "KategoriProduk" ALTER COLUMN "deletedAt" DROP NOT NULL;
EXCEPTION WHEN others THEN NULL;
END;
BEGIN
ALTER TABLE "KategoriProduk" ALTER COLUMN "deletedAt" DROP DEFAULT;
EXCEPTION WHEN others THEN NULL;
END;
END $$;
-- AlterTable PasarDesa: add columns if not exists, handle NOT NULL safely
DO $$
BEGIN
IF NOT EXISTS (
SELECT 1 FROM information_schema.columns
WHERE table_name = 'PasarDesa' AND column_name = 'stok'
) THEN
ALTER TABLE "PasarDesa" ADD COLUMN "stok" INTEGER NOT NULL DEFAULT 0;
END IF;
IF NOT EXISTS (
SELECT 1 FROM information_schema.columns
WHERE table_name = 'PasarDesa' AND column_name = 'umkmId'
) THEN
ALTER TABLE "PasarDesa" ADD COLUMN "umkmId" TEXT;
END IF;
END $$;
-- Set default value for existing rows before making NOT NULL
UPDATE "PasarDesa" SET "umkmId" = '' WHERE "umkmId" IS NULL;
ALTER TABLE "PasarDesa" ALTER COLUMN "umkmId" SET NOT NULL;
-- Remaining PasarDesa alterations (idempotent)
DO $$
BEGIN
BEGIN ALTER TABLE "PasarDesa" ALTER COLUMN "rating" SET DEFAULT 0; EXCEPTION WHEN others THEN NULL; END;
BEGIN ALTER TABLE "PasarDesa" ALTER COLUMN "alamatUsaha" DROP NOT NULL; EXCEPTION WHEN others THEN NULL; END;
BEGIN ALTER TABLE "PasarDesa" ALTER COLUMN "deletedAt" DROP NOT NULL; EXCEPTION WHEN others THEN NULL; END;
BEGIN ALTER TABLE "PasarDesa" ALTER COLUMN "deletedAt" DROP DEFAULT; EXCEPTION WHEN others THEN NULL; END;
BEGIN ALTER TABLE "PasarDesa" ALTER COLUMN "kontak" DROP NOT NULL; EXCEPTION WHEN others THEN NULL; END;
END $$;
-- DropTable (idempotent)
DROP TABLE IF EXISTS "ProdukUmkm";
-- Clean up rows with invalid umkmId before adding FK constraint
-- Must delete child tables first to avoid FK violations
DELETE FROM "KategoriToPasar" WHERE "pasarDesaId" IN (
SELECT id FROM "PasarDesa" WHERE "umkmId" = '' OR "umkmId" NOT IN (SELECT id FROM "Umkm")
);
DELETE FROM "PenjualanProduk" WHERE "produkId" IN (
SELECT id FROM "PasarDesa" WHERE "umkmId" = '' OR "umkmId" NOT IN (SELECT id FROM "Umkm")
);
DELETE FROM "PasarDesa" WHERE "umkmId" = '' OR "umkmId" NOT IN (SELECT id FROM "Umkm");
-- AddForeignKey (idempotent)
DO $$
BEGIN
IF NOT EXISTS (
SELECT 1 FROM information_schema.table_constraints
WHERE constraint_name = 'PasarDesa_umkmId_fkey'
) THEN
ALTER TABLE "PasarDesa" ADD CONSTRAINT "PasarDesa_umkmId_fkey"
FOREIGN KEY ("umkmId") REFERENCES "Umkm"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
END IF;
IF NOT EXISTS (
SELECT 1 FROM information_schema.table_constraints
WHERE constraint_name = 'PenjualanProduk_produkId_fkey'
) THEN
ALTER TABLE "PenjualanProduk" ADD CONSTRAINT "PenjualanProduk_produkId_fkey"
FOREIGN KEY ("produkId") REFERENCES "PasarDesa"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
END IF;
END $$;

View File

@@ -0,0 +1,57 @@
-- Create KategoriProdukUmkm table if it doesn't exist
-- (renames existing kategori_produk_umkm if present, otherwise creates fresh)
DO $$
BEGIN
IF EXISTS (
SELECT 1 FROM information_schema.tables
WHERE table_schema = 'public' AND table_name = 'kategori_produk_umkm'
) THEN
ALTER TABLE "kategori_produk_umkm" RENAME TO "KategoriProdukUmkm";
ELSIF NOT EXISTS (
SELECT 1 FROM information_schema.tables
WHERE table_schema = 'public' AND table_name = 'KategoriProdukUmkm'
) THEN
CREATE TABLE "KategoriProdukUmkm" (
"id" TEXT NOT NULL,
"nama" TEXT NOT NULL,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"deletedAt" TIMESTAMP(3),
"isActive" BOOLEAN NOT NULL DEFAULT true,
CONSTRAINT "KategoriProdukUmkm_pkey" PRIMARY KEY ("id")
);
END IF;
END $$;
-- Seed KategoriProdukUmkm: copy from KategoriProduk where referenced by Umkm
-- This ensures existing Umkm.kategoriId values exist in the new table
INSERT INTO "KategoriProdukUmkm" ("id", "nama", "createdAt", "updatedAt", "deletedAt", "isActive")
SELECT DISTINCT kp.id, kp.nama, kp."createdAt", kp."updatedAt", kp."deletedAt", kp."isActive"
FROM "KategoriProduk" kp
WHERE kp.id IN (SELECT DISTINCT "kategoriId" FROM "Umkm")
AND NOT EXISTS (SELECT 1 FROM "KategoriProdukUmkm" WHERE id = kp.id);
-- Update Umkm FK: drop old FK pointing to KategoriProduk, add new one to KategoriProdukUmkm
DO $$
DECLARE
fk_target TEXT;
BEGIN
SELECT ccu.table_name INTO fk_target
FROM information_schema.table_constraints tc
JOIN information_schema.key_column_usage kcu
ON tc.constraint_name = kcu.constraint_name AND tc.table_schema = kcu.table_schema
JOIN information_schema.constraint_column_usage ccu
ON ccu.constraint_name = tc.constraint_name AND ccu.table_schema = tc.table_schema
WHERE tc.constraint_type = 'FOREIGN KEY'
AND tc.table_schema = 'public'
AND tc.table_name = 'Umkm'
AND kcu.column_name = 'kategoriId'
LIMIT 1;
IF fk_target = 'KategoriProduk' THEN
ALTER TABLE "Umkm" DROP CONSTRAINT "Umkm_kategoriId_fkey";
ALTER TABLE "Umkm" ADD CONSTRAINT "Umkm_kategoriId_fkey"
FOREIGN KEY ("kategoriId") REFERENCES "KategoriProdukUmkm"("id")
ON DELETE RESTRICT ON UPDATE CASCADE;
END IF;
END $$;

View File

@@ -0,0 +1,4 @@
-- Migrate PasarDesa.kategoriProdukId FK from KategoriProduk to KategoriProdukUmkm
ALTER TABLE "PasarDesa" DROP CONSTRAINT "PasarDesa_kategoriProdukId_fkey";
ALTER TABLE "PasarDesa" ADD CONSTRAINT "PasarDesa_kategoriProdukId_fkey" FOREIGN KEY ("kategoriProdukId") REFERENCES "KategoriProdukUmkm"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

View File

@@ -0,0 +1,12 @@
-- Seed KategoriProdukUmkm with any KategoriProduk entries referenced by PasarDesa
-- that are not yet in KategoriProdukUmkm
INSERT INTO "KategoriProdukUmkm" ("id", "nama", "createdAt", "updatedAt", "deletedAt", "isActive")
SELECT DISTINCT kp.id, kp.nama, kp."createdAt", kp."updatedAt", kp."deletedAt", kp."isActive"
FROM "KategoriProduk" kp
WHERE kp.id IN (
SELECT DISTINCT "kategoriProdukId" FROM "PasarDesa"
WHERE "kategoriProdukId" IS NOT NULL
)
AND NOT EXISTS (
SELECT 1 FROM "KategoriProdukUmkm" WHERE id = kp.id
);

View File

@@ -0,0 +1,20 @@
-- Step 1: Seed KategoriProdukUmkm from KategoriProduk for any PasarDesa-referenced entries not yet present
INSERT INTO "KategoriProdukUmkm" ("id", "nama", "createdAt", "updatedAt", "deletedAt", "isActive")
SELECT DISTINCT kp.id, kp.nama, kp."createdAt", kp."updatedAt", kp."deletedAt", kp."isActive"
FROM "KategoriProduk" kp
WHERE kp.id IN (
SELECT DISTINCT "kategoriProdukId" FROM "PasarDesa"
WHERE "kategoriProdukId" IS NOT NULL
)
AND NOT EXISTS (
SELECT 1 FROM "KategoriProdukUmkm" WHERE id = kp.id
);
-- Step 2: Make kategoriProdukId nullable to handle orphaned/legacy data
ALTER TABLE "PasarDesa" ALTER COLUMN "kategoriProdukId" DROP NOT NULL;
-- Step 3: Null out any remaining orphaned references (not in KategoriProdukUmkm)
UPDATE "PasarDesa"
SET "kategoriProdukId" = NULL
WHERE "kategoriProdukId" IS NOT NULL
AND "kategoriProdukId" NOT IN (SELECT id FROM "KategoriProdukUmkm");

View File

@@ -0,0 +1,27 @@
-- Add persentase field to ProgramKesehatan (untuk Statistik Kesehatan bar chart)
ALTER TABLE "ProgramKesehatan" ADD COLUMN "persentase" INTEGER NOT NULL DEFAULT 0;
-- Create BeasiswaConfig (untuk dana tersalurkan + tahun ajaran beasiswa desa)
CREATE TABLE "BeasiswaConfig" (
"id" TEXT NOT NULL,
"tahunAjaran" TEXT NOT NULL,
"danaTersalurkan" BIGINT NOT NULL DEFAULT 0,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
"isActive" BOOLEAN NOT NULL DEFAULT true,
CONSTRAINT "BeasiswaConfig_pkey" PRIMARY KEY ("id")
);
-- Create RingkasanKesehatanDesa (untuk stat cards: ibu hamil, balita, stunting)
CREATE TABLE "RingkasanKesehatanDesa" (
"id" TEXT NOT NULL,
"ibuHamilAkh" INTEGER NOT NULL DEFAULT 0,
"balitaTerdaftar" INTEGER NOT NULL DEFAULT 0,
"alertStunting" INTEGER NOT NULL DEFAULT 0,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
"isActive" BOOLEAN NOT NULL DEFAULT true,
CONSTRAINT "RingkasanKesehatanDesa_pkey" PRIMARY KEY ("id")
);

View File

@@ -1213,6 +1213,7 @@ model ProgramKesehatan {
name String
deskripsiSingkat String
deskripsi String
persentase Int @default(0)
image FileStorage? @relation(fields: [imageId], references: [id])
imageId String?
createdAt DateTime @default(now())
@@ -1434,8 +1435,8 @@ model PasarDesa {
// Data Stok & UMKM
stok Int @default(0)
umkm Umkm? @relation(fields: [umkmId], references: [id])
umkmId String?
umkm Umkm @relation(fields: [umkmId], references: [id])
umkmId String
// Relasi Penjualan
penjualan PenjualanProduk[]
@@ -1445,8 +1446,8 @@ model PasarDesa {
deletedAt DateTime?
isActive Boolean @default(true)
kategoriProduk KategoriProduk @relation(fields: [kategoriProdukId], references: [id])
kategoriProdukId String
kategoriProduk KategoriProdukUmkm? @relation(fields: [kategoriProdukId], references: [id])
kategoriProdukId String?
KategoriToPasar KategoriToPasar[]
}
@@ -1458,8 +1459,6 @@ model KategoriProduk {
deletedAt DateTime?
isActive Boolean @default(true)
KategoriToPasar KategoriToPasar[]
PasarDesa PasarDesa[]
Umkm Umkm[]
}
model KategoriToPasar {
@@ -2424,23 +2423,35 @@ model MusikDesa {
}
model Umkm {
id String @id @default(cuid())
id String @id @default(cuid())
nama String
pemilik String
deskripsi String?
alamat String?
kontak String?
image FileStorage? @relation("UmkmImage", fields: [imageId], references: [id])
image FileStorage? @relation("UmkmImage", fields: [imageId], references: [id])
imageId String?
kategori KategoriProduk @relation(fields: [kategoriId], references: [id])
kategori KategoriProdukUmkm @relation(fields: [kategoriId], references: [id])
kategoriId String
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime?
produk PasarDesa[]
}
model KategoriProdukUmkm {
id String @id @default(cuid())
nama String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime?
isActive Boolean @default(true)
Umkm Umkm[]
PasarDesa PasarDesa[]
}
model PenjualanProduk {
id String @id @default(cuid())
produk PasarDesa @relation(fields: [produkId], references: [id])
@@ -2460,3 +2471,24 @@ model PenjualanProduk {
@@index([tanggal])
}
// ========================================= BEASISWA CONFIG ========================================= //
model BeasiswaConfig {
id String @id @default(cuid())
tahunAjaran String
danaTersalurkan BigInt @default(0)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
isActive Boolean @default(true)
}
// ========================================= RINGKASAN KESEHATAN DESA ========================================= //
model RingkasanKesehatanDesa {
id String @id @default(cuid())
ibuHamilAkh Int @default(0)
balitaTerdaftar Int @default(0)
alertStunting Int @default(0)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
isActive Boolean @default(true)
}

View File

@@ -2,6 +2,7 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import prisma from "@/lib/prisma";
import { seedBerita } from "./_seeder_list/desa/berita/seed_berita";
import { seedKegiatanDesa } from "./_seeder_list/desa/seed_kegiatan_desa";
import { seedFoto } from "./_seeder_list/desa/gallery/foto/seed_foto";
import { seedVideo } from "./_seeder_list/desa/gallery/video/seed_video";
import { seedLayanan } from "./_seeder_list/desa/layanan/seed_layanan";
@@ -23,6 +24,7 @@ import { seedPendudukUsiaKerjaYangMenganggur } from "./_seeder_list/ekonomi/seed
import { seedProgramKemiskinan } from "./_seeder_list/ekonomi/seed_program_kemiskinan";
import { seedSektorUnggulanDesa } from "./_seeder_list/ekonomi/seed_sektor_unggulan_desa";
import { seedStrukturBumdes } from "./_seeder_list/ekonomi/seed_struktur_bumdes";
import { seedUmkm } from "./_seeder_list/ekonomi/seed_umkm";
import { seedAjukan } from "./_seeder_list/inovasi/seed_ajukan";
import { seedDesaDigital } from "./_seeder_list/inovasi/seed_desa_digital";
import { seedInfoTeknologi } from "./_seeder_list/inovasi/seed_info_teknologi";
@@ -45,6 +47,7 @@ import { seedProgramKesehatan } from "./_seeder_list/kesehatan/program-kesehatan
import { seedPuskesmas } from "./_seeder_list/kesehatan/puskesmas/seed_puskesmas";
import { seedGrafikKepuasan } from "./_seeder_list/kesehatan/seed_grafik_kepuasan";
import { seedKelahiranKematian } from "./_seeder_list/kesehatan/seed_kelahiran_kematian";
import { seedRingkasanKesehatan } from "./_seeder_list/kesehatan/seed_ringkasan_kesehatan";
import { seedDesaAntiKorupsi } from "./_seeder_list/landing-page/desa-anti-korupsi/seed_desa_anti_korupsi";
import { seedPrestasiDesa } from "./_seeder_list/landing-page/prestasi-desa/seed_prestasi_desa";
import { seedMediaSosial } from "./_seeder_list/landing-page/profil_landing_page/seed_media_sosial";
@@ -58,6 +61,7 @@ import { seedKonservasiAdatBali } from "./_seeder_list/lingkungan/seed_konservas
import { seedPengelolaanSampah } from "./_seeder_list/lingkungan/seed_pengelolaan_sampah";
import { seedProgramPenghijauan } from "./_seeder_list/lingkungan/seed_program_penghijauan";
import { seedBeasiswaPendaftar } from "./_seeder_list/pendidikan/seed_beasiswa_pendaftar";
import { seedBeasiswaConfig } from "./_seeder_list/pendidikan/seed_beasiswa_config";
import { seedBimbinganBelajar } from "./_seeder_list/pendidikan/seed_bimbingan_belajar";
import { seedDataPendidikan } from "./_seeder_list/pendidikan/seed_data_pendidikan";
import { seedDataPerpustakaan } from "./_seeder_list/pendidikan/seed_data_perpustakaan";
@@ -274,6 +278,9 @@ import seedAssets from "./seed_assets";
await seedKeamananLingkungan();
// // ====================== MENU EKONOMI ========================
// // ==================== SUBMENU UMKM ==========================
await seedUmkm();
// // ==================== SUBMENU PASAR DESA ====================
await seedPasarDesa();
@@ -374,6 +381,11 @@ import seedAssets from "./seed_assets";
// ===== PENDIDIKAN =====
await seedKeunggulanProgram();
await seedBeasiswaPendaftar();
await seedBeasiswaConfig();
// ===== SOSIAL DASHBOARD =====
await seedRingkasanKesehatan();
await seedKegiatanDesa();
// ===== DESA =====
await seedMusikDesa();

View File

@@ -1,49 +1,92 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Client } from "minio";
import { getAllPublicCdnUrls } from "./lib/create_file_share_folder";
const minio = new Client({
endPoint: process.env.MINIO_ENDPOINT!,
accessKey: process.env.MINIO_ACCESS_KEY!,
secretKey: process.env.MINIO_SECRET_KEY!,
useSSL: process.env.MINIO_USE_SSL === "true",
});
const BUCKET = process.env.MINIO_BUCKET!;
function guessMimeType(fileName: string): string {
const ext = fileName.split(".").pop()?.toLowerCase() ?? "";
const map: Record<string, string> = {
webp: "image/webp",
jpg: "image/jpeg",
jpeg: "image/jpeg",
png: "image/png",
gif: "image/gif",
mp3: "audio/mpeg",
mp4: "audio/mp4",
pdf: "application/pdf",
};
return map[ext] ?? "application/octet-stream";
}
export default async function seedAssets() {
const images = await getAllPublicCdnUrls();
console.log("📂 Seeding assets dari MinIO...");
const stream = minio.listObjects(BUCKET, "image/", true);
let seeded = 0;
let updated = 0;
let skipped = 0;
for await (const obj of stream) {
if (!obj.name) continue;
const fileName = obj.name.replace("image/", "");
if (!fileName) continue;
const mimeType = guessMimeType(fileName);
for (const img of images) {
try {
// Check if the image already exists by name
const existingImage = await prisma.fileStorage.findUnique({
where: { name: img.name },
const existing = await prisma.fileStorage.findUnique({
where: { name: fileName },
});
if (!existingImage) {
// Only create if it doesn't exist
await prisma.fileStorage.create({
data: {
name: img.name,
category: "image",
mimeType: "image/webp",
link: img.cdnUrl,
path: "images",
realName: img.name,
isActive: true,
},
});
console.log(`✅ Created new image: ${img.name}`);
} else {
console.log(` Image already exists, skipping: ${img.name}`);
if (existing) {
// Perbaiki link lama yang masih pakai Seafile URL atau format lama
if (!existing.link?.startsWith("/api/img/")) {
await prisma.fileStorage.update({
where: { name: fileName },
data: { link: `/api/img/${fileName}`, path: "image" },
});
console.log(` 🔄 Updated: ${fileName}`);
updated++;
} else {
skipped++;
}
continue;
}
await prisma.fileStorage.create({
data: {
name: fileName,
realName: fileName,
path: "image",
mimeType,
category: "image",
link: `/api/img/${fileName}`,
isActive: true,
},
});
console.log(` ✓ Seeded: ${fileName}`);
seeded++;
} catch (err) {
console.log(`❌ Failed to seed asset ${img.name}:`, JSON.stringify(err));
console.error(` ✗ Error: ${fileName}`, err);
}
}
console.log("🎉 Image seeding completed");
console.log(`\n🎉 Asset seeding selesai — seeded: ${seeded}, updated: ${updated}, skipped: ${skipped}`);
}
if (import.meta.main) {
seedAssets()
.then(() => {
console.log("seed assets success");
})
.then(() => prisma.$disconnect())
.catch((err) => {
console.log("gagal seed assets", JSON.stringify(err));
console.error("gagal seed assets", err);
prisma.$disconnect();
process.exit(1);
});
}

View File

@@ -0,0 +1,409 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import ApiFetch from "@/lib/api-fetch";
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
// ========================================= SCHEMAS ========================================= //
const templateForm = z.object({
judul: z.string().min(3, "Judul minimal 3 karakter"),
deskripsiSingkat: z.string().min(3, "Deskripsi singkat minimal 3 karakter"),
deskripsiLengkap: z.string().min(3, "Deskripsi lengkap minimal 3 karakter"),
tanggal: z.string().nonempty("Tanggal harus diisi"),
lokasi: z.string().min(3, "Lokasi minimal 3 karakter"),
partisipan: z.number().optional().default(0),
kategoriKegiatanId: z.string().nonempty("Kategori kegiatan harus dipilih"),
imageId: z.string().optional(),
});
const defaultForm = {
judul: "",
deskripsiSingkat: "",
deskripsiLengkap: "",
tanggal: "",
lokasi: "",
partisipan: 0,
kategoriKegiatanId: "",
imageId: "" as string | undefined,
};
const templateKategori = z.object({
nama: z.string().min(1, "Nama kategori harus diisi"),
});
const defaultKategori = {
nama: "",
};
// ========================================= KEGIATAN DESA ========================================= //
const kegiatan = proxy({
create: {
form: { ...defaultForm },
loading: false,
async create() {
const cek = templateForm.safeParse(kegiatan.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
kegiatan.create.loading = true;
const res = await ApiFetch.api.desa["kegiatandesa"]["create"].post(
kegiatan.create.form
);
if (res.status === 200 && res.data?.success) {
kegiatan.findMany.load();
toast.success("Kegiatan desa berhasil disimpan!");
return true;
}
toast.error(res.data?.message || "Gagal menyimpan kegiatan desa");
return false;
} catch (error) {
console.error("Error creating kegiatan:", error);
toast.error("Terjadi kesalahan saat menyimpan kegiatan");
return false;
} finally {
kegiatan.create.loading = false;
}
},
resetForm() {
kegiatan.create.form = { ...defaultForm };
},
},
findMany: {
data: null as any[] | null,
page: 1,
totalPages: 1,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "", kategori = "") => {
const startTime = Date.now();
kegiatan.findMany.loading = true;
kegiatan.findMany.page = page;
kegiatan.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
if (kategori) query.kategori = kategori;
const res = await ApiFetch.api.desa["kegiatandesa"]["find-many"].get({ query });
if (res.status === 200 && res.data?.success) {
kegiatan.findMany.data = res.data.data ?? [];
kegiatan.findMany.totalPages = res.data.totalPages ?? 1;
} else {
kegiatan.findMany.data = [];
kegiatan.findMany.totalPages = 1;
}
} catch (err) {
console.error("Gagal fetch kegiatan paginated:", err);
kegiatan.findMany.data = [];
kegiatan.findMany.totalPages = 1;
} finally {
const elapsed = Date.now() - startTime;
const minDelay = 300;
const delay = elapsed < minDelay ? minDelay - elapsed : 0;
setTimeout(() => {
kegiatan.findMany.loading = false;
}, delay);
}
},
},
findUnique: {
data: null as any | null,
loading: false,
async load(id: string) {
if (!id) return;
this.loading = true;
try {
const res = await fetch(`/api/desa/kegiatandesa/${id}`); // Assuming unique endpoint follows standard
if (res.ok) {
const result = await res.json();
kegiatan.findUnique.data = result.data ?? null;
}
} catch (error) {
console.error("Error fetching unique kegiatan:", error);
} finally {
this.loading = false;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
kegiatan.delete.loading = true;
const response = await fetch(`/api/desa/kegiatandesa/del/${id}`, {
method: "DELETE",
});
const result = await response.json();
if (response.ok && result?.success) {
toast.success(result.message || "Kegiatan berhasil dihapus");
await kegiatan.findMany.load();
} else {
toast.error(result?.message || "Gagal menghapus kegiatan");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus kegiatan");
} finally {
kegiatan.delete.loading = false;
}
},
},
edit: {
id: "",
form: { ...defaultForm },
loading: false,
async load(id: string) {
if (!id) return null;
try {
kegiatan.edit.loading = true;
const response = await fetch(`/api/desa/kegiatandesa/${id}`);
const result = await response.json();
if (result?.success) {
const data = result.data;
this.id = data.id;
this.form = {
judul: data.judul,
deskripsiSingkat: data.deskripsiSingkat,
deskripsiLengkap: data.deskripsiLengkap,
tanggal: data.tanggal ? new Date(data.tanggal).toISOString().split('T')[0] : "",
lokasi: data.lokasi,
partisipan: data.partisipan || 0,
kategoriKegiatanId: data.kategoriKegiatanId || "",
imageId: data.imageId || undefined,
};
return data;
}
} catch (error) {
console.error("Error loading kegiatan for edit:", error);
} finally {
kegiatan.edit.loading = false;
}
return null;
},
async update() {
const cek = templateForm.safeParse(kegiatan.edit.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
toast.error(err);
return false;
}
try {
kegiatan.edit.loading = true;
const response = await fetch(`/api/desa/kegiatandesa/${this.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(kegiatan.edit.form),
});
const result = await response.json();
if (result.success) {
toast.success("Berhasil update kegiatan");
await kegiatan.findMany.load();
return true;
}
throw new Error(result.message || "Gagal update kegiatan");
} catch (error) {
toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat update");
return false;
} finally {
kegiatan.edit.loading = false;
}
},
reset() {
kegiatan.edit.id = "";
kegiatan.edit.form = { ...defaultForm };
},
},
});
// ========================================= KATEGORI KEGIATAN ========================================= //
const kategoriKegiatan = proxy({
create: {
form: { ...defaultKategori },
loading: false,
async create() {
const cek = templateKategori.safeParse(kategoriKegiatan.create.form);
if (!cek.success) {
return toast.error("Nama kategori harus diisi");
}
try {
kategoriKegiatan.create.loading = true;
const res = await ApiFetch.api.desa["kategorikegiatan"]["create"].post(
kategoriKegiatan.create.form
);
if (res.status === 200 && res.data?.success) {
kategoriKegiatan.findMany.load();
toast.success("Kategori kegiatan berhasil dibuat");
return true;
}
toast.error(res.data?.message || "Gagal membuat kategori");
return false;
} catch (error) {
console.error(error);
toast.error("Terjadi kesalahan");
return false;
} finally {
kategoriKegiatan.create.loading = false;
}
},
resetForm() {
kategoriKegiatan.create.form = { ...defaultKategori };
},
},
findMany: {
data: [] as any[],
page: 1,
totalPages: 1,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
kategoriKegiatan.findMany.loading = true;
kategoriKegiatan.findMany.page = page;
kategoriKegiatan.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.desa["kategorikegiatan"]["findMany"].get({ query });
if (res.status === 200 && res.data?.success) {
kategoriKegiatan.findMany.data = res.data.data ?? [];
kategoriKegiatan.findMany.totalPages = res.data.totalPages ?? 1;
} else {
kategoriKegiatan.findMany.data = [];
}
} catch (err) {
console.error("Gagal fetch kategori kegiatan:", err);
} finally {
kategoriKegiatan.findMany.loading = false;
}
},
},
findUnique: {
data: null as any | null,
loading: false,
async load(id: string) {
try {
const res = await fetch(`/api/desa/kategorikegiatan/${id}`);
if (res.ok) {
const result = await res.json();
kategoriKegiatan.findUnique.data = result.data ?? null;
}
} catch (error) {
console.error(error);
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return;
try {
kategoriKegiatan.delete.loading = true;
const res = await fetch(`/api/desa/kategorikegiatan/del/${id}`, { method: "DELETE" });
const result = await res.json();
if (result.success) {
toast.success(result.message);
kategoriKegiatan.findMany.load();
} else {
toast.error(result.message);
}
} catch (error) {
console.error(error);
} finally {
kategoriKegiatan.delete.loading = false;
}
},
},
update: {
id: "",
form: { ...defaultKategori },
loading: false,
async load(id: string) {
if (!id) return;
try {
this.loading = true;
const res = await fetch(`/api/desa/kategorikegiatan/${id}`);
const result = await res.json();
if (result.success) {
this.id = result.data.id;
this.form = { nama: result.data.nama };
}
} catch (error) {
console.error(error);
} finally {
this.loading = false;
}
},
async update() {
const cek = templateKategori.safeParse(kategoriKegiatan.update.form);
if (!cek.success) return toast.error("Nama kategori harus diisi");
try {
this.loading = true;
const res = await fetch(`/api/desa/kategorikegiatan/${this.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.form),
});
const result = await res.json();
if (result.success) {
toast.success("Berhasil update kategori");
kategoriKegiatan.findMany.load();
return true;
}
toast.error(result.message);
} catch (error) {
console.error(error);
} finally {
this.loading = false;
}
return false;
},
reset() {
this.id = "";
this.form = { ...defaultKategori };
},
},
});
// ========================================= GLOBAL STATE ========================================= //
const stateDashboardKegiatan = proxy({
kegiatan,
kategoriKegiatan,
});
export default stateDashboardKegiatan;

View File

@@ -0,0 +1,153 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
import { Prisma } from "@prisma/client";
const lambangDesaForm = z.object({
judul: z.string().min(3, "Judul minimal 3 karakter"),
deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
});
const lambangDesaDefaultForm = {
judul: "",
deskripsi: "",
};
type LambangDesaForm = Prisma.LambangDesaGetPayload<{
select: {
id: true;
judul: true;
deskripsi: true;
};
}>;
const lambangDesa = proxy({
findUnique: {
data: null as LambangDesaForm | null,
loading: false,
error: null as string | null,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
this.loading = true;
this.error = null;
try {
const response = await fetch(`/api/desa/profile/lambang/${id}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result.success) {
this.data = result.data;
return result.data;
} else {
throw new Error(
result.message || "Gagal mengambil data lambang desa"
);
}
} catch (error) {
const msg = (error as Error).message;
this.error = msg;
console.error("Load lambang desa error:", msg);
toast.error("Terjadi kesalahan saat mengambil data lambang desa");
return null;
} finally {
this.loading = false;
}
},
reset() {
this.data = null;
this.error = null;
this.loading = false;
},
},
update: {
id: "",
form: { ...lambangDesaDefaultForm },
loading: false,
error: null as string | null,
isReadOnly: false,
initialize(lambangDesaData: LambangDesaForm) {
this.id = lambangDesaData.id;
this.isReadOnly = false;
this.form = {
judul: lambangDesaData.judul || "",
deskripsi: lambangDesaData.deskripsi || "",
};
},
updateField(field: keyof typeof lambangDesaDefaultForm, value: string) {
this.form[field] = value;
},
async submit() {
const validation = lambangDesaForm.safeParse(this.form);
if (!validation.success) {
const errors = validation.error.issues
.map((issue) => `${issue.path.join(".")}: ${issue.message}`)
.join(", ");
toast.error(`Form tidak valid: ${errors}`);
return false;
}
this.loading = true;
this.error = null;
try {
const response = await fetch(`/api/desa/profile/lambang/${this.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(this.form),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
errorData.message || `HTTP error! status: ${response.status}`
);
}
const result = await response.json();
if (result.success) {
toast.success("Berhasil update lambang desa");
await lambangDesa.findUnique.load(this.id);
return true;
} else {
throw new Error(result.message || "Gagal update lambang desa");
}
} catch (error) {
const errorMessage = (error as Error).message;
this.error = errorMessage;
console.error("Update lambang desa error:", errorMessage);
toast.error("Terjadi kesalahan saat update lambang desa");
return false;
} finally {
this.loading = false;
}
},
reset() {
this.id = "";
this.form = { ...lambangDesaDefaultForm };
this.error = null;
this.loading = false;
this.isReadOnly = false;
},
},
});
export default lambangDesa;

View File

@@ -0,0 +1,241 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
import { Prisma } from "@prisma/client";
import ApiFetch from "@/lib/api-fetch";
const mantanPerbekelForm = z.object({
nama: z.string().min(3, "Nama minimal 3 karakter"),
daerah: z.string().min(3, "Daerah minimal 3 karakter"),
periode: z.string().min(3, "Periode minimal 3 karakter"),
imageId: z.string().min(1, "Gambar wajib dipilih"),
});
const mantanPerbekelDefaultForm = {
nama: "",
daerah: "",
periode: "",
imageId: "",
};
const mantanPerbekel = proxy({
create: {
form: { ...mantanPerbekelDefaultForm },
loading: false,
async create() {
const cek = mantanPerbekelForm.safeParse(mantanPerbekel.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
mantanPerbekel.create.loading = true;
const res = await ApiFetch.api.desa.mantanperbekel["create"].post(
mantanPerbekel.create.form
);
if (res.status === 200) {
mantanPerbekel.findMany.load();
return toast.success("Foto berhasil disimpan!");
}
return toast.error("Gagal menyimpan foto");
} catch (error) {
console.log((error as Error).message);
} finally {
mantanPerbekel.create.loading = false;
}
},
resetForm() {
mantanPerbekel.create.form = { ...mantanPerbekelDefaultForm };
},
},
findMany: {
data: null as
| Prisma.PerbekelDariMasaKeMasaGetPayload<{
include: {
image: true;
};
}>[]
| null,
page: 1,
totalPages: 1,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
mantanPerbekel.findMany.loading = true;
mantanPerbekel.findMany.page = page;
mantanPerbekel.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.desa.mantanperbekel["findMany"].get({
query,
});
if (res.status === 200 && res.data?.success) {
mantanPerbekel.findMany.data = res.data.data ?? [];
mantanPerbekel.findMany.totalPages = res.data.totalPages ?? 1;
} else {
mantanPerbekel.findMany.data = [];
mantanPerbekel.findMany.totalPages = 1;
}
} catch (err) {
console.error("Gagal fetch mantan perbekel paginated:", err);
mantanPerbekel.findMany.data = [];
mantanPerbekel.findMany.totalPages = 1;
} finally {
mantanPerbekel.findMany.loading = false;
}
},
},
findUnique: {
data: null as Prisma.PerbekelDariMasaKeMasaGetPayload<{
include: {
image: true;
};
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/desa/mantanperbekel/${id}`);
if (res.ok) {
const data = await res.json();
mantanPerbekel.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch mantan perbekel:", res.statusText);
mantanPerbekel.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching mantan perbekel:", error);
mantanPerbekel.findUnique.data = null;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
mantanPerbekel.delete.loading = true;
const response = await fetch(`/api/desa/mantanperbekel/del/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
const result = await response.json();
if (response.ok) {
toast.success(result.message || "Mantan perbekel berhasil dihapus");
await mantanPerbekel.findMany.load();
} else {
toast.error(result.message || "Gagal menghapus mantan perbekel");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus mantan perbekel");
} finally {
mantanPerbekel.delete.loading = false;
}
},
},
update: {
id: "",
form: { ...mantanPerbekelDefaultForm },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
const response = await fetch(`/api/desa/mantanperbekel/${id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result?.success) {
const data = result.data;
this.id = data.id;
this.form = {
nama: data.nama,
daerah: data.daerah,
periode: data.periode,
imageId: data.imageId || "",
};
return data;
} else {
throw new Error(result.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading foto:", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
}
},
async update() {
const cek = mantanPerbekelForm.safeParse(mantanPerbekel.update.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
toast.error(err);
return false;
}
try {
mantanPerbekel.update.loading = true;
const response = await fetch(`/api/desa/mantanperbekel/${this.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nama: this.form.nama,
daerah: this.form.daerah,
periode: this.form.periode,
imageId: this.form.imageId,
}),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
errorData.message || `HTTP error! status: ${response.status}`
);
}
const result = await response.json();
if (result.success) {
toast.success(result.message || "Mantan perbekel berhasil diupdate");
await mantanPerbekel.findMany.load();
return true;
} else {
throw new Error(result.message || "Gagal mengupdate mantan perbekel");
}
} catch (error) {
console.error("Error updating mantan perbekel:", error);
toast.error(
error instanceof Error
? error.message
: "Gagal mengupdate mantan perbekel"
);
return false;
} finally {
mantanPerbekel.update.loading = false;
}
},
reset() {
mantanPerbekel.update.id = "";
mantanPerbekel.update.form = { ...mantanPerbekelDefaultForm };
},
},
});
export default mantanPerbekel;

View File

@@ -0,0 +1,183 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
import { Prisma } from "@prisma/client";
const maskotForm = z.object({
judul: z.string().min(3, "Judul minimal 3 karakter"),
deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
images: z
.array(
z.object({
label: z.string().min(1, "Label wajib"),
imageId: z.string().min(1, "Image ID wajib"),
})
)
.min(1, "Minimal 1 gambar harus diisi"),
});
const maskotDefaultForm = {
judul: "",
deskripsi: "",
images: [] as { label: string; imageId: string }[],
};
type FormData = typeof maskotDefaultForm;
type MaskotDesaForm = Prisma.MaskotDesaGetPayload<{
include: {
images: {
include: {
image: {
select: {
id: true;
name: true;
path: true;
link: true;
};
};
};
};
};
}>;
const maskotDesa = proxy({
findUnique: {
data: null as MaskotDesaForm | null,
loading: false,
error: null as string | null,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
this.loading = true;
this.error = null;
try {
const response = await fetch(`/api/desa/profile/maskot/${id}`);
const result = await response.json();
if (response.ok && result.success) {
this.data = result.data;
return result.data;
} else {
throw new Error(result.message || "Gagal mengambil data profile");
}
} catch (error) {
const msg = (error as Error).message;
this.error = msg;
console.error("Load profile error:", msg);
toast.error("Terjadi kesalahan saat mengambil data profile");
return null;
} finally {
this.loading = false;
}
},
reset() {
this.data = null;
this.error = null;
this.loading = false;
},
},
update: {
id: "",
form: { ...maskotDefaultForm },
loading: false,
error: null as string | null,
isReadOnly: false,
initialize(profileData: MaskotDesaForm) {
this.id = profileData.id;
this.isReadOnly = false;
this.form = {
judul: profileData.judul || "",
deskripsi: profileData.deskripsi || "",
images: (profileData.images || []).map((img) => ({
label: img.label,
imageId: img?.image?.id || "",
})),
};
},
updateField<K extends keyof FormData>(field: K, value: FormData[K]) {
this.form[field] = value;
},
addImage() {
this.form.images.push({ label: "", imageId: "" });
},
removeImage(index: number) {
this.form.images.splice(index, 1);
},
async submit() {
const validation = maskotForm.safeParse(this.form);
if (!validation.success) {
const errors = validation.error.issues
.map((issue) => `${issue.path.join(".")}: ${issue.message}`)
.join(", ");
toast.error(`Form tidak valid: ${errors}`);
return false;
}
this.loading = true;
this.error = null;
try {
const response = await fetch(`/api/desa/profile/maskot/${this.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.form),
});
const result = await response.json();
if (response.ok && result.success) {
toast.success("Berhasil update profile");
await maskotDesa.findUnique.load(this.id);
return true;
} else {
throw new Error(result.message || "Gagal update profile");
}
} catch (error) {
const msg = (error as Error).message;
this.error = msg;
toast.error("Terjadi kesalahan saat update profile");
return false;
} finally {
this.loading = false;
}
},
reset() {
this.id = "";
this.form = { ...maskotDefaultForm };
this.error = null;
this.loading = false;
this.isReadOnly = false;
},
},
async loadForEdit(id: string) {
const data = await this.findUnique.load(id);
if (data) {
this.update.initialize(data);
}
return data;
},
reset() {
this.findUnique.reset();
this.update.reset();
},
});
export default maskotDesa;

View File

@@ -0,0 +1,185 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
import { Prisma } from "@prisma/client";
const profilPerbekelForm = z.object({
biodata: z.string().min(3, "Biodata minimal 3 karakter"),
pengalaman: z.string().min(3, "Pengalaman minimal 3 karakter"),
pengalamanOrganisasi: z
.string()
.min(3, "Pengalaman Organisasi minimal 3 karakter"),
programUnggulan: z.string().min(3, "Program Unggulan minimal 3 karakter"),
imageId: z.string().min(1, "Gambar wajib dipilih"),
});
const profilPerbekelDefaultForm = {
biodata: "",
pengalaman: "",
pengalamanOrganisasi: "",
programUnggulan: "",
imageId: "",
};
type ProfilPerbekelForm = Prisma.ProfilPerbekelGetPayload<{
select: {
id: true;
biodata: true;
pengalaman: true;
pengalamanOrganisasi: true;
programUnggulan: true;
imageId: true;
image?: {
select: {
link: true;
};
};
};
}>;
const profilPerbekel = proxy({
findUnique: {
data: null as ProfilPerbekelForm | null,
loading: false,
error: null as string | null,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
this.loading = true;
this.error = null;
try {
const response = await fetch(`/api/desa/profile/profileperbekel/${id}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result.success) {
this.data = result.data;
return result.data;
} else {
throw new Error(
result.message || "Gagal mengambil data profil perbekel"
);
}
} catch (error) {
const msg = (error as Error).message;
this.error = msg;
toast.error("Terjadi kesalahan saat mengambil data profil perbekel");
return null;
} finally {
this.loading = false;
}
},
reset() {
this.data = null;
this.error = null;
this.loading = false;
},
},
edit: {
id: "",
form: { ...profilPerbekelDefaultForm },
loading: false,
error: null as string | null,
isReadOnly: false,
initialize(profilData: ProfilPerbekelForm) {
this.id = profilData.id;
this.isReadOnly = false;
this.form = {
biodata: profilData.biodata || "",
pengalaman: profilData.pengalaman || "",
pengalamanOrganisasi: profilData.pengalamanOrganisasi || "",
programUnggulan: profilData.programUnggulan || "",
imageId: profilData.imageId || "",
};
},
updateField(field: keyof typeof profilPerbekelDefaultForm, value: string) {
this.form[field] = value;
},
async submit() {
const validation = profilPerbekelForm.safeParse(this.form);
if (!validation.success) {
const errors = validation.error.issues
.map((issue) => `${issue.path.join(".")}: ${issue.message}`)
.join(", ");
toast.error(`Form tidak valid: ${errors}`);
return false;
}
this.loading = true;
this.error = null;
try {
const response = await fetch(
`/api/desa/profile/profileperbekel/${this.id}`,
{
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.form),
}
);
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
errorData.message || `HTTP error! status: ${response.status}`
);
}
const result = await response.json();
if (result.success) {
toast.success("Berhasil update profil perbekel");
await profilPerbekel.findUnique.load(this.id);
return true;
} else {
throw new Error(result.message || "Gagal update profil perbekel");
}
} catch (error) {
const msg = (error as Error).message;
this.error = msg;
toast.error("Terjadi kesalahan saat update profil perbekel");
return false;
} finally {
this.loading = false;
}
},
reset() {
this.id = "";
this.form = { ...profilPerbekelDefaultForm };
this.error = null;
this.loading = false;
this.isReadOnly = false;
},
},
async loadForEdit(id: string) {
const profileData = await this.findUnique.load(id);
if (profileData) {
this.edit.initialize(profileData);
}
return profileData;
},
reset() {
this.findUnique.reset();
this.edit.reset();
},
});
export default profilPerbekel;

View File

@@ -0,0 +1,153 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
import { Prisma } from "@prisma/client";
const sejarahDesaForm = z.object({
judul: z.string().min(3, "Judul minimal 3 karakter"),
deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
});
const sejarahDesaDefaultForm = {
judul: "",
deskripsi: "",
};
type SejarahDesaForm = Prisma.SejarahDesaGetPayload<{
select: {
id: true;
judul: true;
deskripsi: true;
};
}>;
const sejarahDesa = proxy({
findUnique: {
data: null as SejarahDesaForm | null,
loading: false,
error: null as string | null,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
this.loading = true;
this.error = null;
try {
const response = await fetch(`/api/desa/profile/sejarah/${id}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result.success) {
this.data = result.data;
return result.data;
} else {
throw new Error(
result.message || "Gagal mengambil data sejarah desa"
);
}
} catch (error) {
const msg = (error as Error).message;
this.error = msg;
console.error("Load sejarah desa error:", msg);
toast.error("Terjadi kesalahan saat mengambil data sejarah desa");
return null;
} finally {
this.loading = false;
}
},
reset() {
this.data = null;
this.error = null;
this.loading = false;
},
},
update: {
id: "",
form: { ...sejarahDesaDefaultForm },
loading: false,
error: null as string | null,
isReadOnly: false,
initialize(sejarahData: SejarahDesaForm) {
this.id = sejarahData.id;
this.isReadOnly = false;
this.form = {
judul: sejarahData.judul || "",
deskripsi: sejarahData.deskripsi || "",
};
},
updateField(field: keyof typeof sejarahDesaDefaultForm, value: string) {
this.form[field] = value;
},
async submit() {
const validation = sejarahDesaForm.safeParse(this.form);
if (!validation.success) {
const errors = validation.error.issues
.map((issue) => `${issue.path.join(".")}: ${issue.message}`)
.join(", ");
toast.error(`Form tidak valid: ${errors}`);
return false;
}
this.loading = true;
this.error = null;
try {
const response = await fetch(`/api/desa/profile/sejarah/${this.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(this.form),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
errorData.message || `HTTP error! status: ${response.status}`
);
}
const result = await response.json();
if (result.success) {
toast.success("Berhasil update profile");
await sejarahDesa.findUnique.load(this.id);
return true;
} else {
throw new Error(result.message || "Gagal update profile");
}
} catch (error) {
const errorMessage = (error as Error).message;
this.error = errorMessage;
console.error("Update profile error:", errorMessage);
toast.error("Terjadi kesalahan saat update profile");
return false;
} finally {
this.loading = false;
}
},
reset() {
this.id = "";
this.form = { ...sejarahDesaDefaultForm };
this.error = null;
this.loading = false;
this.isReadOnly = false;
},
},
});
export default sejarahDesa;

View File

@@ -0,0 +1,153 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
import { Prisma } from "@prisma/client";
const visiMisiDesaForm = z.object({
visi: z.string().min(3, "Visi minimal 3 karakter"),
misi: z.string().min(3, "Misi minimal 3 karakter"),
});
const visiMisiDesaDefaultForm = {
visi: "",
misi: "",
};
type VisiMisiDesaForm = Prisma.VisiMisiDesaGetPayload<{
select: {
id: true;
visi: true;
misi: true;
};
}>;
const visiMisiDesa = proxy({
findUnique: {
data: null as VisiMisiDesaForm | null,
loading: false,
error: null as string | null,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
this.loading = true;
this.error = null;
try {
const response = await fetch(`/api/desa/profile/visi-misi/${id}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result.success) {
this.data = result.data;
return result.data;
} else {
throw new Error(
result.message || "Gagal mengambil data visi misi desa"
);
}
} catch (error) {
const msg = (error as Error).message;
this.error = msg;
console.error("Load visi misi desa error:", msg);
toast.error("Terjadi kesalahan saat mengambil data visi misi desa");
return null;
} finally {
this.loading = false;
}
},
reset() {
this.data = null;
this.error = null;
this.loading = false;
},
},
update: {
id: "",
form: { ...visiMisiDesaDefaultForm },
loading: false,
error: null as string | null,
isReadOnly: false,
initialize(visiMisiData: VisiMisiDesaForm) {
this.id = visiMisiData.id;
this.isReadOnly = false;
this.form = {
visi: visiMisiData.visi || "",
misi: visiMisiData.misi || "",
};
},
updateField(field: keyof typeof visiMisiDesaDefaultForm, value: string) {
this.form[field] = value;
},
async submit() {
const validation = visiMisiDesaForm.safeParse(this.form);
if (!validation.success) {
const errors = validation.error.issues
.map((issue) => `${issue.path.join(".")}: ${issue.message}`)
.join(", ");
toast.error(`Form tidak valid: ${errors}`);
return false;
}
this.loading = true;
this.error = null;
try {
const response = await fetch(`/api/desa/profile/visi-misi/${this.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(this.form),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
errorData.message || `HTTP error! status: ${response.status}`
);
}
const result = await response.json();
if (result.success) {
toast.success("Berhasil update visi misi desa");
await visiMisiDesa.findUnique.load(this.id);
return true;
} else {
throw new Error(result.message || "Gagal update visi misi desa");
}
} catch (error) {
const errorMessage = (error as Error).message;
this.error = errorMessage;
console.error("Update visi misi desa error:", errorMessage);
toast.error("Terjadi kesalahan saat update visi misi desa");
return false;
} finally {
this.loading = false;
}
},
reset() {
this.id = "";
this.form = { ...visiMisiDesaDefaultForm };
this.error = null;
this.loading = false;
this.isReadOnly = false;
},
},
});
export default visiMisiDesa;

View File

@@ -1,563 +0,0 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import ApiFetch from "@/lib/api-fetch";
import { Prisma } from "@prisma/client";
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
const templatePasarDesaForm = z.object({
nama: z.string().min(1, "Nama minimal 1 karakter"),
harga: z.number().min(1, "Harga minimal 1"),
alamatUsaha: z.string().min(1, "Alamat minimal 1 karakter"),
imageId: z.string().min(1, "Gambar wajib dipilih"),
rating: z.number().min(1, "Rating minimal 1"),
kategoriId: z.array(z.string()).min(1, "Minimal pilih satu kategori"),
kontak: z.string().min(1, "Kontak wajib diisi"),
deskripsi: z.string().min(1, "Deskripsi wajib diisi"),
});
const defaultPasarDesaForm = {
nama: "",
harga: 0,
alamatUsaha: "",
imageId: "",
rating: 0,
kategoriId: [] as string[],
kontak: "",
deskripsi: ""
};
const pasarDesa = proxy({
create: {
form: { ...defaultPasarDesaForm },
loading: false,
async create() {
const cek = templatePasarDesaForm.safeParse(pasarDesa.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
pasarDesa.create.loading = true;
const res = await ApiFetch.api.ekonomi.pasardesa["create"].post(
pasarDesa.create.form
);
if (res.status === 200) {
pasarDesa.findMany.load();
return toast.success("Data berhasil ditambahkan");
}
return toast.error("Gagal menambahkan data");
} catch (error) {
console.log(error);
toast.error("Gagal menambahkan data");
} finally {
pasarDesa.create.loading = false;
}
},
},
findMany: {
data: null as
| Prisma.PasarDesaGetPayload<{
include: {
image: true;
KategoriToPasar: {
include: {
kategori: true;
};
};
};
}>[]
| null,
page: 1,
totalPages: 1,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "", categoryId?: string) => {
pasarDesa.findMany.loading = true;
pasarDesa.findMany.page = page;
pasarDesa.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
if (categoryId) query.categoryId = categoryId;
const res = await ApiFetch.api.ekonomi.pasardesa["find-many"].get({ query });
if (res.status === 200 && res.data?.success) {
pasarDesa.findMany.data = res.data.data ?? [];
pasarDesa.findMany.totalPages = res.data.totalPages ?? 1;
} else {
pasarDesa.findMany.data = [];
pasarDesa.findMany.totalPages = 1;
}
} catch (err) {
console.error("Gagal fetch keamanan lingkungan paginated:", err);
pasarDesa.findMany.data = [];
pasarDesa.findMany.totalPages = 1;
} finally {
pasarDesa.findMany.loading = false;
}
},
},
findUnique: {
data: null as Prisma.PasarDesaGetPayload<{
include: {
image: true;
KategoriToPasar: {
include: {
kategori: true;
};
};
};
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/ekonomi/pasardesa/${id}`);
if (res.ok) {
const data = await res.json();
pasarDesa.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
pasarDesa.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
pasarDesa.findUnique.data = null;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
pasarDesa.delete.loading = true;
const response = await fetch(`/api/ekonomi/pasardesa/del/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
const result = await response.json();
if (response.ok && result?.success) {
toast.success(result.message || "Pasar desa berhasil dihapus");
await pasarDesa.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus pasar desa");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus pasar desa");
} finally {
pasarDesa.delete.loading = false;
}
},
},
edit: {
id: "",
form: { ...defaultPasarDesaForm },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
const response = await fetch(`/api/ekonomi/pasardesa/${id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result?.success) {
const data = result.data;
this.id = data.id;
this.form = {
nama: data.nama,
harga: data.harga,
alamatUsaha: data.alamatUsaha,
imageId: data.imageId,
rating: data.rating,
kategoriId: data.kategoriId,
kontak: data.kontak,
deskripsi: data.deskripsi
};
return data;
} else {
throw new Error(result?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading pasar desa:", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
}
},
async update() {
const cek = templatePasarDesaForm.safeParse(pasarDesa.edit.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
pasarDesa.edit.loading = true;
const response = await fetch(`/api/ekonomi/pasardesa/${this.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nama: this.form.nama,
harga: this.form.harga,
alamatUsaha: this.form.alamatUsaha,
imageId: this.form.imageId,
rating: this.form.rating,
kategoriId: this.form.kategoriId,
kontak: this.form.kontak,
deskripsi: this.form.deskripsi
}),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
errorData.message || `HTTP error! status: ${response.status}`
);
}
const result = await response.json();
if (result.success) {
toast.success("Berhasil update pasar desa");
await pasarDesa.findMany.load(); // refresh list
return true;
} else {
throw new Error(result.message || "Gagal mengupdate pasar desa");
}
} catch (error) {
console.error("Error updating pasar desa:", error);
toast.error(
error instanceof Error ? error.message : "Gagal mengupdate pasar desa"
);
return false;
} finally {
pasarDesa.edit.loading = false;
}
},
reset() {
pasarDesa.edit.id = "";
pasarDesa.edit.form = { ...defaultPasarDesaForm };
},
},
});
// ========================================= KATEGORI PRODUK ========================================= //
const kategoriProdukForm = z.object({
nama: z.string().min(1, "Nama minimal 1 karakter"),
});
const kategoriProdukDefaultForm = {
nama: "",
};
const kategoriProduk = proxy({
create: {
form: { ...kategoriProdukDefaultForm },
loading: false,
async create() {
const cek = kategoriProdukForm.safeParse(kategoriProduk.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
kategoriProduk.create.loading = true;
const res = await ApiFetch.api.ekonomi.kategoriproduk["create"].post(
kategoriProduk.create.form
);
if (res.status === 200) {
kategoriProduk.findMany.load();
return toast.success("Data berhasil ditambahkan");
}
return toast.error("Gagal menambahkan data");
} catch (error) {
console.log(error);
toast.error("Gagal menambahkan data");
} finally {
kategoriProduk.create.loading = false;
}
},
},
findMany: {
data: null as
| Prisma.KategoriProdukGetPayload<{
omit: {
isActive: true;
};
}>[]
| null,
page: 1,
totalPages: 1,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
kategoriProduk.findMany.loading = true; // ✅ Akses langsung via nama path
kategoriProduk.findMany.page = page;
kategoriProduk.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.ekonomi.kategoriproduk["find-many"].get({ query });
if (res.status === 200 && res.data?.success) {
kategoriProduk.findMany.data = res.data.data ?? [];
kategoriProduk.findMany.totalPages = res.data.totalPages ?? 1;
} else {
kategoriProduk.findMany.data = [];
kategoriProduk.findMany.totalPages = 1;
}
} catch (err) {
console.error("Gagal fetch kategori produk paginated:", err);
kategoriProduk.findMany.data = [];
kategoriProduk.findMany.totalPages = 1;
} finally {
kategoriProduk.findMany.loading = false;
}
},
},
// ✅ Versi findManyAll (ambil semua tanpa pagination)
findManyAll: {
data: null as
| Prisma.KategoriProdukGetPayload<{
omit: { isActive: true };
}>[]
| null,
loading: false,
search: "",
load: async (search = "") => {
kategoriProduk.findManyAll.loading = true;
kategoriProduk.findManyAll.search = search;
try {
const query: any = {};
if (search) query.search = search;
const res = await ApiFetch.api.ekonomi.kategoriproduk["find-many-all"].get({
query,
});
if (res.status === 200 && res.data?.success) {
kategoriProduk.findManyAll.data = res.data.data ?? [];
} else {
kategoriProduk.findManyAll.data = [];
}
} catch (err) {
console.error("Gagal fetch kategori produk (all):", err);
kategoriProduk.findManyAll.data = [];
} finally {
kategoriProduk.findManyAll.loading = false;
}
},
},
findUnique: {
data: null as Prisma.KategoriProdukGetPayload<{
omit: { isActive: true };
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/ekonomi/kategoriproduk/${id}`);
if (res.ok) {
const data = await res.json();
kategoriProduk.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
kategoriProduk.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
kategoriProduk.findUnique.data = null;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
kategoriProduk.delete.loading = true;
const response = await fetch(`/api/ekonomi/kategoriproduk/del/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
const result = await response.json();
if (response.ok && result?.success) {
toast.success(result.message || "Kategori produk berhasil dihapus");
await kategoriProduk.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus kategori produk");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus kategori produk");
} finally {
kategoriProduk.delete.loading = false;
}
},
},
edit: {
id: "",
form: { ...kategoriProdukDefaultForm },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
const response = await fetch(`/api/ekonomi/kategoriproduk/${id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result?.success) {
const data = result.data;
this.id = data.id;
this.form = {
nama: data.nama,
};
return data;
} else {
throw new Error(result?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading kategori produk:", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
}
},
async update() {
const cek = kategoriProdukForm.safeParse(kategoriProduk.edit.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
toast.error(err);
return false;
}
try {
kategoriProduk.edit.loading = true;
const response = await fetch(
`/api/ekonomi/kategoriproduk/${kategoriProduk.edit.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nama: kategoriProduk.edit.form.nama,
}),
}
);
// Clone the response to avoid 'body already read' error
const responseClone = response.clone();
try {
const result = await response.json();
if (!response.ok) {
console.error(
"Update failed with status:",
response.status,
"Response:",
result
);
throw new Error(
result?.message ||
`Gagal mengupdate kategori produk (${response.status})`
);
}
if (result.success) {
toast.success(
result.message || "Berhasil memperbarui kategori produk"
);
await kategoriProduk.findMany.load(); // refresh list
return true;
} else {
throw new Error(
result.message || "Gagal mengupdate kategori produk"
);
}
} catch (error) {
// If JSON parsing fails, try to get the response text for better error messages
try {
const text = await responseClone.text();
console.error("Error response text:", text);
throw new Error(`Gagal memproses respons dari server: ${text}`);
} catch (textError) {
console.error("Error parsing response as text:", textError);
console.error("Original error:", error);
throw new Error("Gagal memproses respons dari server");
}
}
} catch (error) {
console.error("Error updating kategori produk:", error);
toast.error(
error instanceof Error
? error.message
: "Gagal mengupdate kategori produk"
);
return false;
} finally {
kategoriProduk.edit.loading = false;
}
},
reset() {
kategoriProduk.edit.id = "";
kategoriProduk.edit.form = { ...kategoriProdukDefaultForm };
},
},
});
const pasarDesaState = proxy({
pasarDesa,
kategoriProduk,
});
export default pasarDesaState;

View File

@@ -8,10 +8,10 @@ const umkmFormSchema = z.object({
nama: z.string().min(1, "Nama minimal 1 karakter"),
pemilik: z.string().min(1, "Nama pemilik wajib diisi"),
kategoriId: z.string().min(1, "Kategori wajib dipilih"),
deskripsi: z.string().optional(),
alamat: z.string().optional(),
kontak: z.string().optional(),
imageId: z.string().optional(),
deskripsi: z.string().optional().nullable(),
alamat: z.string().optional().nullable(),
kontak: z.string().optional().nullable(),
imageId: z.string().optional().nullable(),
});
const defaultUmkmForm = {
@@ -21,7 +21,7 @@ const defaultUmkmForm = {
deskripsi: "",
alamat: "",
kontak: "",
imageId: "",
imageId: null as string | null,
isActive: true,
};
@@ -31,8 +31,8 @@ const produkFormSchema = z.object({
harga: z.number().min(0, "Harga tidak boleh negatif"),
stok: z.number().min(0, "Stok tidak boleh negatif"),
umkmId: z.string().min(1, "UMKM wajib dipilih"),
deskripsi: z.string().optional(),
imageId: z.string().optional(),
deskripsi: z.string().optional().nullable(),
imageId: z.string().optional().nullable(),
kategoriId: z.string().min(1, "Kategori wajib dipilih"), // PasarDesa needs category
});
@@ -42,7 +42,7 @@ const defaultProdukForm = {
stok: 0,
umkmId: "",
deskripsi: "",
imageId: "",
imageId: null as string | null,
kategoriId: "",
isActive: true,
};
@@ -63,6 +63,15 @@ const defaultPenjualanForm = {
isActive: true,
};
// Kategori Produk Form Validation
const kategoriProdukFormSchema = z.object({
nama: z.string().min(1, "Nama kategori wajib diisi"),
});
const defaultKategoriProdukForm = {
nama: "",
};
export const umkmState = proxy({
// UMKM Module
umkm: {
@@ -101,7 +110,7 @@ export const umkmState = proxy({
loading: false,
async submit() {
const cek = umkmFormSchema.safeParse(this.form);
if (!cek.success) return toast.error("Cek kembali form anda");
if (!cek.success) { toast.error("Cek kembali form anda"); return false; }
this.loading = true;
try {
const res = await fetch("/api/ekonomi/umkm/create", {
@@ -124,6 +133,57 @@ export const umkmState = proxy({
return false;
}
},
update: {
form: { ...defaultUmkmForm },
loading: false,
async submit(id: string) {
const cek = umkmFormSchema.safeParse(this.form);
if (!cek.success) { toast.error("Cek kembali form anda"); return false; }
this.loading = true;
try {
const res = await fetch(`/api/ekonomi/umkm/${id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.form)
});
const result = await res.json();
if (result.success) {
toast.success("UMKM berhasil diperbarui");
umkmState.umkm.findMany.load();
return true;
}
toast.error(result.message);
} catch (e) {
toast.error("Gagal memperbarui UMKM");
} finally {
this.loading = false;
}
return false;
}
},
del: {
loading: false,
async submit(id: string) {
this.loading = true;
try {
const res = await fetch(`/api/ekonomi/umkm/del/${id}`, {
method: "DELETE"
});
const result = await res.json();
if (result.success) {
toast.success("UMKM berhasil dihapus");
umkmState.umkm.findMany.load();
return true;
}
toast.error(result.message);
} catch (e) {
toast.error("Gagal menghapus UMKM");
} finally {
this.loading = false;
}
return false;
}
},
findUnique: {
data: null as any,
loading: false,
@@ -167,12 +227,26 @@ export const umkmState = proxy({
} catch (e) { console.error(e); } finally { this.loading = false; }
}
},
findUnique: {
data: null as any,
loading: false,
async load(id: string) {
this.loading = true;
try {
const res = await fetch(`/api/ekonomi/umkm/produk/${id}`);
const result = await res.json();
if (result.success) {
this.data = result.data;
}
} catch (e) { console.error(e); } finally { this.loading = false; }
}
},
create: {
form: { ...defaultProdukForm },
loading: false,
async submit() {
const cek = produkFormSchema.safeParse(this.form);
if (!cek.success) return toast.error("Cek kembali form anda");
if (!cek.success) { toast.error("Cek kembali form anda"); return false; }
this.loading = true;
try {
const res = await fetch("/api/ekonomi/umkm/produk/create", {
@@ -189,6 +263,47 @@ export const umkmState = proxy({
} catch (e) { toast.error("Gagal membuat produk"); } finally { this.loading = false; }
return false;
}
},
update: {
form: { ...defaultProdukForm },
loading: false,
async submit(id: string) {
const cek = produkFormSchema.safeParse(this.form);
if (!cek.success) { toast.error("Cek kembali form anda"); return false; }
this.loading = true;
try {
const res = await fetch(`/api/ekonomi/umkm/produk/${id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.form)
});
const result = await res.json();
if (result.success) {
toast.success("Produk berhasil diperbarui");
umkmState.produk.findMany.load();
return true;
}
} catch (e) { toast.error("Gagal memperbarui produk"); } finally { this.loading = false; }
return false;
}
},
del: {
loading: false,
async submit(id: string) {
this.loading = true;
try {
const res = await fetch(`/api/ekonomi/umkm/produk/del/${id}`, {
method: "DELETE"
});
const result = await res.json();
if (result.success) {
toast.success("Produk berhasil dihapus");
umkmState.produk.findMany.load();
return true;
}
} catch (e) { toast.error("Gagal menghapus produk"); } finally { this.loading = false; }
return false;
}
}
},
@@ -217,7 +332,7 @@ export const umkmState = proxy({
loading: false,
async submit() {
const cek = penjualanFormSchema.safeParse(this.form);
if (!cek.success) return toast.error("Cek kembali form anda");
if (!cek.success) { toast.error("Cek kembali form anda"); return false; }
this.loading = true;
try {
const res = await fetch("/api/ekonomi/umkm/penjualan/create", {
@@ -234,11 +349,59 @@ export const umkmState = proxy({
} catch (e) { toast.error("Gagal mencatat penjualan"); } finally { this.loading = false; }
return false;
}
},
del: {
loading: false,
async submit(id: string) {
this.loading = true;
try {
const res = await fetch(`/api/ekonomi/umkm/penjualan/del/${id}`, {
method: "DELETE"
});
const result = await res.json();
if (result.success) {
toast.success("Histori penjualan berhasil dihapus");
umkmState.penjualan.findMany.load();
return true;
}
toast.error(result.message);
} catch (e) {
toast.error("Gagal menghapus histori penjualan");
} finally {
this.loading = false;
}
return false;
}
}
},
// Kategori Produk (Share with Pasar Desa)
kategoriProduk: {
findMany: {
data: [] as any[],
page: 1,
totalPages: 1,
loading: false,
search: "",
async load(page = 1, limit = 10, search = "") {
this.loading = true;
this.page = page;
this.search = search;
try {
const params = new URLSearchParams({
page: page.toString(),
limit: limit.toString(),
search
});
const res = await fetch(`/api/ekonomi/kategoriproduk/find-many?${params}`);
const result = await res.json();
if (result.success) {
this.data = result.data;
this.totalPages = result.totalPages;
}
} catch (e) { console.error(e); } finally { this.loading = false; }
}
},
findManyAll: {
data: [] as any[],
loading: false,
@@ -252,6 +415,75 @@ export const umkmState = proxy({
}
} catch (e) { console.error(e); } finally { this.loading = false; }
}
},
create: {
form: { ...defaultKategoriProdukForm },
loading: false,
async submit() {
const cek = kategoriProdukFormSchema.safeParse(this.form);
if (!cek.success) { toast.error("Nama kategori wajib diisi"); return false; }
this.loading = true;
try {
const res = await fetch("/api/ekonomi/kategoriproduk/create", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.form)
});
const result = await res.json();
if (result.success) {
toast.success("Kategori berhasil dibuat");
umkmState.kategoriProduk.findMany.load();
umkmState.kategoriProduk.findManyAll.load();
return true;
}
toast.error(result.message || "Gagal membuat kategori");
} catch (e) { toast.error("Gagal membuat kategori"); } finally { this.loading = false; }
return false;
}
},
update: {
form: { ...defaultKategoriProdukForm },
loading: false,
async submit(id: string) {
const cek = kategoriProdukFormSchema.safeParse(this.form);
if (!cek.success) { toast.error("Nama kategori wajib diisi"); return false; }
this.loading = true;
try {
const res = await fetch(`/api/ekonomi/kategoriproduk/${id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.form)
});
const result = await res.json();
if (result.success) {
toast.success("Kategori berhasil diperbarui");
umkmState.kategoriProduk.findMany.load();
umkmState.kategoriProduk.findManyAll.load();
return true;
}
toast.error(result.message || "Gagal memperbarui kategori");
} catch (e) { toast.error("Gagal memperbarui kategori"); } finally { this.loading = false; }
return false;
}
},
del: {
loading: false,
async submit(id: string) {
this.loading = true;
try {
const res = await fetch(`/api/ekonomi/kategoriproduk/del/${id}`, {
method: "DELETE"
});
const result = await res.json();
if (result.success) {
toast.success("Kategori berhasil dihapus");
umkmState.kategoriProduk.findMany.load();
umkmState.kategoriProduk.findManyAll.load();
return true;
}
} catch (e) { toast.error("Gagal menghapus kategori"); } finally { this.loading = false; }
return false;
}
}
},
@@ -261,23 +493,31 @@ export const umkmState = proxy({
summary: { data: null as any, loading: false },
topProduk: { data: [] as any[], loading: false },
detail: { data: [] as any[], loading: false },
async loadAll(periode = "") {
mode: "month" as "week" | "month",
async loadAll(periode = "", mode?: "week" | "month", kategoriId = "", umkmId = "") {
const p = periode || `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}`;
const m = mode ?? this.mode;
const modeParam = m === "week" ? "&mode=week" : "";
const detailFilter = [
kategoriId ? `&kategoriId=${kategoriId}` : "",
umkmId ? `&umkmId=${umkmId}` : "",
].join("");
this.kpi.loading = true;
this.summary.loading = true;
this.topProduk.loading = true;
this.detail.loading = true;
try {
const [kpi, sum, top, det] = await Promise.all([
fetch(`/api/ekonomi/umkm/dashboard/kpi?periode=${p}`).then(r => r.json()),
fetch(`/api/ekonomi/umkm/dashboard/ringkasan-penjualan?periode=${p}`).then(r => r.json()),
fetch(`/api/ekonomi/umkm/dashboard/top-produk?periode=${p}`).then(r => r.json()),
fetch(`/api/ekonomi/umkm/dashboard/detail-penjualan?periode=${p}`).then(r => r.json())
fetch(`/api/ekonomi/umkm/dashboard/kpi?periode=${p}${modeParam}`).then(r => r.json()),
fetch(`/api/ekonomi/umkm/dashboard/ringkasan-penjualan?periode=${p}${modeParam}`).then(r => r.json()),
fetch(`/api/ekonomi/umkm/dashboard/top-produk?periode=${p}${modeParam}`).then(r => r.json()),
fetch(`/api/ekonomi/umkm/dashboard/detail-penjualan?periode=${p}${modeParam}${detailFilter}`).then(r => r.json()),
]);
if (kpi.success) this.kpi.data = kpi.data;
if (sum.success) this.summary.data = sum.data;
if (top.success) this.topProduk.data = top.data;
if (det.success) this.detail.data = det.data;
this.mode = m;
} catch (e) { console.error(e); } finally {
this.kpi.loading = false;
this.summary.loading = false;

View File

@@ -155,11 +155,11 @@ const kegiatanDesa = proxy({
toast.success(result.message || "kegiatan desa berhasil dihapus");
await kegiatanDesa.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus pasar desa");
toast.error(result?.message || "Gagal menghapus gotong royong");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus pasar desa");
toast.error("Terjadi kesalahan saat menghapus gotong royong");
} finally {
kegiatanDesa.delete.loading = false;
}

View File

@@ -0,0 +1,106 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import { IconCalendarEvent, IconCategory } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
function LayoutTabsKegiatanDesa({ children }: { children: React.ReactNode }) {
const router = useRouter();
const pathname = usePathname();
const tabs = [
{
label: "List Kegiatan",
value: "list_kegiatan",
href: "/admin/desa/kegiatan-desa/list-kegiatan-desa",
icon: <IconCalendarEvent size={18} stroke={1.8} />
},
{
label: "Kategori Kegiatan",
value: "kategori_kegiatan",
href: "/admin/desa/kegiatan-desa/kategori-kegiatan-desa",
icon: <IconCategory size={18} stroke={1.8} />
},
];
const currentTab = tabs.find(tab => tab.href === pathname);
const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
const handleTabChange = (value: string | null) => {
const tab = tabs.find(t => t.value === value);
if (tab) {
router.push(tab.href);
}
setActiveTab(value);
};
useEffect(() => {
const match = tabs.find(tab => tab.href === pathname);
if (match) {
setActiveTab(match.value);
}
}, [pathname]);
return (
<Stack gap="lg">
<Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Kegiatan Desa</Title>
<Tabs
color={colors["blue-button"]}
variant="pills"
value={activeTab}
onChange={handleTabChange}
radius="lg"
keepMounted={false}
>
<ScrollArea type="auto" offsetScrollbars>
<TabsList
p="sm"
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
paddingInline: "0.5rem",
}}
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>
{tabs.map((tab, i) => (
<TabsPanel
key={i}
value={tab.value}
style={{
padding: "1.5rem",
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
borderRadius: "1rem",
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
}}
>
<>{children}</>
</TabsPanel>
))}
</Tabs>
</Stack>
);
}
export default LayoutTabsKegiatanDesa;

View File

@@ -0,0 +1,137 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import stateDashboardKegiatan from '@/app/admin/(dashboard)/_state/desa/kegiatanDesa';
import colors from '@/con/colors';
import {
Box,
Button,
Group,
Loader,
Paper,
Stack,
TextInput,
Title,
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function EditKategoriKegiatan() {
const editState = useProxy(stateDashboardKegiatan.kategoriKegiatan);
const router = useRouter();
const params = useParams();
const [isSubmitting, setIsSubmitting] = useState(false);
const [formData, setFormData] = useState({ nama: '' });
const [originalData, setOriginalData] = useState({ nama: '' });
const isFormValid = () => formData.nama?.trim() !== '';
useEffect(() => {
const loadKategori = async () => {
const id = params?.id as string;
if (!id) return;
try {
await stateDashboardKegiatan.kategoriKegiatan.update.load(id);
const nama = stateDashboardKegiatan.kategoriKegiatan.update.form.nama || '';
setFormData({ nama });
setOriginalData({ nama });
} catch (error) {
console.error('Error loading kategori kegiatan:', error);
toast.error('Gagal memuat data kategori kegiatan');
}
};
loadKategori();
}, [params?.id]);
const handleResetForm = () => {
setFormData({ nama: originalData.nama });
toast.info('Form dikembalikan ke data awal');
};
const handleSubmit = async () => {
if (!formData.nama?.trim()) {
toast.error('Nama kategori kegiatan wajib diisi');
return;
}
try {
setIsSubmitting(true);
editState.update.form = {
...editState.update.form,
nama: formData.nama,
};
const success = await editState.update.update();
if (success) {
router.push('/admin/desa/kegiatan-desa/kategori-kegiatan-desa');
}
} catch (error) {
console.error('Error updating kategori kegiatan:', error);
toast.error('Terjadi kesalahan saat memperbarui kategori kegiatan');
} finally {
setIsSubmitting(false);
}
};
return (
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Kategori Kegiatan
</Title>
</Group>
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
label="Nama Kategori Kegiatan"
placeholder="Masukkan nama kategori kegiatan"
value={formData.nama}
onChange={(e) => setFormData((prev) => ({ ...prev, nama: e.target.value }))}
required
/>
<Group justify="right">
<Button variant="outline" color="gray" radius="md" size="md" onClick={handleResetForm}>
Batal
</Button>
<Button
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background:
!isFormValid() || isSubmitting
? 'linear-gradient(135deg, #cccccc, #eeeeee)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default EditKategoriKegiatan;

View File

@@ -0,0 +1,107 @@
'use client'
import stateDashboardKegiatan from '@/app/admin/(dashboard)/_state/desa/kegiatanDesa';
import colors from '@/con/colors';
import {
Box,
Button,
Group,
Loader,
Paper,
Stack,
TextInput,
Title,
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function CreateKategoriKegiatan() {
const createState = useProxy(stateDashboardKegiatan.kategoriKegiatan);
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
const isFormValid = () => createState.create.form.nama?.trim() !== '';
const resetForm = () => {
createState.create.resetForm();
};
const handleSubmit = async () => {
if (!createState.create.form.nama?.trim()) {
toast.error('Nama kategori kegiatan wajib diisi');
return;
}
setIsSubmitting(true);
try {
const success = await createState.create.create();
if (success) {
resetForm();
router.push('/admin/desa/kegiatan-desa/kategori-kegiatan-desa');
}
} catch (error) {
console.error('Error creating kategori kegiatan:', error);
toast.error('Gagal menambahkan kategori kegiatan');
} finally {
setIsSubmitting(false);
}
};
return (
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Kategori Kegiatan
</Title>
</Group>
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
label="Nama Kategori Kegiatan"
placeholder="Masukkan nama kategori kegiatan"
value={createState.create.form.nama || ''}
onChange={(e) => (createState.create.form.nama = e.target.value)}
required
/>
<Group justify="right">
<Button variant="outline" color="gray" radius="md" size="md" onClick={resetForm}>
Reset
</Button>
<Button
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background:
!isFormValid() || isSubmitting
? 'linear-gradient(135deg, #cccccc, #eeeeee)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateKategoriKegiatan;

View File

@@ -0,0 +1,239 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import {
Box,
Button,
Center,
Group,
Pagination,
Paper,
Skeleton,
Stack,
Table,
TableTbody,
TableTd,
TableTh,
TableThead,
TableTr,
Text,
Title
} from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks';
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import stateDashboardKegiatan from '../../../_state/desa/kegiatanDesa';
function KategoriKegiatanDesa() {
const [search, setSearch] = useState('');
return (
<Box>
<HeaderSearch
title="Kategori Kegiatan"
placeholder="Cari nama kategori kegiatan..."
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListKategoriKegiatan search={search} />
</Box>
);
}
function ListKategoriKegiatan({ search }: { search: string }) {
const listDataState = useProxy(stateDashboardKegiatan.kategoriKegiatan);
const router = useRouter();
const [modalHapus, setModalHapus] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null);
const [debouncedSearch] = useDebouncedValue(search, 1000);
const { data, loading, load, page, totalPages } = listDataState.findMany;
useEffect(() => {
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
const handleDelete = () => {
if (selectedId) {
listDataState.delete.byId(selectedId);
setModalHapus(false);
setSelectedId(null);
}
};
const filteredData = data || [];
if (loading || !data) {
return (
<Stack py={10}>
<Skeleton height={600} radius="md" />
</Stack>
);
}
return (
<Box py={{ base: 'sm', md: 'lg' }}>
<Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
<Group justify="space-between" mb={{ base: 'md', md: 'lg' }}>
<Title order={4} lh={1.2}>
Daftar Kategori Kegiatan
</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() =>
router.push('/admin/desa/kegiatan-desa/kategori-kegiatan-desa/create')
}
>
Tambah Baru
</Button>
</Group>
{/* Desktop Table */}
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Table highlightOnHover layout="fixed" withColumnBorders={false} miw={0}>
<TableThead>
<TableTr>
<TableTh w="60%">
<Text fz="sm" fw={600} lh={1.4}>Kategori</Text>
</TableTh>
<TableTh w="20%">
<Text fz="sm" fw={600} lh={1.4} ta="center">Edit</Text>
</TableTh>
<TableTh w="20%">
<Text fz="sm" fw={600} lh={1.4} ta="center">Hapus</Text>
</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fz="sm" fw={500} lh={1.45} truncate="end">
{item.nama}
</Text>
</TableTd>
<TableTd ta="center">
<Button
variant="light"
color="green"
onClick={() =>
router.push(
`/admin/desa/kegiatan-desa/kategori-kegiatan-desa/${item.id}`
)
}
size="compact-sm"
>
<IconEdit size={16} />
</Button>
</TableTd>
<TableTd ta="center">
<Button
variant="light"
color="red"
disabled={listDataState.delete.loading}
onClick={() => {
setSelectedId(item.id);
setModalHapus(true);
}}
size="compact-sm"
>
<IconTrash size={16} />
</Button>
</TableTd>
</TableTr>
))
) : (
<TableTr>
<TableTd colSpan={3}>
<Center py={24}>
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data kategori kegiatan yang cocok
</Text>
</Center>
</TableTd>
</TableTr>
)}
</TableTbody>
</Table>
</Box>
{/* Mobile Cards */}
<Stack hiddenFrom="md" gap="xs" mt="md">
{filteredData.length > 0 ? (
filteredData.map((item) => (
<Paper key={item.id} withBorder radius="md" p="sm" bg="white">
<Box flex={1} ml="md">
<Text fz="sm" fw={600} lh={1.4}>Kategori</Text>
<Text fz="sm" fw={500} lh={1.45} truncate>
{item.nama}
</Text>
</Box>
<Group mt="sm" justify="flex-end" gap="xs">
<Button
variant="light"
color="green"
size="compact-xs"
onClick={() =>
router.push(
`/admin/desa/kegiatan-desa/kategori-kegiatan-desa/${item.id}`
)
}
>
<IconEdit size={14} />
</Button>
<Button
variant="light"
color="red"
size="compact-xs"
disabled={listDataState.delete.loading}
onClick={() => {
setSelectedId(item.id);
setModalHapus(true);
}}
>
<IconTrash size={14} />
</Button>
</Group>
</Paper>
))
) : (
<Center py={32}>
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data kategori kegiatan yang cocok
</Text>
</Center>
)}
</Stack>
</Paper>
<Center mt={{ base: 'lg', md: 'xl' }}>
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10, search);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
color="blue"
radius="md"
/>
</Center>
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleDelete}
text="Apakah anda yakin ingin menghapus kategori kegiatan ini?"
/>
</Box>
);
}
export default KategoriKegiatanDesa;

View File

@@ -0,0 +1,28 @@
'use client'
import React from 'react';
import LayoutTabsKegiatanDesa from './_com/layoutTabs';
import { usePathname } from 'next/navigation';
import { Box } from '@mantine/core';
function Layout({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
const segments = pathname.split('/').filter(Boolean);
const isDetailPage = segments.length >= 5;
if (isDetailPage) {
return (
<Box>
{children}
</Box>
);
}
return (
<LayoutTabsKegiatanDesa>
{children}
</LayoutTabsKegiatanDesa>
);
}
export default Layout;

View File

@@ -0,0 +1,335 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import stateDashboardKegiatan from '@/app/admin/(dashboard)/_state/desa/kegiatanDesa';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import {
ActionIcon,
Box,
Button,
Group,
Image,
Loader,
NumberInput,
Paper,
Select,
Stack,
Text,
Textarea,
TextInput,
Title,
} from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
const isHtmlEmpty = (html: string) => html.replace(/<[^>]*>/g, '').trim() === '';
interface KegiatanData {
id: string;
judul: string;
deskripsiSingkat: string;
deskripsiLengkap: string;
tanggal: string;
lokasi: string;
partisipan: number;
kategoriKegiatanId: string | null;
imageId: string | null;
image?: { link: string } | null;
}
function EditKegiatanDesa() {
const kegiatanState = useProxy(stateDashboardKegiatan);
const router = useRouter();
const params = useParams();
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const emptyForm = {
judul: '',
deskripsiSingkat: '',
deskripsiLengkap: '',
tanggal: '',
lokasi: '',
partisipan: 0,
kategoriKegiatanId: '',
imageId: '',
};
const [formData, setFormData] = useState(emptyForm);
const [originalData, setOriginalData] = useState({ ...emptyForm, imageUrl: '' });
const isFormValid = () =>
formData.judul.trim() !== '' &&
formData.deskripsiSingkat.trim() !== '' &&
!isHtmlEmpty(formData.deskripsiLengkap) &&
formData.tanggal !== '' &&
formData.lokasi.trim() !== '' &&
formData.kategoriKegiatanId !== '';
useEffect(() => {
kegiatanState.kategoriKegiatan.findMany.load();
const load = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await stateDashboardKegiatan.kegiatan.edit.load(id) as KegiatanData | null;
if (data) {
const tanggal = data.tanggal
? new Date(data.tanggal).toISOString().split('T')[0]
: '';
const form = {
judul: data.judul || '',
deskripsiSingkat: data.deskripsiSingkat || '',
deskripsiLengkap: data.deskripsiLengkap || '',
tanggal,
lokasi: data.lokasi || '',
partisipan: data.partisipan || 0,
kategoriKegiatanId: data.kategoriKegiatanId || '',
imageId: data.imageId || '',
};
setFormData(form);
setOriginalData({ ...form, imageUrl: data.image?.link || '' });
if (data.image?.link) setPreviewImage(data.image.link);
}
} catch (error) {
console.error('Error loading kegiatan:', error);
toast.error('Gagal memuat data kegiatan');
}
};
load();
}, [params?.id]);
const handleChange = (field: string, value: string | number) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
if (!formData.judul.trim()) return toast.error('Judul wajib diisi');
if (!formData.deskripsiSingkat.trim()) return toast.error('Deskripsi singkat wajib diisi');
if (isHtmlEmpty(formData.deskripsiLengkap)) return toast.error('Deskripsi lengkap wajib diisi');
if (!formData.tanggal) return toast.error('Tanggal wajib diisi');
if (!formData.lokasi.trim()) return toast.error('Lokasi wajib diisi');
if (!formData.kategoriKegiatanId) return toast.error('Kategori wajib dipilih');
try {
setIsSubmitting(true);
kegiatanState.kegiatan.edit.form = {
...kegiatanState.kegiatan.edit.form,
...formData,
};
if (file) {
const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
const uploaded = res.data?.data;
if (!uploaded?.id) return toast.error('Gagal upload gambar');
kegiatanState.kegiatan.edit.form.imageId = uploaded.id;
}
const success = await kegiatanState.kegiatan.edit.update();
if (success) {
router.push('/admin/desa/kegiatan-desa/list-kegiatan-desa');
}
} catch (error) {
console.error('Error updating kegiatan:', error);
toast.error('Terjadi kesalahan saat memperbarui kegiatan');
} finally {
setIsSubmitting(false);
}
};
const handleReset = () => {
setFormData({
judul: originalData.judul,
deskripsiSingkat: originalData.deskripsiSingkat,
deskripsiLengkap: originalData.deskripsiLengkap,
tanggal: originalData.tanggal,
lokasi: originalData.lokasi,
partisipan: originalData.partisipan,
kategoriKegiatanId: originalData.kategoriKegiatanId,
imageId: originalData.imageId,
});
setPreviewImage(originalData.imageUrl || null);
setFile(null);
toast.info('Form dikembalikan ke data awal');
};
return (
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">Edit Kegiatan Desa</Title>
</Group>
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
label="Judul"
placeholder="Masukkan judul kegiatan"
value={formData.judul}
onChange={(e) => handleChange('judul', e.target.value)}
required
/>
<Select
label="Kategori Kegiatan"
placeholder="Pilih kategori"
data={kegiatanState.kategoriKegiatan.findMany.data.map((item) => ({
label: item.nama,
value: item.id,
}))}
value={formData.kategoriKegiatanId || null}
onChange={(val) => handleChange('kategoriKegiatanId', val || '')}
searchable
clearable
nothingFoundMessage="Tidak ditemukan"
required
/>
<TextInput
label="Tanggal"
type="date"
value={formData.tanggal}
onChange={(e) => handleChange('tanggal', e.target.value)}
required
/>
<TextInput
label="Lokasi"
placeholder="Masukkan lokasi kegiatan"
value={formData.lokasi}
onChange={(e) => handleChange('lokasi', e.target.value)}
required
/>
<NumberInput
label="Jumlah Partisipan"
placeholder="Masukkan jumlah partisipan"
value={formData.partisipan}
onChange={(val) => handleChange('partisipan', Number(val) || 0)}
min={0}
/>
<Textarea
label="Deskripsi Singkat"
placeholder="Masukkan deskripsi singkat kegiatan"
value={formData.deskripsiSingkat}
onChange={(e) => handleChange('deskripsiSingkat', e.target.value)}
minRows={3}
autosize
required
/>
<Box>
<Text fz="sm" fw="bold" mb={6}>Deskripsi Lengkap</Text>
<EditEditor
value={formData.deskripsiLengkap}
onChange={(html) => setFormData((prev) => ({ ...prev, deskripsiLengkap: html }))}
/>
</Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>Gambar (Opsional)</Text>
<Dropzone
onDrop={(files) => {
const f = files[0];
if (f) { setFile(f); setPreviewImage(URL.createObjectURL(f)); }
}}
onReject={() => toast.error('File tidak valid, gunakan format gambar')}
maxSize={5 * 1024 ** 2}
accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
radius="md"
p="xl"
>
<Group justify="center" gap="xl" mih={160}>
<Dropzone.Accept>
<IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={48} color="red" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={48} color="#868e96" stroke={1.5} />
</Dropzone.Idle>
</Group>
</Dropzone>
{previewImage && (
<Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
<Image
src={previewImage}
alt="Preview"
radius="md"
style={{
maxHeight: 220,
objectFit: 'contain',
border: `1px solid ${colors['blue-button']}`,
}}
loading="lazy"
/>
<ActionIcon
variant="filled"
color="red"
radius="xl"
size="sm"
pos="absolute"
top={5}
right={5}
onClick={() => { setPreviewImage(null); setFile(null); }}
style={{ boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
>
<IconX size={14} />
</ActionIcon>
</Box>
)}
</Box>
<Group justify="right">
<Button variant="outline" color="gray" radius="md" size="md" onClick={handleReset}>
Batal
</Button>
<Button
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background:
!isFormValid() || isSubmitting
? 'linear-gradient(135deg, #cccccc, #eeeeee)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default EditKegiatanDesa;

View File

@@ -0,0 +1,189 @@
'use client'
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import stateDashboardKegiatan from '@/app/admin/(dashboard)/_state/desa/kegiatanDesa';
import colors from '@/con/colors';
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
interface KegiatanDetail {
id: string;
judul: string;
deskripsiSingkat: string;
deskripsiLengkap: string;
tanggal: string;
lokasi: string;
partisipan: number;
kategoriKegiatan?: { nama: string } | null;
image?: { link: string } | null;
}
function DetailKegiatanDesa() {
const kegiatanState = useProxy(stateDashboardKegiatan);
const [modalHapus, setModalHapus] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null);
const params = useParams();
const router = useRouter();
useShallowEffect(() => {
kegiatanState.kegiatan.findUnique.load(params?.id as string);
}, []);
const handleHapus = () => {
if (selectedId) {
kegiatanState.kegiatan.delete.byId(selectedId);
setModalHapus(false);
setSelectedId(null);
router.push('/admin/desa/kegiatan-desa/list-kegiatan-desa');
}
};
if (!kegiatanState.kegiatan.findUnique.data) {
return (
<Stack py={10}>
<Skeleton height={500} radius="md" />
</Stack>
);
}
const data = kegiatanState.kegiatan.findUnique.data as unknown as KegiatanDetail;
const formatTanggal = (val: string) => {
if (!val) return '-';
return new Date(val).toLocaleDateString('id-ID', {
day: '2-digit',
month: 'long',
year: 'numeric',
});
};
return (
<Box px={{ base: 0, md: 'xs' }} py="xs">
<Button
variant="subtle"
onClick={() => router.back()}
leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
mb={15}
>
Kembali
</Button>
<Paper
withBorder
w={{ base: '100%', md: '70%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
>
<Stack gap="md">
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
Detail Kegiatan Desa
</Text>
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
<Stack gap="sm">
<Box>
<Text fz="lg" fw="bold">Kategori</Text>
<Text fz="md" c="dimmed">{data.kategoriKegiatan?.nama || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold">Judul</Text>
<Text fz="md" c="dimmed">{data.judul || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold">Tanggal</Text>
<Text fz="md" c="dimmed">{formatTanggal(data.tanggal)}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold">Lokasi</Text>
<Text fz="md" c="dimmed">{data.lokasi || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold">Partisipan</Text>
<Text fz="md" c="dimmed">{data.partisipan ?? 0} orang</Text>
</Box>
<Box>
<Text fz="lg" fw="bold">Deskripsi Singkat</Text>
<Text fz="md" c="dimmed" style={{ whiteSpace: 'pre-wrap' }}>
{data.deskripsiSingkat || '-'}
</Text>
</Box>
<Box>
<Text fz="lg" fw="bold">Deskripsi Lengkap</Text>
<Paper bg="white" p="md" radius="md" mt="xs">
<Text
fz="md"
c="dimmed"
dangerouslySetInnerHTML={{ __html: data.deskripsiLengkap || '-' }}
/>
</Paper>
</Box>
{data.image?.link && (
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
<Image
src={data.image.link}
alt={data.judul || 'Gambar Kegiatan'}
w={{ base: '100%', md: 400 }}
h={300}
radius="md"
fit="cover"
loading="lazy"
mt="xs"
/>
</Box>
)}
<Group gap="sm" mt="md">
<Button
color="red"
onClick={() => { setSelectedId(data.id); setModalHapus(true); }}
variant="light"
radius="md"
size="md"
leftSection={<IconTrash size={20} />}
>
Hapus
</Button>
<Button
color="green"
onClick={() =>
router.push(
`/admin/desa/kegiatan-desa/list-kegiatan-desa/${data.id}/edit`
)
}
variant="light"
radius="md"
size="md"
leftSection={<IconEdit size={20} />}
>
Edit
</Button>
</Group>
</Stack>
</Paper>
</Stack>
</Paper>
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleHapus}
text="Apakah Anda yakin ingin menghapus kegiatan desa ini?"
/>
</Box>
);
}
export default DetailKegiatanDesa;

View File

@@ -0,0 +1,258 @@
'use client'
import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
import stateDashboardKegiatan from '@/app/admin/(dashboard)/_state/desa/kegiatanDesa';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import {
ActionIcon,
Box,
Button,
Group,
Image,
Loader,
NumberInput,
Paper,
Select,
Stack,
Text,
Textarea,
TextInput,
Title,
} from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
const isHtmlEmpty = (html: string) => html.replace(/<[^>]*>/g, '').trim() === '';
export default function CreateKegiatanDesa() {
const kegiatanState = useProxy(stateDashboardKegiatan);
const router = useRouter();
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
useShallowEffect(() => {
kegiatanState.kategoriKegiatan.findMany.load();
}, []);
const isFormValid = () => {
const f = kegiatanState.kegiatan.create.form;
return (
f.judul.trim() !== '' &&
f.deskripsiSingkat.trim() !== '' &&
!isHtmlEmpty(f.deskripsiLengkap) &&
f.tanggal !== '' &&
f.lokasi.trim() !== '' &&
f.kategoriKegiatanId !== ''
);
};
const resetForm = () => {
kegiatanState.kegiatan.create.resetForm();
setPreviewImage(null);
setFile(null);
};
const handleSubmit = async () => {
const f = kegiatanState.kegiatan.create.form;
if (!f.judul.trim()) return toast.error('Judul wajib diisi');
if (!f.deskripsiSingkat.trim()) return toast.error('Deskripsi singkat wajib diisi');
if (isHtmlEmpty(f.deskripsiLengkap)) return toast.error('Deskripsi lengkap wajib diisi');
if (!f.tanggal) return toast.error('Tanggal wajib diisi');
if (!f.lokasi.trim()) return toast.error('Lokasi wajib diisi');
if (!f.kategoriKegiatanId) return toast.error('Kategori wajib dipilih');
try {
setIsSubmitting(true);
if (file) {
const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
const uploaded = res.data?.data;
if (!uploaded?.id) return toast.error('Gagal mengunggah gambar');
kegiatanState.kegiatan.create.form.imageId = uploaded.id;
}
const success = await kegiatanState.kegiatan.create.create();
if (success) {
resetForm();
router.push('/admin/desa/kegiatan-desa/list-kegiatan-desa');
}
} catch (error) {
console.error('Error creating kegiatan:', error);
toast.error('Terjadi kesalahan saat membuat kegiatan');
} finally {
setIsSubmitting(false);
}
};
return (
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">Tambah Kegiatan Desa</Title>
</Group>
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
label="Judul"
placeholder="Masukkan judul kegiatan"
value={kegiatanState.kegiatan.create.form.judul}
onChange={(e) => (kegiatanState.kegiatan.create.form.judul = e.target.value)}
required
/>
<Select
label="Kategori Kegiatan"
placeholder="Pilih kategori"
data={kegiatanState.kategoriKegiatan.findMany.data.map((item) => ({
label: item.nama,
value: item.id,
}))}
value={kegiatanState.kegiatan.create.form.kategoriKegiatanId || null}
onChange={(val) => {
kegiatanState.kegiatan.create.form.kategoriKegiatanId = val || '';
}}
searchable
clearable
nothingFoundMessage="Tidak ditemukan"
required
/>
<TextInput
label="Tanggal"
type="date"
value={kegiatanState.kegiatan.create.form.tanggal}
onChange={(e) => (kegiatanState.kegiatan.create.form.tanggal = e.target.value)}
required
/>
<TextInput
label="Lokasi"
placeholder="Masukkan lokasi kegiatan"
value={kegiatanState.kegiatan.create.form.lokasi}
onChange={(e) => (kegiatanState.kegiatan.create.form.lokasi = e.target.value)}
required
/>
<NumberInput
label="Jumlah Partisipan"
placeholder="Masukkan jumlah partisipan"
value={kegiatanState.kegiatan.create.form.partisipan}
onChange={(val) => (kegiatanState.kegiatan.create.form.partisipan = Number(val) || 0)}
min={0}
/>
<Textarea
label="Deskripsi Singkat"
placeholder="Masukkan deskripsi singkat kegiatan"
value={kegiatanState.kegiatan.create.form.deskripsiSingkat}
onChange={(e) => (kegiatanState.kegiatan.create.form.deskripsiSingkat = e.target.value)}
minRows={3}
autosize
required
/>
<Box>
<Text fz="sm" fw="bold" mb={6}>Deskripsi Lengkap</Text>
<CreateEditor
value={kegiatanState.kegiatan.create.form.deskripsiLengkap}
onChange={(html) => { kegiatanState.kegiatan.create.form.deskripsiLengkap = html; }}
/>
</Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>Gambar (Opsional)</Text>
<Dropzone
onDrop={(files) => {
const f = files[0];
if (f) { setFile(f); setPreviewImage(URL.createObjectURL(f)); }
}}
onReject={() => toast.error('File tidak valid, gunakan format gambar')}
maxSize={5 * 1024 ** 2}
accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
radius="md"
p="xl"
>
<Group justify="center" gap="xl" mih={160}>
<Dropzone.Accept>
<IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
</Group>
<Text ta="center" mt="sm" size="sm" color="dimmed">
Seret gambar atau klik untuk memilih (maks 5MB)
</Text>
</Dropzone>
{previewImage && (
<Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
<Image
src={previewImage}
alt="Preview"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading="lazy"
/>
<ActionIcon
variant="filled"
color="red"
radius="xl"
size="sm"
pos="absolute"
top={5}
right={5}
onClick={() => { setPreviewImage(null); setFile(null); }}
style={{ boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
>
<IconX size={14} />
</ActionIcon>
</Box>
)}
</Box>
<Group justify="right">
<Button variant="outline" color="gray" radius="md" size="md" onClick={resetForm}>
Reset
</Button>
<Button
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background:
!isFormValid() || isSubmitting
? 'linear-gradient(135deg, #cccccc, #eeeeee)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}

View File

@@ -0,0 +1,203 @@
'use client'
import colors from '@/con/colors';
import {
Box,
Button,
Center,
Group,
Pagination,
Paper,
Skeleton,
Stack,
Table,
TableTbody,
TableTd,
TableTh,
TableThead,
TableTr,
Text,
Title
} from '@mantine/core';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import stateDashboardKegiatan from '../../../_state/desa/kegiatanDesa';
function KegiatanDesa() {
const [search, setSearch] = useState("");
return (
<Box>
<HeaderSearch
title="Kegiatan Desa"
placeholder="Cari judul atau lokasi kegiatan..."
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListKegiatanDesa search={search} />
</Box>
);
}
function ListKegiatanDesa({ search }: { search: string }) {
const kegiatanState = useProxy(stateDashboardKegiatan);
const router = useRouter();
const [debouncedSearch] = useDebouncedValue(search, 1000);
const { data, page, totalPages, loading, load } = kegiatanState.kegiatan.findMany;
useShallowEffect(() => {
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
if (loading || !data) {
return (
<Stack py="md">
<Skeleton height={600} radius="md" />
</Stack>
);
}
const filteredData = data || [];
return (
<Box py="md">
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Kegiatan Desa</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/desa/kegiatan-desa/list-kegiatan-desa/create')}
>
Tambah Baru
</Button>
</Group>
{/* Desktop Table */}
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Table highlightOnHover layout="fixed" withColumnBorders={false} miw={0}>
<TableThead>
<TableTr>
<TableTh w="35%">Judul</TableTh>
<TableTh w="25%">Kategori</TableTh>
<TableTh w="20%">Lokasi</TableTh>
<TableTh w="20%">Aksi</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fz="md" fw={600} lh={1.45} truncate="end">
{item.judul}
</Text>
</TableTd>
<TableTd>
<Text fz="sm" c="dimmed" lh={1.45}>
{item.kategoriKegiatan?.nama || '-'}
</Text>
</TableTd>
<TableTd>
<Text fz="sm" c="dimmed" lh={1.45} truncate="end">
{item.lokasi || '-'}
</Text>
</TableTd>
<TableTd>
<Button
variant="light"
color="blue"
onClick={() =>
router.push(`/admin/desa/kegiatan-desa/list-kegiatan-desa/${item.id}`)
}
fz="sm"
px="sm"
h={36}
>
<IconDeviceImacCog size={18} />
<Text ml="xs">Detail</Text>
</Button>
</TableTd>
</TableTr>
))
) : (
<TableTr>
<TableTd colSpan={4}>
<Center py="xl">
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data kegiatan yang cocok
</Text>
</Center>
</TableTd>
</TableTr>
)}
</TableTbody>
</Table>
</Box>
{/* Mobile Cards */}
<Stack hiddenFrom="md" gap="sm" mt="sm">
{filteredData.length > 0 ? (
filteredData.map((item) => (
<Paper key={item.id} withBorder p="md" radius="md">
<Stack gap={"xs"}>
<Text fz="sm" fw={600} lh={1.4} c="dimmed">Judul</Text>
<Text fz="sm" fw={500} lh={1.45}>{item.judul}</Text>
<Text fz="sm" fw={600} lh={1.4} c="dimmed" mt="xs">Kategori</Text>
<Text fz="sm" lh={1.45} fw={500}>{item.kategoriKegiatan?.nama || '-'}</Text>
<Text fz="sm" fw={600} lh={1.4} c="dimmed" mt="xs">Lokasi</Text>
<Text fz="sm" lh={1.45} fw={500}>{item.lokasi || '-'}</Text>
<Button
variant="light"
color="blue"
fullWidth
mt="sm"
onClick={() =>
router.push(`/admin/desa/kegiatan-desa/list-kegiatan-desa/${item.id}`)
}
fz="sm"
h={36}
>
<IconDeviceImacCog size={18} />
<Text ml="xs">Detail</Text>
</Button>
</Stack>
</Paper>
))
) : (
<Center py="xl">
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data kegiatan yang cocok
</Text>
</Center>
)}
</Stack>
</Paper>
<Center>
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10, debouncedSearch);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
</Center>
</Box>
);
}
export default KegiatanDesa;

View File

@@ -1,162 +0,0 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import {
Box,
ScrollArea,
Stack,
Tabs,
TabsList,
TabsPanel,
TabsTab,
Title
} from '@mantine/core';
import { IconCategory, IconShoppingBag } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
function LayoutTabs({ children }: { children: React.ReactNode }) {
const router = useRouter();
const pathname = usePathname();
const tabs = [
{
label: "Produk Pasar Desa",
value: "produkpasardesa",
href: "/admin/ekonomi/pasar-desa/produk-pasar-desa",
icon: <IconShoppingBag size={18} stroke={1.8} />
},
{
label: "Kategori Produk",
value: "kategoriproduk",
href: "/admin/ekonomi/pasar-desa/kategori-produk",
icon: <IconCategory size={18} stroke={1.8} />
},
];
const currentTab = tabs.find((tab) => tab.href === pathname);
const [activeTab, setActiveTab] = useState<string | null>(
currentTab?.value || tabs[0].value
);
const handleTabChange = (value: string | null) => {
const tab = tabs.find((t) => t.value === value);
if (tab) {
router.push(tab.href);
}
setActiveTab(value);
};
useEffect(() => {
const match = tabs.find((tab) => tab.href === pathname);
if (match) {
setActiveTab(match.value);
}
}, [pathname]);
return (
<Stack gap="lg">
<Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
Pasar Desa
</Title>
<Tabs
color={colors['blue-button']}
variant="pills"
value={activeTab}
onChange={handleTabChange}
radius="lg"
keepMounted={false}
>
{/* ✅ Scroll horizontal wrapper */}
<Box visibleFrom='md' pb={10}>
<ScrollArea type="auto" offsetScrollbars>
<TabsList
p="sm"
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
}}
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
flexShrink: 0, // ✅ jangan mengecil aneh-aneh
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>
</Box>
<Box hiddenFrom='md' pb={10}>
<ScrollArea
type="auto"
offsetScrollbars={false}
w="100%"
>
<TabsList
p="xs" // lebih kecil
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
width: "max-content", // ⬅️ kunci
maxWidth: "100%", // ⬅️ penting
}}
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
paddingInline: "0.75rem", // ⬅️ lebih ramping
flexShrink: 0, // ✅ jangan mengecil aneh-aneh
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>
</Box>
{tabs.map((tab, i) => (
<TabsPanel
key={i}
value={tab.value}
style={{
padding: "1.5rem",
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
borderRadius: "1rem",
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
}}
>
{children}
</TabsPanel>
))}
</Tabs>
</Stack>
);
}
export default LayoutTabs;

View File

@@ -1,172 +0,0 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import {
Box,
Button,
Group,
Loader,
Paper,
Stack,
Text,
TextInput,
Title
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
import pasarDesaState from '../../../../_state/ekonomi/pasar-desa/pasar-desa';
function EditKategoriProduk() {
const router = useRouter();
const params = useParams();
const id = params?.id as string;
const statePasar = useProxy(pasarDesaState.kategoriProduk);
const [isSubmitting, setIsSubmitting] = useState(false);
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;
try {
const data = await statePasar.edit.load(id);
if (data) {
// simpan id ke state global hanya untuk referensi
statePasar.edit.id = id;
// simpan data ke state lokal
setFormData({ nama: data.nama || '' });
setOriginalData({ nama: data.nama || '' });
}
} catch (error) {
console.error('Error loading kategori produk:', error);
toast.error('Gagal memuat data kategori produk');
}
};
loadKategoriProduk();
}, [id]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData((prev) => ({
...prev,
[e.target.name]: e.target.value,
}));
};
const handleResetForm = () => {
setFormData({
nama: originalData.nama,
});
toast.info('Form dikembalikan ke data awal');
};
const handleSubmit = async () => {
try {
setIsSubmitting(true);
if (!formData.nama.trim()) {
toast.error('Nama kategori produk tidak boleh kosong');
return;
}
// update global state hanya saat submit
statePasar.edit.form = { nama: formData.nama.trim() };
if (!statePasar.edit.id) {
statePasar.edit.id = id; // fallback
}
const success = await statePasar.edit.update();
if (success) {
toast.success('Kategori produk berhasil diperbarui!');
router.push('/admin/ekonomi/pasar-desa/kategori-produk');
}
} catch (error) {
console.error('Error updating kategori produk:', error);
toast.error('Terjadi kesalahan saat memperbarui kategori produk');
} finally {
setIsSubmitting(false);
}
};
return (
<Box px={{ base: 0, md: 'xs' }} py="xs">
{/* Header dengan tombol back */}
<Group mb="md">
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Kategori Produk
</Title>
</Group>
{/* Card form */}
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
name="nama"
label={<Text fw="bold" fz="sm">Nama Kategori Produk</Text>}
placeholder="Masukkan nama kategori produk"
value={formData.nama}
onChange={handleChange}
required
/>
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default EditKategoriProduk;

View File

@@ -1,127 +0,0 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import colors from '@/con/colors';
import {
Box,
Button,
Group,
Loader,
Paper,
Stack,
TextInput,
Title
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
import pasarDesaState from '../../../../_state/ekonomi/pasar-desa/pasar-desa';
function CreateKategoriProduk() {
const router = useRouter();
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();
}, []);
const resetForm = () => {
statePasar.create.form = {
nama: '',
};
};
const handleSubmit = async () => {
try {
if (!statePasar.create.form.nama) {
return toast.warn('Nama kategori produk wajib diisi');
}
setIsSubmitting(true);
await statePasar.create.create();
resetForm();
router.push('/admin/ekonomi/pasar-desa/kategori-produk');
} catch (error) {
console.error(error)
toast.error('Gagal menambahkan kategori produk');
} finally {
setIsSubmitting(false);
}
};
return (
<Box px={{ base: 0, md: 'xs' }} py="xs">
{/* Header dengan tombol kembali */}
<Group mb="md">
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Kategori Produk
</Title>
</Group>
{/* Card form */}
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
label="Nama Kategori Produk"
placeholder="Masukkan nama kategori produk"
value={statePasar.create.form.nama || ''}
onChange={(e) => (statePasar.create.form.nama = e.target.value)}
required
/>
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={resetForm}
>
Reset
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateKategoriProduk;

Some files were not shown because too many files have changed in this diff Show More