diff --git a/package-lock.json b/package-lock.json index ec363f9..274c3b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14101,15 +14101,6 @@ "node": ">= 0.8.0" } }, -<<<<<<< HEAD - "node_modules/set-blocking": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", - "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==", - "optional": true - }, -======= ->>>>>>> b9b4e4c859bd8face05c8d89d7f0c914d9e84a04 "node_modules/set-cookie-parser": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", diff --git a/src/App.js b/src/App.js index 8d7c5d9..3c97b2a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,10 @@ -<<<<<<< HEAD -import { Routes, Route } from "react-router-dom"; -======= import "./App.css"; import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; import Dashboard from "./Dashboard"; - import Login from "./Login"; ->>>>>>> b9b4e4c859bd8face05c8d89d7f0c914d9e84a04 import CameraKtp from "./KTPScanner"; -import Dashboard from "./Dashboard"; import "./App.css"; @@ -23,23 +17,11 @@ const ProtectedRoute = ({ element }) => { function App() { return (
-<<<<<<< HEAD - } /> + } /> } /> + } />} /> -======= - - - } /> - } /> - } />} - /> - - ->>>>>>> b9b4e4c859bd8face05c8d89d7f0c914d9e84a04
); } diff --git a/src/Dashboard.js b/src/Dashboard.js index f349952..e5dc806 100644 --- a/src/Dashboard.js +++ b/src/Dashboard.js @@ -1,24 +1,3 @@ -<<<<<<< HEAD -import React from "react"; -import styles from "./Dashboard.module.css"; -import Header from "./components/Header"; -import Sidebar from "./components/Sidebar"; -import RoleCard from "./components/RoleCard"; -import Chart from "./components/Chart"; - -const Dashboard = () => { - return ( -
- -
-
-
- - -
- -
-======= import React, { useState, useRef, useEffect } from "react"; import styles from "./Dashboard.module.css"; import { useNavigate } from "react-router-dom"; @@ -88,7 +67,6 @@ const Dashboard = () => { if (data[0].payload.officerPerformance) { setOfficerPerformanceData(data[0].payload.officerPerformance); } - } catch (error) { console.error("Token tidak valid:", error.message); localStorage.removeItem("token"); @@ -102,7 +80,6 @@ const Dashboard = () => { const handleLogout = () => { localStorage.removeItem("token"); localStorage.removeItem("user"); - localStorage.removeItem("role"); window.location.reload(); }; @@ -165,7 +142,9 @@ const Dashboard = () => {
- {user.username || "Guest"} + + {user.username || "Guest"} + + - {successMessage &&

{successMessage}

} + {successMessage && ( +

{successMessage}

+ )} {errorMessage &&

{errorMessage}

}
)} @@ -274,24 +270,21 @@ const Dashboard = () => { */
- Grafik performa petugas akan ditampilkan di sini. - (Integrasikan library grafik seperti Recharts/Chart.js) + Grafik performa petugas akan ditampilkan di sini. (Integrasikan + library grafik seperti Recharts/Chart.js)
) : ( -

Tidak ada data performa petugas untuk ditampilkan.

+

+ Tidak ada data performa petugas untuk ditampilkan. +

)}
© 2025 Kediri Technopark
->>>>>>> b9b4e4c859bd8face05c8d89d7f0c914d9e84a04 ); }; -<<<<<<< HEAD export default Dashboard; -======= -export default Dashboard; ->>>>>>> b9b4e4c859bd8face05c8d89d7f0c914d9e84a04 diff --git a/src/Dashboard.module.css b/src/Dashboard.module.css index 619d416..6fdc63a 100644 --- a/src/Dashboard.module.css +++ b/src/Dashboard.module.css @@ -1,43 +1,15 @@ -<<<<<<< HEAD -.dashboard { - display: flex; - width: 100%; - max-width: 1200px; - background: white; - border-radius: 20px; - overflow: hidden; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); -} - -.mainContent { - flex: 1; - padding: 1rem; -} - -.cards { - display: flex; - flex-wrap: wrap; - gap: 1rem; -} - -@media (max-width: 768px) { - .dashboard { - flex-direction: column; - } -} -======= /* Variabel Warna */ :root { - --primary-red: #E53935; - --secondary-red: #EF5350; - --dark-red: #C62828; - --light-gray: #EEEEEE; + --primary-red: #e53935; + --secondary-red: #ef5350; + --dark-red: #c62828; + --light-gray: #eeeeee; --dark-gray: #424242; - --white: #FFFFFF; - --success-green: #4CAF50; - --warning-yellow: #FFC107; - --text-color-light: #F5F5F5; /* Teks terang di latar belakang gelap */ - --text-color-dark: #212121; /* Teks gelap di latar belakang terang */ + --white: #ffffff; + --success-green: #4caf50; + --warning-yellow: #ffc107; + --text-color-light: #f5f5f5; /* Teks terang di latar belakang gelap */ + --text-color-dark: #212121; /* Teks gelap di latar belakang terang */ } /* Base Styles & Reset */ @@ -47,7 +19,7 @@ body { margin: 0; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Font lebih modern */ + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Font lebih modern */ line-height: 1.6; color: var(--text-color-dark); } @@ -100,10 +72,10 @@ body { } .userDisplayName { - color: var(--text-color-light); - font-weight: bold; - font-size: 0.9rem; - white-space: nowrap; /* Pastikan nama pengguna tidak patah baris */ + color: var(--text-color-light); + font-weight: bold; + font-size: 0.9rem; + white-space: nowrap; /* Pastikan nama pengguna tidak patah baris */ } .dropdownToggle { @@ -170,7 +142,7 @@ body { padding: 1rem; background-color: var(--white); border-radius: 0.6rem; - box-shadow: 0 2px 5px rgba(0,0,0,0.05); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .summaryCard { @@ -347,7 +319,7 @@ body { } .userDisplayName { - font-size: 1rem; + font-size: 1rem; } .dropdownToggle { @@ -356,11 +328,11 @@ body { } .dropdownMenu { - min-width: 10rem; + min-width: 10rem; } .dropdownItem { - font-size: 1rem; + font-size: 1rem; } .mainContent { @@ -481,8 +453,8 @@ body { /* Jika hanya officer, pastikan chart mengambil seluruh lebar kolom */ /* Ini sebenarnya sudah ditangani oleh grid secara default, tapi bisa diperjelas */ @media (min-width: 768px) { - .dashboardGrid > *:only-child { /* Jika hanya ada satu anak elemen di dalam dashboardGrid */ + .dashboardGrid > *:only-child { + /* Jika hanya ada satu anak elemen di dalam dashboardGrid */ grid-column: 1 / -1; /* Ambil seluruh lebar dari kolom pertama hingga terakhir */ } } ->>>>>>> b9b4e4c859bd8face05c8d89d7f0c914d9e84a04 diff --git a/src/PaginatedFormEditable.js b/src/PaginatedFormEditable.js index 1feecf7..e10aef2 100644 --- a/src/PaginatedFormEditable.js +++ b/src/PaginatedFormEditable.js @@ -7,11 +7,14 @@ const formatDate = (iso) => { return date.toISOString().split("T")[0]; // YYYY-MM-DD }; +const isDateField = (value) => + value && typeof value === "object" && value.type === "dateTime"; + const PaginatedFormEditable = ({ data }) => { const [formData, setFormData] = useState(() => { const flat = {}; Object.entries(data[0]).forEach(([key, value]) => { - if (value && typeof value === "object" && "value" in value) { + if (isDateField(value)) { flat[key] = formatDate(value.value); } else { flat[key] = value; @@ -20,7 +23,9 @@ const PaginatedFormEditable = ({ data }) => { return flat; }); - const fields = Object.keys(formData); + const fields = Object.keys(formData).filter( + (key) => key.toLowerCase() !== "total" + ); const fieldsPerPage = 3; const [page, setPage] = useState(0); const totalPages = Math.ceil(fields.length / fieldsPerPage); @@ -44,21 +49,68 @@ const PaginatedFormEditable = ({ data }) => { fontWeight: "bold", textTransform: "capitalize", textAlign: "left", + display: "block", + marginBottom: 5, }} > {key} - handleChange(key, e.target.value)} - style={{ - width: "100%", - padding: 8, - borderRadius: 5, - border: "1px solid #ddd", - }} - /> + + {/* Tanggal */} + {["Tanggal Lahir", "Berlaku Hingga", "Tanggal Dibuat"].includes( + key + ) ? ( + formData[key] ? ( + handleChange(key, e.target.value)} + style={{ + width: "100%", + padding: 8, + borderRadius: 5, + border: "1px solid #ddd", + }} + /> + ) : ( +
+ Seumur Hidup{" "} + +
+ ) + ) : ( + // Input biasa + handleChange(key, e.target.value)} + style={{ + width: "100%", + padding: 8, + borderRadius: 5, + border: "1px solid #ddd", + }} + /> + )} ))}