Slicing UI
This commit is contained in:
parent
d3e66d81ef
commit
249cd6c1a4
@ -27,7 +27,10 @@ import {
|
|||||||
} from './screens/Biometric/FaceRecognition/Section';
|
} from './screens/Biometric/FaceRecognition/Section';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
VerifyKtp
|
ManageKtp,
|
||||||
|
SummaryKtp,
|
||||||
|
VerifyKtp,
|
||||||
|
TransactionKtp
|
||||||
} from './screens/Biometric/OcrKtp';
|
} from './screens/Biometric/OcrKtp';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@ -77,6 +80,9 @@ const App = () => {
|
|||||||
|
|
||||||
{/* Biometric - KTP */}
|
{/* Biometric - KTP */}
|
||||||
<Route path="/ktp-verify" element={<VerifyKtp />} />
|
<Route path="/ktp-verify" element={<VerifyKtp />} />
|
||||||
|
<Route path="/ktp-manage" element={<ManageKtp />} />
|
||||||
|
<Route path="/ktp-summary" element={<SummaryKtp />} />
|
||||||
|
<Route path="/ktp-transaction" element={<TransactionKtp />} />
|
||||||
|
|
||||||
{/* Biometric - NPWP */}
|
{/* Biometric - NPWP */}
|
||||||
<Route path="/npwp-verify" element={<VerifyNpwp />} />
|
<Route path="/npwp-verify" element={<VerifyNpwp />} />
|
||||||
|
|||||||
141
src/screens/Biometric/OcrKtp/Manage.jsx
Normal file
141
src/screens/Biometric/OcrKtp/Manage.jsx
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const Manage = () => {
|
||||||
|
const [token] = useState('Basic dGVzdGluaXZ2cmV...');
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
|
const applicationIds = [
|
||||||
|
{ id: 'app1', name: 'Application One' },
|
||||||
|
{ id: 'app2', name: 'Application Two' },
|
||||||
|
{ id: 'app3', name: 'Application Three' },
|
||||||
|
{ id: 'app4', name: 'Application Four' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleCopy = () => {
|
||||||
|
navigator.clipboard.writeText(token);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setCopied(false);
|
||||||
|
}, 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='container' style={{ marginTop: '3%' }}>
|
||||||
|
{/* Section */}
|
||||||
|
<div style={{
|
||||||
|
padding: '20px',
|
||||||
|
border: '0.1px solid rgba(0, 0, 0, 0.2)',
|
||||||
|
borderLeft: '4px solid #0542cc',
|
||||||
|
borderRadius: '10px',
|
||||||
|
width: '100%',
|
||||||
|
marginBottom: '3vh'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Token Display Section */}
|
||||||
|
<h2>Your Basic Auth Bearer Token</h2>
|
||||||
|
<p>Here is your Basic Auth Bearer Token. Please ensure to copy it now, as it will only be displayed once.</p>
|
||||||
|
<div style={{ position: 'relative', display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={token}
|
||||||
|
readOnly
|
||||||
|
style={{ flex: '1', padding: '10px', border: '1px solid rgba(0, 0, 0, 0.2)', borderRadius: '5px', marginRight: '10px' }}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={handleCopy}
|
||||||
|
style={buttonStyle}
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Tooltip */}
|
||||||
|
<div style={{ ...tooltipStyle, opacity: copied ? 1 : 0, transform: copied ? 'translateY(0)' : 'translateY(-10px)' }}>
|
||||||
|
Copied!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{
|
||||||
|
padding: '20px',
|
||||||
|
border: '0.1px solid rgba(0, 0, 0, 0.2)',
|
||||||
|
borderLeft: '4px solid #0542cc',
|
||||||
|
borderRadius: '10px',
|
||||||
|
width: '100%',
|
||||||
|
}}>
|
||||||
|
{/* Form Section */}
|
||||||
|
<form>
|
||||||
|
<div style={{ marginBottom: '20px' }}>
|
||||||
|
<label htmlFor="applicationId">Application ID</label>
|
||||||
|
<select id="applicationId" style={inputStyle}>
|
||||||
|
<option value="">Select Application ID</option>
|
||||||
|
{applicationIds.map(app => (
|
||||||
|
<option key={app.id} value={app.id}>{app.name}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div style={{ marginBottom: '20px' }}>
|
||||||
|
<label htmlFor="username">Username</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="username"
|
||||||
|
placeholder='Username'
|
||||||
|
style={inputStyle}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style={{ marginBottom: '20px' }}>
|
||||||
|
<label htmlFor="password">Password</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
placeholder='Password'
|
||||||
|
style={inputStyle}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
style={buttonStyle}
|
||||||
|
>
|
||||||
|
Create Manage Basic Auth
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Styles
|
||||||
|
const buttonStyle = {
|
||||||
|
padding: '10px 20px',
|
||||||
|
backgroundColor: '#0542cc',
|
||||||
|
color: '#fff',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '5px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'background-color 0.3s ease, transform 0.2s ease',
|
||||||
|
position: 'relative',
|
||||||
|
};
|
||||||
|
|
||||||
|
const inputStyle = {
|
||||||
|
width: '100%',
|
||||||
|
padding: '10px',
|
||||||
|
border: '1px solid rgba(0, 0, 0, 0.2)',
|
||||||
|
borderRadius: '5px'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Tooltip Styles with smooth transition
|
||||||
|
const tooltipStyle = {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '-25px',
|
||||||
|
right: '0',
|
||||||
|
backgroundColor: '#333',
|
||||||
|
color: '#fff',
|
||||||
|
padding: '5px 10px',
|
||||||
|
borderRadius: '5px',
|
||||||
|
fontSize: '12px',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
transition: 'opacity 0.3s ease, transform 0.3s ease',
|
||||||
|
opacity: 0,
|
||||||
|
transform: 'translateY(-10px)',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Manage;
|
||||||
@ -0,0 +1,271 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
Extract,
|
||||||
|
Quality,
|
||||||
|
AsyncIcon,
|
||||||
|
QualityAsync,
|
||||||
|
Transaction
|
||||||
|
} from '../../../assets/icon';
|
||||||
|
|
||||||
|
const Summary = () => {
|
||||||
|
const [startDate, setStartDate] = useState('');
|
||||||
|
const [endDate, setEndDate] = useState('');
|
||||||
|
const [application, setApplication] = useState('');
|
||||||
|
const [isMobile, setIsMobile] = useState(false);
|
||||||
|
|
||||||
|
const menuData = [
|
||||||
|
{ id: 1, value: '150', label: 'Total Transaction', icon: Transaction },
|
||||||
|
{ id: 2, value: '4', label: 'Total Extract', icon: Extract },
|
||||||
|
{ id: 3, value: '65', label: 'Total Quality', icon: Quality },
|
||||||
|
{ id: 6, value: '900', label: 'Total Extract Async', icon: AsyncIcon },
|
||||||
|
{ id: 4, value: '22', label: 'Total Quality Async', icon: QualityAsync },
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleApply = () => {
|
||||||
|
console.log({ startDate, endDate, application });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setStartDate('');
|
||||||
|
setEndDate('');
|
||||||
|
setApplication('');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Detect if the device is mobile based on window width
|
||||||
|
useEffect(() => {
|
||||||
|
const handleResize = () => {
|
||||||
|
setIsMobile(window.innerWidth <= 768); // Define mobile screen as width <= 768px
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialize on component mount
|
||||||
|
handleResize();
|
||||||
|
|
||||||
|
// Add event listener to update state on resize
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
// Cleanup event listener on component unmount
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={styles.container}>
|
||||||
|
{/* Welcome Message */}
|
||||||
|
<div
|
||||||
|
className="row-card border-left border-primary shadow mb-4"
|
||||||
|
style={{ backgroundColor: '#E2FBEA' }}
|
||||||
|
>
|
||||||
|
<div className="d-flex flex-column justify-content-start align-items-start p-4">
|
||||||
|
<div>
|
||||||
|
<h4 className="mb-3 text-start">
|
||||||
|
<i className="fas fa-warning fa-bold me-3"></i>Alert
|
||||||
|
</h4>
|
||||||
|
<p className="mb-0 text-start">
|
||||||
|
Get started now by creating an Application ID and explore all the demo services available on the dashboard.
|
||||||
|
Experience the ease and flexibility of trying out all our features firsthand.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={styles.summaryContainer}>
|
||||||
|
<div style={isMobile ? styles.filtersMobile : styles.filters}>
|
||||||
|
{/* Row 1: Start Date and End Date */}
|
||||||
|
<div style={styles.filterRow}>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={startDate}
|
||||||
|
onChange={(e) => setStartDate(e.target.value)}
|
||||||
|
style={styles.filterInput}
|
||||||
|
placeholder="Start Date"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={endDate}
|
||||||
|
onChange={(e) => setEndDate(e.target.value)}
|
||||||
|
style={styles.filterInput}
|
||||||
|
placeholder="End Date"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Row 2: Application Select */}
|
||||||
|
<div style={styles.filterRow}>
|
||||||
|
<select
|
||||||
|
value={application}
|
||||||
|
onChange={(e) => setApplication(e.target.value)}
|
||||||
|
style={styles.filterInput}
|
||||||
|
>
|
||||||
|
<option value="">Application</option>
|
||||||
|
<option value="App1">App1</option>
|
||||||
|
<option value="App2">App2</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Row 3: Apply and Cancel Buttons */}
|
||||||
|
<div style={styles.filterRow}>
|
||||||
|
<button style={styles.applyButton} onClick={handleApply}>
|
||||||
|
Apply
|
||||||
|
</button>
|
||||||
|
<button style={styles.cancelButton} onClick={handleCancel}>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={isMobile ? styles.summaryCardsMobile : styles.summaryCards}>
|
||||||
|
{menuData.map((item) => (
|
||||||
|
<div key={item.id} style={styles.card}>
|
||||||
|
<div style={styles.textContainer}>
|
||||||
|
<h2 style={styles.cardTitle}>{item.value}</h2>
|
||||||
|
<p style={styles.cardText}>{item.label}</p>
|
||||||
|
</div>
|
||||||
|
<div style={styles.iconContainer}>
|
||||||
|
<img src={item.icon} alt={item.label} style={styles.icon} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = {
|
||||||
|
container: {
|
||||||
|
margin: '3rem',
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
marginBottom: '20px',
|
||||||
|
flexDirection: 'row', // Horizontal layout on desktop
|
||||||
|
gap: '10px',
|
||||||
|
},
|
||||||
|
filtersMobile: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column', // Vertical layout on mobile
|
||||||
|
gap: '15px',
|
||||||
|
},
|
||||||
|
filterRow: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
gap: '10px',
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
filterInput: {
|
||||||
|
padding: '10px',
|
||||||
|
border: '1px solid #ccc',
|
||||||
|
borderRadius: '5px',
|
||||||
|
fontSize: '16px',
|
||||||
|
width: '48%', // Adjust width to take up 48% of the row for input elements
|
||||||
|
},
|
||||||
|
applyButton: {
|
||||||
|
backgroundColor: '#0542cc',
|
||||||
|
color: '#fff',
|
||||||
|
padding: '10px 20px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '5px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
width: '48%', // Adjust button width to take half of the row
|
||||||
|
},
|
||||||
|
cancelButton: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
color: '#000',
|
||||||
|
padding: '10px 20px',
|
||||||
|
border: '1px solid gray',
|
||||||
|
borderRadius: '5px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
width: '48%', // Adjust button width to take half of the row
|
||||||
|
},
|
||||||
|
summaryContainer: {
|
||||||
|
padding: '20px',
|
||||||
|
border: '0.1px solid rgba(0, 0, 0, 0.2)',
|
||||||
|
borderLeft: '4px solid #0542cc',
|
||||||
|
borderRadius: '10px',
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
summaryCards: {
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(4, 1fr)', // 4 columns on desktop
|
||||||
|
gap: '20px',
|
||||||
|
marginTop: '20px',
|
||||||
|
},
|
||||||
|
summaryCardsMobile: {
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: '1fr', // 1 column on mobile (full width)
|
||||||
|
gap: '15px',
|
||||||
|
marginTop: '20px',
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
padding: '15px', // Reduced padding for a more compact card
|
||||||
|
backgroundColor: 'white',
|
||||||
|
borderRadius: '8px', // Slightly smaller border-radius for a sharper look
|
||||||
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||||
|
textAlign: 'left',
|
||||||
|
minWidth: '200px', // Ensure minimum width for mobile responsiveness
|
||||||
|
maxWidth: '300px', // Limit the maximum width to prevent cards from becoming too wide
|
||||||
|
width: '100%',
|
||||||
|
transition: 'transform 0.3s ease', // Smooth transition for hover effects
|
||||||
|
},
|
||||||
|
cardHover: {
|
||||||
|
transform: 'scale(1.05)', // Slight zoom on hover for interactivity
|
||||||
|
},
|
||||||
|
iconContainer: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
textContainer: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
width: '36px', // Smaller icon size for a more compact card
|
||||||
|
height: '36px', // Matching height for the icon
|
||||||
|
},
|
||||||
|
cardTitle: {
|
||||||
|
fontSize: '18px', // Smaller font size for title to prevent overflow
|
||||||
|
margin: '0',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
cardText: {
|
||||||
|
fontSize: '12px', // Smaller text size for description to keep it balanced
|
||||||
|
color: '#555',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Optional: Hover effect for the cards to enhance interactivity
|
||||||
|
cardHover: {
|
||||||
|
transform: 'scale(1.05)', // Slight zoom effect when hovering over card
|
||||||
|
},
|
||||||
|
|
||||||
|
// Media query for smaller screens (e.g., phones in portrait mode)
|
||||||
|
"@media (max-width: 768px)": {
|
||||||
|
summaryCards: {
|
||||||
|
gridTemplateColumns: '1fr', // 1 column on mobile screens
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
padding: '10px', // Smaller padding for smaller screens
|
||||||
|
minWidth: '180px', // Adjust min width for mobile devices
|
||||||
|
maxWidth: '250px', // Adjust max width for mobile devices
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
width: '30px', // Slightly smaller icon size for mobile
|
||||||
|
height: '30px', // Matching height for mobile icon
|
||||||
|
},
|
||||||
|
cardTitle: {
|
||||||
|
fontSize: '16px', // Smaller font size for the card title
|
||||||
|
},
|
||||||
|
cardText: {
|
||||||
|
fontSize: '10px', // Smaller font size for card description
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Summary;
|
||||||
400
src/screens/Biometric/OcrKtp/Transaction.jsx
Normal file
400
src/screens/Biometric/OcrKtp/Transaction.jsx
Normal file
@ -0,0 +1,400 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { FaChevronLeft, FaChevronRight, FaFastBackward, FaFastForward, FaSort, FaSortUp, FaSortDown } from 'react-icons/fa'; // Icons for sorting
|
||||||
|
import { NoAvailable } from '../../../assets/icon';
|
||||||
|
|
||||||
|
// Pagination Component
|
||||||
|
const Pagination = ({ currentPage, totalPages, onPageChange }) => {
|
||||||
|
const handlePrev = () => {
|
||||||
|
if (currentPage > 1) {
|
||||||
|
onPageChange(currentPage - 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNext = () => {
|
||||||
|
if (currentPage < totalPages) {
|
||||||
|
onPageChange(currentPage + 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFirst = () => {
|
||||||
|
onPageChange(1); // Go to first page
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLast = () => {
|
||||||
|
onPageChange(totalPages); // Go to last page
|
||||||
|
};
|
||||||
|
|
||||||
|
// Logic to display only 3 pages in pagination
|
||||||
|
const getPaginationRange = () => {
|
||||||
|
const range = [];
|
||||||
|
const totalPagesCount = totalPages;
|
||||||
|
|
||||||
|
let start = currentPage - 1;
|
||||||
|
let end = currentPage + 1;
|
||||||
|
|
||||||
|
// Adjust start and end if near the boundaries
|
||||||
|
if (currentPage === 1) {
|
||||||
|
start = 1;
|
||||||
|
end = Math.min(3, totalPagesCount);
|
||||||
|
} else if (currentPage === totalPages) {
|
||||||
|
start = Math.max(totalPagesCount - 2, 1);
|
||||||
|
end = totalPagesCount;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = start; i <= end; i++) {
|
||||||
|
range.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
return range;
|
||||||
|
};
|
||||||
|
|
||||||
|
const pageRange = getPaginationRange();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pagination-container d-flex justify-content-end mt-4">
|
||||||
|
{/* First Page Button */}
|
||||||
|
<button
|
||||||
|
className="btn"
|
||||||
|
onClick={handleFirst}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
>
|
||||||
|
<FaFastBackward /> {/* Double Arrow Left */}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn"
|
||||||
|
onClick={handlePrev}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
>
|
||||||
|
<FaChevronLeft /> {/* Single Arrow Left */}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Page Numbers */}
|
||||||
|
{pageRange.map((pageNum) => (
|
||||||
|
<button
|
||||||
|
key={pageNum}
|
||||||
|
className={`btn ${pageNum === currentPage ? 'btn-primary' : ''}`}
|
||||||
|
onClick={() => onPageChange(pageNum)}
|
||||||
|
>
|
||||||
|
{pageNum}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn"
|
||||||
|
onClick={handleNext}
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
>
|
||||||
|
<FaChevronRight /> {/* Single Arrow Right */}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Last Page Button */}
|
||||||
|
<button
|
||||||
|
className="btn"
|
||||||
|
onClick={handleLast}
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
>
|
||||||
|
<FaFastForward /> {/* Double Arrow Right */}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Transaction = () => {
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const [isMobile, setIsMobile] = useState(false); // State to detect mobile view
|
||||||
|
const [transactionData, setTransactionData] = useState([]);
|
||||||
|
const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' }); // Sorting state
|
||||||
|
const dataPerPage = 10; // Data per page (10 data per page)
|
||||||
|
|
||||||
|
const buttonData = [
|
||||||
|
{ label: 'Copy', enabled: true },
|
||||||
|
{ label: 'CSV', enabled: true },
|
||||||
|
{ label: 'Excel', enabled: true },
|
||||||
|
{ label: 'PDF', enabled: true },
|
||||||
|
{ label: 'Print', enabled: true },
|
||||||
|
{ label: 'Column Visibility', enabled: true },
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
// Generate 691 dummy transactions
|
||||||
|
const generateDummyData = (numOfItems) => {
|
||||||
|
const transactionData = [];
|
||||||
|
|
||||||
|
for (let i = 1; i <= numOfItems; i++) {
|
||||||
|
transactionData.push({
|
||||||
|
transactionId: `TX${String(i).padStart(3, '0')}`,
|
||||||
|
applicationName: `App ${Math.floor(Math.random() * 5) + 1}`,
|
||||||
|
createdAt: new Date(2023, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toLocaleDateString(), // Random date
|
||||||
|
referenceId: `REF${String(i).padStart(3, '0')}`,
|
||||||
|
status: ['Completed', 'Pending', 'Failed'][Math.floor(Math.random() * 3)],
|
||||||
|
mode: Math.random() > 0.5 ? 'Online' : 'Offline',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return transactionData;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// Set the generated transaction data
|
||||||
|
useEffect(() => {
|
||||||
|
setTransactionData(generateDummyData(3113)); // count data dummy transactions
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Sorting function
|
||||||
|
const sortData = (data, config) => {
|
||||||
|
const { key, direction } = config;
|
||||||
|
return [...data].sort((a, b) => {
|
||||||
|
if (a[key] < b[key]) {
|
||||||
|
return direction === 'asc' ? -1 : 1;
|
||||||
|
}
|
||||||
|
if (a[key] > b[key]) {
|
||||||
|
return direction === 'asc' ? 1 : -1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle column header sort click
|
||||||
|
const handleSort = (key) => {
|
||||||
|
let direction = 'asc';
|
||||||
|
if (sortConfig.key === key && sortConfig.direction === 'asc') {
|
||||||
|
direction = 'desc'; // Toggle direction if the same column is clicked
|
||||||
|
}
|
||||||
|
setSortConfig({ key, direction });
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get the paginated data
|
||||||
|
const getPaginatedData = (data, page, perPage) => {
|
||||||
|
const sortedData = sortData(data, sortConfig);
|
||||||
|
const startIndex = (page - 1) * perPage;
|
||||||
|
const endIndex = startIndex + perPage;
|
||||||
|
return sortedData.slice(startIndex, endIndex);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle page change
|
||||||
|
const handlePageChange = (page) => {
|
||||||
|
setCurrentPage(page);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Calculate total pages based on the data and data per page
|
||||||
|
const totalPages = Math.ceil(transactionData.length / dataPerPage);
|
||||||
|
|
||||||
|
// Paginated data
|
||||||
|
const paginatedData = getPaginatedData(transactionData, currentPage, dataPerPage);
|
||||||
|
|
||||||
|
// Detect screen size and update isMobile state
|
||||||
|
useEffect(() => {
|
||||||
|
const handleResize = () => {
|
||||||
|
setIsMobile(window.innerWidth <= 768); // Change 768 to your breakpoint
|
||||||
|
};
|
||||||
|
|
||||||
|
handleResize();
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
return () => window.removeEventListener('resize', handleResize);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mt-5">
|
||||||
|
{/* Welcome Message */}
|
||||||
|
<div className="row-card border-left border-primary shadow mb-4" style={{ backgroundColor: '#E2FBEA' }}>
|
||||||
|
<div className="d-flex flex-column justify-content-start align-items-start p-4">
|
||||||
|
<div>
|
||||||
|
<h4 className="mb-3 text-start">
|
||||||
|
<i className="fas fa-warning fa-bold me-3"></i>Alert
|
||||||
|
</h4>
|
||||||
|
<p className="mb-0 text-start">
|
||||||
|
Get started now by creating an Application ID and explore all the demo services available on the dashboard.
|
||||||
|
Experience the ease and flexibility of trying out all our features firsthand.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={styles.contentContainer}>
|
||||||
|
{/* Filter Form */}
|
||||||
|
<div className="card p-3 mb-4">
|
||||||
|
<div className="row">
|
||||||
|
<div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
|
||||||
|
<label>Start Date</label>
|
||||||
|
<input type="date" className="form-control" />
|
||||||
|
</div>
|
||||||
|
<div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
|
||||||
|
<label>End Date</label>
|
||||||
|
<input type="date" className="form-control" />
|
||||||
|
</div>
|
||||||
|
<div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
|
||||||
|
<label>Application</label>
|
||||||
|
<select className="form-control">
|
||||||
|
<option>Select Application</option>
|
||||||
|
<option>App 1</option>
|
||||||
|
<option>App 2</option>
|
||||||
|
<option>App 3</option>
|
||||||
|
<option>App 4</option>
|
||||||
|
<option>App 5</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className={`col-12 ${isMobile ? 'd-flex justify-content-between' : 'col-md-2 d-flex align-items-end'}`} style={{ gap: '10px' }}>
|
||||||
|
<button className="btn btn-primary w-48">Apply</button>
|
||||||
|
<button className="btn btn-secondary w-48">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||||
|
<div>
|
||||||
|
{buttonData.map((button, index) =>
|
||||||
|
button.enabled ? (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
className={`btn btn-light ${isMobile ? 'mb-2' : ''}`} // Add margin on mobile
|
||||||
|
style={styles.actionButton}
|
||||||
|
>
|
||||||
|
{button.label}
|
||||||
|
</button>
|
||||||
|
) : null
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search Bar with Icon */}
|
||||||
|
<div className="input-group" style={{ width: '250px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search..."
|
||||||
|
className="form-control"
|
||||||
|
/>
|
||||||
|
<span className="input-group-text">
|
||||||
|
<i className="fas fa-search"></i> {/* FontAwesome search icon */}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{/* Table */}
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-bordered" style={styles.tableContainer}>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>No.</th> {/* Kolom untuk Nomor Urut */}
|
||||||
|
<th>
|
||||||
|
<button className="btn" onClick={() => handleSort('transactionId')}>
|
||||||
|
Transaction ID
|
||||||
|
{sortConfig.key === 'transactionId' &&
|
||||||
|
(sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
|
||||||
|
}
|
||||||
|
{sortConfig.key !== 'transactionId' && <FaSort style={styles.iconMarginLeft} />}
|
||||||
|
</button>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<button className="btn" onClick={() => handleSort('applicationName')}>
|
||||||
|
Application Name
|
||||||
|
{sortConfig.key === 'applicationName' &&
|
||||||
|
(sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
|
||||||
|
}
|
||||||
|
{sortConfig.key !== 'applicationName' && <FaSort style={styles.iconMarginLeft} />}
|
||||||
|
</button>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<button className="btn" onClick={() => handleSort('createdAt')}>
|
||||||
|
Created At
|
||||||
|
{sortConfig.key === 'createdAt' &&
|
||||||
|
(sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
|
||||||
|
}
|
||||||
|
{sortConfig.key !== 'createdAt' && <FaSort style={styles.iconMarginLeft} />}
|
||||||
|
</button>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<button className="btn" onClick={() => handleSort('referenceId')}>
|
||||||
|
Reference ID
|
||||||
|
{sortConfig.key === 'referenceId' &&
|
||||||
|
(sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
|
||||||
|
}
|
||||||
|
{sortConfig.key !== 'referenceId' && <FaSort style={styles.iconMarginLeft} />}
|
||||||
|
</button>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<button className="btn" onClick={() => handleSort('status')}>
|
||||||
|
Status
|
||||||
|
{sortConfig.key === 'status' &&
|
||||||
|
(sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
|
||||||
|
}
|
||||||
|
{sortConfig.key !== 'status' && <FaSort style={styles.iconMarginLeft} />}
|
||||||
|
</button>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<button className="btn" onClick={() => handleSort('mode')}>
|
||||||
|
Mode
|
||||||
|
{sortConfig.key === 'mode' &&
|
||||||
|
(sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
|
||||||
|
}
|
||||||
|
{sortConfig.key !== 'mode' && <FaSort style={styles.iconMarginLeft} />}
|
||||||
|
</button>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
{paginatedData.length > 0 ? (
|
||||||
|
paginatedData.map((transaction, index) => (
|
||||||
|
<tr key={index}>
|
||||||
|
{/* Kolom Nomor Urut */}
|
||||||
|
<td>{(currentPage - 1) * dataPerPage + index + 1}</td> {/* Nomor urut berdasarkan halaman dan index */}
|
||||||
|
<td>{transaction.transactionId}</td>
|
||||||
|
<td>{transaction.applicationName}</td>
|
||||||
|
<td>{transaction.createdAt}</td>
|
||||||
|
<td>{transaction.referenceId}</td>
|
||||||
|
<td>{transaction.status}</td>
|
||||||
|
<td>{transaction.mode}</td>
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<tr>
|
||||||
|
<td colSpan="7" className="text-center">
|
||||||
|
<div className="d-flex flex-column align-items-center mt-5">
|
||||||
|
<img src={NoAvailable} alt="No Data Available" className="mb-3" style={styles.iconStyle} />
|
||||||
|
<p>Data not available</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
<Pagination
|
||||||
|
currentPage={currentPage}
|
||||||
|
totalPages={totalPages}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Transaction;
|
||||||
|
|
||||||
|
const styles = {
|
||||||
|
contentContainer: {
|
||||||
|
padding: '20px',
|
||||||
|
border: '0.1px solid rgba(0, 0, 0, 0.2)',
|
||||||
|
borderLeft: '4px solid #0542cc',
|
||||||
|
borderRadius: '10px',
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
tableContainer: {
|
||||||
|
minHeight: '300px',
|
||||||
|
maxHeight: '1500px',
|
||||||
|
overflowY: 'auto',
|
||||||
|
},
|
||||||
|
iconStyle: {
|
||||||
|
width: '50px',
|
||||||
|
height: '50px',
|
||||||
|
},
|
||||||
|
// Add margin-left style for icons
|
||||||
|
iconMarginLeft: {
|
||||||
|
marginLeft: '0.7rem', // Adjust as needed
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
@ -1,5 +1,11 @@
|
|||||||
import VerifyKtp from "./Verify";
|
import VerifyKtp from "./Verify";
|
||||||
|
import ManageKtp from "./Manage";
|
||||||
|
import SummaryKtp from "./Summary";
|
||||||
|
import TransactionKtp from "./Transaction";
|
||||||
|
|
||||||
export {
|
export {
|
||||||
VerifyKtp
|
VerifyKtp,
|
||||||
|
ManageKtp,
|
||||||
|
SummaryKtp,
|
||||||
|
TransactionKtp
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user