OCR KTP
This commit is contained in:
parent
bd3a3d42ce
commit
68878187e2
@ -33,320 +33,6 @@ const Enroll = () => {
|
||||
const [options, setOptions] = useState([]);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
const styles = {
|
||||
// Existing styles
|
||||
formGroup: {
|
||||
marginTop: '-45px',
|
||||
},
|
||||
selectWrapper: {
|
||||
position: 'relative',
|
||||
marginTop: '0',
|
||||
},
|
||||
select: {
|
||||
width: '100%',
|
||||
paddingRight: '30px',
|
||||
},
|
||||
chevronIcon: {
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
remainingQuota: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: '4px',
|
||||
},
|
||||
quotaText: {
|
||||
fontSize: '40px',
|
||||
color: '#0542cc',
|
||||
fontWeight: '600',
|
||||
},
|
||||
timesText: {
|
||||
marginLeft: '8px',
|
||||
verticalAlign: 'super',
|
||||
fontSize: '20px',
|
||||
},
|
||||
uploadArea: {
|
||||
backgroundColor: '#e6f2ff',
|
||||
height: '250px', // Default height for non-mobile devices
|
||||
cursor: 'pointer',
|
||||
marginTop: '1rem',
|
||||
paddingTop: '22px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
border: '1px solid #ced4da',
|
||||
borderRadius: '0.25rem',
|
||||
},
|
||||
|
||||
// Mobile responsive styles for upload area
|
||||
uploadAreaMobile: {
|
||||
backgroundColor: '#e6f2ff',
|
||||
height: '50svh', // Reduced height for mobile
|
||||
cursor: 'pointer',
|
||||
marginTop: '1rem',
|
||||
paddingTop: '18px', // Adjusted padding for mobile
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
border: '1px solid #ced4da',
|
||||
borderRadius: '0.25rem',
|
||||
padding: '20px'
|
||||
},
|
||||
uploadIcon: {
|
||||
fontSize: '40px',
|
||||
color: '#0542cc',
|
||||
marginBottom: '7px',
|
||||
},
|
||||
uploadText: {
|
||||
color: '#1f2d3d',
|
||||
fontWeight: '400',
|
||||
fontSize: '16px',
|
||||
lineHeight: '13px',
|
||||
},
|
||||
wrapper: {
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '6px',
|
||||
padding: '18px 10px 0 8px', // Padding lebih seragam
|
||||
height: '13svh', // Tinggi lebih kecil untuk menyesuaikan tampilan
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#f9f9f9',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
fileWrapper: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flex: '1',
|
||||
},
|
||||
textContainer: {
|
||||
flex: '1',
|
||||
fontSize: '16px', // Ukuran font lebih kecil
|
||||
marginLeft: '6px',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
marginTop: '1rem'
|
||||
},
|
||||
fileSize: {
|
||||
fontSize: '12px',
|
||||
color: '#555',
|
||||
marginBottom: '2rem',
|
||||
},
|
||||
closeButtonContainer: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginLeft: 'auto',
|
||||
},
|
||||
closeButton: {
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: '0',
|
||||
},
|
||||
imageIcon: {
|
||||
color: '#0542cc',
|
||||
fontSize: '18px', // Ukuran ikon sedikit lebih kecil
|
||||
marginRight: '6px',
|
||||
},
|
||||
closeIcon: {
|
||||
color: 'red',
|
||||
fontSize: '18px',
|
||||
},
|
||||
submitButton: {
|
||||
marginLeft: 'auto',
|
||||
marginTop: '4rem',
|
||||
textAlign: 'start',
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
},
|
||||
uploadError: {
|
||||
color: 'red',
|
||||
fontSize: '12px',
|
||||
marginTop: '5px',
|
||||
},
|
||||
|
||||
// New styles added and merged
|
||||
containerResultStyle: {
|
||||
padding: '20px',
|
||||
border: '1px solid #0053b3',
|
||||
borderRadius: '5px',
|
||||
width: '100%',
|
||||
margin: '20px auto',
|
||||
},
|
||||
resultContainer: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between', // Horizontal alignment
|
||||
alignItems: 'flex-start', // Align items at the top
|
||||
flexDirection: isMobile ? 'column' : 'row', // Stack vertically on mobile
|
||||
width: '100%',
|
||||
},
|
||||
resultsTable: {
|
||||
width: '60%',
|
||||
borderCollapse: 'collapse',
|
||||
},
|
||||
resultsTableMobile: {
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse',
|
||||
},
|
||||
resultsCell: {
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
fontSize: isMobile ? '14px' : '16px',
|
||||
},
|
||||
resultsValueCell: {
|
||||
padding: '8px',
|
||||
width: '70%',
|
||||
fontSize: isMobile ? '14px' : '16px',
|
||||
color: 'red',
|
||||
},
|
||||
resultsTrueValue: {
|
||||
color: 'inherit',
|
||||
},
|
||||
imageContainer: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: isMobile ? 'center' : 'flex-start', // Center image on mobile
|
||||
width: '100%',
|
||||
marginTop: isMobile ? '10px' : '0', // Add margin for spacing on mobile
|
||||
},
|
||||
imageStyle: {
|
||||
width: '300px',
|
||||
height: '300px',
|
||||
borderRadius: '5px',
|
||||
},
|
||||
imageStyleMobile: {
|
||||
width: '100%', // Make image responsive on mobile
|
||||
height: 'auto',
|
||||
borderRadius: '5px',
|
||||
},
|
||||
imageDetails: {
|
||||
marginTop: '10px',
|
||||
fontSize: isMobile ? '14px' : '16px', // Adjust font size on mobile
|
||||
color: '#1f2d3d',
|
||||
},
|
||||
loadingOverlay: {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
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',
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: '10px',
|
||||
fontSize: '1.2rem',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
},
|
||||
uploadedFileWrapper: {
|
||||
backgroundColor: '#fff',
|
||||
border: '0.2px solid gray',
|
||||
padding: '15px 0 0 17px',
|
||||
borderRadius: '5px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
uploadedFileInfo: {
|
||||
marginRight: '18rem',
|
||||
marginTop: '0.2rem',
|
||||
},
|
||||
uploadedFileText: {
|
||||
fontSize: '16px',
|
||||
color: '#1f2d3d',
|
||||
},
|
||||
resultsTable: {
|
||||
width: '60%',
|
||||
borderCollapse: 'collapse',
|
||||
},
|
||||
resultsRow: {
|
||||
border: '0.1px solid gray',
|
||||
padding: '8px',
|
||||
},
|
||||
resultsCell: {
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
},
|
||||
resultsValueCell: {
|
||||
padding: '8px',
|
||||
width: '70%',
|
||||
color: 'red',
|
||||
},
|
||||
resultsTrueValue: {
|
||||
color: 'inherit',
|
||||
},
|
||||
customLabel: {
|
||||
fontWeight: 600, fontSize: '14px', color: '#212529'
|
||||
},
|
||||
|
||||
// Mobile responsiveness adjustments (if necessary)
|
||||
responsiveImageStyle: {
|
||||
width: '100%',
|
||||
maxHeight: '250px',
|
||||
objectFit: 'cover',
|
||||
marginTop: '20px',
|
||||
},
|
||||
responsiveResultContainer: {
|
||||
padding: '1rem',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: '8px',
|
||||
marginTop: '20px',
|
||||
},
|
||||
responsiveImageContainer: {
|
||||
marginTop: '20px',
|
||||
textAlign: 'center',
|
||||
},
|
||||
responsiveSubmitButton: {
|
||||
marginTop: '1rem',
|
||||
},
|
||||
responsiveLoadingOverlay: {
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: '10',
|
||||
},
|
||||
responsiveSpinner: {
|
||||
border: '4px solid #f3f3f3',
|
||||
borderTop: '4px solid #3498db',
|
||||
borderRadius: '50%',
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
animation: 'spin 2s linear infinite',
|
||||
},
|
||||
responsiveLoadingText: {
|
||||
color: 'white',
|
||||
marginTop: '10px',
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const fetchApplicationIds = async () => {
|
||||
setIsLoading(true);
|
||||
@ -646,6 +332,319 @@ const Enroll = () => {
|
||||
return `${(sizeInBytes / 1048576).toFixed(2)} MB`; // Jika ukuran lebih besar dari 1 MB
|
||||
}
|
||||
};
|
||||
|
||||
const styles = {
|
||||
// Existing styles
|
||||
formGroup: {
|
||||
marginTop: '-45px',
|
||||
},
|
||||
selectWrapper: {
|
||||
position: 'relative',
|
||||
marginTop: '0',
|
||||
},
|
||||
select: {
|
||||
width: '100%',
|
||||
paddingRight: '30px',
|
||||
},
|
||||
chevronIcon: {
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
remainingQuota: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: '4px',
|
||||
},
|
||||
quotaText: {
|
||||
fontSize: '40px',
|
||||
color: '#0542cc',
|
||||
fontWeight: '600',
|
||||
},
|
||||
timesText: {
|
||||
marginLeft: '8px',
|
||||
verticalAlign: 'super',
|
||||
fontSize: '20px',
|
||||
},
|
||||
uploadArea: {
|
||||
backgroundColor: '#e6f2ff',
|
||||
height: '250px', // Default height for non-mobile devices
|
||||
cursor: 'pointer',
|
||||
marginTop: '1rem',
|
||||
paddingTop: '22px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
border: '1px solid #ced4da',
|
||||
borderRadius: '0.25rem',
|
||||
},
|
||||
|
||||
// Mobile responsive styles for upload area
|
||||
uploadAreaMobile: {
|
||||
backgroundColor: '#e6f2ff',
|
||||
height: '50svh', // Reduced height for mobile
|
||||
cursor: 'pointer',
|
||||
marginTop: '1rem',
|
||||
paddingTop: '18px', // Adjusted padding for mobile
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
border: '1px solid #ced4da',
|
||||
borderRadius: '0.25rem',
|
||||
padding: '20px'
|
||||
},
|
||||
uploadIcon: {
|
||||
fontSize: '40px',
|
||||
color: '#0542cc',
|
||||
marginBottom: '7px',
|
||||
},
|
||||
uploadText: {
|
||||
color: '#1f2d3d',
|
||||
fontWeight: '400',
|
||||
fontSize: '16px',
|
||||
lineHeight: '13px',
|
||||
},
|
||||
wrapper: {
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '6px',
|
||||
padding: '18px 10px 0 8px', // Padding lebih seragam
|
||||
height: '13svh', // Tinggi lebih kecil untuk menyesuaikan tampilan
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#f9f9f9',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
fileWrapper: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flex: '1',
|
||||
},
|
||||
textContainer: {
|
||||
flex: '1',
|
||||
fontSize: '16px', // Ukuran font lebih kecil
|
||||
marginLeft: '6px',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
marginTop: '1rem'
|
||||
},
|
||||
fileSize: {
|
||||
fontSize: '12px',
|
||||
color: '#555',
|
||||
marginBottom: '2rem',
|
||||
},
|
||||
closeButtonContainer: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginLeft: 'auto',
|
||||
},
|
||||
closeButton: {
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: '0',
|
||||
},
|
||||
imageIcon: {
|
||||
color: '#0542cc',
|
||||
fontSize: '18px', // Ukuran ikon sedikit lebih kecil
|
||||
marginRight: '6px',
|
||||
},
|
||||
closeIcon: {
|
||||
color: 'red',
|
||||
fontSize: '18px',
|
||||
},
|
||||
submitButton: {
|
||||
marginLeft: 'auto',
|
||||
marginTop: '4rem',
|
||||
textAlign: 'start',
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
},
|
||||
uploadError: {
|
||||
color: 'red',
|
||||
fontSize: '12px',
|
||||
marginTop: '5px',
|
||||
},
|
||||
|
||||
// New styles added and merged
|
||||
containerResultStyle: {
|
||||
padding: '20px',
|
||||
border: '1px solid #0053b3',
|
||||
borderRadius: '5px',
|
||||
width: '100%',
|
||||
margin: '20px auto',
|
||||
},
|
||||
resultContainer: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between', // Horizontal alignment
|
||||
alignItems: 'flex-start', // Align items at the top
|
||||
flexDirection: isMobile ? 'column' : 'row', // Stack vertically on mobile
|
||||
width: '100%',
|
||||
},
|
||||
resultsTable: {
|
||||
width: '60%',
|
||||
borderCollapse: 'collapse',
|
||||
},
|
||||
resultsTableMobile: {
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse',
|
||||
},
|
||||
resultsCell: {
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
fontSize: isMobile ? '14px' : '16px',
|
||||
},
|
||||
resultsValueCell: {
|
||||
padding: '8px',
|
||||
width: '70%',
|
||||
fontSize: isMobile ? '14px' : '16px',
|
||||
color: 'red',
|
||||
},
|
||||
resultsTrueValue: {
|
||||
color: 'inherit',
|
||||
},
|
||||
imageContainer: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: isMobile ? 'center' : 'flex-start', // Center image on mobile
|
||||
width: '100%',
|
||||
marginTop: isMobile ? '10px' : '0', // Add margin for spacing on mobile
|
||||
},
|
||||
imageStyle: {
|
||||
width: '300px',
|
||||
height: '300px',
|
||||
borderRadius: '5px',
|
||||
},
|
||||
imageStyleMobile: {
|
||||
width: '100%', // Make image responsive on mobile
|
||||
height: 'auto',
|
||||
borderRadius: '5px',
|
||||
},
|
||||
imageDetails: {
|
||||
marginTop: '10px',
|
||||
fontSize: isMobile ? '14px' : '16px', // Adjust font size on mobile
|
||||
color: '#1f2d3d',
|
||||
},
|
||||
loadingOverlay: {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
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',
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: '10px',
|
||||
fontSize: '1.2rem',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
},
|
||||
uploadedFileWrapper: {
|
||||
backgroundColor: '#fff',
|
||||
border: '0.2px solid gray',
|
||||
padding: '15px 0 0 17px',
|
||||
borderRadius: '5px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
uploadedFileInfo: {
|
||||
marginRight: '18rem',
|
||||
marginTop: '0.2rem',
|
||||
},
|
||||
uploadedFileText: {
|
||||
fontSize: '16px',
|
||||
color: '#1f2d3d',
|
||||
},
|
||||
resultsTable: {
|
||||
width: '60%',
|
||||
borderCollapse: 'collapse',
|
||||
},
|
||||
resultsRow: {
|
||||
border: '0.1px solid gray',
|
||||
padding: '8px',
|
||||
},
|
||||
resultsCell: {
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
},
|
||||
resultsValueCell: {
|
||||
padding: '8px',
|
||||
width: '70%',
|
||||
color: 'red',
|
||||
},
|
||||
resultsTrueValue: {
|
||||
color: 'inherit',
|
||||
},
|
||||
customLabel: {
|
||||
fontWeight: 600, fontSize: '14px', color: '#212529'
|
||||
},
|
||||
|
||||
// Mobile responsiveness adjustments (if necessary)
|
||||
responsiveImageStyle: {
|
||||
width: '100%',
|
||||
maxHeight: '250px',
|
||||
objectFit: 'cover',
|
||||
marginTop: '20px',
|
||||
},
|
||||
responsiveResultContainer: {
|
||||
padding: '1rem',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: '8px',
|
||||
marginTop: '20px',
|
||||
},
|
||||
responsiveImageContainer: {
|
||||
marginTop: '20px',
|
||||
textAlign: 'center',
|
||||
},
|
||||
responsiveSubmitButton: {
|
||||
marginTop: '1rem',
|
||||
},
|
||||
responsiveLoadingOverlay: {
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: '10',
|
||||
},
|
||||
responsiveSpinner: {
|
||||
border: '4px solid #f3f3f3',
|
||||
borderTop: '4px solid #3498db',
|
||||
borderRadius: '50%',
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
animation: 'spin 2s linear infinite',
|
||||
},
|
||||
responsiveLoadingText: {
|
||||
color: 'white',
|
||||
marginTop: '10px',
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
@ -1,124 +1,189 @@
|
||||
import React, { useState, useRef, useEffect } from 'react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faChevronLeft, faChevronDown, faTimes, faImage } from '@fortawesome/free-solid-svg-icons';
|
||||
import { DummyKtp } from '../../../assets/images'
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faChevronDown, faChevronLeft, faImage, faTimes } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
const Verify = () => {
|
||||
|
||||
const BASE_URL = process.env.REACT_APP_BASE_URL
|
||||
const API_KEY = process.env.REACT_APP_API_KEY
|
||||
const BASE_URL = process.env.REACT_APP_BASE_URL;
|
||||
const API_KEY = process.env.REACT_APP_API_KEY;
|
||||
const fileTypes = ["image/jpeg", "image/png"]; // Use MIME types for better file validation
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const [isSelectOpen, setIsSelectOpen] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const [selectedImageName, setSelectedImageName] = useState('');
|
||||
const fileInputRef = useRef(null);
|
||||
const [showResult, setShowResult] = useState(false);
|
||||
const [file, setFile] = useState(null);
|
||||
const [applicationId, setApplicationId] = useState('');
|
||||
const [imageUrl, setImageUrl] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [applicationIds, setApplicationIds] = useState([]);
|
||||
const [imageError, setImageError] = useState('');
|
||||
const [data, setData] = useState(null);
|
||||
const [showResult, setShowResult] = useState(false);
|
||||
|
||||
// Example usage:
|
||||
const data = {
|
||||
nik: "21710121748901",
|
||||
district: "BATAM KOTA",
|
||||
name: "HANDOKO",
|
||||
city: "KOTA BATAM",
|
||||
dob: "BANJARMASIN, 12-12-1974",
|
||||
state: "PROVINSI KEPULAUAN RIAU",
|
||||
gender: "LAKI-LAKI",
|
||||
religion: "KRISTEN",
|
||||
bloodType: "A",
|
||||
maritalStatus: "KAWIN",
|
||||
address: "GOLDEN LAND BLOK FN NO.39",
|
||||
occupation: "WIRASWASTA",
|
||||
rtRw: "002/013",
|
||||
nationality: "WNI",
|
||||
village: "TAMAN BALOI",
|
||||
imageUrl: DummyKtp, // Replace this with the actual image path
|
||||
dark: false,
|
||||
blur: false,
|
||||
grayscale: false,
|
||||
flashlight: false,
|
||||
};
|
||||
|
||||
// Fetch Application IDs
|
||||
useEffect(() => {
|
||||
const fetchApplicationIds = async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
|
||||
const url = `${BASE_URL}/application/list`;
|
||||
console.log('Fetching URL:', url);
|
||||
|
||||
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}`,
|
||||
'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) {
|
||||
const ids = data.details.data.map(app => app.id);
|
||||
console.log('Application Id: ' + ids);
|
||||
setApplicationIds(data.details.data);
|
||||
setApplicationIds(data.details.data);
|
||||
} else {
|
||||
console.error('Failed to fetch data:', data.details.message);
|
||||
throw new Error('Failed to fetch application IDs');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching application IDs:', error);
|
||||
setErrorMessage(error.message || 'Error fetching application IDs');
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
fetchApplicationIds();
|
||||
}, []);
|
||||
|
||||
const handleFocus = () => {
|
||||
setIsSelectOpen(true);
|
||||
};
|
||||
const handleFocus = () => setIsSelectOpen(true);
|
||||
const handleBlur = () => setIsSelectOpen(false);
|
||||
|
||||
const handleBlur = () => {
|
||||
setIsSelectOpen(false);
|
||||
};
|
||||
// Handle file upload
|
||||
const handleImageUpload = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const handleImageUpload = (event) => {
|
||||
const file = event.target.files[0];
|
||||
|
||||
if (file && (file.type === 'image/jpeg' || file.type === 'image/jpg')) {
|
||||
setSelectedImageName(file.name);
|
||||
setErrorMessage('');
|
||||
} else {
|
||||
alert('Please upload a valid image file (JPG, JPEG).');
|
||||
const fileType = file.type; // Use MIME type instead of file extension
|
||||
if (!fileTypes.includes(fileType)) {
|
||||
setImageError('Image format is not supported');
|
||||
setFile(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.size > 2 * 1024 * 1024) { // 2MB check
|
||||
setImageError('File size exceeds 2MB');
|
||||
setFile(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedImageName(file.name);
|
||||
setFile(file);
|
||||
setImageError('');
|
||||
};
|
||||
|
||||
// Cancel file upload
|
||||
const handleImageCancel = () => {
|
||||
setSelectedImageName('');
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
setFile(null);
|
||||
setImageError('');
|
||||
fileInputRef.current.value = '';
|
||||
};
|
||||
|
||||
// Submit form and trigger OCR API
|
||||
const handleCheckClick = async () => {
|
||||
if (!file || !applicationId) {
|
||||
setErrorMessage('Please select an application and upload a file.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
const formData = new FormData();
|
||||
formData.append('application_id', applicationId);
|
||||
formData.append('file', file);
|
||||
|
||||
console.log(`id: ${applicationId}, file: ${file}`)
|
||||
|
||||
try {
|
||||
const response = await fetch(`${BASE_URL}/ocr-ktp`, {
|
||||
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();
|
||||
|
||||
console.log('Full response:', result); // Log full response to inspect the structure
|
||||
|
||||
if (result.status_code === 201) {
|
||||
console.log('Success');
|
||||
// Correct the path to access the data-ktp object
|
||||
const responseData = result.details.data?.['data-ktp'] || {};
|
||||
|
||||
// Log each field to inspect the data
|
||||
console.log('NIK:', responseData.nik);
|
||||
console.log('District:', responseData.kecamatan);
|
||||
console.log('Name:', responseData.nama);
|
||||
console.log('City:', responseData.kabkot);
|
||||
console.log('Date of Birth:', responseData.tanggal_lahir);
|
||||
console.log('State:', responseData.provinsi);
|
||||
console.log('Gender:', responseData.jenis_kelamin);
|
||||
console.log('Religion:', responseData.agama);
|
||||
console.log('Blood Type:', responseData.golongan_darah);
|
||||
console.log('Marital Status:', responseData.status_perkawinan);
|
||||
console.log('Address:', responseData.alamat);
|
||||
console.log('Occupation:', responseData.pekerjaan);
|
||||
console.log('RT/RW:', `${responseData.rt}/${responseData.rw}`);
|
||||
console.log('Nationality:', responseData.kewarganegaraan);
|
||||
console.log('Image URL:', result.details.image_url);
|
||||
console.log('Dark:', responseData.dark);
|
||||
console.log('Blur:', responseData.blur);
|
||||
console.log('Grayscale:', responseData.grayscale);
|
||||
console.log('Flashlight:', responseData.flashlight);
|
||||
|
||||
// Map the response data to a new object with default values if the property doesn't exist
|
||||
const data = {
|
||||
nik: responseData.nik || 'N/A',
|
||||
district: responseData.kecamatan || 'N/A',
|
||||
name: responseData.nama || 'N/A',
|
||||
city: responseData.kabkot || 'N/A',
|
||||
dob: responseData.tanggal_lahir || 'N/A',
|
||||
state: responseData.provinsi || 'N/A',
|
||||
gender: responseData.jenis_kelamin || 'N/A',
|
||||
religion: responseData.agama || 'N/A',
|
||||
bloodType: responseData.golongan_darah || 'N/A',
|
||||
maritalStatus: responseData.status_perkawinan || 'N/A',
|
||||
address: responseData.alamat || 'N/A',
|
||||
occupation: responseData.pekerjaan || 'N/A',
|
||||
rtRw: `${responseData.rt || 'N/A'}/${responseData.rw || 'N/A'}`,
|
||||
nationality: responseData.kewarganegaraan || 'N/A',
|
||||
imageUrl: result.details.image_url || '',
|
||||
dark: responseData.dark || 'N/A',
|
||||
blur: responseData.blur || 'N/A',
|
||||
grayscale: responseData.grayscale || 'N/A',
|
||||
flashlight: responseData.flashlight || 'N/A',
|
||||
};
|
||||
|
||||
setData(data);
|
||||
setShowResult(true);
|
||||
setErrorMessage('');
|
||||
setSelectedImageName('');
|
||||
} else {
|
||||
setErrorMessage('OCR processing failed');
|
||||
}
|
||||
} catch (error) {
|
||||
setErrorMessage(error.message || 'Error during OCR processing');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheckClick = async () => {
|
||||
console.log('Verify - OCR Ktp')
|
||||
setShowResult(true)
|
||||
};
|
||||
|
||||
const getValueStyle = (value) => ({
|
||||
color: value ? 'green' : 'red',
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<div className='container' style={{ marginTop: '3%' }}>
|
||||
{/* Inject keyframes for the spinner */}
|
||||
<div className="container" style={{ marginTop: '3%' }}>
|
||||
<style>
|
||||
{`
|
||||
@keyframes spin {
|
||||
@ -127,49 +192,35 @@ const Verify = () => {
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
{isLoading && (
|
||||
<div style={styles.loadingOverlay}>
|
||||
<div style={styles.spinner}></div>
|
||||
<p style={styles.loadingText}>Loading...</p>
|
||||
</div>
|
||||
)}
|
||||
{/* 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>
|
||||
{/* Tombol di bawah teks */}
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* Section */}
|
||||
<div style={
|
||||
{
|
||||
padding: '20px',
|
||||
border: '0.1px solid rgba(0, 0, 0, 0.2)',
|
||||
borderLeft: '4px solid #0542cc',
|
||||
borderRadius: '10px',
|
||||
width: '100%',
|
||||
}
|
||||
}>
|
||||
{/* Application ID Selection */}
|
||||
<div className="form-group row align-items-center"> {/* Added align-items-center for vertical alignment */}
|
||||
<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
|
||||
@ -194,9 +245,8 @@ const Verify = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
<p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', margin: '0', marginTop: '8px' }}> {/* Adjusted margins */}
|
||||
<p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', marginTop: '8px' }}>
|
||||
Remaining Quota
|
||||
</p>
|
||||
<div style={styles.remainingQuota}>
|
||||
@ -206,306 +256,204 @@ const Verify = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upload Section */}
|
||||
<div className='col-md-6'>
|
||||
<div className="col-md-6">
|
||||
<div className="form-group mt-4">
|
||||
<label htmlFor="uploadPhoto" style={{ fontWeight: 600, fontSize: '14px', color: '#212529' }}>Upload your e-KTP Photo</label>
|
||||
<div
|
||||
style={styles.uploadArea}
|
||||
onClick={() => document.getElementById('fileUpload').click()}
|
||||
>
|
||||
<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="#">Browse</a>
|
||||
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
|
||||
<p className="text-muted">Supported file types: JPG, JPEG</p>
|
||||
<label htmlFor="imageInput" className="form-label">Upload Image (KTP)</label>
|
||||
<div style={styles.uploadWrapper}>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
id="imageInput"
|
||||
className="form-control"
|
||||
accept="image/jpeg, image/png"
|
||||
onChange={handleImageUpload}
|
||||
/>
|
||||
{selectedImageName && (
|
||||
<div className="mt-3">
|
||||
<p><strong>File:</strong> {selectedImageName}</p>
|
||||
<button className="btn btn-danger" onClick={handleImageCancel}>
|
||||
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{imageError && <p style={{ color: 'red' }}>{imageError}</p>}
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
id="fileUpload"
|
||||
ref={fileInputRef}
|
||||
style={{ display: 'none' }}
|
||||
accept="image/jpeg, image/png, image/jpg"
|
||||
onChange={handleImageUpload}
|
||||
/>
|
||||
{errorMessage && (
|
||||
<small style={styles.uploadError}>{errorMessage}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Display uploaded image name */}
|
||||
{selectedImageName && (
|
||||
<div className="col-md-6 mt-4">
|
||||
<div style={styles.fileWrapper}>
|
||||
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} />
|
||||
<div style={{ marginRight: '18rem', marginTop: '0.2rem' }}>
|
||||
<h5>Uploaded File:</h5>
|
||||
<p>{selectedImageName}</p>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<FontAwesomeIcon
|
||||
icon={faTimes}
|
||||
style={styles.closeIcon}
|
||||
onClick={handleImageCancel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<div style={styles.submitButton}>
|
||||
<button onClick={handleCheckClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
|
||||
<p className="text-white mb-0">Check Now</p>
|
||||
<div className="col-md-12 d-flex justify-content-end mt-4">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleCheckClick}
|
||||
disabled={isLoading || !file || !applicationId}
|
||||
>
|
||||
<FontAwesomeIcon icon={faImage} className="me-2" />
|
||||
Check KTP
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Result Section */}
|
||||
{showResult && (
|
||||
<div style={{ display: 'flex', flexDirection: 'row', marginTop: '20px' }}>
|
||||
<div style={{ flex: 1, marginRight: '10px' }}>
|
||||
<h1 style={{ color: '#0542cc' }}>Results</h1>
|
||||
<div style={styles.resultContainer}>
|
||||
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<table style={{ ...styles.tableStyle, marginRight: '10px' }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>NIK</td>
|
||||
<td style={styles.tableCell}>{data.nik}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>District</td>
|
||||
<td style={styles.tableCell}>{data.district}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Name</td>
|
||||
<td style={styles.tableCell}>{data.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>City</td>
|
||||
<td style={styles.tableCell}>{data.city}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Date of Birth</td>
|
||||
<td style={styles.tableCell}>{data.dob}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>State</td>
|
||||
<td style={styles.tableCell}>{data.state}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Gender</td>
|
||||
<td style={styles.tableCell}>{data.gender}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table style={styles.tableStyle}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Religion</td>
|
||||
<td style={styles.tableCell}>{data.religion}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Blood Type</td>
|
||||
<td style={styles.tableCell}>{data.bloodType}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Marital Status</td>
|
||||
<td style={styles.tableCell}>{data.maritalStatus}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Address</td>
|
||||
<td style={styles.tableCell}>{data.address}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Occupation</td>
|
||||
<td style={styles.tableCell}>{data.occupation}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>RT/RW</td>
|
||||
<td style={styles.tableCell}>{data.rtRw}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Nationality</td>
|
||||
<td style={styles.tableCell}>{data.nationality}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1, textAlign: 'center', marginTop: '3rem' }}>
|
||||
<img
|
||||
src={data.imageUrl}
|
||||
alt="KTP"
|
||||
style={{ width: '292px', height: '172px', borderRadius: '8px', marginBottom: '10px' }}
|
||||
/>
|
||||
<div style={{ width: '292px', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', marginLeft: '8.2rem' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '100%' }}>
|
||||
<p style={getValueStyle(data.dark)}>Dark: {data.dark.toString()}</p>
|
||||
<p style={getValueStyle(data.blur)}>Blur: {data.blur.toString()}</p>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '100%' }}>
|
||||
<p style={getValueStyle(data.grayscale)}>Grayscale: {data.grayscale.toString()}</p>
|
||||
<p style={getValueStyle(data.flashlight)}>Flashlight: {data.flashlight.toString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{errorMessage && (
|
||||
<div style={styles.errorContainer}>
|
||||
<p style={styles.errorText}>{errorMessage}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Verify
|
||||
{showResult && data && (
|
||||
<div className="mt-5">
|
||||
<h4>OCR Result</h4>
|
||||
<table style={styles.tableStyle}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>NIK</td>
|
||||
<td style={styles.tableCell}>{data.nik}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>District</td>
|
||||
<td style={styles.tableCell}>{data.district}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Name</td>
|
||||
<td style={styles.tableCell}>{data.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>City</td>
|
||||
<td style={styles.tableCell}>{data.city}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Date of Birth</td>
|
||||
<td style={styles.tableCell}>{data.dob}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>State</td>
|
||||
<td style={styles.tableCell}>{data.state}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Gender</td>
|
||||
<td style={styles.tableCell}>{data.gender}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Religion</td>
|
||||
<td style={styles.tableCell}>{data.religion}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Blood Type</td>
|
||||
<td style={styles.tableCell}>{data.bloodType}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Marital Status</td>
|
||||
<td style={styles.tableCell}>{data.maritalStatus}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Address</td>
|
||||
<td style={styles.tableCell}>{data.address}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Occupation</td>
|
||||
<td style={styles.tableCell}>{data.occupation}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>RT/RW</td>
|
||||
<td style={styles.tableCell}>{data.rtRw}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Nationality</td>
|
||||
<td style={styles.tableCell}>{data.nationality}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Image</td>
|
||||
<td style={styles.tableCell}><img src={data.imageUrl} alt="KTP" width="150" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = {
|
||||
formGroup: {
|
||||
marginTop: '-45px',
|
||||
},
|
||||
selectWrapper: {
|
||||
position: 'relative',
|
||||
marginTop: '0', // Adjusted to remove excessive spacing
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
},
|
||||
select: {
|
||||
fontSize: '16px',
|
||||
padding: '10px',
|
||||
width: '100%',
|
||||
paddingRight: '30px', // Ensures padding for the icon
|
||||
borderRadius: '4px',
|
||||
border: '1px solid #ccc',
|
||||
},
|
||||
chevronIcon: {
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '50%',
|
||||
right: '10px',
|
||||
transform: 'translateY(-50%)',
|
||||
pointerEvents: 'none',
|
||||
color: '#0542cc',
|
||||
},
|
||||
remainingQuota: {
|
||||
display: 'flex', // Ensures the text aligns properly
|
||||
flexDirection: 'row',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginTop: '4px', // Adjust spacing from the label
|
||||
},
|
||||
quotaText: {
|
||||
fontSize: '40px',
|
||||
color: '#0542cc',
|
||||
fontSize: '24px',
|
||||
fontWeight: '600',
|
||||
},
|
||||
timesText: {
|
||||
marginLeft: '8px',
|
||||
verticalAlign: 'super',
|
||||
fontSize: '20px', // Adjust font size if necessary
|
||||
},
|
||||
uploadArea: {
|
||||
backgroundColor: '#e6f2ff',
|
||||
height: '250px',
|
||||
cursor: 'pointer',
|
||||
marginTop: '1rem',
|
||||
paddingTop: '22px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
border: '1px solid #ced4da',
|
||||
borderRadius: '0.25rem',
|
||||
},
|
||||
uploadIcon: {
|
||||
fontSize: '40px',
|
||||
color: '#0542cc',
|
||||
marginBottom: '7px',
|
||||
},
|
||||
uploadText: {
|
||||
color: '#1f2d3d',
|
||||
fontWeight: '400',
|
||||
fontSize: '16px',
|
||||
lineHeight: '13px',
|
||||
fontWeight: '300',
|
||||
},
|
||||
fileWrapper: {
|
||||
backgroundColor: '#fff',
|
||||
border: '0.2px solid gray',
|
||||
padding: '15px 0 0 17px',
|
||||
borderRadius: '5px',
|
||||
uploadWrapper: {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
fileInfo: {
|
||||
marginTop: '4rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
imageIcon: {
|
||||
color: '#0542cc',
|
||||
fontSize: '24px',
|
||||
marginBottom: '1rem'
|
||||
},
|
||||
closeIcon: {
|
||||
color: 'red',
|
||||
cursor: 'pointer',
|
||||
fontSize: '26px',
|
||||
marginRight: '1rem',
|
||||
marginBottom: '1rem'
|
||||
},
|
||||
submitButton: {
|
||||
marginLeft: 'auto',
|
||||
marginTop: '4rem',
|
||||
textAlign: 'start',
|
||||
position: 'relative', // Menambahkan posisi relative
|
||||
zIndex: 1, // Menambah z-index jika ada elemen yang menutupi
|
||||
},
|
||||
uploadError: {
|
||||
color: 'red',
|
||||
fontSize: '12px',
|
||||
marginTop: '5px',
|
||||
},
|
||||
|
||||
containerResultStyle: {
|
||||
padding: '20px',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: '#f9f9f9',
|
||||
marginTop: '20px',
|
||||
},
|
||||
resultContainer: {
|
||||
overflowX: 'auto', // Allows horizontal scrolling if the table is too wide
|
||||
},
|
||||
tableStyle: {
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse', // Ensures that table borders are merged
|
||||
},
|
||||
tableCell: {
|
||||
errorContainer: {
|
||||
marginTop: '10px',
|
||||
padding: '10px',
|
||||
border: '1px solid #ddd', // Light gray border around each cell
|
||||
textAlign: 'left',
|
||||
backgroundColor: '#f8d7da',
|
||||
border: '1px solid #f5c6cb',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
errorText: {
|
||||
color: '#721c24',
|
||||
fontSize: '14px',
|
||||
margin: '0',
|
||||
},
|
||||
loadingOverlay: {
|
||||
position: 'fixed',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
color: 'white',
|
||||
fontSize: '24px',
|
||||
zIndex: 1000,
|
||||
},
|
||||
spinner: {
|
||||
border: '4px solid rgba(0, 0, 0, 0.1)',
|
||||
borderLeftColor: '#0542cc',
|
||||
border: '4px solid #f3f3f3',
|
||||
borderTop: '4px solid #3498db',
|
||||
borderRadius: '50%',
|
||||
width: '90px',
|
||||
height: '90px',
|
||||
animation: 'spin 1s ease-in-out infinite',
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
animation: 'spin 2s linear infinite',
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: '10px',
|
||||
fontSize: '1.2rem',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
marginLeft: '20px',
|
||||
},
|
||||
tableStyle: {
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse',
|
||||
marginTop: '20px',
|
||||
},
|
||||
tableCell: {
|
||||
padding: '8px 15px',
|
||||
border: '1px solid #ccc',
|
||||
textAlign: 'left',
|
||||
},
|
||||
};
|
||||
|
||||
export default Verify;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user