Error Handler
This commit is contained in:
parent
5846242bd9
commit
15678d03ad
45
src/App.js
45
src/App.js
@ -39,7 +39,27 @@ import {
|
||||
VerifyNpwp
|
||||
} from './screens/Biometric/OcrNpwp';
|
||||
|
||||
// Import all other components following the dataMenu structure...
|
||||
import {
|
||||
VerifySim,
|
||||
SummarySim,
|
||||
TransactionSim
|
||||
} from './screens/Biometric/OcrSim';
|
||||
|
||||
import {
|
||||
VerifyDoc,
|
||||
SummaryDoc,
|
||||
TransactionDoc
|
||||
} from './screens/Biometric/OcrDocument';
|
||||
|
||||
import {
|
||||
SmsVerify
|
||||
} from './screens/Sms/Verification';
|
||||
|
||||
import {
|
||||
VerificationAnnoncement,
|
||||
VerificationOtp
|
||||
} from './screens/Sms/Verification/Section';
|
||||
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
@ -70,11 +90,11 @@ const App = () => {
|
||||
<Route index element={<Navigate to="face-enroll" />} />
|
||||
</Route>
|
||||
{/* Add routes for the verify section */}
|
||||
<Route path="/face-enroll" element={<Enroll />} />
|
||||
{/* <Route path="/face-enroll" element={<Enroll />} />
|
||||
<Route path="/face-verifysection" element={<VerifySection />} />
|
||||
<Route path="/face-liveness" element={<Liveness />} />
|
||||
<Route path="/face-compare" element={<Compare />} />
|
||||
<Route path="/face-search" element={<Search />} />
|
||||
<Route path="/face-search" element={<Search />} /> */}
|
||||
|
||||
{/* Biometric - Face Recognition (Summary) */}
|
||||
<Route path="/face-summary" element={<FaceSummary />} />
|
||||
@ -91,6 +111,25 @@ const App = () => {
|
||||
<Route path="/npwp-summary" element={<SummaryNpwp />} />
|
||||
<Route path="/npwp-transaction" element={<TransactionNpwp />} />
|
||||
|
||||
{/* Biometric - SIM */}
|
||||
<Route path="/sim-verify" element={<VerifySim />} />
|
||||
<Route path="/sim-summary" element={<SummarySim />} />
|
||||
<Route path="/sim-transaction" element={<TransactionSim />} />
|
||||
|
||||
{/* Biometric - Document */}
|
||||
<Route path="/document-verify" element={<VerifyDoc />} />
|
||||
<Route path="/document-summary" element={<SummaryDoc />} />
|
||||
<Route path="/document-transaction" element={<TransactionDoc />} />
|
||||
|
||||
{/* Sms Services - Verification */}
|
||||
<Route path="/sms-verify/*" element={<SmsVerify />}>
|
||||
{/* Anak rute */}
|
||||
<Route path="sms-otp" element={<VerificationOtp />} />
|
||||
<Route path="sms-announcement" element={<VerificationAnnoncement />} />
|
||||
{/* Default route */}
|
||||
<Route index element={<Navigate to="sms-otp" />} />
|
||||
</Route>
|
||||
|
||||
{/* <Route path="/sms-otp-settings" element={<SmsOtpSettings />} /> */}
|
||||
{/* Continue for each link */}
|
||||
|
||||
|
||||
@ -2,10 +2,12 @@ import ProfileImage from './Profile.jpeg';
|
||||
import Logo from './Logo.png';
|
||||
import DashboardImg from './dashboard-img.png';
|
||||
import DummyKtp from './Dummy-Ktp.png';
|
||||
import ServerDownAnimation from './server-down.gif';
|
||||
|
||||
export {
|
||||
ProfileImage,
|
||||
Logo,
|
||||
DashboardImg,
|
||||
DummyKtp
|
||||
DummyKtp,
|
||||
ServerDownAnimation
|
||||
}
|
||||
BIN
src/assets/images/server-down.gif
Normal file
BIN
src/assets/images/server-down.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faChevronLeft, faChevronDown, faTimes, faImage } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FileUploader } from 'react-drag-drop-files';
|
||||
import Select from 'react-select'
|
||||
import { ServerDownAnimation } from '../../../../assets/images';
|
||||
|
||||
const Compare = () => {
|
||||
|
||||
@ -33,6 +34,7 @@ const Compare = () => {
|
||||
|
||||
const [applicationIds, setApplicationIds] = useState([]);
|
||||
const [inputValueApplication, setInputValueApplication] = useState(''); // Controlled input value for Application ID
|
||||
const [isServer, setIsServer] = useState(true);
|
||||
|
||||
const thresholdIds = [
|
||||
{ id: 1, name: 'cosine', displayName: 'Basic' },
|
||||
@ -65,13 +67,16 @@ const Compare = () => {
|
||||
|
||||
if (data.status_code === 200) {
|
||||
const ids = data.details.data.map(app => app.id);
|
||||
setIsServer(true)
|
||||
console.log('Application Id: ' + ids); // Log the IDs
|
||||
setApplicationIds(data.details.data); // Update state with the fetched data
|
||||
} else {
|
||||
console.error('Failed to fetch data:', data.details.message);
|
||||
setIsServer(false)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching application IDs:', error);
|
||||
setIsServer(false)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
@ -318,6 +323,32 @@ const Compare = () => {
|
||||
}
|
||||
};
|
||||
|
||||
if (!isServer) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', marginTop: '50px' }}>
|
||||
<img
|
||||
src={ServerDownAnimation}
|
||||
alt="Server Down Animation"
|
||||
style={{ width: '18rem', height: '18rem', marginBottom: '20px' }}
|
||||
/>
|
||||
<h2 style={{ color: 'red' }}>Server tidak dapat diakses</h2>
|
||||
<p>{errorMessage || 'Silakan periksa koneksi internet Anda atau coba lagi nanti.'}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#0542cc',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '5px',
|
||||
cursor: 'pointer'
|
||||
}}>
|
||||
Coba Lagi
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Inject keyframes for the spinner */}
|
||||
|
||||
@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faTimes, faImage } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FileUploader } from 'react-drag-drop-files';
|
||||
import Select from 'react-select'
|
||||
import { ServerDownAnimation } from '../../../../assets/images';
|
||||
|
||||
const Enroll = () => {
|
||||
|
||||
@ -33,32 +34,41 @@ const Enroll = () => {
|
||||
const [inputValueApplication, setInputValueApplication] = useState(''); // Controlled input value for Application ID
|
||||
const [options, setOptions] = useState([]);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [isServer, setIsServer] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchApplicationIds = async () => {
|
||||
setIsLoading(true);
|
||||
const url = `${BASE_URL}/application/list`;
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
setIsLoading(true);
|
||||
const response = await fetch(`${BASE_URL}/application/list`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'accept': 'application/json',
|
||||
'x-api-key': API_KEY,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch application IDs');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Response Data:', data);
|
||||
|
||||
if (data.status_code === 200) {
|
||||
setApplicationIds(data.details.data);
|
||||
setIsServer(true);
|
||||
} else {
|
||||
console.error('Failed to fetch data:', data.details.message);
|
||||
setIsServer(false);
|
||||
throw new Error(data.details.message || 'Failed to fetch application IDs');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching application IDs:', error);
|
||||
setErrorMessage(error.message || 'Error fetching application IDs');
|
||||
setIsServer(false);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
fetchApplicationIds();
|
||||
setOptions(subjectIds.map(id => ({ value: id, label: id })));
|
||||
@ -624,9 +634,35 @@ const Enroll = () => {
|
||||
marginTop: '10px',
|
||||
},
|
||||
};
|
||||
|
||||
if (!isServer) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', marginTop: '50px' }}>
|
||||
<img
|
||||
src={ServerDownAnimation}
|
||||
alt="Server Down Animation"
|
||||
style={{ width: '18rem', height: '18rem', marginBottom: '20px' }}
|
||||
/>
|
||||
<h2 style={{ color: 'red' }}>Server tidak dapat diakses</h2>
|
||||
<p>{errorMessage || 'Silakan periksa koneksi internet Anda atau coba lagi nanti.'}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#0542cc',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '5px',
|
||||
cursor: 'pointer'
|
||||
}}>
|
||||
Coba Lagi
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
@keyframes spin {
|
||||
@ -783,7 +819,7 @@ const Enroll = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faChevronLeft, faChevronDown, faTimes, faImage } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FileUploader } from 'react-drag-drop-files';
|
||||
import Select from 'react-select'
|
||||
import { ServerDownAnimation } from '../../../../assets/images';
|
||||
|
||||
const fileTypes = ["JPG", "JPEG", "PNG"]; // Allowed file types
|
||||
|
||||
@ -41,6 +42,7 @@ const Search = () => {
|
||||
const [limitIdError, setLimitIdError] = useState('');
|
||||
const [imageError, setImageError] = useState('');
|
||||
const [uploadedFile, setUploadedFile] = useState(null);
|
||||
const [isServer, setIsServer] = useState(true);
|
||||
|
||||
const formatFileSize = (sizeInBytes) => {
|
||||
if (sizeInBytes < 1024) {
|
||||
@ -71,13 +73,16 @@ const Search = () => {
|
||||
|
||||
if (data.status_code === 200) {
|
||||
const ids = data.details.data.map(app => app.id);
|
||||
setIsServer(true)
|
||||
console.log('Application Id: ' + ids); // Log the IDs
|
||||
setApplicationIds(data.details.data); // Update state with the fetched data
|
||||
} else {
|
||||
console.error('Failed to fetch data:', data.details.message);
|
||||
setIsServer(false)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching application IDs:', error);
|
||||
setIsServer(false)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
@ -287,6 +292,32 @@ const Search = () => {
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
if (!isServer) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', marginTop: '50px' }}>
|
||||
<img
|
||||
src={ServerDownAnimation}
|
||||
alt="Server Down Animation"
|
||||
style={{ width: '18rem', height: '18rem', marginBottom: '20px' }}
|
||||
/>
|
||||
<h2 style={{ color: 'red' }}>Server tidak dapat diakses</h2>
|
||||
<p>{errorMessage || 'Silakan periksa koneksi internet Anda atau coba lagi nanti.'}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#0542cc',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '5px',
|
||||
cursor: 'pointer'
|
||||
}}>
|
||||
Coba Lagi
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = {
|
||||
formGroup: {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faChevronDown, faTimes } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FileUploader } from 'react-drag-drop-files';
|
||||
import Select from 'react-select'
|
||||
import { ServerDownAnimation } from '../../../../assets/images';
|
||||
|
||||
const Verify = () => {
|
||||
const BASE_URL = process.env.REACT_APP_BASE_URL;
|
||||
@ -32,6 +32,7 @@ const Verify = () => {
|
||||
const [subjectAvailabilityMessage, setSubjectAvailabilityMessage] = useState(''); // Message for subject availability
|
||||
const [inputValueApplication, setInputValueApplication] = useState(''); // Controlled input value for Application ID
|
||||
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
|
||||
const [isServer, setIsServer] = useState(true);
|
||||
|
||||
const thresholdIds = [
|
||||
{ id: 1, name: 'cosine', displayName: 'Basic' },
|
||||
@ -62,9 +63,11 @@ const Verify = () => {
|
||||
},
|
||||
});
|
||||
const data = await response.json();
|
||||
setIsServer(true)
|
||||
return data.details.data; // assuming the API returns an array of applications
|
||||
} catch (error) {
|
||||
console.error('Error fetching application IDs:', error);
|
||||
setIsServer(false)
|
||||
return [];
|
||||
}
|
||||
};
|
||||
@ -316,6 +319,32 @@ const Verify = () => {
|
||||
}
|
||||
};
|
||||
|
||||
if (!isServer) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', marginTop: '50px' }}>
|
||||
<img
|
||||
src={ServerDownAnimation}
|
||||
alt="Server Down Animation"
|
||||
style={{ width: '18rem', height: '18rem', marginBottom: '20px' }}
|
||||
/>
|
||||
<h2 style={{ color: 'red' }}>Server tidak dapat diakses</h2>
|
||||
<p>Silakan periksa koneksi internet Anda atau coba lagi nanti.</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#0542cc',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '5px',
|
||||
cursor: 'pointer'
|
||||
}}>
|
||||
Coba Lagi
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = {
|
||||
formGroup: {
|
||||
marginTop: '-45px',
|
||||
|
||||
267
src/screens/Biometric/OcrDocument/Summary.jsx
Normal file
267
src/screens/Biometric/OcrDocument/Summary.jsx
Normal file
@ -0,0 +1,267 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Extract,
|
||||
Transaction,
|
||||
Failed
|
||||
} 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 Failed', icon: Failed },
|
||||
];
|
||||
|
||||
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/OcrDocument/Transaction.jsx
Normal file
400
src/screens/Biometric/OcrDocument/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(52)); // 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
|
||||
},
|
||||
};
|
||||
|
||||
607
src/screens/Biometric/OcrDocument/Verify.jsx
Normal file
607
src/screens/Biometric/OcrDocument/Verify.jsx
Normal file
@ -0,0 +1,607 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faImage, faTimes, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Select from 'react-select'
|
||||
import { ServerDownAnimation } from '../../../assets/images';
|
||||
|
||||
const CustomLabel = ({ overRide, children, ...props }) => {
|
||||
return <label {...props}>{children}</label>;
|
||||
};
|
||||
|
||||
const Verify = () => {
|
||||
const BASE_URL = process.env.REACT_APP_BASE_URL;
|
||||
const API_KEY = process.env.REACT_APP_API_KEY;
|
||||
const fileTypes = ["image/jpeg", "image/png"];
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const [selectedImageName, setSelectedImageName] = useState('');
|
||||
const [resultImageLabel, setResultImageLabel] = useState('');
|
||||
const [file, setFile] = useState(null);
|
||||
const [applicationId, setApplicationId] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [applicationIds, setApplicationIds] = useState([]);
|
||||
const [imageUrl, setImageUrl] = useState('');
|
||||
const [imageError, setImageError] = useState('');
|
||||
const [data, setData] = useState(null);
|
||||
const [showResult, setShowResult] = useState(false);
|
||||
const [inputValueApplication, setInputValueApplication] = useState('');
|
||||
const [selectedQuota, setSelectedQuota] = useState(0);
|
||||
const [isServer, setIsServer] = useState(true);
|
||||
|
||||
// Validation state
|
||||
const [validationErrors, setValidationErrors] = useState({
|
||||
applicationId: '',
|
||||
file: ''
|
||||
});
|
||||
|
||||
// Fetch Application IDs
|
||||
useEffect(() => {
|
||||
const fetchApplicationIds = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await fetch(`${BASE_URL}/application/list`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'accept': 'application/json',
|
||||
'x-api-key': API_KEY,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch application IDs');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Response Data:', data);
|
||||
|
||||
if (data.status_code === 200) {
|
||||
setApplicationIds(data.details.data);
|
||||
setIsServer(true);
|
||||
} else {
|
||||
setIsServer(false);
|
||||
throw new Error(data.details.message || 'Failed to fetch application IDs');
|
||||
}
|
||||
} catch (error) {
|
||||
setErrorMessage(error.message || 'Error fetching application IDs');
|
||||
setIsServer(false);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchApplicationIds();
|
||||
|
||||
const checkMobile = () => {
|
||||
setIsMobile(window.innerWidth <= 768); // Example: 768px as the threshold for mobile devices
|
||||
};
|
||||
|
||||
// Check on initial load
|
||||
checkMobile();
|
||||
|
||||
// Add resize listener to adjust `isMobile` state on window resize
|
||||
window.addEventListener('resize', checkMobile);
|
||||
|
||||
// Clean up the event listener when the component unmounts
|
||||
return () => {
|
||||
window.removeEventListener('resize', checkMobile);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleInputChangeApplication = (inputValue) => {
|
||||
setInputValueApplication(inputValue);
|
||||
};
|
||||
|
||||
const handleApplicationChange = (selectedOption) => {
|
||||
const selectedId = selectedOption.value;
|
||||
const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
|
||||
|
||||
setApplicationId(selectedOption ? selectedOption.value : '');
|
||||
|
||||
if (selectedApp) {
|
||||
setSelectedQuota(selectedApp.quota);
|
||||
}
|
||||
};
|
||||
|
||||
const applicationOptions = applicationIds.map(app => ({
|
||||
value: app.id, // This is what will be sent when an option is selected
|
||||
label: app.name // This is what will be displayed in the dropdown
|
||||
}));
|
||||
|
||||
// Handle file upload
|
||||
const handleFileDrop = (files) => {
|
||||
if (files && files[0]) {
|
||||
handleImageUpload(files[0]);
|
||||
} else {
|
||||
console.error('No valid files dropped');
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageUpload = (file) => {
|
||||
setFile(file);
|
||||
setSelectedImageName(file.name);
|
||||
|
||||
// Validate file type
|
||||
if (!fileTypes.includes(file.type)) {
|
||||
setImageError('Invalid file type. Only JPG, JPEG, and PNG are allowed.');
|
||||
} else if (file.size > 2 * 1024 * 1024) { // Max 2MB
|
||||
setImageError('File size exceeds 2MB.');
|
||||
} else {
|
||||
setImageError('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageCancel = () => {
|
||||
setFile(null);
|
||||
setSelectedImageName('');
|
||||
setImageError('');
|
||||
fileInputRef.current.value = '';
|
||||
};
|
||||
|
||||
// Validate form inputs before submitting
|
||||
const validateForm = () => {
|
||||
const errors = {
|
||||
applicationId: '',
|
||||
file: ''
|
||||
};
|
||||
|
||||
if (!applicationId) {
|
||||
errors.applicationId = 'Please select an Application ID.';
|
||||
}
|
||||
|
||||
if (!file) {
|
||||
errors.file = 'Please upload an image file.';
|
||||
} else if (imageError) {
|
||||
errors.file = imageError;
|
||||
}
|
||||
|
||||
setValidationErrors(errors);
|
||||
return Object.values(errors).every(error => error === '');
|
||||
};
|
||||
|
||||
// Submit form and trigger OCR API
|
||||
const handleCheckClick = async () => {
|
||||
if (!validateForm()) {
|
||||
return; // Form is not valid
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
const formData = new FormData();
|
||||
formData.append('application_id', applicationId);
|
||||
formData.append('file', file);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${BASE_URL}/ocr-npwp`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'accept': 'application/json',
|
||||
'x-api-key': API_KEY,
|
||||
},
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('OCR processing failed');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// Log the full result to verify structure
|
||||
console.log('OCR API Response:', result);
|
||||
|
||||
if (result.status_code === 201) {
|
||||
const responseData = result.details.data?.['data-npwp'] || {};
|
||||
const updateQuota = result.details.data.quota
|
||||
|
||||
const data = {
|
||||
npwp: responseData.npwp || 'N/A',
|
||||
npwpName: responseData.name || 'N/A',
|
||||
npwpAddress: responseData.address || 'N/A',
|
||||
npwpX: responseData.npwp_x || 'N/A',
|
||||
imageUrl: result.details.data?.image_url || '', // Properly access image_url
|
||||
};
|
||||
|
||||
setSelectedQuota(updateQuota)
|
||||
|
||||
console.log('Image URL from OCR:', result.details.data?.image_url); // Log the image URL correctly
|
||||
|
||||
setData(data);
|
||||
setShowResult(true);
|
||||
setErrorMessage('');
|
||||
setSelectedImageName('');
|
||||
setResultImageLabel(selectedImageName);
|
||||
|
||||
// Fetch image if image URL exists in the result
|
||||
if (result.details.data?.image_url) {
|
||||
const imageFileName = result.details.data.image_url.split('/').pop(); // Get the image filename
|
||||
console.log('Image file name:', imageFileName); // Debug the file name
|
||||
await fetchImage(imageFileName); // Call the fetchImage function to fetch the image
|
||||
}
|
||||
} else {
|
||||
setErrorMessage('OCR processing failed');
|
||||
}
|
||||
} catch (error) {
|
||||
setErrorMessage(error.message || 'Error during OCR processing');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// The fetchImage function you already have in your code
|
||||
const fetchImage = async (imageFileName) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await fetch(`${BASE_URL}/preview/image/${imageFileName}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'accept': 'application/json',
|
||||
'x-api-key': API_KEY,
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorDetails = await response.json();
|
||||
console.error('Image fetch error details:', errorDetails);
|
||||
setErrorMessage('Failed to fetch image, please try again.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the image blob
|
||||
const imageBlob = await response.blob();
|
||||
const imageData = URL.createObjectURL(imageBlob); // Create object URL from the blob
|
||||
|
||||
// Debugging: Make sure imageData is correct
|
||||
console.log('Fetched image URL:', imageData);
|
||||
|
||||
setImageUrl(imageData); // Update imageUrl state with the fetched image data
|
||||
} catch (error) {
|
||||
console.error('Error fetching image:', error);
|
||||
setErrorMessage(error.message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const styles = {
|
||||
selectWrapper: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
},
|
||||
select: {
|
||||
fontSize: '16px',
|
||||
padding: '10px',
|
||||
width: '100%',
|
||||
borderRadius: '4px',
|
||||
border: '1px solid #ccc',
|
||||
},
|
||||
remainingQuota: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
quotaText: {
|
||||
fontSize: '24px',
|
||||
fontWeight: '600',
|
||||
},
|
||||
timesText: {
|
||||
fontSize: '16px',
|
||||
fontWeight: '300',
|
||||
},
|
||||
customLabel: {
|
||||
fontSize: '18px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2d3d',
|
||||
},
|
||||
uploadWrapper: {
|
||||
marginTop: '1rem',
|
||||
},
|
||||
uploadArea: {
|
||||
backgroundColor: '#e6f2ff',
|
||||
height: !isMobile? '30svh' : '50svh',
|
||||
cursor: 'pointer',
|
||||
marginTop: '1rem',
|
||||
paddingTop: '22px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
border: '1px solid #ced4da',
|
||||
borderRadius: '0.25rem',
|
||||
textAlign: 'center',
|
||||
},
|
||||
uploadIcon: {
|
||||
fontSize: '40px',
|
||||
color: '#0542cc',
|
||||
marginBottom: '10px',
|
||||
},
|
||||
uploadText: {
|
||||
color: '#1f2d3d',
|
||||
fontWeight: '400',
|
||||
fontSize: '16px',
|
||||
},
|
||||
browseLink: {
|
||||
color: '#0542cc',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
uploadError: {
|
||||
color: 'red',
|
||||
fontSize: '12px',
|
||||
marginTop: '10px',
|
||||
},
|
||||
errorContainer: {
|
||||
marginTop: '10px',
|
||||
padding: '10px',
|
||||
backgroundColor: '#f8d7da',
|
||||
border: '1px solid #f5c6cb',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
errorText: {
|
||||
color: '#721c24',
|
||||
fontSize: '14px',
|
||||
margin: '0',
|
||||
},loadingOverlay: {
|
||||
position: 'fixed', // Gunakan fixed untuk overlay penuh layar
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0, // Pastikan menutupi seluruh layar
|
||||
display: 'flex',
|
||||
justifyContent: 'center', // Posisikan spinner di tengah secara horizontal
|
||||
alignItems: 'center', // Posisikan spinner di tengah secara vertikal
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semitransparan di background
|
||||
color: 'white',
|
||||
fontSize: '24px',
|
||||
zIndex: 1000, // Pastikan overlay muncul di atas konten lainnya
|
||||
},
|
||||
spinner: {
|
||||
border: '4px solid #f3f3f3', // Border gray untuk spinner
|
||||
borderTop: '4px solid #3498db', // Border biru untuk spinner
|
||||
borderRadius: '50%', // Membuat spinner bulat
|
||||
width: '50px', // Ukuran spinner
|
||||
height: '50px', // Ukuran spinner
|
||||
animation: 'spin 2s linear infinite', // Menambahkan animasi spin
|
||||
},
|
||||
loadingText: {
|
||||
marginLeft: '20px',
|
||||
},
|
||||
tableStyle: {
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse',
|
||||
marginTop: '20px',
|
||||
},
|
||||
tableCell: {
|
||||
padding: '8px 15px',
|
||||
border: '1px solid #ccc',
|
||||
textAlign: 'left',
|
||||
},
|
||||
};
|
||||
|
||||
const formatFileSize = (sizeInBytes) => {
|
||||
if (sizeInBytes < 1024) {
|
||||
return `${sizeInBytes} bytes`; // Jika ukuran lebih kecil dari 1 KB
|
||||
} else if (sizeInBytes < 1048576) {
|
||||
return `${(sizeInBytes / 1024).toFixed(2)} KB`; // Jika ukuran lebih kecil dari 1 MB
|
||||
} else {
|
||||
return `${(sizeInBytes / 1048576).toFixed(2)} MB`; // Jika ukuran lebih besar dari 1 MB
|
||||
}
|
||||
};
|
||||
|
||||
if (!isServer) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', marginTop: '50px' }}>
|
||||
<img
|
||||
src={ServerDownAnimation}
|
||||
alt="Server Down Animation"
|
||||
style={{ width: '18rem', height: '18rem', marginBottom: '20px' }}
|
||||
/>
|
||||
<h2 style={{ color: 'red' }}>Server tidak dapat diakses</h2>
|
||||
<p>{errorMessage || 'Silakan periksa koneksi internet Anda atau coba lagi nanti.'}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#0542cc',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '5px',
|
||||
cursor: 'pointer'
|
||||
}}>
|
||||
Coba Lagi
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container" style={{ marginTop: '3%' }}>
|
||||
{/* Inject keyframes for the spinner */}
|
||||
<style>
|
||||
{`
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
{isLoading && (
|
||||
<div style={styles.loadingOverlay}>
|
||||
<div style={styles.spinner}></div>
|
||||
<p style={styles.loadingText}>Loading...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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 className="d-flex flex-row mt-3">
|
||||
<Link to="/createApps" style={{ textDecoration: 'none' }}>
|
||||
<button className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
|
||||
<i className="fas fa-plus text-white me-2"></i>
|
||||
<p className="text-white mb-0">Create New App ID</p>
|
||||
</button>
|
||||
</Link>
|
||||
</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%' }}>
|
||||
<div className="form-group row align-items-center">
|
||||
<div className="col-md-6">
|
||||
<div style={styles.selectWrapper}>
|
||||
<Select
|
||||
id="applicationId"
|
||||
value={applicationOptions.find(option => option.value === applicationId)}
|
||||
onChange={handleApplicationChange}
|
||||
options={applicationOptions}
|
||||
placeholder="Select Application ID"
|
||||
isSearchable
|
||||
menuPortalTarget={document.body}
|
||||
menuPlacement="auto"
|
||||
inputValue={inputValueApplication}
|
||||
onInputChange={handleInputChangeApplication} // Limit input length for Application ID
|
||||
/>
|
||||
</div>
|
||||
{validationErrors.applicationId && <p style={styles.errorText}>{validationErrors.applicationId}</p>}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', margin: '0', marginTop: '8px' }}>
|
||||
Remaining Quota
|
||||
</p>
|
||||
<div style={styles.remainingQuota}>
|
||||
<span style={styles.quotaText}>{selectedQuota}</span>
|
||||
<span style={styles.timesText}>(times)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image Upload */}
|
||||
<div className="col-md-6">
|
||||
<div className="form-group mt-4">
|
||||
<CustomLabel htmlFor="imageInput" style={styles.customLabel}>
|
||||
Upload Image (Document)
|
||||
</CustomLabel>
|
||||
<div style={styles.uploadWrapper}>
|
||||
{/* Drag and Drop File Input */}
|
||||
<div
|
||||
style={styles.uploadArea}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
handleFileDrop(e.dataTransfer.files);
|
||||
}}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
>
|
||||
<FontAwesomeIcon icon={faCloudUploadAlt} style={styles.uploadIcon} />
|
||||
<p style={styles.uploadText}>Drag and Drop Here</p>
|
||||
<p>Or</p>
|
||||
<a href="#" onClick={() => fileInputRef.current.click()} style={styles.browseLink}>Browse</a>
|
||||
<p className="text-muted" style={styles.uploadText}>Recommended size: 300x300 (Max File Size: 2MB)</p>
|
||||
<p className="text-muted" style={styles.uploadText}>Supported file types: JPG, JPEG, PNG</p>
|
||||
</div>
|
||||
|
||||
{/* File Input */}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
id="imageInput"
|
||||
className="form-control"
|
||||
style={{ display: 'none' }}
|
||||
accept="image/jpeg, image/png"
|
||||
onChange={(e) => handleImageUpload(e.target.files[0])}
|
||||
/>
|
||||
|
||||
{selectedImageName && (
|
||||
<div className="mt-3">
|
||||
<p><strong>File:</strong> {selectedImageName}</p>
|
||||
{file && (
|
||||
<p style={styles.fileSize}>
|
||||
Size: {formatFileSize(file.size)}
|
||||
</p>
|
||||
)}
|
||||
<button className="btn btn-danger" onClick={handleImageCancel}>
|
||||
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{validationErrors.file && <p style={styles.errorText}>{validationErrors.file}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-12 d-flex justify-content-end mt-4">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleCheckClick}
|
||||
disabled={isLoading || !file || !applicationId || validationErrors.file || validationErrors.applicationId}
|
||||
>
|
||||
<FontAwesomeIcon icon={faImage} className="me-2" />
|
||||
Check Document
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{errorMessage && (
|
||||
<div style={styles.errorContainer}>
|
||||
<p style={styles.errorText}>{errorMessage}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showResult && data && (
|
||||
<div className="mt-5">
|
||||
<h4>OCR Document Result</h4>
|
||||
<div className="row">
|
||||
{/* Gambar di kolom pertama */}
|
||||
<div className="col-md-6">
|
||||
<img
|
||||
src={imageUrl || "path-to-your-image"}
|
||||
alt="DOC Image"
|
||||
style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
|
||||
className="img-fluid" // Menambahkan kelas Bootstrap img-fluid untuk responsif
|
||||
/>
|
||||
<p style={{ marginTop: '10px' }}>
|
||||
File Name: {resultImageLabel} {/* Display the resultImageLabel here */}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tabel di kolom kedua */}
|
||||
<div className="col-md-6">
|
||||
<table style={styles.tableStyle}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>NPWP</td>
|
||||
<td style={styles.tableCell}>{data.npwp}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>NPWP Name</td>
|
||||
<td style={styles.tableCell}>{data.npwpName}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>NPWP Address</td>
|
||||
<td style={styles.tableCell}>{data.npwpAddress}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>NPWP (X)</td>
|
||||
<td style={styles.tableCell}>{data.npwpX}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Verify;
|
||||
|
||||
9
src/screens/Biometric/OcrDocument/index.js
Normal file
9
src/screens/Biometric/OcrDocument/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
import VerifyDoc from "./Verify";
|
||||
import SummaryDoc from "./Summary";
|
||||
import TransactionDoc from "./Transaction";
|
||||
|
||||
export {
|
||||
VerifyDoc,
|
||||
SummaryDoc,
|
||||
TransactionDoc
|
||||
}
|
||||
@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faImage, faTimes, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Select from 'react-select'
|
||||
import { ServerDownAnimation } from '../../../assets/images';
|
||||
|
||||
const CustomLabel = ({ overRide, children, ...props }) => {
|
||||
return <label {...props}>{children}</label>;
|
||||
@ -28,6 +29,7 @@ const Verify = () => {
|
||||
const [showResult, setShowResult] = useState(false);
|
||||
const [inputValueApplication, setInputValueApplication] = useState('');
|
||||
const [selectedQuota, setSelectedQuota] = useState(0);
|
||||
const [isServer, setIsServer] = useState(true);
|
||||
|
||||
// Validation state
|
||||
const [validationErrors, setValidationErrors] = useState({
|
||||
@ -53,20 +55,22 @@ const Verify = () => {
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
// Log response data
|
||||
console.log('Response Data:', data);
|
||||
|
||||
if (data.status_code === 200) {
|
||||
setApplicationIds(data.details.data);
|
||||
setIsServer(true);
|
||||
} else {
|
||||
throw new Error('Failed to fetch application IDs');
|
||||
setIsServer(false);
|
||||
throw new Error(data.details.message || 'Failed to fetch application IDs');
|
||||
}
|
||||
} catch (error) {
|
||||
setErrorMessage(error.message || 'Error fetching application IDs');
|
||||
setIsServer(false);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
fetchApplicationIds();
|
||||
|
||||
@ -396,6 +400,32 @@ const Verify = () => {
|
||||
}
|
||||
};
|
||||
|
||||
if (!isServer) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', marginTop: '50px' }}>
|
||||
<img
|
||||
src={ServerDownAnimation}
|
||||
alt="Server Down Animation"
|
||||
style={{ width: '18rem', height: '18rem', marginBottom: '20px' }}
|
||||
/>
|
||||
<h2 style={{ color: 'red' }}>Server tidak dapat diakses</h2>
|
||||
<p>{errorMessage || 'Silakan periksa koneksi internet Anda atau coba lagi nanti.'}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#0542cc',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '5px',
|
||||
cursor: 'pointer'
|
||||
}}>
|
||||
Coba Lagi
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container" style={{ marginTop: '3%' }}>
|
||||
{/* Inject keyframes for the spinner */}
|
||||
|
||||
@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faImage, faTimes, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Select from 'react-select'
|
||||
import { ServerDownAnimation } from '../../../assets/images';
|
||||
|
||||
const CustomLabel = ({ overRide, children, ...props }) => {
|
||||
return <label {...props}>{children}</label>;
|
||||
@ -28,6 +29,7 @@ const Verify = () => {
|
||||
const [showResult, setShowResult] = useState(false);
|
||||
const [inputValueApplication, setInputValueApplication] = useState('');
|
||||
const [selectedQuota, setSelectedQuota] = useState(0);
|
||||
const [isServer, setIsServer] = useState(true);
|
||||
|
||||
// Validation state
|
||||
const [validationErrors, setValidationErrors] = useState({
|
||||
@ -47,23 +49,28 @@ const Verify = () => {
|
||||
'x-api-key': API_KEY,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch application IDs');
|
||||
}
|
||||
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Response Data:', data);
|
||||
|
||||
if (data.status_code === 200) {
|
||||
setApplicationIds(data.details.data);
|
||||
setIsServer(true);
|
||||
} else {
|
||||
throw new Error('Failed to fetch application IDs');
|
||||
setIsServer(false);
|
||||
throw new Error(data.details.message || 'Failed to fetch application IDs');
|
||||
}
|
||||
} catch (error) {
|
||||
setErrorMessage(error.message || 'Error fetching application IDs');
|
||||
setIsServer(false);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
fetchApplicationIds();
|
||||
|
||||
@ -383,6 +390,32 @@ const Verify = () => {
|
||||
}
|
||||
};
|
||||
|
||||
if (!isServer) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', marginTop: '50px' }}>
|
||||
<img
|
||||
src={ServerDownAnimation}
|
||||
alt="Server Down Animation"
|
||||
style={{ width: '18rem', height: '18rem', marginBottom: '20px' }}
|
||||
/>
|
||||
<h2 style={{ color: 'red' }}>Server tidak dapat diakses</h2>
|
||||
<p>{errorMessage || 'Silakan periksa koneksi internet Anda atau coba lagi nanti.'}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#0542cc',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '5px',
|
||||
cursor: 'pointer'
|
||||
}}>
|
||||
Coba Lagi
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container" style={{ marginTop: '3%' }}>
|
||||
{/* Inject keyframes for the spinner */}
|
||||
|
||||
267
src/screens/Biometric/OcrSim/Summary.jsx
Normal file
267
src/screens/Biometric/OcrSim/Summary.jsx
Normal file
@ -0,0 +1,267 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Extract,
|
||||
Transaction,
|
||||
Failed
|
||||
} 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 Failed', icon: Failed },
|
||||
];
|
||||
|
||||
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/OcrSim/Transaction.jsx
Normal file
400
src/screens/Biometric/OcrSim/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(52)); // 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
|
||||
},
|
||||
};
|
||||
|
||||
607
src/screens/Biometric/OcrSim/Verify.jsx
Normal file
607
src/screens/Biometric/OcrSim/Verify.jsx
Normal file
@ -0,0 +1,607 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faImage, faTimes, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Select from 'react-select'
|
||||
import { ServerDownAnimation } from '../../../assets/images';
|
||||
|
||||
const CustomLabel = ({ overRide, children, ...props }) => {
|
||||
return <label {...props}>{children}</label>;
|
||||
};
|
||||
|
||||
const Verify = () => {
|
||||
const BASE_URL = process.env.REACT_APP_BASE_URL;
|
||||
const API_KEY = process.env.REACT_APP_API_KEY;
|
||||
const fileTypes = ["image/jpeg", "image/png"];
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const [selectedImageName, setSelectedImageName] = useState('');
|
||||
const [resultImageLabel, setResultImageLabel] = useState('');
|
||||
const [file, setFile] = useState(null);
|
||||
const [applicationId, setApplicationId] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [applicationIds, setApplicationIds] = useState([]);
|
||||
const [imageUrl, setImageUrl] = useState('');
|
||||
const [imageError, setImageError] = useState('');
|
||||
const [data, setData] = useState(null);
|
||||
const [showResult, setShowResult] = useState(false);
|
||||
const [inputValueApplication, setInputValueApplication] = useState('');
|
||||
const [selectedQuota, setSelectedQuota] = useState(0);
|
||||
const [isServer, setIsServer] = useState(true);
|
||||
|
||||
// Validation state
|
||||
const [validationErrors, setValidationErrors] = useState({
|
||||
applicationId: '',
|
||||
file: ''
|
||||
});
|
||||
|
||||
// Fetch Application IDs
|
||||
useEffect(() => {
|
||||
const fetchApplicationIds = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await fetch(`${BASE_URL}/application/list`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'accept': 'application/json',
|
||||
'x-api-key': API_KEY,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch application IDs');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Response Data:', data);
|
||||
|
||||
if (data.status_code === 200) {
|
||||
setApplicationIds(data.details.data);
|
||||
setIsServer(true);
|
||||
} else {
|
||||
setIsServer(false);
|
||||
throw new Error(data.details.message || 'Failed to fetch application IDs');
|
||||
}
|
||||
} catch (error) {
|
||||
setErrorMessage(error.message || 'Error fetching application IDs');
|
||||
setIsServer(false);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchApplicationIds();
|
||||
|
||||
const checkMobile = () => {
|
||||
setIsMobile(window.innerWidth <= 768); // Example: 768px as the threshold for mobile devices
|
||||
};
|
||||
|
||||
// Check on initial load
|
||||
checkMobile();
|
||||
|
||||
// Add resize listener to adjust `isMobile` state on window resize
|
||||
window.addEventListener('resize', checkMobile);
|
||||
|
||||
// Clean up the event listener when the component unmounts
|
||||
return () => {
|
||||
window.removeEventListener('resize', checkMobile);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleInputChangeApplication = (inputValue) => {
|
||||
setInputValueApplication(inputValue);
|
||||
};
|
||||
|
||||
const handleApplicationChange = (selectedOption) => {
|
||||
const selectedId = selectedOption.value;
|
||||
const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
|
||||
|
||||
setApplicationId(selectedOption ? selectedOption.value : '');
|
||||
|
||||
if (selectedApp) {
|
||||
setSelectedQuota(selectedApp.quota);
|
||||
}
|
||||
};
|
||||
|
||||
const applicationOptions = applicationIds.map(app => ({
|
||||
value: app.id, // This is what will be sent when an option is selected
|
||||
label: app.name // This is what will be displayed in the dropdown
|
||||
}));
|
||||
|
||||
// Handle file upload
|
||||
const handleFileDrop = (files) => {
|
||||
if (files && files[0]) {
|
||||
handleImageUpload(files[0]);
|
||||
} else {
|
||||
console.error('No valid files dropped');
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageUpload = (file) => {
|
||||
setFile(file);
|
||||
setSelectedImageName(file.name);
|
||||
|
||||
// Validate file type
|
||||
if (!fileTypes.includes(file.type)) {
|
||||
setImageError('Invalid file type. Only JPG, JPEG, and PNG are allowed.');
|
||||
} else if (file.size > 2 * 1024 * 1024) { // Max 2MB
|
||||
setImageError('File size exceeds 2MB.');
|
||||
} else {
|
||||
setImageError('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageCancel = () => {
|
||||
setFile(null);
|
||||
setSelectedImageName('');
|
||||
setImageError('');
|
||||
fileInputRef.current.value = '';
|
||||
};
|
||||
|
||||
// Validate form inputs before submitting
|
||||
const validateForm = () => {
|
||||
const errors = {
|
||||
applicationId: '',
|
||||
file: ''
|
||||
};
|
||||
|
||||
if (!applicationId) {
|
||||
errors.applicationId = 'Please select an Application ID.';
|
||||
}
|
||||
|
||||
if (!file) {
|
||||
errors.file = 'Please upload an image file.';
|
||||
} else if (imageError) {
|
||||
errors.file = imageError;
|
||||
}
|
||||
|
||||
setValidationErrors(errors);
|
||||
return Object.values(errors).every(error => error === '');
|
||||
};
|
||||
|
||||
// Submit form and trigger OCR API
|
||||
const handleCheckClick = async () => {
|
||||
if (!validateForm()) {
|
||||
return; // Form is not valid
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
const formData = new FormData();
|
||||
formData.append('application_id', applicationId);
|
||||
formData.append('file', file);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${BASE_URL}/ocr-npwp`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'accept': 'application/json',
|
||||
'x-api-key': API_KEY,
|
||||
},
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('OCR processing failed');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// Log the full result to verify structure
|
||||
console.log('OCR API Response:', result);
|
||||
|
||||
if (result.status_code === 201) {
|
||||
const responseData = result.details.data?.['data-npwp'] || {};
|
||||
const updateQuota = result.details.data.quota
|
||||
|
||||
const data = {
|
||||
npwp: responseData.npwp || 'N/A',
|
||||
npwpName: responseData.name || 'N/A',
|
||||
npwpAddress: responseData.address || 'N/A',
|
||||
npwpX: responseData.npwp_x || 'N/A',
|
||||
imageUrl: result.details.data?.image_url || '', // Properly access image_url
|
||||
};
|
||||
|
||||
setSelectedQuota(updateQuota)
|
||||
|
||||
console.log('Image URL from OCR:', result.details.data?.image_url); // Log the image URL correctly
|
||||
|
||||
setData(data);
|
||||
setShowResult(true);
|
||||
setErrorMessage('');
|
||||
setSelectedImageName('');
|
||||
setResultImageLabel(selectedImageName);
|
||||
|
||||
// Fetch image if image URL exists in the result
|
||||
if (result.details.data?.image_url) {
|
||||
const imageFileName = result.details.data.image_url.split('/').pop(); // Get the image filename
|
||||
console.log('Image file name:', imageFileName); // Debug the file name
|
||||
await fetchImage(imageFileName); // Call the fetchImage function to fetch the image
|
||||
}
|
||||
} else {
|
||||
setErrorMessage('OCR processing failed');
|
||||
}
|
||||
} catch (error) {
|
||||
setErrorMessage(error.message || 'Error during OCR processing');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// The fetchImage function you already have in your code
|
||||
const fetchImage = async (imageFileName) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await fetch(`${BASE_URL}/preview/image/${imageFileName}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'accept': 'application/json',
|
||||
'x-api-key': API_KEY,
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorDetails = await response.json();
|
||||
console.error('Image fetch error details:', errorDetails);
|
||||
setErrorMessage('Failed to fetch image, please try again.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the image blob
|
||||
const imageBlob = await response.blob();
|
||||
const imageData = URL.createObjectURL(imageBlob); // Create object URL from the blob
|
||||
|
||||
// Debugging: Make sure imageData is correct
|
||||
console.log('Fetched image URL:', imageData);
|
||||
|
||||
setImageUrl(imageData); // Update imageUrl state with the fetched image data
|
||||
} catch (error) {
|
||||
console.error('Error fetching image:', error);
|
||||
setErrorMessage(error.message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const styles = {
|
||||
selectWrapper: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
},
|
||||
select: {
|
||||
fontSize: '16px',
|
||||
padding: '10px',
|
||||
width: '100%',
|
||||
borderRadius: '4px',
|
||||
border: '1px solid #ccc',
|
||||
},
|
||||
remainingQuota: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
quotaText: {
|
||||
fontSize: '24px',
|
||||
fontWeight: '600',
|
||||
},
|
||||
timesText: {
|
||||
fontSize: '16px',
|
||||
fontWeight: '300',
|
||||
},
|
||||
customLabel: {
|
||||
fontSize: '18px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2d3d',
|
||||
},
|
||||
uploadWrapper: {
|
||||
marginTop: '1rem',
|
||||
},
|
||||
uploadArea: {
|
||||
backgroundColor: '#e6f2ff',
|
||||
height: !isMobile? '30svh' : '50svh',
|
||||
cursor: 'pointer',
|
||||
marginTop: '1rem',
|
||||
paddingTop: '22px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
border: '1px solid #ced4da',
|
||||
borderRadius: '0.25rem',
|
||||
textAlign: 'center',
|
||||
},
|
||||
uploadIcon: {
|
||||
fontSize: '40px',
|
||||
color: '#0542cc',
|
||||
marginBottom: '10px',
|
||||
},
|
||||
uploadText: {
|
||||
color: '#1f2d3d',
|
||||
fontWeight: '400',
|
||||
fontSize: '16px',
|
||||
},
|
||||
browseLink: {
|
||||
color: '#0542cc',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
uploadError: {
|
||||
color: 'red',
|
||||
fontSize: '12px',
|
||||
marginTop: '10px',
|
||||
},
|
||||
errorContainer: {
|
||||
marginTop: '10px',
|
||||
padding: '10px',
|
||||
backgroundColor: '#f8d7da',
|
||||
border: '1px solid #f5c6cb',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
errorText: {
|
||||
color: '#721c24',
|
||||
fontSize: '14px',
|
||||
margin: '0',
|
||||
},loadingOverlay: {
|
||||
position: 'fixed', // Gunakan fixed untuk overlay penuh layar
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0, // Pastikan menutupi seluruh layar
|
||||
display: 'flex',
|
||||
justifyContent: 'center', // Posisikan spinner di tengah secara horizontal
|
||||
alignItems: 'center', // Posisikan spinner di tengah secara vertikal
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semitransparan di background
|
||||
color: 'white',
|
||||
fontSize: '24px',
|
||||
zIndex: 1000, // Pastikan overlay muncul di atas konten lainnya
|
||||
},
|
||||
spinner: {
|
||||
border: '4px solid #f3f3f3', // Border gray untuk spinner
|
||||
borderTop: '4px solid #3498db', // Border biru untuk spinner
|
||||
borderRadius: '50%', // Membuat spinner bulat
|
||||
width: '50px', // Ukuran spinner
|
||||
height: '50px', // Ukuran spinner
|
||||
animation: 'spin 2s linear infinite', // Menambahkan animasi spin
|
||||
},
|
||||
loadingText: {
|
||||
marginLeft: '20px',
|
||||
},
|
||||
tableStyle: {
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse',
|
||||
marginTop: '20px',
|
||||
},
|
||||
tableCell: {
|
||||
padding: '8px 15px',
|
||||
border: '1px solid #ccc',
|
||||
textAlign: 'left',
|
||||
},
|
||||
};
|
||||
|
||||
const formatFileSize = (sizeInBytes) => {
|
||||
if (sizeInBytes < 1024) {
|
||||
return `${sizeInBytes} bytes`; // Jika ukuran lebih kecil dari 1 KB
|
||||
} else if (sizeInBytes < 1048576) {
|
||||
return `${(sizeInBytes / 1024).toFixed(2)} KB`; // Jika ukuran lebih kecil dari 1 MB
|
||||
} else {
|
||||
return `${(sizeInBytes / 1048576).toFixed(2)} MB`; // Jika ukuran lebih besar dari 1 MB
|
||||
}
|
||||
};
|
||||
|
||||
if (!isServer) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', marginTop: '50px' }}>
|
||||
<img
|
||||
src={ServerDownAnimation}
|
||||
alt="Server Down Animation"
|
||||
style={{ width: '18rem', height: '18rem', marginBottom: '20px' }}
|
||||
/>
|
||||
<h2 style={{ color: 'red' }}>Server tidak dapat diakses</h2>
|
||||
<p>{errorMessage || 'Silakan periksa koneksi internet Anda atau coba lagi nanti.'}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#0542cc',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '5px',
|
||||
cursor: 'pointer'
|
||||
}}>
|
||||
Coba Lagi
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container" style={{ marginTop: '3%' }}>
|
||||
{/* Inject keyframes for the spinner */}
|
||||
<style>
|
||||
{`
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
{isLoading && (
|
||||
<div style={styles.loadingOverlay}>
|
||||
<div style={styles.spinner}></div>
|
||||
<p style={styles.loadingText}>Loading...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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 className="d-flex flex-row mt-3">
|
||||
<Link to="/createApps" style={{ textDecoration: 'none' }}>
|
||||
<button className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
|
||||
<i className="fas fa-plus text-white me-2"></i>
|
||||
<p className="text-white mb-0">Create New App ID</p>
|
||||
</button>
|
||||
</Link>
|
||||
</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%' }}>
|
||||
<div className="form-group row align-items-center">
|
||||
<div className="col-md-6">
|
||||
<div style={styles.selectWrapper}>
|
||||
<Select
|
||||
id="applicationId"
|
||||
value={applicationOptions.find(option => option.value === applicationId)}
|
||||
onChange={handleApplicationChange}
|
||||
options={applicationOptions}
|
||||
placeholder="Select Application ID"
|
||||
isSearchable
|
||||
menuPortalTarget={document.body}
|
||||
menuPlacement="auto"
|
||||
inputValue={inputValueApplication}
|
||||
onInputChange={handleInputChangeApplication} // Limit input length for Application ID
|
||||
/>
|
||||
</div>
|
||||
{validationErrors.applicationId && <p style={styles.errorText}>{validationErrors.applicationId}</p>}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', margin: '0', marginTop: '8px' }}>
|
||||
Remaining Quota
|
||||
</p>
|
||||
<div style={styles.remainingQuota}>
|
||||
<span style={styles.quotaText}>{selectedQuota}</span>
|
||||
<span style={styles.timesText}>(times)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image Upload */}
|
||||
<div className="col-md-6">
|
||||
<div className="form-group mt-4">
|
||||
<CustomLabel htmlFor="imageInput" style={styles.customLabel}>
|
||||
Upload Image (SIM)
|
||||
</CustomLabel>
|
||||
<div style={styles.uploadWrapper}>
|
||||
{/* Drag and Drop File Input */}
|
||||
<div
|
||||
style={styles.uploadArea}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
handleFileDrop(e.dataTransfer.files);
|
||||
}}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
>
|
||||
<FontAwesomeIcon icon={faCloudUploadAlt} style={styles.uploadIcon} />
|
||||
<p style={styles.uploadText}>Drag and Drop Here</p>
|
||||
<p>Or</p>
|
||||
<a href="#" onClick={() => fileInputRef.current.click()} style={styles.browseLink}>Browse</a>
|
||||
<p className="text-muted" style={styles.uploadText}>Recommended size: 300x300 (Max File Size: 2MB)</p>
|
||||
<p className="text-muted" style={styles.uploadText}>Supported file types: JPG, JPEG, PNG</p>
|
||||
</div>
|
||||
|
||||
{/* File Input */}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
id="imageInput"
|
||||
className="form-control"
|
||||
style={{ display: 'none' }}
|
||||
accept="image/jpeg, image/png"
|
||||
onChange={(e) => handleImageUpload(e.target.files[0])}
|
||||
/>
|
||||
|
||||
{selectedImageName && (
|
||||
<div className="mt-3">
|
||||
<p><strong>File:</strong> {selectedImageName}</p>
|
||||
{file && (
|
||||
<p style={styles.fileSize}>
|
||||
Size: {formatFileSize(file.size)}
|
||||
</p>
|
||||
)}
|
||||
<button className="btn btn-danger" onClick={handleImageCancel}>
|
||||
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{validationErrors.file && <p style={styles.errorText}>{validationErrors.file}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-12 d-flex justify-content-end mt-4">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleCheckClick}
|
||||
disabled={isLoading || !file || !applicationId || validationErrors.file || validationErrors.applicationId}
|
||||
>
|
||||
<FontAwesomeIcon icon={faImage} className="me-2" />
|
||||
Check SIM
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{errorMessage && (
|
||||
<div style={styles.errorContainer}>
|
||||
<p style={styles.errorText}>{errorMessage}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showResult && data && (
|
||||
<div className="mt-5">
|
||||
<h4>OCR SIM Result</h4>
|
||||
<div className="row">
|
||||
{/* Gambar di kolom pertama */}
|
||||
<div className="col-md-6">
|
||||
<img
|
||||
src={imageUrl || "path-to-your-image"}
|
||||
alt="SIM Image"
|
||||
style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
|
||||
className="img-fluid" // Menambahkan kelas Bootstrap img-fluid untuk responsif
|
||||
/>
|
||||
<p style={{ marginTop: '10px' }}>
|
||||
File Name: {resultImageLabel} {/* Display the resultImageLabel here */}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tabel di kolom kedua */}
|
||||
<div className="col-md-6">
|
||||
<table style={styles.tableStyle}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>NPWP</td>
|
||||
<td style={styles.tableCell}>{data.npwp}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>NPWP Name</td>
|
||||
<td style={styles.tableCell}>{data.npwpName}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>NPWP Address</td>
|
||||
<td style={styles.tableCell}>{data.npwpAddress}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>NPWP (X)</td>
|
||||
<td style={styles.tableCell}>{data.npwpX}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Verify;
|
||||
|
||||
9
src/screens/Biometric/OcrSim/index.js
Normal file
9
src/screens/Biometric/OcrSim/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
import VerifySim from "./Verify";
|
||||
import SummarySim from "./Summary";
|
||||
import TransactionSim from "./Transaction";
|
||||
|
||||
export {
|
||||
VerifySim,
|
||||
SummarySim,
|
||||
TransactionSim
|
||||
}
|
||||
11
src/screens/Sms/Verification/Section/Announcement.jsx
Normal file
11
src/screens/Sms/Verification/Section/Announcement.jsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const Announcement = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Sms Verification - Announcement</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Announcement
|
||||
279
src/screens/Sms/Verification/Section/Otp.jsx
Normal file
279
src/screens/Sms/Verification/Section/Otp.jsx
Normal file
@ -0,0 +1,279 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Select from 'react-select';
|
||||
|
||||
const BASE_URL = process.env.REACT_APP_BASE_URL;
|
||||
const API_KEY = process.env.REACT_APP_API_KEY;
|
||||
|
||||
const Otp = () => {
|
||||
const [isSelectOpen, setIsSelectOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [applicationId, setApplicationId] = useState('');
|
||||
const [expiryId, setExpiryId] = useState(0);
|
||||
const [otpId, setOtpId] = useState('');
|
||||
const [messageId, setMessageId] = useState('');
|
||||
const [phoneId, setPhoneId] = useState('');
|
||||
const [inputValueApplication, setInputValueApplication] = useState('');
|
||||
const [applicationIds, setApplicationIds] = useState([]);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
const applicationOptions = applicationIds.map(app => ({
|
||||
value: app.id,
|
||||
label: app.name
|
||||
}));
|
||||
|
||||
const handleApplicationChange = (selectedOption) => {
|
||||
setApplicationId(selectedOption.value);
|
||||
};
|
||||
|
||||
const handleInputChangeApplication = (newInputValue) => {
|
||||
if (newInputValue.length <= 15) {
|
||||
setInputValueApplication(newInputValue);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchApplicationIds = async () => {
|
||||
try {
|
||||
const response = await fetch(`${BASE_URL}/application/list`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'accept': 'application/json',
|
||||
'x-api-key': API_KEY,
|
||||
},
|
||||
});
|
||||
const data = await response.json();
|
||||
return data.details.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching application IDs:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setIsLoading(true);
|
||||
const data = await fetchApplicationIds();
|
||||
setApplicationIds(data);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
fetchData();
|
||||
|
||||
const checkIfMobile = () => {
|
||||
setIsMobile(window.innerWidth <= 768);
|
||||
};
|
||||
|
||||
checkIfMobile();
|
||||
window.addEventListener('resize', checkIfMobile);
|
||||
return () => window.removeEventListener('resize', checkIfMobile);
|
||||
}, []);
|
||||
|
||||
const handleFocus = () => {
|
||||
setIsSelectOpen(true);
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
setIsSelectOpen(false);
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
console.log('Make OTP Demo');
|
||||
};
|
||||
|
||||
|
||||
const styles = {
|
||||
text: {
|
||||
fontSize: '16px',
|
||||
fontWeight: '400',
|
||||
margin: '0',
|
||||
marginTop: '8px',
|
||||
},
|
||||
remainingQuotaWrapper: {
|
||||
marginTop: '2vh',
|
||||
},
|
||||
remainingQuota: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: '4px',
|
||||
},
|
||||
quotaText: {
|
||||
fontSize: '40px',
|
||||
color: '#0542cc',
|
||||
fontWeight: '600',
|
||||
},
|
||||
timesText: {
|
||||
marginLeft: '8px',
|
||||
verticalAlign: 'super',
|
||||
fontSize: '20px',
|
||||
},
|
||||
submitButton: {
|
||||
marginLeft: 'auto',
|
||||
marginTop: '4rem',
|
||||
textAlign: 'start',
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
},
|
||||
submitBtn: {
|
||||
backgroundColor: '#0542CC',
|
||||
},
|
||||
loadingOverlay: {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 1000,
|
||||
},
|
||||
spinner: {
|
||||
border: '4px solid rgba(0, 0, 0, 0.1)',
|
||||
borderLeftColor: '#0542cc',
|
||||
borderRadius: '50%',
|
||||
width: '90px',
|
||||
height: '90px',
|
||||
animation: 'spin 1s ease-in-out infinite',
|
||||
},
|
||||
select: {
|
||||
width: '100%',
|
||||
paddingRight: '30px',
|
||||
fontSize: '16px',
|
||||
border: '1px solid #ccc',
|
||||
outline: 'none',
|
||||
},
|
||||
OtpId: {
|
||||
marginTop: isMobile ? '2vh' : '0',
|
||||
},
|
||||
PhoneNumber: {
|
||||
marginTop: isMobile ? '2vh' : '-12vh',
|
||||
},
|
||||
textarea: {
|
||||
width: '100%',
|
||||
height: '200px',
|
||||
resize: 'none',
|
||||
border: '1px solid #ccc',
|
||||
outline: 'none',
|
||||
},
|
||||
characterCount: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
marginTop: '8px',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<style>
|
||||
{`
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
{isLoading && (
|
||||
<div style={styles.loadingOverlay}>
|
||||
<div style={styles.spinner}></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-group row align-items-center">
|
||||
<div className="col-md-6">
|
||||
<Select
|
||||
id="applicationId"
|
||||
value={applicationOptions.find(option => option.value === applicationId)}
|
||||
onChange={handleApplicationChange}
|
||||
options={applicationOptions}
|
||||
placeholder="Select Application ID"
|
||||
isSearchable
|
||||
menuPortalTarget={document.body}
|
||||
menuPlacement="auto"
|
||||
inputValue={inputValueApplication}
|
||||
onInputChange={handleInputChangeApplication}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6" style={styles.remainingQuotaWrapper}>
|
||||
<p style={styles.text}>Remaining Quota</p>
|
||||
<div style={styles.remainingQuota}>
|
||||
<span style={styles.quotaText}>0</span>
|
||||
<span style={styles.timesText}>(times)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row align-items-center">
|
||||
<div className="col-md-6">
|
||||
<input
|
||||
type="number"
|
||||
id="expiryId"
|
||||
className="form-control"
|
||||
style={styles.select}
|
||||
value={expiryId}
|
||||
onChange={(e) => setExpiryId(parseInt(e.target.value) || 0)}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
placeholder="Expiry Time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6" style={styles.OtpId}>
|
||||
<input
|
||||
type="text"
|
||||
id="otpId"
|
||||
className="form-control"
|
||||
placeholder="OTP Length"
|
||||
value={otpId}
|
||||
onChange={(e) => setOtpId(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row align-items-center mt-4">
|
||||
<div className="col-md-6">
|
||||
<textarea
|
||||
id="messageId"
|
||||
className="form-control"
|
||||
style={styles.textarea}
|
||||
value={messageId}
|
||||
onChange={(e) => setMessageId(e.target.value)}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
placeholder="Message Info"
|
||||
/>
|
||||
<div style={styles.characterCount}>
|
||||
<p style={styles.text}>Character: 0 (Max. 459), SMS Count: 0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
<div className="input-group" style={styles.PhoneNumber}>
|
||||
<span className="input-group-prepend">
|
||||
<span className="input-group-text">+62</span>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
id="phoneId"
|
||||
className="form-control"
|
||||
placeholder="Phone Number"
|
||||
value={phoneId}
|
||||
onChange={(e) => setPhoneId(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.submitButton}>
|
||||
<button onClick={handleClick} className="btn d-flex justify-content-center align-items-center me-2" style={styles.submitBtn}>
|
||||
<p className="text-white mb-0">Make OTP Demo</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Otp;
|
||||
|
||||
7
src/screens/Sms/Verification/Section/index.js
Normal file
7
src/screens/Sms/Verification/Section/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
import VerificationAnnoncement from "./Announcement";
|
||||
import VerificationOtp from "./Otp";
|
||||
|
||||
export {
|
||||
VerificationAnnoncement,
|
||||
VerificationOtp
|
||||
}
|
||||
114
src/screens/Sms/Verification/Verify.jsx
Normal file
114
src/screens/Sms/Verification/Verify.jsx
Normal file
@ -0,0 +1,114 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Link, Routes, Route, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
VerificationOtp,
|
||||
VerificationAnnoncement
|
||||
} from './Section';
|
||||
|
||||
const Verify = () => {
|
||||
const verifyTabs = [
|
||||
{ name: 'OTP', link: 'sms-otp' },
|
||||
{ name: 'Announcement', link: 'sms-announcement' }
|
||||
];
|
||||
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Redirect otomatis ke rute default saat akses ke /sms-verify
|
||||
useEffect(() => {
|
||||
if (window.location.pathname === '/sms-verify') {
|
||||
navigate('sms-otp', { replace: true });
|
||||
}
|
||||
}, [navigate]);
|
||||
|
||||
// Update state isMobile berdasarkan ukuran layar
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth <= 768);
|
||||
};
|
||||
|
||||
handleResize();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="container" style={styles.container}>
|
||||
{/* Static Content */}
|
||||
<div className="row-card border-left border-primary shadow mb-4" style={styles.welcomeCard}>
|
||||
<div className="d-flex flex-column justify-content-start align-items-start p-4">
|
||||
<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 className="d-flex flex-row mt-3">
|
||||
<Link to="/createApps" style={{ textDecoration: 'none' }}>
|
||||
<button className="btn d-flex justify-content-center align-items-center me-2" style={styles.createButton}>
|
||||
<i className="fas fa-plus text-white me-2"></i>
|
||||
<p className="text-white mb-0">Create New App ID</p>
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tab Navigation */}
|
||||
<div style={styles.section}>
|
||||
<div className={`d-flex ${isMobile ? 'flex-column' : 'flex-row'} justify-content-between align-items-center mb-3`}>
|
||||
<div className="d-flex flex-wrap">
|
||||
{verifyTabs.map((tab) => (
|
||||
<Link
|
||||
key={tab.link}
|
||||
to={tab.link}
|
||||
className={`btn ${window.location.pathname.includes(tab.link) ? 'btn-primary' : 'btn-light'} me-2 mb-2`}
|
||||
style={styles.tabLink}
|
||||
>
|
||||
{tab.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dynamic Tab Content */}
|
||||
<div className="tab-content">
|
||||
<Routes>
|
||||
<Route path="sms-otp" element={<VerificationOtp />} />
|
||||
<Route path="sms-announcement" element={<VerificationAnnoncement />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Verify;
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
marginTop: '3%',
|
||||
padding: '0 15px',
|
||||
},
|
||||
welcomeCard: {
|
||||
backgroundColor: '#E2FBEA',
|
||||
borderLeft: '4px solid #0542CC',
|
||||
borderRadius: '5px',
|
||||
marginBottom: '20px',
|
||||
},
|
||||
createButton: {
|
||||
backgroundColor: '#0542CC',
|
||||
},
|
||||
section: {
|
||||
padding: '20px',
|
||||
border: '0.1px solid rgba(0, 0, 0, 0.2)',
|
||||
borderLeft: '4px solid #0542CC',
|
||||
borderRadius: '10px',
|
||||
width: '100%',
|
||||
},
|
||||
tabLink: {
|
||||
padding: '10px 20px',
|
||||
},
|
||||
};
|
||||
5
src/screens/Sms/Verification/index.js
Normal file
5
src/screens/Sms/Verification/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
import SmsVerify from "./Verify"
|
||||
|
||||
export {
|
||||
SmsVerify
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user