- {!isFreeze ? (
- <>
-
- Ambil Gambar
+ {showDocumentSelection ? (
+
+
+
Pilih Jenis Dokumen
+
+ Silakan pilih jenis dokumen yang akan Anda scan
+
+
+ {/* New horizontal layout like in the image */}
+
+
+
+
+
+
+
+
-
atau
-
- Upload Gambar
-
-
handleManualUpload(e)}
- style={{ marginRight: 10, display: "none" }}
- />
-
- ) : loading ? (
-
- ) : (
- capturedImage &&
- (!fileTemp || fileTemp.error == undefined) && (
-
-
Tinjau Gambar
-
ReadImage(capturedImage)}
- >
- Scan
-
-
-
{
- setFileTemp(null);
- setIsFreeze(false);
- }}
- >
- Hapus
-
-
- )
- )}
- {fileTemp && fileTemp.error != "409" ? (
-
handleSaveTemp(data)}
+
+ ) : (
+ <>
+
- ) : (
- fileTemp && (
- <>
-
KTP Sudah Terdaftar
-
{
- setFileTemp(null);
- setIsFreeze(false);
- }}
- >
- Hapus
-
-
- )
- )}
-
+
+
-
setModalOpen(false)}
- loading={loading}
- fileTemp={fileTemp}
- onSave={handleSaveTemp}
- onDelete={handleDeleteTemp}
+
+ {/* Back button */}
+
+
+ {!isFreeze ? (
+ <>
+
+ Ambil Gambar{" "}
+ {getDocumentDisplayInfo(
+ selectedDocumentType
+ ).name.toUpperCase()}
+
+
atau
+
+ Upload Gambar
+
+
handleManualUpload(e)}
+ style={{ marginRight: 10, display: "none" }}
+ />
+
+ ) : loading ? (
+
+ ) : (
+ capturedImage &&
+ (!fileTemp || fileTemp.error == undefined) && (
+
+
Tinjau Gambar
+
ReadImage(capturedImage)}
+ >
+ Scan
+
+
+
{
+ setFileTemp(null);
+ setIsFreeze(false);
+ setCapturedImage(null); // Clear captured image on delete
+ setKTPdetected(false); // Reset KTP detected state
+ }}
+ style={{ cursor: "pointer", color: "#dc3545" }} // Add styling for delete
+ >
+ Hapus
+
+
+ )
+ )}
+ {fileTemp && fileTemp.error != "409" ? (
+
+ {/* Header untuk bagian save - sama seperti document selection */}
+
+
+
+ {getDocumentDisplayInfo(selectedDocumentType).icon}
+
+
+
+ Verifikasi Data{" "}
+ {getDocumentDisplayInfo(selectedDocumentType).name}
+
+
+ Silakan periksa dan lengkapi data{" "}
+ {getDocumentDisplayInfo(selectedDocumentType).fullName}
+
+
+
+
+
+
+ handleSaveTemp(data, selectedDocumentType)
+ }
+ />
+
+ ) : (
+ fileTemp &&
+ fileTemp.error == "409" && (
+ <>
+
Dokumen Sudah Terdaftar
+
{
+ setFileTemp(null);
+ setIsFreeze(false);
+ setCapturedImage(null); // Clear captured image on delete
+ setKTPdetected(false); // Reset KTP detected state
+ }}
+ style={{ cursor: "pointer", color: "#007bff" }} // Add styling for retry/clear
+ >
+ Coba Lagi
+
+
+ )
+ )}
+
);
@@ -676,19 +1129,332 @@ const spinnerStyle = `
}
`;
+// Modal styles
+const modalStyles = {
+ overlay: {
+ position: "fixed",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ zIndex: 1000,
+ },
+ modal: {
+ backgroundColor: "white",
+ borderRadius: "16px",
+ width: "90%",
+ maxWidth: "400px",
+ boxShadow: "0 10px 25px rgba(0, 0, 0, 0.2)",
+ maxHeight: "80vh", // Limit modal height
+ overflowY: "auto", // Enable scrolling for long forms
+ },
+ header: {
+ display: "flex",
+ justifyContent: "space-between",
+ alignItems: "center",
+ padding: "20px 20px 0 20px",
+ borderBottom: "1px solid #e9ecef",
+ marginBottom: "20px",
+ },
+ title: {
+ margin: 0,
+ fontSize: "18px",
+ fontWeight: "bold",
+ color: "#333",
+ },
+ closeButton: {
+ background: "none",
+ border: "none",
+ fontSize: "24px",
+ cursor: "pointer",
+ color: "#666",
+ padding: "0",
+ width: "30px",
+ height: "30px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ content: {
+ padding: "0 20px 20px 20px",
+ },
+ label: {
+ display: "block",
+ marginBottom: "8px",
+ fontWeight: "bold",
+ color: "#333",
+ fontSize: "14px",
+ },
+ input: {
+ width: "100%",
+ padding: "12px",
+ border: "2px solid #e9ecef",
+ borderRadius: "8px",
+ fontSize: "16px",
+ outline: "none",
+ transition: "border-color 0.3s ease",
+ boxSizing: "border-box",
+ },
+ formFieldRow: {
+ display: "flex",
+ alignItems: "center",
+ marginBottom: "10px",
+ gap: "10px",
+ },
+ fieldInput: {
+ flexGrow: 1,
+ padding: "10px",
+ border: "1px solid #ddd",
+ borderRadius: "8px",
+ fontSize: "15px",
+ boxSizing: "border-box",
+ },
+ removeFieldButton: {
+ background: "#dc3545",
+ color: "white",
+ border: "none",
+ borderRadius: "50%",
+ width: "30px",
+ height: "30px",
+ fontSize: "20px",
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ cursor: "pointer",
+ flexShrink: 0,
+ },
+ addFieldButton: {
+ background: "#007bff",
+ color: "white",
+ border: "none",
+ borderRadius: "8px",
+ padding: "10px 15px",
+ fontSize: "15px",
+ cursor: "pointer",
+ marginTop: "10px",
+ width: "100%",
+ },
+ footer: {
+ display: "flex",
+ gap: "10px",
+ padding: "20px",
+ borderTop: "1px solid #e9ecef",
+ },
+ cancelButton: {
+ flex: 1,
+ padding: "12px",
+ border: "2px solid #e9ecef",
+ borderRadius: "8px",
+ backgroundColor: "white",
+ color: "#666",
+ cursor: "pointer",
+ fontSize: "16px",
+ fontWeight: "bold",
+ },
+ submitButton: {
+ flex: 1,
+ padding: "12px",
+ border: "none",
+ borderRadius: "8px",
+ backgroundColor: "#429241",
+ color: "white",
+ cursor: "pointer",
+ fontSize: "16px",
+ fontWeight: "bold",
+ },
+};
+
const styles = {
- spinnerContainer: {
+ dashboardHeader: {
+ display: "flex",
+ justifyContent: "space-between",
+ alignItems: "center",
+ padding: "15px 20px",
+ backgroundColor: "#f8f9fa",
+ borderBottom: "1px solid #e9ecef",
+ boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
+ },
+ logoAndTitle: {
+ display: "flex",
+ alignItems: "center",
+ gap: "10px",
+ },
+ logo: {
+ width: "40px",
+ height: "40px",
+ borderRadius: "8px",
+ },
+ h1: {
+ margin: 0,
+ fontSize: "24px",
+ fontWeight: "bold",
+ color: "#333",
+ },
+ dropdownContainer: {
+ position: "relative",
+ },
+ dropdownToggle: {
+ background: "none",
+ border: "none",
+ cursor: "pointer",
+ padding: "8px",
+ borderRadius: "8px",
+ transition: "background-color 0.2s",
+ },
+ dropdownMenu: {
+ position: "absolute",
+ top: "100%",
+ right: 0,
+ backgroundColor: "white",
+ borderRadius: "8px",
+ boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+ minWidth: "120px",
+ zIndex: 100,
+ marginTop: "10px",
+ overflow: "hidden", // Ensures rounded corners apply to children
+ },
+ dropdownItem: {
+ display: "block",
+ width: "100%",
+ padding: "10px 15px",
+ border: "none",
+ backgroundColor: "transparent",
+ textAlign: "left",
+ cursor: "pointer",
+ fontSize: "16px",
+ color: "#333",
+ transition: "background-color 0.2s",
+ },
+ selectionContainer: {
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ minHeight: "calc(100vh - 70px)", // Adjust based on header height
+ padding: "20px",
+ boxSizing: "border-box",
+ backgroundColor: "#f0f2f5",
+ },
+ selectionContent: {
+ backgroundColor: "white",
+ borderRadius: "16px",
+ padding: "30px",
textAlign: "center",
- padding: 40,
+ boxShadow: "0 8px 20px rgba(0,0,0,0.1)",
+ maxWidth: "600px",
+ width: "100%",
+ },
+ selectionTitle: {
+ fontSize: "28px",
+ fontWeight: "bold",
+ marginBottom: "10px",
+ color: "#333",
+ },
+ selectionSubtitle: {
+ fontSize: "16px",
+ color: "#666",
+ marginBottom: "30px",
+ },
+ documentGrid: {
+ display: "grid",
+ gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
+ gap: "20px",
+ justifyContent: "center",
+ },
+ documentCard: {
+ backgroundColor: "#f8f9fa",
+ borderRadius: "12px",
+ padding: "20px",
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ justifyContent: "center",
+ gap: "10px",
+ cursor: "pointer",
+ border: "1px solid #e9ecef",
+ transition: "transform 0.2s, box-shadow 0.2s",
+ },
+ documentIconContainer: {
+ width: "60px",
+ height: "60px",
+ borderRadius: "50%",
+ backgroundColor: "#e0f7fa", // Light blue for icons
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ },
+ documentIcon: {
+ fontSize: "30px",
+ },
+ plusIcon: {
+ fontSize: "40px",
+ color: "#43a0a7",
+ fontWeight: "200",
+ },
+ documentLabel: {
+ fontSize: "15px",
+ fontWeight: "bold",
+ color: "#333",
+ textTransform: "capitalize",
+ },
+ backButton: {
+ backgroundColor: "#6c757d",
+ color: "white",
+ padding: "10px 15px",
+ borderRadius: "8px",
+ border: "none",
+ fontSize: "14px",
+ fontWeight: "bold",
+ cursor: "pointer",
+ marginBottom: "15px",
+ width: "100%",
+ },
+ spinnerContainer: {
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ height: "100px", // Adjust as needed
},
spinner: {
border: "4px solid #f3f3f3",
- borderTop: "4px solid #3498db",
+ borderTop: "4px solid #429241",
borderRadius: "50%",
- width: 40,
- height: 40,
+ width: "40px",
+ height: "40px",
animation: "spin 1s linear infinite",
- margin: "0 auto",
+ },
+ saveHeader: {
+ backgroundColor: "#e0f7fa",
+ borderRadius: "12px",
+ padding: "15px",
+ marginBottom: "20px",
+ display: "flex",
+ alignItems: "center",
+ gap: "15px",
+ },
+ saveHeaderContent: {
+ display: "flex",
+ alignItems: "center",
+ gap: "15px",
+ },
+ saveHeaderIcon: {
+ fontSize: "30px",
+ },
+ saveHeaderText: {
+ textAlign: "left",
+ },
+ saveHeaderTitle: {
+ fontSize: "18px",
+ fontWeight: "bold",
+ color: "#212529",
+ },
+ saveHeaderSubtitle: {
+ fontSize: "14px",
+ color: "#495057",
},
};
+
export default CameraCanvas;
diff --git a/src/Login.js b/src/Login.js
index 71742c3..80914da 100644
--- a/src/Login.js
+++ b/src/Login.js
@@ -18,7 +18,7 @@ const Login = () => {
try {
const loginResponse = await fetch(
- "https://bot.kediritechnopark.com/webhook/login/psi",
+ "https://bot.kediritechnopark.com/webhook/solid-data/login",
{
method: "POST",
headers: {
@@ -48,8 +48,8 @@ const Login = () => {
return (
-
-
Kawal PSI
+
+
SOLID DATA
Silakan masuk untuk melanjutkan ke dashboard
diff --git a/src/Login.module.css b/src/Login.module.css
index 09cfcf7..b2a6db5 100644
--- a/src/Login.module.css
+++ b/src/Login.module.css
@@ -28,9 +28,8 @@
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
- color: #ef4444; /* ๐ด Warna merah PSI */
+ color: #43a0a7;
}
-
.subtitle {
font-size: 14px;
color: #6b7280;
@@ -56,7 +55,7 @@
}
.button {
- background-color: #ef4444; /* ๐ด Warna merah PSI */
+ background-color: #43a0a7;
color: #ffffff;
padding: 12px 24px;
border-radius: 24px;
@@ -69,7 +68,7 @@
}
.button:hover {
- background-color: #b71c1c; /* versi lebih gelap saat hover */
+ background-color: #357734; /* darker shade of #43a0a7 */
}
.error {
diff --git a/src/ProfileTab.js b/src/ProfileTab.js
index 70581c4..40f33c2 100644
--- a/src/ProfileTab.js
+++ b/src/ProfileTab.js
@@ -1,14 +1,15 @@
import React, { useState, useRef, useEffect } from "react";
import { useNavigate } from "react-router-dom";
-import styles from "./ProfileTab.module.css";
+import dashboardStyles from "./Dashboard.module.css";
+import profileStyles from "./ProfileTab.module.css";
const ProfileTab = () => {
const menuRef = useRef(null);
const navigate = useNavigate();
const [isEditing, setIsEditing] = useState(false);
const [isMenuOpen, setIsMenuOpen] = useState(false);
- const [profile, setProfile] = useState({});
- const [profileTemp, setProfileTemp] = useState({});
+ const [user, setUser] = useState({});
+ const [userTemp, setUserTemp] = useState({});
useEffect(() => {
const handleClickOutside = (event) => {
@@ -27,34 +28,62 @@ const ProfileTab = () => {
};
useEffect(() => {
- const dummyProfile = {
- username: "admin",
+ const verifyTokenAndFetchData = async () => {
+ const token = localStorage.getItem("token");
+ if (!token) {
+ window.location.href = "/login";
+ return;
+ }
+
+ try {
+ const response = await fetch(
+ "https://bot.kediritechnopark.com/webhook/solid-data/dashboard",
+ {
+ method: "GET",
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ );
+
+ const data = await response.json();
+
+ if (!response.ok || !data[0].username) {
+ throw new Error("Unauthorized");
+ }
+
+ setUser(data[0]);
+ setUserTemp(data[0]);
+ } catch (error) {
+ console.error("Token tidak valid:", error.message);
+ localStorage.removeItem("token");
+ window.location.href = "/login";
+ }
};
- setProfile(dummyProfile);
- setProfileTemp(dummyProfile);
+ verifyTokenAndFetchData();
}, []);
const handleChange = (e) => {
const { name, value } = e.target;
- setProfile((prev) => ({ ...prev, [name]: value }));
+ setUser((prev) => ({ ...prev, [name]: value }));
};
const handleSave = async () => {
try {
- if (!profile.oldPassword || !profile.newPassword) {
+ if (!user.oldPassword || !user.newPassword) {
alert("Password lama dan baru tidak boleh kosong.");
return;
}
const payload = {
- username: profile.username,
- oldPassword: profile.oldPassword,
- newPassword: profile.newPassword,
+ username: user.username,
+ oldPassword: user.oldPassword,
+ newPassword: user.newPassword,
};
const response = await fetch(
- "https://bot.kediritechnopark.com/webhook/reset-password/psi",
+ "https://bot.kediritechnopark.com/webhook/solid-data/reset-password",
{
method: "PUT",
headers: {
@@ -77,21 +106,26 @@ const ProfileTab = () => {
const handleCancel = () => {
setIsEditing(false);
- setProfile(profileTemp);
+ setUser(userTemp);
};
return (
-
-
-
-
-
Kawal PSI Profile
+
+
+
+
+
SOLID
+
+ DATA
+
-
+
-
{isMenuOpen && (
-
+
+
@@ -134,43 +176,43 @@ const ProfileTab = () => {
-
-
-
-
+
+
+
+
Account
{!isEditing ? (
) : (
-
+
-
)}
-
+
{!isEditing && (
-
-
+
+
@@ -179,25 +221,25 @@ const ProfileTab = () => {
{isEditing && (
<>
-
-
-
- ยฉ 2025 Kediri Technopark โข Dermalounge AI Admin
+
+ ยฉ 2025 Kediri Technopark โข Dashboard SOLID DATA
);
diff --git a/src/ProfileTab.module.css b/src/ProfileTab.module.css
index aff1414..ccf028a 100644
--- a/src/ProfileTab.module.css
+++ b/src/ProfileTab.module.css
@@ -1,4 +1,4 @@
-/* ProfileTab.module.css - Modern Design */
+/* ProfileTab.module.css - Modern Design with Unified Header */
/* Modern Color Palette */
:root {
@@ -14,7 +14,7 @@
--neutral-800: #262626;
--neutral-900: #171717;
--white: #ffffff;
- --success-green: #10b981;
+ --success-green: #43a0a7;
--warning-amber: #f59e0b;
--error-red: #ef4444;
--text-primary: #0f172a;
@@ -50,6 +50,7 @@ body {
flex-direction: column;
}
+/* --- UNIFIED HEADER (sama dengan Dashboard.css) --- */
.dashboardHeader {
background-color: var(--white);
color: var(--text-primary);
@@ -58,7 +59,7 @@ body {
justify-content: space-between;
align-items: center;
box-shadow: var(--shadow-sm);
- border-bottom: 3px solid #ef4444;
+ border-bottom: 3px solid #43a0a7; /* Warna dari Dashboard.css */
position: sticky;
top: 0;
z-index: 50;
@@ -80,10 +81,18 @@ body {
}
.dashboardHeader .h1 {
+ margin: 2px; /* Sama dengan Dashboard.css */
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: #43a0a7; /* Warna dari Dashboard.css */
+ letter-spacing: -0.025em;
+}
+
+.data {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
- color: #ed4344;
+ color: #154666;
letter-spacing: -0.025em;
}
@@ -96,6 +105,12 @@ body {
flex-shrink: 0;
}
+.userDisplayName {
+ color: var(--text-secondary);
+ font-weight: 500;
+ font-size: 0.875rem;
+}
+
.dropdownToggle {
background-color: var(--neutral-100);
color: var(--text-primary);
@@ -155,7 +170,7 @@ body {
margin-bottom: 0;
}
-/* Main Content */
+/* --- MAIN CONTENT --- */
.mainContent {
flex-grow: 1;
padding: 2rem 1.5rem;
@@ -205,7 +220,7 @@ body {
}
.editButton {
- background-color: #ef4444;
+ background-color: #43a0a7; /* Diseragamkan dengan warna header */
color: var(--text-light);
border: none;
padding: 0.75rem 1.5rem;
@@ -218,7 +233,7 @@ body {
}
.editButton:hover {
- background-color: var(--dark-blue);
+ background-color: #357734;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
@@ -328,7 +343,11 @@ body {
}
.licenseCard {
- background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+ background: linear-gradient(
+ 135deg,
+ #43a0a7 0%,
+ #357734 100%
+ ); /* Diseragamkan dengan warna header */
color: var(--text-light);
padding: 1.5rem;
border-radius: 1rem;
@@ -421,7 +440,7 @@ body {
border-top: 1px solid var(--border-light);
}
-/* Responsive Design */
+/* --- RESPONSIVE DESIGN --- */
@media (min-width: 768px) {
.dashboardHeader {
padding: 1rem 2rem;
@@ -436,6 +455,10 @@ body {
font-size: 1.75rem;
}
+ .userDisplayName {
+ font-size: 0.875rem;
+ }
+
.mainContent {
padding: 2.5rem 2rem;
gap: 2.5rem;
diff --git a/src/ShowImage.js b/src/ShowImage.js
index 8628fc0..a3b8e9c 100644
--- a/src/ShowImage.js
+++ b/src/ShowImage.js
@@ -18,7 +18,7 @@ const ShowImage = () => {
try {
const response = await fetch(
- `https://bot.kediritechnopark.com/webhook/0f4420a8-8517-49ba-8ec5-75adde117813/ktp/img/${nik}`,
+ `https://bot.kediritechnopark.com/webhook/ed467164-05c0-4692-bb81-a8f13116bb1b/ktp/img/ikasapta/:nik/${nik}`,
{
method: "GET",
headers: {
- )}
-
-