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

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

// 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):

// 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:

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:

// 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:

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:

// 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:

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:

// ❌ 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:

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:

// Line ~65
console.error("Load profile error:", msg);

// edit/page.tsx - Line ~65
console.error("Error updating profile:", error);

Rekomendasi: Gunakan conditional logging:

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:

// 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:

// 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:

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

// 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:

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:

// 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:

<Text fw="bold">Nama PPID</Text>

Priority: 🟢 Low
Effort: Low

---

9. Image Label Text Size

Lokasi: edit/page.tsx

Masalah:

// 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:

<Text fz={"md"} fw={"bold"}>Foto Profil PPID</Text>

Priority: 🟢 Low
Effort: Low

---

10. Dropzone Accept Format

Lokasi: edit/page.tsx

Masalah:

// Line ~190
accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}

// Missing mime type specifications

Rekomendasi: Add full mime types:

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:

// 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:

// 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:

// 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:

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:

🔴 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

🔴 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 📄