merge(stg): merge main into stg and resolve storage conflicts

QC/DESA/fix-summary-berita-desa.md

@@ -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

QC/DESA/fix-summary-potensi-desa.md

@@ -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

QC/DESA/fix-summary-profil-desa.md

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

QC/DESA/summary-qc-berita-desa.md

@@ -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

QC/DESA/summary-qc-layanan-desa.md

@@ -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

QC/DESA/summary-qc-penghargaan-desa.md

@@ -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

QC/DESA/summary-qc-pengumuman-desa.md

@@ -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

QC/DESA/summary-qc-potensi-desa.md

@@ -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

QC/DESA/summary-qc-profil-desa.md

@@ -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

QC/KESEHATAN/summary-qc-posyandu.md

@@ -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

QC/Landing-Page/QC-APBDES-MODULE.md

@@ -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;
+```

QC/Landing-Page/QC-DESA-ANTI-KORUPSI.md

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

QC/Landing-Page/QC-PRESTASI-DESA-MODULE.md

@@ -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! 🎉

QC/Landing-Page/QC-PROFIL-MODULE.md

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

QC/Landing-Page/QC-SDGS-DESA.md

@@ -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

QC/PPID/QC-DAFTAR-INFORMASI-PUBLIK-MODULE.md

@@ -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` 📄

QC/PPID/QC-DASAR-HUKUM-PPID-MODULE.md

@@ -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` 📄

QC/PPID/QC-IKM-MODULE.md

@@ -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` 📄

QC/PPID/QC-PERMOHONAN-INFORMASI-PUBLIK-MODULE.md

@@ -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` 📄

QC/PPID/QC-PERMOHONAN-KEBERATAN-INFORMASI-MODULE.md

@@ -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` 📄

QC/PPID/QC-PPID-PROFIL-MODULE.md

@@ -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` 📄

QC/PPID/QC-STRUKTUR-PPID-MODULE.md

@@ -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` 📄

QC/PPID/QC-VISI-MISI-PPID-MODULE.md

@@ -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` 📄

ai.sh

@@ -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

package.json

@@ -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",

prisma/migrate-seafile-to-minio.ts

@@ -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();

src/app/api/[[...slugs]]/_lib/img-del.ts

@@ -1,15 +1,8 @@
-import fs from "fs/promises";
-import path from "path";
+import minio, { MINIO_BUCKET } from "@/lib/minio";
 
-async function imgDel({
-  name,
-  UPLOAD_DIR_IMAGE,
-}: {
-  name: string;
-  UPLOAD_DIR_IMAGE: string;
-}) {
+async function imgDel({ name }: { name: string }) {
   try {
-    await fs.unlink(path.join(UPLOAD_DIR_IMAGE, name));
+    await minio.removeObject(MINIO_BUCKET, `image/${name}`);
     return "ok";
   } catch (error) {
     console.log(error);

src/app/api/[[...slugs]]/_lib/img.ts

@@ -1,27 +1,21 @@
-import fs from "fs/promises";
 import path from "path";
+import fs from "fs/promises";
 import sharp from "sharp";
+import minio, { MINIO_BUCKET } from "@/lib/minio";
 
 async function img({
   name,
-  UPLOAD_DIR_IMAGE,
   ROOT,
   size,
 }: {
   name: string;
-  UPLOAD_DIR_IMAGE: string;
   ROOT: string;
-  size?: number; // Ukuran opsional (tidak ada default)
+  size?: number;
 }) {
-  const completeName = path.basename(name); // Nama file lengkap
-  const ext = path.extname(name).toLowerCase(); // Ekstensi file dalam huruf kecil
-  //   const fileNameWithoutExt = path.basename(name, ext); // Nama file tanpa ekstensi
-
-  // Default image jika terjadi kesalahan
   const noImage = path.join(ROOT, "public/no-image.jpg");
+  const ext = path.extname(name).toLowerCase();
 
-  // Validasi ekstensi file
-  if (![".jpg", ".jpeg", ".png"].includes(ext)) {
+  if (![".jpg", ".jpeg", ".png", ".webp"].includes(ext)) {
     console.warn(`Ekstensi file tidak didukung: ${ext}`);
     const buffer = await fs.readFile(noImage);
     const uint8Array = new Uint8Array(buffer);
@@ -31,33 +25,27 @@ async function img({
   }
 
   try {
-    // Path ke file asli
-    const filePath = path.join(UPLOAD_DIR_IMAGE, completeName);
+    const stream = await minio.getObject(MINIO_BUCKET, `image/${name}`);
+    const chunks: Buffer[] = [];
+    for await (const chunk of stream) {
+      chunks.push(Buffer.from(chunk));
+    }
+    const buffer = Buffer.concat(chunks);
 
-    // Periksa apakah file ada
-    await fs.stat(filePath);
-
-    // Metadata gambar asli
-    const metadata = await sharp(filePath).metadata();
-
-    // Proses resize menggunakan sharp
-    const resizedImageBuffer = await sharp(filePath)
-      .resize(size || metadata.width) // Gunakan size jika diberikan, jika tidak gunakan width asli
+    const metadata = await sharp(buffer).metadata();
+    const resized = await sharp(buffer)
+      .resize(size || metadata.width)
       .toBuffer();
 
-    const uint8Array = new Uint8Array(resizedImageBuffer);
-    return new Response(new Blob([uint8Array], { type: 'image/jpeg' }), {
+    return new Response(resized, {
       headers: {
         "Cache-Control": "public, max-age=3600, stale-while-revalidate=600",
         "Content-Type": "image/jpeg",
       },
     });
   } catch (error) {
-    console.error(`Gagal memproses file: ${name}`, error);
-    // Jika file tidak ditemukan atau gagal diproses, kembalikan default image
-    const buffer = await fs.readFile(noImage);
-    const uint8Array = new Uint8Array(buffer);
-    return new Response(new Blob([uint8Array], { type: 'image/jpeg' }), {
+    console.error(`Gagal mengambil file dari MinIO: ${name}`, error);
+    return new Response(await fs.readFile(noImage), {
       headers: { "Content-Type": "image/jpeg" },
     });
   }

src/app/api/[[...slugs]]/_lib/imgs.ts

@@ -1,30 +1,30 @@
-import fs from "fs/promises";
+import minio, { MINIO_BUCKET } from "@/lib/minio";
 
 async function imgs({
   search = "",
   page = 1,
   count = 20,
-  UPLOAD_DIR_IMAGE,
 }: {
   search?: string;
   page?: number;
   count?: number;
-  UPLOAD_DIR_IMAGE: string;
 }) {
-  const files = await fs.readdir(UPLOAD_DIR_IMAGE);
+  const objects: { name: string; url: string }[] = [];
 
-  return files
-    .filter(
-      (file) =>
-        file.endsWith(".jpg") || file.endsWith(".png") || file.endsWith(".jpeg")
-    )
-    .filter((file) => file.includes(search))
+  const stream = minio.listObjects(MINIO_BUCKET, "image/", true);
+
+  for await (const obj of stream) {
+    if (!obj.name) continue;
+    const fileName = obj.name.replace("image/", "");
+    if (!fileName) continue;
+    if (search && !fileName.includes(search)) continue;
+    objects.push({ name: fileName, url: `/api/img/${fileName}` });
+  }
+
+  const total = objects.length;
+  return objects
     .slice((page - 1) * count, page * count)
-    .map((file) => ({
-      name: file,
-      url: `/api/img/${file}`,
-      total: files.length,
-    }));
+    .map((o) => ({ ...o, total }));
 }
 
 export default imgs;

src/app/api/[[...slugs]]/_lib/upl-img-single.ts

@@ -1,30 +1,31 @@
 import { nanoid } from "nanoid";
-import fs from "fs/promises";
 import path from "path";
 import _ from "lodash";
+import minio, { MINIO_BUCKET } from "@/lib/minio";
 
 export async function uplImgSingle({
   fileName,
   file,
-  UPLOAD_DIR_IMAGE,
 }: {
   fileName: string;
   file: File;
-  UPLOAD_DIR_IMAGE: string;
 }) {
   if (!fileName || typeof fileName !== "string" || fileName.trim() === "") {
     console.warn(`Nama file tidak valid: ${fileName}`);
     fileName = nanoid() + ".jpg";
   }
+
   const ext = path.extname(fileName).toLowerCase();
   const fileNameWithoutExt = path.basename(fileName, ext);
   const fileNameKebabCase = _.kebabCase(fileNameWithoutExt) + ext;
+  const objectName = `image/${fileNameKebabCase}`;
 
   try {
     const buffer = Buffer.from(await file.arrayBuffer());
-    const filePath = path.join(UPLOAD_DIR_IMAGE, fileNameKebabCase);
-    await fs.writeFile(filePath, buffer);
-    return filePath;
+    await minio.putObject(MINIO_BUCKET, objectName, buffer, buffer.length, {
+      "Content-Type": file.type || "image/jpeg",
+    });
+    return objectName;
   } catch (error) {
     console.log(error);
     return "error";

src/app/api/[[...slugs]]/_lib/upl-img.ts

@@ -1,15 +1,11 @@
-import path from "path";
-import fs from "fs/promises";
 import { nanoid } from "nanoid";
+import minio, { MINIO_BUCKET } from "@/lib/minio";
 
-async function uplImg({
-  files,
-  UPLOAD_DIR_IMAGE,
-}: {
-  files: File[];
-  UPLOAD_DIR_IMAGE: string;
-}) {
-  // Validasi input
+function sanitizeFileName(fileName: string): string {
+  return fileName.replace(/[^a-zA-Z0-9._\-]/g, "_");
+}
+
+async function uplImg({ files }: { files: File[] }) {
   if (!Array.isArray(files) || files.length === 0) {
     throw new Error("Tidak ada file yang diunggah");
   }
@@ -17,24 +13,20 @@ async function uplImg({
   for (const file of files) {
     let fileName = file.name;
 
-    // Validasi nama file
     if (!fileName || typeof fileName !== "string" || fileName.trim() === "") {
       console.warn(`Nama file tidak valid: ${fileName}`);
       fileName = nanoid() + ".jpg";
     }
 
-    // Sanitasi nama file untuk mencegah path traversal
-    const sanitizedFileName = sanitizeFileName(fileName);
+    const sanitized = sanitizeFileName(fileName);
+    const objectName = `image/${sanitized}`;
 
     try {
-      // Konversi file ke buffer
       const buffer = Buffer.from(await file.arrayBuffer());
-
-      // Tulis file ke direktori uploads
-      const filePath = path.join(UPLOAD_DIR_IMAGE, sanitizedFileName);
-      await fs.writeFile(filePath, buffer);
-
-      console.log(`File berhasil diunggah: ${sanitizedFileName}`);
+      await minio.putObject(MINIO_BUCKET, objectName, buffer, buffer.length, {
+        "Content-Type": file.type || "image/jpeg",
+      });
+      console.log(`File berhasil diunggah ke MinIO: ${objectName}`);
     } catch (error) {
       console.error(`Gagal mengunggah file ${fileName}:`, error);
       throw new Error(`Gagal mengunggah file: ${fileName}`);
@@ -44,9 +36,4 @@ async function uplImg({
   return "ok";
 }
 
-// Fungsi untuk membersihkan nama file dari karakter yang tidak aman
-function sanitizeFileName(fileName: string): string {
-  return fileName.replace(/[^a-zA-Z0-9._\-]/g, "_");
-}
-
 export default uplImg;

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

@@ -30,22 +30,6 @@ import Search from "./_lib/search";
 
 const ROOT = process.cwd();
 
-if (!process.env.WIBU_UPLOAD_DIR)
-  throw new Error("WIBU_UPLOAD_DIR is not defined");
-
-const UPLOAD_DIR = path.join(ROOT, process.env.WIBU_UPLOAD_DIR);
-const UPLOAD_DIR_IMAGE = path.join(UPLOAD_DIR, "image");
-
-// create uploads dir
-fs.mkdir(UPLOAD_DIR, {
-  recursive: true,
-}).catch(() => {});
-
-// create image uploads dir
-fs.mkdir(UPLOAD_DIR_IMAGE, {
-  recursive: true,
-}).catch(() => {});
-
 const corsConfig = {
   origin: [
     "*", // Allow all origins - must be first when using credentials: true
@@ -79,16 +63,8 @@ const Utils = new Elysia({
   return { version };
 });
 
-if (!process.env.WIBU_UPLOAD_DIR)
-  throw new Error("WIBU_UPLOAD_DIR is not defined");
-
-const ApiServer = new Elysia({ prefix: "/api" })
-  .use(
-    staticPlugin({
-      assets: UPLOAD_DIR,
-      prefix: "/uploads",
-    }),
-  )
+const ApiServer = new Elysia()
+  .use(swagger({ path: "/api/docs" }))
   .use(cors(corsConfig))
   .use(
     swagger({
@@ -109,129 +85,128 @@ const ApiServer = new Elysia({ prefix: "/api" })
       };
     }
   })
-  .use(Utils)
-  .use(FileStorage)
-  .use(LandingPage)
-  .use(PPID)
-  .use(Desa)
-  .use(Kesehatan)
-  .use(Keamanan)
-  .use(Ekonomi)
-  .use(Inovasi)
-  .use(Lingkungan)
-  .use(Pendidikan)
-  .use(Kependudukan)
-  .use(User)
-  .use(Role)
-  .use(Search)
-  .get("/layanan", layanan)
-  .get("/potensi", getPotensi)
-  .get(
-    "/img/:name",
-    ({ params, query }) => {
-      return img({
-        name: params.name,
-        UPLOAD_DIR_IMAGE,
-        ROOT,
-        size: query.size,
-      });
-    },
-    {
-      params: t.Object({
-        name: t.String(),
-      }),
-      query: t.Optional(
-        t.Object({
-          size: t.Optional(t.Number()),
-        }),
+  .group("/api", (app) =>
+    app
+      .use(Utils)
+      .use(FileStorage)
+      .use(LandingPage)
+      .use(PPID)
+      .use(Desa)
+      .use(Kesehatan)
+      .use(Keamanan)
+      .use(Ekonomi)
+      .use(Inovasi)
+      .use(Lingkungan)
+      .use(Pendidikan)
+      .use(Kependudukan)
+      .use(User)
+      .use(Role)
+      .use(Search)
+      .get("/layanan", layanan)
+      .get("/potensi", getPotensi)
+      .get(
+        "/img/:name",
+        ({ params, query }) => {
+          return img({
+            name: params.name,
+            ROOT,
+            size: query.size,
+          });
+        },
+        {
+          params: t.Object({
+            name: t.String(),
+          }),
+          query: t.Optional(
+            t.Object({
+              size: t.Optional(t.Number()),
+            }),
+          ),
+        },
+      )
+      .delete(
+        "/img/:name",
+        ({ params }) => {
+          return imgDel({
+            name: params.name,
+          });
+        },
+        {
+          params: t.Object({
+            name: t.String(),
+          }),
+        },
+      )
+      .get(
+        "/imgs",
+        ({ query }) => {
+          return imgs({
+            search: query.search,
+            page: query.page,
+            count: query.count,
+          });
+        },
+        {
+          query: t.Optional(
+            t.Object({
+              page: t.Number({ default: 1 }),
+              count: t.Number({ default: 10 }),
+              search: t.String({ default: "" }),
+            }),
+          ),
+        },
+      )
+      .post(
+        "/upl-img",
+        ({ body }) => {
+          console.log(body.title);
+          return uplImg({ files: body.files });
+        },
+        {
+          body: t.Object({
+            title: t.String(),
+            files: t.Files({ multiple: true }),
+          }),
+        },
+      )
+      .post(
+        "/upl-img-single",
+        ({ body }) => {
+          return uplImgSingle({
+            fileName: body.name,
+            file: body.file,
+          });
+        },
+        {
+          body: t.Object({
+            name: t.String(),
+            file: t.File(),
+          }),
+        },
+      )
+      .post(
+        "/upl-csv-single",
+        ({ body }) => {
+          return uplCsvSingle({ fileName: body.name, file: body.file });
+        },
+        {
+          body: t.Object({
+            name: t.String(),
+            file: t.File(),
+          }),
+        },
+      )
+      .post(
+        "/upl-csv",
+        ({ body }) => {
+          return uplCsv({ files: body.files });
+        },
+        {
+          body: t.Object({
+            files: t.Files(),
+          }),
+        },
       ),
-    },
-  )
-  .delete(
-    "/img/:name",
-    ({ params }) => {
-      return imgDel({
-        name: params.name,
-        UPLOAD_DIR_IMAGE,
-      });
-    },
-    {
-      params: t.Object({
-        name: t.String(),
-      }),
-    },
-  )
-  .get(
-    "/imgs",
-    ({ query }) => {
-      return imgs({
-        search: query.search,
-        page: query.page,
-        count: query.count,
-        UPLOAD_DIR_IMAGE,
-      });
-    },
-    {
-      query: t.Optional(
-        t.Object({
-          page: t.Number({ default: 1 }),
-          count: t.Number({ default: 10 }),
-          search: t.String({ default: "" }),
-        }),
-      ),
-    },
-  )
-  .post(
-    "/upl-img",
-    ({ body }) => {
-      console.log(body.title);
-      return uplImg({ files: body.files, UPLOAD_DIR_IMAGE });
-    },
-    {
-      body: t.Object({
-        title: t.String(),
-        files: t.Files({ multiple: true }),
-      }),
-    },
-  )
-  .post(
-    "/upl-img-single",
-    ({ body }) => {
-      return uplImgSingle({
-        fileName: body.name,
-        file: body.file,
-        UPLOAD_DIR_IMAGE,
-      });
-    },
-    {
-      body: t.Object({
-        name: t.String(),
-        file: t.File(),
-      }),
-    },
-  )
-  .post(
-    "/upl-csv-single",
-    ({ body }) => {
-      return uplCsvSingle({ fileName: body.name, file: body.file });
-    },
-    {
-      body: t.Object({
-        name: t.String(),
-        file: t.File(),
-      }),
-    },
-  )
-  .post(
-    "/upl-csv",
-    ({ body }) => {
-      return uplCsv({ files: body.files });
-    },
-    {
-      body: t.Object({
-        files: t.Files(),
-      }),
-    },
   );
 
 export const GET = ApiServer.handle;

src/lib/minio.ts

@@ -0,0 +1,12 @@
+import { Client } from "minio";
+
+const minioClient = 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",
+});
+
+export const MINIO_BUCKET = process.env.MINIO_BUCKET!;
+
+export default minioClient;