chore(localization): merge upstream updates and preserve C4A keys

Reviewed-on: #2

groups/C4A/index.html

@@ -1150,7 +1150,8 @@
                 <span
                     class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas
                     Halaman Statis</span>
-                <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Judul Halaman Group 04</h1>
+                <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Staf Pendukung dan Standar Operasional
+                    Prosedur (SOP)</h1>
                 <p class="text-slate-500 text-sm">Kelompok 04 &mdash; C4A &nbsp;&middot;&nbsp; Informatika UNTAN 2026
                 </p>
             </div>
@@ -1162,7 +1163,7 @@
                         <div class="c4a-hero-tag">LAYANAN AKADEMIK &bull; INFORMATIKA UNTAN
                         </div>
                         <h1 class="c4a-hero-title">
-                            Staf Pendukung &amp; <br/>
+                            Staf Pendukung &amp; <br />
                             <span class="highlight-orange">Standar Operasional Prosedur (SOP)</span>
                         </h1>
                         <p class="c4a-hero-desc">Halaman ini menampilkan informasi petugas

groups/C4A/js/data.js

@@ -52,3 +52,5 @@ export async function getFaqData() {
         return [];
     }
 }
+
+

groups/C4A/js/main.js

@@ -10,12 +10,14 @@ import {
     renderFaqSection,
     initSopInteraction,
     initAnimations,
-    initFaq
+    initFaq,
+    applySopFilter
 } from './ui.js';
 
 // Cache data secara global untuk mendukung rendering UI
 let cachedStaffData = [];
 let cachedSopData = [];
+let cachedFaqData = [];
 
 /**
  * Menginisialisasi aplikasi dengan mengambil seluruh data secara pararel,
@@ -32,10 +34,11 @@ async function initApp() {
 
         cachedStaffData = staffData || [];
         cachedSopData = sopData || [];
+        cachedFaqData = faqData || [];
 
         renderStaffCards(cachedStaffData);
         renderSopCards(cachedSopData);
-        renderFaqSection(faqData || []);
+        renderFaqSection(cachedFaqData);
 
         initSopInteraction();
         initFaq();
@@ -45,12 +48,24 @@ async function initApp() {
             initAnimations();
         }, 100);
     } catch (error) {
-        console.error('Terjadi kesalahan saat menginisialisasi aplikasi C4A:', error);
+        console.error('Terjadi kesalahan saat menginisialisasi halaman:', error);
     }
 }
 
-// NOTE: Fitur bilingual sudah dihapus - languageChanged listener tidak lagi diperlukan
+// Re-render UI saat bahasa berubah (data tetap sama, hanya label UI yang berganti via t())
-// Silakan hapus atau archive jika ada implementasi global untuk bahasa
+document.addEventListener('languageChanged', () => {
+    renderStaffCards(cachedStaffData);
+    renderSopCards(cachedSopData);
+    renderFaqSection(cachedFaqData);
+    initFaq();
+    applySopFilter();
+
+    // Re-inisialisasi observer agar elemen .reveal yang baru di-render mendapat class .visible
+    setTimeout(() => {
+        initAnimations();
+    }, 100);
+});
 
 // Jalankan inisialisasi aplikasi saat DOM siap
 document.addEventListener('DOMContentLoaded', initApp);
+

groups/C4A/js/ui.js

@@ -1,5 +1,17 @@
 // --- Helper Fungsi ---
 
+/**
+ * Helper untuk menerjemahkan string berdasarkan key dari localization.js.
+ * Menggunakan fallback jika key tidak ditemukan atau localization.js tidak aktif.
+ */
+function t(key, fallback) {
+    if (window.t) {
+        const val = window.t(key);
+        if (val !== key) return val;
+    }
+    return fallback;
+}
+
 /**
  * Normalisasi nomor telepon ke format standard e.g. 628...
  * @param {string} phone - Nomor telepon mentah
@@ -70,7 +82,7 @@ export function renderStaffCards(staffs) {
     container.innerHTML = '';
 
     if (!staffs || staffs.length === 0) {
-        container.innerHTML = `<p class="empty-state-msg">Data staf pendukung tidak tersedia saat ini.</p>`;
+        container.innerHTML = `<p class="empty-state-msg">${t('grp_c4a_empty_staff', 'Data staf pendukung tidak tersedia saat ini.')}</p>`;
         return;
     }
 
@@ -88,8 +100,8 @@ export function renderStaffCards(staffs) {
 
         const scheduleHTML = schedule.map(sched =>
             `<div class="schedule-item">` +
-                `<span class="s-day">${sched.day}</span>` +
+            `<span class="s-day">${sched.day}</span>` +
-                `<span class="s-time">${sched.time} <span class="s-break">| ${sched.break}</span></span>` +
+            `<span class="s-time">${sched.time} <span class="s-break">| ${sched.break}</span></span>` +
             `</div>`
         ).join('');
 
@@ -117,23 +129,24 @@ export function renderStaffCards(staffs) {
       </div>
       <div class="staff-card-body">
         <div class="staff-info-grid">
-          <div class="staff-info-item"><span class="icon">📍</span><div><span class="label">Lokasi</span><span class="val">${location}</span></div></div>
+          <div class="staff-info-item"><span class="icon">📍</span><div><span class="label">${t('grp_c4a_label_location', 'Lokasi')}</span><span class="val">${location}</span></div></div>
           <div class="staff-info-item">
             <span class="icon">🕒</span>
             <div style="flex:1">
-              <span class="label">Jam Layanan</span>
+              <span class="label">${t('grp_c4a_label_service_hours', 'Jam Layanan')}</span>
               <div class="schedule-list">${scheduleHTML}</div>
             </div>
           </div>
-          <div class="staff-info-item staff-contact-item ${hideContactItemClass}"><span class="icon">📞</span><div><span class="label">Kontak WhatsApp</span><span class="val">${displayPhone}</span></div></div>
+          <div class="staff-info-item staff-contact-item ${hideContactItemClass}"><span class="icon">📞</span><div><span class="label">${t('grp_c4a_label_wa_contact', 'Kontak WhatsApp')}</span><span class="val">${displayPhone}</span></div></div>
         </div>
         <div class="staff-divider"></div>
-        <div class="staff-tasks-title">Tugas & Tanggung Jawab</div>
+        <div class="staff-tasks-title">${t('grp_c4a_label_tasks', 'Tugas & Tanggung Jawab')}</div>
         <ul class="staff-tasks">${tasksHTML}</ul>
       </div>
       <div class="staff-card-actions staff-contact-actions ${hideContactActionClass}">
-        <button class="btn-staff btn-staff-wa" data-wa="${encodedPhone}" aria-label="Kirim Pesan WA ${name}"><svg class="wa-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg> Kirim Pesan WA</button>
+        <button class="btn-staff btn-staff-wa" data-wa="${encodedPhone}" aria-label="${t('grp_c4a_label_send_wa', 'Kirim Pesan WA')} ${name}"><svg class="wa-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg> ${t('grp_c4a_label_send_wa', 'Kirim Pesan WA')}</button>
       </div>
+
     `;
 
         container.appendChild(card);
@@ -165,8 +178,11 @@ const CATEGORY_COLORS = {
  * @returns {string} Label kategori
  */
 function getCatLabel(category) {
-    const map = { akademik: 'Akademik', praktikum: 'Praktikum' };
+    const map = {
-    return map[category] || 'Akademik';
+        akademik: t('grp_c4a_sop_chip_akademik', 'Akademik'),
+        praktikum: t('grp_c4a_sop_chip_praktikum', 'Praktikum')
+    };
+    return map[category] || t('grp_c4a_sop_chip_akademik', 'Akademik');
 }
 
 /**
@@ -204,10 +220,10 @@ function buildSopCard(sop) {
       <div class="sgc-footer">
         <div class="sgc-steps">
           <i class="fas fa-list-ol"></i>
-          <span>${procedures.length} Langkah</span>
+          <span>${procedures.length} ${t('grp_c4a_label_steps', 'Langkah')}</span>
         </div>
-        <button class="sgc-detail-btn" data-tab-id="${tabId}" aria-label="Lihat Detail ${title}">
+        <button class="sgc-detail-btn" data-tab-id="${tabId}" aria-label="${t('grp_c4a_label_view_detail', 'Lihat Detail')} ${title}">
-          Lihat Detail <i class="fas fa-arrow-right"></i>
+          ${t('grp_c4a_label_view_detail', 'Lihat Detail')} <i class="fas fa-arrow-right"></i>
         </button>
       </div>
     </article>`;
@@ -244,7 +260,7 @@ function buildSopModalContent(sop) {
         : '';
     const staffBlockHTML = hasStaff
         ? `<div class="sop-staff-block">
-        <div class="sop-block-label">Staf Bertanggung Jawab (Bersifat Opsional)</div>
+        <div class="sop-block-label">${t('grp_c4a_label_responsible_staff', 'Staf Bertanggung Jawab (Bersifat Opsional)')}</div>
         <div class="sop-staff-pills">${staffHTML}</div>
       </div>`
         : '';
@@ -253,7 +269,7 @@ function buildSopModalContent(sop) {
     const additionalInfoHTML = additionalInfo
         ? `<div class="sop-info-box">
         <span class="iico">ℹ️</span>
-        <p class="sop-info-box-text"><strong>Informasi Tambahan (Bersifat Opsional):</strong> ${additionalInfo}</p>
+        <p class="sop-info-box-text"><strong>${t('grp_c4a_label_additional_info', 'Informasi Tambahan (Bersifat Opsional):')}</strong> ${additionalInfo}</p>
       </div>`
         : '';
 
@@ -274,16 +290,16 @@ function buildSopModalContent(sop) {
     </div>
     <div class="sop-modal-body">
       <div class="sop-block">
-        <div class="sop-block-label">Tujuan</div>
+        <div class="sop-block-label">${t('grp_c4a_label_purpose', 'Tujuan')}</div>
         <p class="sop-block-text">${purpose}</p>
       </div>
       <div class="sop-two-col">
         <div>
-          <div class="sop-block-label">Persyaratan</div>
+          <div class="sop-block-label">${t('grp_c4a_label_requirements', 'Persyaratan')}</div>
           <ul class="sop-list bullets">${reqsHTML}</ul>
         </div>
         <div>
-          <div class="sop-block-label">Alur Prosedur</div>
+          <div class="sop-block-label">${t('grp_c4a_label_procedure', 'Alur Prosedur')}</div>
           <ul class="sop-list numbered">${procsHTML}</ul>
         </div>
       </div>
@@ -305,7 +321,7 @@ export function renderSopCards(sops) {
 
     // Tampilkan pesan jika data SOP kosong atau gagal dimuat
     if (!sops || sops.length === 0) {
-        container.innerHTML = `<p class="empty-state-msg">Data SOP tidak tersedia saat ini.</p>`;
+        container.innerHTML = `<p class="empty-state-msg">${t('grp_c4a_empty_sop', 'Data SOP tidak tersedia saat ini.')}</p>`;
         updateResultInfo(0, 0);
         return;
     }
@@ -319,16 +335,18 @@ function updateResultInfo(shown, total) {
     const el = document.getElementById('sop-result-info');
     if (!el) return;
     if (shown === total) {
-        el.textContent = `Menampilkan ${total} SOP`;
+        const allTemplate = t('grp_c4a_sop_showing_all', 'Menampilkan {total} SOP');
+        el.textContent = allTemplate.replace('{total}', total);
     } else {
-        el.textContent = `Menampilkan ${shown} dari ${total} SOP`;
+        const filteredTemplate = t('grp_c4a_sop_showing_filtered', 'Menampilkan {shown} dari {total} SOP');
+        el.textContent = filteredTemplate.replace('{shown}', shown).replace('{total}', total);
     }
 }
 
 /**
  * Memfilter dan menyaring kartu SOP berdasarkan query pencarian dan chip filter aktif.
  */
-function applySopFilter() {
+export function applySopFilter() {
     const container = document.getElementById('sop-cards-container');
     if (!container) return;
 
@@ -358,6 +376,7 @@ function applySopFilter() {
     updateResultInfo(visibleCount, cards.length);
 }
 
+
 /**
  * Membuka modal detail untuk SOP tertentu berdasarkan tab_id.
  * @param {string} tabId - ID unik tab/SOP yang ingin ditampilkan
@@ -595,10 +614,11 @@ export function renderFaqSection(faqs) {
     if (!container) return;
 
     if (!faqs || faqs.length === 0) {
-        container.innerHTML = `<p class="empty-state-msg">Data FAQ tidak tersedia saat ini.</p>`;
+        container.innerHTML = `<p class="empty-state-msg">${t('grp_c4a_empty_faq', 'Data FAQ tidak tersedia saat ini.')}</p>`;
         return;
     }
 
+
     const delayClasses = ['reveal-delay-1', 'reveal-delay-2', 'reveal-delay-3'];
 
     const itemsHTML = faqs.map((faq, index) => {