From 3e3ca69fee64eeb7efb1b7a14a65a3a8ef80e1a8 Mon Sep 17 00:00:00 2001
From: zadit biasa aja <75159257+everythingonblack@users.noreply.github.com>
Date: Sat, 5 Jul 2025 10:03:52 +0000
Subject: [PATCH] ok

---
 src/Dashboard.js                 |  4 ++--
 src/FileListComponent.js         | 23 ++++++++++++++++++++++-
 src/FileListComponent.module.css |  3 +--
 src/Login.js                     |  2 +-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/Dashboard.js b/src/Dashboard.js
index 1f5a300..849ad2f 100644
--- a/src/Dashboard.js
+++ b/src/Dashboard.js
@@ -130,7 +130,7 @@ const Dashboard = () => {
       <div className={styles.dashboardHeader}>
         <div className={styles.logoAndTitle}>
           <img src="/PSI.png" alt="Bot Avatar" />
-          <h1 className={styles.h1}>PSI Dashboard</h1>
+          <h1 className={styles.h1}>Kawal PSI Dashboard</h1>
         </div>
 
         <div className={styles.dropdownContainer} ref={menuRef}>
@@ -248,7 +248,7 @@ const Dashboard = () => {
           )}
 
           <div className={styles.chartSection}>
-            <h2>Performa Pengiriman File</h2>
+            <h2>Grafik Pertumbuhan Anggota</h2>
             {officerPerformanceData.length > 0 ? (
               <div className={styles.chartPlaceholder}>
                 📊 Grafik performa akan ditampilkan di sini
diff --git a/src/FileListComponent.js b/src/FileListComponent.js
index dfebe2b..0543935 100644
--- a/src/FileListComponent.js
+++ b/src/FileListComponent.js
@@ -65,6 +65,11 @@ const FileListComponent = () => {
         return;
       }
 
+      // Validasi URL gambar (opsional)
+      if (data.foto_url && !data.foto_url.match(/\.(jpg|jpeg|png)$/i)) {
+        console.warn("URL foto bukan format gambar yang didukung.");
+      }
+
       setSelectedFile(data);
     } catch (error) {
       console.error("Gagal mengambil detail:", error.message || error);
@@ -90,7 +95,7 @@ const FileListComponent = () => {
   return (
     <div className={styles.fileListSection}>
       <div className={styles.fileListHeader}>
-        <h2 className={styles.fileListTitle}>📁 Daftar File</h2>
+        <h2 className={styles.fileListTitle}>📁 Daftar Anggota</h2>
         <span className={styles.fileCount}>{files.length} file tersedia</span>
       </div>
 
@@ -146,6 +151,22 @@ const FileListComponent = () => {
             className={styles.modalContent}
             onClick={(e) => e.stopPropagation()}
           >
+            {/* Foto KTP */}
+            {selectedFile.foto_url && (
+              <img
+                src={selectedFile.foto_url}
+                alt={`Foto KTP - ${selectedFile.nik}`}
+                style={{
+                  width: "100%",
+                  maxHeight: "300px",
+                  objectFit: "contain",
+                  marginBottom: "1rem",
+                  borderRadius: "8px",
+                  boxShadow: "0 2px 6px rgba(0,0,0,0.2)",
+                }}
+              />
+            )}
+
             <h3>🪪 Detail Data KTP</h3>
             <table className={styles.detailTable}>
               <tbody>
diff --git a/src/FileListComponent.module.css b/src/FileListComponent.module.css
index 5415ee8..f54da0f 100644
--- a/src/FileListComponent.module.css
+++ b/src/FileListComponent.module.css
@@ -263,6 +263,7 @@
   border-collapse: collapse;
   margin-bottom: 1.5rem;
   font-size: 0.875rem;
+  text-align: left;
 }
 
 .detailTable tr:nth-child(even) {
@@ -469,8 +470,6 @@
 
   .closeButton {
     padding: 0.875rem 2rem;
-    width: auto;
-    margin-left: auto;
     display: block;
   }
 }
diff --git a/src/Login.js b/src/Login.js
index c948aa2..71742c3 100644
--- a/src/Login.js
+++ b/src/Login.js
@@ -49,7 +49,7 @@ const Login = () => {
     <div className={styles.loginContainer}>
       <div className={styles.loginBox}>
         <img src="/PSI.png" alt="Logo" className={styles.logo} />
-        <h1 className={styles.h1}>KTP Scanner login</h1>
+        <h1 className={styles.h1}>Kawal PSI</h1>
         <p className={styles.subtitle}>
           Silakan masuk untuk melanjutkan ke dashboard
         </p>