Implement API OCR-NPWP
This commit is contained in:
parent
1ff6059560
commit
d3e66d81ef
@ -30,6 +30,10 @@ import {
|
||||
VerifyKtp
|
||||
} from './screens/Biometric/OcrKtp';
|
||||
|
||||
import {
|
||||
VerifyNpwp
|
||||
} from './screens/Biometric/OcrNpwp';
|
||||
|
||||
// Import all other components following the dataMenu structure...
|
||||
|
||||
const App = () => {
|
||||
@ -74,6 +78,9 @@ const App = () => {
|
||||
{/* Biometric - KTP */}
|
||||
<Route path="/ktp-verify" element={<VerifyKtp />} />
|
||||
|
||||
{/* Biometric - NPWP */}
|
||||
<Route path="/npwp-verify" element={<VerifyNpwp />} />
|
||||
|
||||
{/* <Route path="/sms-otp-settings" element={<SmsOtpSettings />} /> */}
|
||||
{/* Continue for each link */}
|
||||
|
||||
|
||||
@ -699,26 +699,72 @@ const Verify = () => {
|
||||
<CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
|
||||
Upload Face Photo
|
||||
</CustomLabel>
|
||||
<FileUploader
|
||||
handleChange={handleImageUpload}
|
||||
name="file"
|
||||
types={fileTypes}
|
||||
multiple={false}
|
||||
onDrop={(files) => handleImageUpload(files[0])}
|
||||
children={
|
||||
<div style={styles.uploadArea}>
|
||||
<div style={styles.uploadWrapper}>
|
||||
<div
|
||||
style={styles.uploadArea}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
// Handle drop event
|
||||
const file = e.dataTransfer.files[0];
|
||||
handleImageUpload(file);
|
||||
}}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
>
|
||||
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
|
||||
<p style={styles.uploadText}>Drag and Drop Here</p>
|
||||
<p>Or</p>
|
||||
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
|
||||
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
|
||||
<p className="text-muted">Supported file types: JPG, JPEG</p>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
// Only open file input if no file is selected
|
||||
if (!fileInputRef.current.files.length) {
|
||||
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
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* File Input */}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
id="uploadPhoto"
|
||||
className="form-control"
|
||||
style={{ display: 'none' }}
|
||||
accept="image/jpeg, image/jpg"
|
||||
onChange={(e) => handleImageUpload(e.target.files[0])}
|
||||
/>
|
||||
|
||||
{/* Display selected file info */}
|
||||
{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>
|
||||
)}
|
||||
|
||||
{/* Error Message */}
|
||||
{uploadError && <small style={styles.uploadError}>{uploadError}</small>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Display uploaded image name */}
|
||||
{selectedImageName && (
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faImage, faTimes, faChevronDown, faChevronLeft, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faImage, faTimes, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Select from 'react-select'
|
||||
import { DummyKtp } from '../../../assets/images';
|
||||
|
||||
const CustomLabel = ({ overRide, children, ...props }) => {
|
||||
return <label {...props}>{children}</label>;
|
||||
@ -18,6 +17,7 @@ const Verify = () => {
|
||||
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);
|
||||
@ -211,6 +211,7 @@ const Verify = () => {
|
||||
setShowResult(true);
|
||||
setErrorMessage('');
|
||||
setSelectedImageName('');
|
||||
setResultImageLabel(selectedImageName);
|
||||
|
||||
// Fetch image if image URL exists in the result
|
||||
if (result.details.data?.image_url) {
|
||||
@ -457,6 +458,7 @@ const Verify = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image Upload */}
|
||||
<div className="col-md-6">
|
||||
<div className="form-group mt-4">
|
||||
<CustomLabel htmlFor="imageInput" style={styles.customLabel}>
|
||||
@ -539,6 +541,9 @@ const Verify = () => {
|
||||
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 */}
|
||||
|
||||
571
src/screens/Biometric/OcrNpwp/Verify.jsx
Normal file
571
src/screens/Biometric/OcrNpwp/Verify.jsx
Normal file
@ -0,0 +1,571 @@
|
||||
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'
|
||||
|
||||
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);
|
||||
|
||||
// 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();
|
||||
if (data.status_code === 200) {
|
||||
setApplicationIds(data.details.data);
|
||||
} else {
|
||||
throw new Error('Failed to fetch application IDs');
|
||||
}
|
||||
} catch (error) {
|
||||
setErrorMessage(error.message || 'Error fetching application IDs');
|
||||
} 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 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
|
||||
};
|
||||
|
||||
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
|
||||
}
|
||||
};
|
||||
|
||||
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 (NPWP)
|
||||
</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 NPWP
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{errorMessage && (
|
||||
<div style={styles.errorContainer}>
|
||||
<p style={styles.errorText}>{errorMessage}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showResult && data && (
|
||||
<div className="mt-5">
|
||||
<h4>OCR NPWP Result</h4>
|
||||
<div className="row">
|
||||
{/* Gambar di kolom pertama */}
|
||||
<div className="col-md-6">
|
||||
<img
|
||||
src={imageUrl || "path-to-your-image"}
|
||||
alt="NPWP 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;
|
||||
|
||||
5
src/screens/Biometric/OcrNpwp/index.js
Normal file
5
src/screens/Biometric/OcrNpwp/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
import VerifyNpwp from "./Verify";
|
||||
|
||||
export {
|
||||
VerifyNpwp
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user