kediritechnopark/solid-data
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
zadit biasa aja
2025-07-01 10:21:44 +00:00
parent 3ed645b013
commit 89bf8ec287
6 changed files with 281 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/Dashboard.js
View File

@@ -144,10 +144,23 @@ const Dashboard = () => {
<button <button
onClick={() => setIsMenuOpen(!isMenuOpen)} onClick={() => setIsMenuOpen(!isMenuOpen)}
className={styles.dropdownToggle} className={styles.dropdownToggle}
aria-expanded={isMenuOpen ? "true" : "false"} /* Aksesibilitas */ aria-expanded={isMenuOpen ? "true" : "false"}
aria-haspopup="true" /* Aksesibilitas */ aria-haspopup="true"
> >
☰ <svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button> </button>
{isMenuOpen && ( {isMenuOpen && (
<div className={styles.dropdownMenu}> <div className={styles.dropdownMenu}>
@@ -155,7 +168,7 @@ const Dashboard = () => {
onClick={() => { onClick={() => {
navigate("/profile"); navigate("/profile");
setIsMenuOpen(false); setIsMenuOpen(false);
}} /* Tutup menu setelah klik */ }}
className={styles.dropdownItem} className={styles.dropdownItem}
> >
Profile Profile
@@ -164,7 +177,7 @@ const Dashboard = () => {
onClick={() => { onClick={() => {
navigate("/scan"); navigate("/scan");
setIsMenuOpen(false); setIsMenuOpen(false);
}} /* Tutup menu setelah klik */ }}
className={styles.dropdownItem} className={styles.dropdownItem}
> >
Scan Scan
@@ -173,7 +186,7 @@ const Dashboard = () => {
onClick={() => { onClick={() => {
handleLogout(); handleLogout();
setIsMenuOpen(false); setIsMenuOpen(false);
}} /* Tutup menu setelah klik */ }}
className={styles.dropdownItem} className={styles.dropdownItem}
> >
Logout Logout
@@ -187,45 +200,47 @@ const Dashboard = () => {
{/* Summary Cards */} {/* Summary Cards */}
<div className={styles.summaryCardsContainer}> <div className={styles.summaryCardsContainer}>
<div className={styles.summaryCard}> <div className={styles.summaryCard}>
<h3>Total Hari Ini</h3> <h3>Hari Ini</h3>
<p>{totalFilesSentToday}</p> <p>{totalFilesSentToday.toLocaleString()}</p>
</div> </div>
<div className={styles.summaryCard}> <div className={styles.summaryCard}>
<h3>Total Bulan Ini</h3> <h3>Bulan Ini</h3>
<p>{totalFilesSentMonth}</p> <p>{totalFilesSentMonth.toLocaleString()}</p>
</div> </div>
<div className={styles.summaryCard}> <div className={styles.summaryCard}>
<h3>Total Keseluruhan</h3> <h3>Total Keseluruhan</h3>
<p>{totalFilesSentOverall}</p> <p>{totalFilesSentOverall.toLocaleString()}</p>
</div> </div>
</div> </div>
{/* Grid for Form (Admin) and Chart (Admin & Officer) */} {/* Grid for Form (Admin) and Chart (Admin & Officer) */}
<div className={styles.dashboardGrid}> <div className={styles.dashboardGrid}>
{user.role === "admin" /* Render form hanya jika admin */ && ( {user.role === "admin" && (
<div className={styles.formSection}> <div className={styles.formSection}>
<h2>Tambah Officer Baru</h2> <h2>Tambah Officer Baru</h2>
<form onSubmit={handleAddOfficer} className={styles.form}> <form onSubmit={handleAddOfficer} className={styles.form}>
<label> <label>
Username: Username
<input <input
type="text" type="text"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
placeholder="Masukkan username"
required required
/> />
</label> </label>
<label> <label>
Password: Password
<input <input
type="password" type="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Masukkan password"
required required
/> />
</label> </label>
<button type="submit" className={styles.submitButton}> <button type="submit" className={styles.submitButton}>
Add Tambah Officer
</button> </button>
</form> </form>
@@ -238,7 +253,7 @@ const Dashboard = () => {
{/* Chart Section - Visible to both Admin and Officer */} {/* Chart Section - Visible to both Admin and Officer */}
<div className={styles.chartSection}> <div className={styles.chartSection}>
<h2>Performa Pengiriman File Petugas</h2> <h2>Performa Pengiriman File</h2>
{officerPerformanceData.length > 0 ? ( {officerPerformanceData.length > 0 ? (
// Contoh implementasi Recharts: // Contoh implementasi Recharts:
/* /*
@@ -249,25 +264,28 @@ const Dashboard = () => {
<Tooltip /> <Tooltip />
<Bar <Bar
dataKey="filesSent" dataKey="filesSent"
fill={getComputedStyle(document.documentElement).getPropertyValue('--primary-red')} fill={getComputedStyle(document.documentElement).getPropertyValue('--primary-blue')}
/> />
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
*/ */
<div className={styles.chartPlaceholder}> <div className={styles.chartPlaceholder}>
Grafik performa petugas akan ditampilkan di sini. (Integrasikan 📊 Grafik performa akan ditampilkan di sini
library grafik seperti Recharts/Chart.js) <br />
<small>Integrasikan dengan Recharts atau Chart.js</small>
</div> </div>
) : ( ) : (
<p className={styles.warning}> <div className={styles.warning}>
Tidak ada data performa petugas untuk ditampilkan. 📋 Belum ada data performa untuk ditampilkan
</p> </div>
)} )}
</div> </div>
</div> </div>
</div> </div>
<div className={styles.footer}>&copy; 2025 Kediri Technopark</div> <div className={styles.footer}>
© 2025 Kediri Technopark • Dashboard PSI
</div>
</div> </div>
); );
}; };

477
src/Dashboard.module.css
View File

@@ -1,31 +1,48 @@
/* Variabel Warna */ /* Modern Color Palette */
:root { :root {
--primary-red: #e53935; --primary-blue: #3b82f6;
--secondary-red: #ef5350; --secondary-blue: #60a5fa;
--dark-red: #c62828; --dark-blue: #1e40af;
--light-gray: #eeeeee; --neutral-50: #fafafa;
--dark-gray: #424242; --neutral-100: #f5f5f5;
--neutral-200: #e5e5e5;
--neutral-300: #d4d4d4;
--neutral-500: #737373;
--neutral-700: #404040;
--neutral-800: #262626;
--neutral-900: #171717;
--white: #ffffff; --white: #ffffff;
--success-green: #4caf50; --success-green: #10b981;
--warning-yellow: #ffc107; --warning-amber: #f59e0b;
--text-color-light: #f5f5f5; /* Teks terang di latar belakang gelap */ --error-red: #ef4444;
--text-color-dark: #212121; /* Teks gelap di latar belakang terang */ --text-primary: #0f172a;
--text-secondary: #64748b;
--text-light: #ffffff;
--border-light: #e2e8f0;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
} }
/* Base Styles & Reset */ /* Base Styles & Reset */
* { * {
box-sizing: border-box; /* Pastikan padding dan border tidak menambah lebar elemen */ box-sizing: border-box;
} }
body { body {
margin: 0; margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Font lebih modern */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
line-height: 1.6; "Helvetica Neue", Arial, sans-serif;
color: var(--text-color-dark); line-height: 1.5;
color: var(--text-primary);
background-color: var(--neutral-50);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
.dashboardContainer { .dashboardContainer {
background-color: var(--light-gray); background-color: var(--neutral-50);
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -33,33 +50,40 @@ body {
/* --- Header --- */ /* --- Header --- */
.dashboardHeader { .dashboardHeader {
background-color: var(--primary-red); background-color: var(--white);
color: var(--text-color-light); color: var(--text-primary);
padding: 1rem; /* Menggunakan rem */ padding: 1rem 1.5rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: var(--shadow-sm);
border-bottom: 3px solid #ef4444;
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(8px);
} }
.logoAndTitle { .logoAndTitle {
display: flex; display: flex;
align-items: center; align-items: center;
flex-shrink: 0; /* Mencegah logo dan judul mengecil terlalu banyak */ flex-shrink: 0;
} }
.logoAndTitle img { .logoAndTitle img {
width: 2.5rem; /* Ukuran rem */ width: 2.5rem;
height: 2.5rem; height: 2.5rem;
border-radius: 50%; border-radius: 0.75rem;
margin-right: 0.8rem; margin-right: 0.75rem;
object-fit: cover;
} }
.dashboardHeader .h1 { .dashboardHeader .h1 {
margin: 0; margin: 0;
font-size: 1.5rem; /* Ukuran rem untuk mobile */ font-size: 1.5rem;
font-weight: bold; font-weight: 700;
white-space: nowrap; /* Mencegah judul patah baris */ color: #ed4344;
letter-spacing: -0.025em;
} }
/* Dropdown Menu */ /* Dropdown Menu */
@@ -67,238 +91,262 @@ body {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.8rem; gap: 0.75rem;
flex-shrink: 0; /* Mencegah mengecil */ flex-shrink: 0;
} }
.userDisplayName { .userDisplayName {
color: var(--text-color-light); color: var(--text-secondary);
font-weight: bold; font-weight: 500;
font-size: 0.9rem; font-size: 0.875rem;
white-space: nowrap; /* Pastikan nama pengguna tidak patah baris */
} }
.dropdownToggle { .dropdownToggle {
background-color: var(--dark-red); background-color: var(--neutral-100);
color: var(--text-color-light); color: var(--text-primary);
border: none; border: 1px solid var(--border-light);
padding: 0.5rem 0.75rem; /* Padding rem */ padding: 0.5rem;
border-radius: 0.3rem; border-radius: 0.5rem;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
transition: background-color 0.3s ease; transition: all 0.2s ease;
min-width: 3rem; /* Pastikan tombol tidak terlalu kecil */ min-width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
} }
.dropdownToggle:hover { .dropdownToggle:hover {
background-color: var(--secondary-red); background-color: var(--neutral-200);
border-color: var(--neutral-300);
} }
.dropdownMenu { .dropdownMenu {
position: absolute; position: absolute;
top: calc(100% + 0.5rem); /* Posisikan di bawah tombol dengan jarak */ top: calc(100% + 0.5rem);
right: 0; right: 0;
background-color: var(--white); background-color: var(--white);
border-radius: 0.3rem; border-radius: 0.75rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: var(--shadow-lg);
border: 1px solid var(--border-light);
z-index: 10; z-index: 10;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 8rem; /* Lebar minimum */ min-width: 10rem;
overflow: hidden; /* Pastikan item tidak keluar */ overflow: hidden;
padding: 0.5rem;
} }
.dropdownItem { .dropdownItem {
background: none; background: none;
border: none; border: none;
padding: 0.6rem 0.8rem; padding: 0.75rem 1rem;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
color: var(--text-color-dark); color: var(--text-primary);
transition: background-color 0.3s ease; transition: background-color 0.2s ease;
font-size: 0.9rem; font-size: 0.875rem;
white-space: nowrap; /* Mencegah item menu patah baris */ font-weight: 500;
border-radius: 0.5rem;
margin-bottom: 0.125rem;
} }
.dropdownItem:hover { .dropdownItem:hover {
background-color: var(--light-gray); background-color: var(--neutral-100);
}
.dropdownItem:last-child {
margin-bottom: 0;
} }
/* --- Main Content --- */ /* --- Main Content --- */
.mainContent { .mainContent {
flex-grow: 1; flex-grow: 1;
padding: 1.25rem; /* Padding rem */ padding: 2rem 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; /* Jarak antar bagian utama */ gap: 2rem;
max-width: 1400px;
margin: 0 auto;
width: 100%;
} }
/* Summary Cards Container */ /* Summary Cards Container */
.summaryCardsContainer { .summaryCardsContainer {
display: flex; display: grid;
flex-wrap: wrap; /* Mengizinkan kartu melipat */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem; /* Jarak antar kartu */ gap: 1.5rem;
justify-content: center; /* Tengahkan kartu di mobile */
padding: 1rem;
background-color: var(--white);
border-radius: 0.6rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
} }
.summaryCard { .summaryCard {
background-color: var(--light-gray); background-color: var(--white);
color: var(--text-color-dark); padding: 1.5rem;
padding: 1rem; border-radius: 1rem;
border-radius: 0.5rem; border: 1px solid var(--border-light);
border: 1px solid var(--secondary-red); box-shadow: var(--shadow-sm);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.2s ease;
text-align: center; }
flex: 1 1 calc(50% - 0.75rem); /* Di layar mobile, 2 kartu per baris */
min-width: 120px; /* Batasan agar tidak terlalu kecil */ .summaryCard:hover {
max-width: 250px; /* Batasan agar tidak terlalu lebar di mobile */ box-shadow: var(--shadow-md);
transform: translateY(-1px);
} }
.summaryCard h3 { .summaryCard h3 {
margin-top: 0; margin: 0 0 0.5rem 0;
font-size: 0.9rem; font-size: 0.875rem;
color: var(--dark-red); color: var(--text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
} }
.summaryCard p { .summaryCard p {
font-size: 1.6rem; font-size: 2rem;
font-weight: bold; font-weight: 700;
color: var(--dark-gray); color: #ef4444;
margin-bottom: 0; margin: 0;
line-height: 1;
} }
/* Dashboard Grid for Form and Chart */ /* Dashboard Grid for Form and Chart */
.dashboardGrid { .dashboardGrid {
display: grid; display: grid;
grid-template-columns: 1fr; /* Default: satu kolom untuk mobile */ grid-template-columns: 1fr;
gap: 1.5rem; /* Jarak antar bagian */ gap: 2rem;
flex-grow: 1; /* Agar grid bisa membesar mengisi sisa ruang */ flex-grow: 1;
} }
.formSection, .formSection,
.chartSection { .chartSection {
background-color: var(--white); background-color: var(--white);
padding: 1.5rem; /* Padding rem */ padding: 2rem;
border-radius: 0.6rem; border-radius: 1rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
} }
.formSection h2, .formSection h2,
.chartSection h2 { .chartSection h2 {
color: var(--dark-red); color: var(--text-primary);
margin-top: 0; margin: 0 0 1.5rem 0;
margin-bottom: 1.25rem; font-size: 1.25rem;
text-align: center; font-weight: 600;
font-size: 1.4rem; letter-spacing: -0.025em;
} }
.form label { .form label {
display: block; display: block;
margin-bottom: 0.8rem; margin-bottom: 1rem;
color: var(--text-color-dark); color: var(--text-primary);
font-weight: bold; font-weight: 500;
font-size: 0.95rem; font-size: 0.875rem;
} }
.form input[type="text"], .form input[type="text"],
.form input[type="password"], .form input[type="password"],
.form select { .form select {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem 1rem;
margin-top: 0.3rem; margin-top: 0.375rem;
border: 1px solid var(--light-gray); border: 1px solid var(--border-light);
border-radius: 0.3rem; border-radius: 0.5rem;
font-size: 1rem; font-size: 0.875rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease; transition: all 0.2s ease;
background-color: var(--white);
color: var(--text-primary);
} }
.form input[type="text"]:focus, .form input[type="text"]:focus,
.form input[type="password"]:focus, .form input[type="password"]:focus,
.form select:focus { .form select:focus {
border-color: var(--primary-red); border-color: var(--primary-blue);
box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2); /* Ring focus */ box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
outline: none; outline: none;
} }
.submitButton { .submitButton {
background-color: var(--primary-red); background-color: var(--primary-blue);
color: var(--white); color: var(--text-light);
border: none; border: none;
padding: 0.8rem 1.5rem; padding: 0.75rem 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 0.875rem;
font-weight: bold; font-weight: 600;
margin-top: 1.25rem; margin-top: 1rem;
width: 100%; width: 100%;
transition: background-color 0.3s ease, transform 0.2s ease; transition: all 0.2s ease;
letter-spacing: 0.025em;
} }
.submitButton:hover { .submitButton:hover {
background-color: var(--secondary-red); background-color: var(--dark-blue);
transform: translateY(-2px); /* Efek sedikit naik */ transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.submitButton:active {
transform: translateY(0);
} }
/* Messages */ /* Messages */
.success { .success {
background-color: #e6ffe6; background-color: rgb(16 185 129 / 0.1);
color: var(--success-green); color: var(--success-green);
border: 1px solid var(--success-green); border: 1px solid rgb(16 185 129 / 0.2);
padding: 0.8rem; padding: 0.75rem 1rem;
border-radius: 0.3rem; border-radius: 0.5rem;
margin-top: 1rem; margin-top: 1rem;
text-align: center; font-size: 0.875rem;
font-size: 0.9rem; font-weight: 500;
} }
.error { .error {
background-color: #ffe6e6; background-color: rgb(239 68 68 / 0.1);
color: var(--primary-red); color: var(--error-red);
border: 1px solid var(--primary-red); border: 1px solid rgb(239 68 68 / 0.2);
padding: 0.8rem; padding: 0.75rem 1rem;
border-radius: 0.3rem; border-radius: 0.5rem;
margin-top: 1rem; margin-top: 1rem;
text-align: center; font-size: 0.875rem;
font-size: 0.9rem; font-weight: 500;
} }
.warning { .warning {
background-color: #fffbe6; background-color: rgb(245 158 11 / 0.1);
color: var(--warning-yellow); color: var(--warning-amber);
border: 1px solid var(--warning-yellow); border: 1px solid rgb(245 158 11 / 0.2);
padding: 1rem; padding: 1rem;
border-radius: 0.3rem; border-radius: 0.5rem;
margin-top: 1.25rem; margin-top: 1rem;
text-align: center; font-weight: 500;
font-weight: bold; font-size: 0.875rem;
font-size: 1rem;
} }
/* Footer */ /* Footer */
.footer { .footer {
background-color: var(--dark-red); background-color: var(--white);
color: var(--text-color-light); color: var(--text-secondary);
text-align: center; text-align: center;
padding: 0.75rem; padding: 1rem;
margin-top: auto; margin-top: auto;
font-size: 0.85rem; font-size: 0.75rem;
border-top: 1px solid var(--border-light);
} }
.chartPlaceholder { .chartPlaceholder {
background-color: var(--light-gray); background-color: var(--neutral-50);
height: 20rem; /* Menggunakan rem */ height: 20rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: var(--dark-gray); color: var(--text-secondary);
font-style: italic; font-style: italic;
border-radius: 0.6rem; border-radius: 0.75rem;
border: 1px dashed var(--secondary-red); border: 2px dashed var(--border-light);
font-size: 1rem; font-size: 0.875rem;
} }
/* --- Media Queries for Tablets and Desktops --- */ /* --- Media Queries for Tablets and Desktops --- */
@@ -315,119 +363,24 @@ body {
} }
.dashboardHeader .h1 { .dashboardHeader .h1 {
font-size: 1.8rem; font-size: 1.75rem;
} }
.userDisplayName { .userDisplayName {
font-size: 1rem; font-size: 0.875rem;
}
.dropdownToggle {
padding: 0.6rem 1rem;
font-size: 1rem;
}
.dropdownMenu {
min-width: 10rem;
}
.dropdownItem {
font-size: 1rem;
} }
.mainContent { .mainContent {
padding: 1.5rem 2.5rem; /* Padding lebih besar di tablet/desktop */ padding: 2.5rem 2rem;
gap: 2rem;
}
.summaryCardsContainer {
justify-content: flex-start; /* Sejajarkan ke kiri di tablet/desktop */
padding: 1.5rem;
}
.summaryCard {
flex: 1 1 calc(33.33% - 1rem); /* 3 kartu per baris di tablet */
max-width: 200px; /* Batasi lebar kartu agar tetap rapi */
}
.summaryCard h3 {
font-size: 1rem;
}
.summaryCard p {
font-size: 2rem;
}
.dashboardGrid {
grid-template-columns: 1fr 2fr; /* Dua kolom: form (1/3), chart (2/3) */
gap: 2rem;
}
.formSection,
.chartSection {
padding: 2rem;
}
.formSection h2,
.chartSection h2 {
font-size: 1.6rem;
}
.form label {
font-size: 1rem;
}
.form input[type="text"],
.form input[type="password"],
.form select {
padding: 0.8rem;
font-size: 1rem;
}
.submitButton {
padding: 1rem 1.8rem;
font-size: 1.1rem;
}
.warning {
font-size: 1rem;
}
.chartPlaceholder {
height: 25rem; /* Tinggi placeholder lebih besar di tablet/desktop */
}
}
/* Desktop-sized screens and up */
@media (min-width: 1024px) {
.dashboardHeader {
padding: 1.5rem 3rem;
}
.logoAndTitle img {
width: 3.5rem;
height: 3.5rem;
}
.dashboardHeader .h1 {
font-size: 2.2rem;
}
.mainContent {
padding: 2rem 4rem;
gap: 2.5rem; gap: 2.5rem;
} }
.summaryCardsContainer { .summaryCardsContainer {
padding: 2rem; grid-template-columns: repeat(3, 1fr);
}
.summaryCard {
flex: 0 0 auto; /* Ukuran tetap di desktop */
min-width: 180px;
} }
.dashboardGrid { .dashboardGrid {
grid-template-columns: 1fr 2fr;
gap: 2.5rem; gap: 2.5rem;
} }
@@ -438,11 +391,41 @@ body {
.formSection h2, .formSection h2,
.chartSection h2 { .chartSection h2 {
font-size: 1.8rem; font-size: 1.5rem;
} }
.submitButton { .chartPlaceholder {
padding: 1.1rem 2rem; height: 25rem;
}
}
/* Desktop-sized screens and up */
@media (min-width: 1024px) {
.dashboardHeader {
padding: 1.25rem 3rem;
}
.logoAndTitle img {
width: 3.5rem;
height: 3.5rem;
}
.dashboardHeader .h1 {
font-size: 2rem;
}
.mainContent {
padding: 3rem 2.5rem;
gap: 3rem;
}
.dashboardGrid {
gap: 3rem;
}
.formSection,
.chartSection {
padding: 3rem;
} }
.chartPlaceholder { .chartPlaceholder {
@@ -450,11 +433,9 @@ body {
} }
} }
/* Jika hanya officer, pastikan chart mengambil seluruh lebar kolom */ /* Single column layout when only one section is present */
/* Ini sebenarnya sudah ditangani oleh grid secara default, tapi bisa diperjelas */
@media (min-width: 768px) { @media (min-width: 768px) {
.dashboardGrid > *:only-child { .dashboardGrid > *:only-child {
/* Jika hanya ada satu anak elemen di dalam dashboardGrid */ grid-column: 1 / -1;
grid-column: 1 / -1; /* Ambil seluruh lebar dari kolom pertama hingga terakhir */
} }
} }

6
src/KTPScanner.js
View File

@@ -267,12 +267,16 @@ const CameraCanvas = () => {
const ReadImage = async (capturedImage) => { const ReadImage = async (capturedImage) => {
try { try {
setLoading(true); setLoading(true);
const token = localStorage.getItem("token");
let res = await fetch( let res = await fetch(
"https://bot.kediritechnopark.com/webhook/mastersnapper/read", "https://bot.kediritechnopark.com/webhook/mastersnapper/read",
{ {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({ image: capturedImage }), body: JSON.stringify({ image: capturedImage }),
} }
); );

4
src/Login.js
View File

@@ -35,7 +35,7 @@ const Login = () => {
if (loginData?.success && loginData?.token) { if (loginData?.success && loginData?.token) {
localStorage.setItem("token", loginData.token); localStorage.setItem("token", loginData.token);
window.location.href = "/dashboard"; window.location.href = "/";
} else { } else {
setError(loginData?.message || "Username atau password salah"); setError(loginData?.message || "Username atau password salah");
} }
@@ -48,7 +48,7 @@ const Login = () => {
return ( return (
<div className={styles.loginContainer}> <div className={styles.loginContainer}>
<div className={styles.loginBox}> <div className={styles.loginBox}>
<img src="/dermalounge.jpg" alt="Logo" className={styles.logo} /> <img src="/PSI.png" alt="Logo" className={styles.logo} />
<h1 className={styles.h1}>PSI Admin Login</h1> <h1 className={styles.h1}>PSI Admin Login</h1>
<p className={styles.subtitle}> <p className={styles.subtitle}>
Silakan masuk untuk melanjutkan ke dashboard Silakan masuk untuk melanjutkan ke dashboard

7
src/Login.module.css
View File

@@ -13,7 +13,8 @@
border-radius: 16px; border-radius: 16px;
padding: 40px; padding: 40px;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
width: 300px; width: 100%;
max-width: 400px;
text-align: center; text-align: center;
} }
@@ -27,7 +28,7 @@
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
margin-bottom: 10px; margin-bottom: 10px;
color: #d22129; /* 🔴 Warna merah PSI */ color: #ef4444; /* 🔴 Warna merah PSI */
} }
.subtitle { .subtitle {
@@ -55,7 +56,7 @@
} }
.button { .button {
background-color: #d22129; /* 🔴 Warna merah PSI */ background-color: #ef4444; /* 🔴 Warna merah PSI */
color: #ffffff; color: #ffffff;
padding: 12px 24px; padding: 12px 24px;
border-radius: 24px; border-radius: 24px;

BIN
src/PSI.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB