docs(c4a): add readme for data management and template

groups/C4A/README.md

@@ -0,0 +1,86 @@
+# Panduan Pengelolaan Data Kelompok C4A
+
+Dokumentasi ini dibuat untuk memudahkan pengembang atau pengguna berikutnya dalam mengelola data Staf Pendukung, SOP, dan FAQ pada halaman C4A.
+
+---
+
+## 📋 Aturan Umum Pengelolaan Data
+
+1. **Lokasi Berkas Data**:
+   Seluruh data disimpan dalam format JSON di direktori `groups/C4A/data/`:
+   - Data Staf: `groups/C4A/data/data-staff.json`
+   - Data SOP: `groups/C4A/data/data-sop.json`
+   - Data FAQ: `groups/C4A/data/data-faq.json`
+
+2. **Ikon FontAwesome (v4)**:
+   Jika ingin mengubah atau menambahkan logo/ikon pada data SOP, harap gunakan daftar ikon dari **FontAwesome v4** melalui tautan berikut:
+   👉 **[FontAwesome v4 Icons](https://fontawesome.com/v4/icons/)** (Contoh penggunaan: `fa-dot-circle-o`, `fa-graduation-cap`, `fa-flask`).
+
+3. **Field Opsional**:
+   Pada data SOP, properti **`staff_responsible`** (Staf Bertanggung Jawab) dan **`additional_info`** (Informasi Tambahan) bersifat **opsional**. Jika informasi tersebut tidak tersedia, kosongkan nilainya atau hapus propertinya dari JSON agar UI secara otomatis menyembunyikan bloknya.
+
+---
+
+## 🛠️ Template Penambahan Data
+
+Silakan salin-tempel (copy-paste) format di bawah ini ke dalam array JSON yang sesuai di folder `data/` untuk menambahkan data baru.
+
+### 1. Template Data Staf (`data-staff.json`)
+```json
+{
+    "id": 3,
+    "name": "Nama Staf Beserta Gelar",
+    "role": "Peran / Jabatan Staf",
+    "image": "assets/images/nama-file-foto.png",
+    "location": "Lokasi Ruang Kerja / Kantor Staf",
+    "contact_consent": true,
+    "phone": "628xxxxxxxxxx",
+    "schedule": [
+        {
+            "day": "Hari Kerja (contoh: Senin – Jumat)",
+            "time": "Jam Kerja (contoh: 07.30–16.00 WIB)",
+            "break": "Jam Istirahat (contoh: istirahat 12.00–13.00 WIB)"
+        }
+    ],
+    "tasks": [
+        "Tugas dan tanggung jawab utama 1",
+        "Tugas dan tanggung jawab utama 2"
+    ]
+}
+```
+*Catatan: Letakkan file gambar/foto staf ke dalam direktori `groups/C4A/assets/images/` dan masukkan nama berkas fotonya pada properti `image` di atas. Untuk nomor telepon (`phone`), Anda dapat menggunakan format `08xxxxxxxxxx` atau `628xxxxxxxxxx` karena skrip JavaScript akan melakukan normalisasi secara otomatis.*
+
+### 2. Template Data SOP (`data-sop.json`)
+```json
+{
+    "tab_id": "id-unik-sop-tanpa-spasi",
+    "tab_number": 9,
+    "category": "akademik", 
+    "icon": "fa-file-text",
+    "title": "Judul Lengkap SOP",
+    "description": "Deskripsi singkat mengenai SOP ini.",
+    "purpose": "Tujuan dibuatnya standar operasional prosedur ini.",
+    "requirements": [
+        "Persyaratan administratif/akademik 1",
+        "Persyaratan administratif/akademik 2"
+    ],
+    "procedures": [
+        "Langkah alur prosedur ke-1",
+        "Langkah alur prosedur ke-2"
+    ],
+    "staff_responsible": [
+        "👤 Staf Administrasi Informatika"
+    ],
+    "additional_info": "Informasi tambahan penting."
+}
+```
+*Catatan: Properti `category` bernilai antara `"akademik"` atau `"praktikum"`. Properti `staff_responsible` dan `additional_info` bersifat opsional.*
+
+### 3. Template Data FAQ (`data-faq.json`)
+```json
+{
+    "id": 11,
+    "question": "Pertanyaan yang sering diajukan?",
+    "answer": "Jawaban dari pertanyaan tersebut. Boleh menggunakan tag HTML seperti <strong>tebal</strong>."
+}
+```