ok

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

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>

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;
   }
 }

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>