OCR KTP
This commit is contained in:
parent
bd3a3d42ce
commit
68878187e2
@ -33,320 +33,6 @@ const Enroll = () => {
|
|||||||
const [options, setOptions] = useState([]);
|
const [options, setOptions] = useState([]);
|
||||||
const [isMobile, setIsMobile] = useState(false);
|
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(() => {
|
useEffect(() => {
|
||||||
const fetchApplicationIds = async () => {
|
const fetchApplicationIds = async () => {
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
@ -647,6 +333,319 @@ const Enroll = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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 (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{/* Inject keyframes for the spinner */}
|
{/* Inject keyframes for the spinner */}
|
||||||
|
|||||||
@ -1,124 +1,189 @@
|
|||||||
import React, { useState, useRef, useEffect } from 'react'
|
import React, { useState, useEffect, useRef } 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 { Link } from 'react-router-dom';
|
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 Verify = () => {
|
||||||
|
const BASE_URL = process.env.REACT_APP_BASE_URL;
|
||||||
const BASE_URL = process.env.REACT_APP_BASE_URL
|
const API_KEY = process.env.REACT_APP_API_KEY;
|
||||||
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 [isSelectOpen, setIsSelectOpen] = useState(false);
|
||||||
const [errorMessage, setErrorMessage] = useState('');
|
const [errorMessage, setErrorMessage] = useState('');
|
||||||
const [selectedImageName, setSelectedImageName] = useState('');
|
const [selectedImageName, setSelectedImageName] = useState('');
|
||||||
const fileInputRef = useRef(null);
|
const [file, setFile] = useState(null);
|
||||||
const [showResult, setShowResult] = useState(false);
|
|
||||||
const [applicationId, setApplicationId] = useState('');
|
const [applicationId, setApplicationId] = useState('');
|
||||||
const [imageUrl, setImageUrl] = useState('');
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
const [applicationIds, setApplicationIds] = useState([]);
|
const [applicationIds, setApplicationIds] = useState([]);
|
||||||
|
const [imageError, setImageError] = useState('');
|
||||||
|
const [data, setData] = useState(null);
|
||||||
|
const [showResult, setShowResult] = useState(false);
|
||||||
|
|
||||||
// Example usage:
|
// Fetch Application IDs
|
||||||
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,
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchApplicationIds = async () => {
|
const fetchApplicationIds = async () => {
|
||||||
try {
|
try {
|
||||||
setIsLoading(true)
|
setIsLoading(true);
|
||||||
|
const response = await fetch(`${BASE_URL}/application/list`, {
|
||||||
const url = `${BASE_URL}/application/list`;
|
|
||||||
console.log('Fetching URL:', url);
|
|
||||||
|
|
||||||
const response = await fetch(url, {
|
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
headers: {
|
headers: {
|
||||||
'accept': 'application/json',
|
'accept': 'application/json',
|
||||||
'x-api-key': `${API_KEY}`,
|
'x-api-key': API_KEY,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const data = await response.json();
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch application IDs');
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
if (data.status_code === 200) {
|
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 {
|
} else {
|
||||||
console.error('Failed to fetch data:', data.details.message);
|
throw new Error('Failed to fetch application IDs');
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error fetching application IDs:', error);
|
setErrorMessage(error.message || 'Error fetching application IDs');
|
||||||
} finally {
|
} finally {
|
||||||
setIsLoading(false)
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
fetchApplicationIds();
|
fetchApplicationIds();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleFocus = () => {
|
const handleFocus = () => setIsSelectOpen(true);
|
||||||
setIsSelectOpen(true);
|
const handleBlur = () => setIsSelectOpen(false);
|
||||||
};
|
|
||||||
|
|
||||||
const handleBlur = () => {
|
// Handle file upload
|
||||||
setIsSelectOpen(false);
|
const handleImageUpload = (e) => {
|
||||||
};
|
const file = e.target.files[0];
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
const handleImageUpload = (event) => {
|
const fileType = file.type; // Use MIME type instead of file extension
|
||||||
const file = event.target.files[0];
|
if (!fileTypes.includes(fileType)) {
|
||||||
|
setImageError('Image format is not supported');
|
||||||
if (file && (file.type === 'image/jpeg' || file.type === 'image/jpg')) {
|
setFile(null);
|
||||||
setSelectedImageName(file.name);
|
return;
|
||||||
setErrorMessage('');
|
|
||||||
} else {
|
|
||||||
alert('Please upload a valid image file (JPG, JPEG).');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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 = () => {
|
const handleImageCancel = () => {
|
||||||
setSelectedImageName('');
|
setSelectedImageName('');
|
||||||
if (fileInputRef.current) {
|
setFile(null);
|
||||||
fileInputRef.current.value = '';
|
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 (
|
return (
|
||||||
<div className='container' style={{ marginTop: '3%' }}>
|
<div className="container" style={{ marginTop: '3%' }}>
|
||||||
{/* Inject keyframes for the spinner */}
|
|
||||||
<style>
|
<style>
|
||||||
{`
|
{`
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
@ -127,49 +192,35 @@ const Verify = () => {
|
|||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
{isLoading && (
|
{isLoading && (
|
||||||
<div style={styles.loadingOverlay}>
|
<div style={styles.loadingOverlay}>
|
||||||
<div style={styles.spinner}></div>
|
<div style={styles.spinner}></div>
|
||||||
<p style={styles.loadingText}>Loading...</p>
|
<p style={styles.loadingText}>Loading...</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{/* Welcome Message */}
|
|
||||||
<div className="row-card border-left border-primary shadow mb-4" style={{ backgroundColor: '#E2FBEA' }}>
|
<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 className="d-flex flex-column justify-content-start align-items-start p-4">
|
||||||
<div>
|
<div>
|
||||||
<h4 className="mb-3 text-start">
|
<h4 className="mb-3 text-start"><i className="fas fa-warning fa-bold me-3"></i>Alert</h4>
|
||||||
<i className="fas fa-warning fa-bold me-3"></i>Alert
|
<p className="mb-0 text-start">
|
||||||
</h4>
|
Get started now by creating an Application ID and explore all the demo services available on the dashboard.
|
||||||
<p className="mb-0 text-start">
|
Experience the ease and flexibility of trying out all our features firsthand.
|
||||||
Get started now by creating an Application ID and explore all the demo services available on the dashboard.
|
</p>
|
||||||
Experience the ease and flexibility of trying out all our features firsthand.
|
</div>
|
||||||
</p>
|
<div className="d-flex flex-row mt-3">
|
||||||
</div>
|
<Link to="/createApps" style={{ textDecoration: 'none' }}>
|
||||||
{/* Tombol di bawah teks */}
|
<button className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
|
||||||
<div className="d-flex flex-row mt-3">
|
<i className="fas fa-plus text-white me-2"></i>
|
||||||
<Link to="/createApps" style={{ textDecoration: 'none' }}>
|
<p className="text-white mb-0">Create New App ID</p>
|
||||||
<button className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
|
</button>
|
||||||
<i className="fas fa-plus text-white me-2"></i>
|
</Link>
|
||||||
<p className="text-white mb-0">Create New App ID</p>
|
</div>
|
||||||
</button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
</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%' }}>
|
||||||
<div style={
|
<div className="form-group row align-items-center">
|
||||||
{
|
|
||||||
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 className="col-md-6">
|
<div className="col-md-6">
|
||||||
<div style={styles.selectWrapper}>
|
<div style={styles.selectWrapper}>
|
||||||
<select
|
<select
|
||||||
@ -194,9 +245,8 @@ const Verify = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-6">
|
<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
|
Remaining Quota
|
||||||
</p>
|
</p>
|
||||||
<div style={styles.remainingQuota}>
|
<div style={styles.remainingQuota}>
|
||||||
@ -206,306 +256,204 @@ const Verify = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Upload Section */}
|
<div className="col-md-6">
|
||||||
<div className='col-md-6'>
|
|
||||||
<div className="form-group mt-4">
|
<div className="form-group mt-4">
|
||||||
<label htmlFor="uploadPhoto" style={{ fontWeight: 600, fontSize: '14px', color: '#212529' }}>Upload your e-KTP Photo</label>
|
<label htmlFor="imageInput" className="form-label">Upload Image (KTP)</label>
|
||||||
<div
|
<div style={styles.uploadWrapper}>
|
||||||
style={styles.uploadArea}
|
<input
|
||||||
onClick={() => document.getElementById('fileUpload').click()}
|
ref={fileInputRef}
|
||||||
>
|
type="file"
|
||||||
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
|
id="imageInput"
|
||||||
<p style={styles.uploadText}>Drag and Drop Here</p>
|
className="form-control"
|
||||||
<p>Or</p>
|
accept="image/jpeg, image/png"
|
||||||
<a href="#">Browse</a>
|
onChange={handleImageUpload}
|
||||||
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
|
/>
|
||||||
<p className="text-muted">Supported file types: JPG, JPEG</p>
|
{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>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Display uploaded image name */}
|
<div className="col-md-12 d-flex justify-content-end mt-4">
|
||||||
{selectedImageName && (
|
<button
|
||||||
<div className="col-md-6 mt-4">
|
className="btn btn-primary"
|
||||||
<div style={styles.fileWrapper}>
|
onClick={handleCheckClick}
|
||||||
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} />
|
disabled={isLoading || !file || !applicationId}
|
||||||
<div style={{ marginRight: '18rem', marginTop: '0.2rem' }}>
|
>
|
||||||
<h5>Uploaded File:</h5>
|
<FontAwesomeIcon icon={faImage} className="me-2" />
|
||||||
<p>{selectedImageName}</p>
|
Check KTP
|
||||||
</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>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Result Section */}
|
{errorMessage && (
|
||||||
{showResult && (
|
<div style={styles.errorContainer}>
|
||||||
<div style={{ display: 'flex', flexDirection: 'row', marginTop: '20px' }}>
|
<p style={styles.errorText}>{errorMessage}</p>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</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 = {
|
const styles = {
|
||||||
formGroup: {
|
|
||||||
marginTop: '-45px',
|
|
||||||
},
|
|
||||||
selectWrapper: {
|
selectWrapper: {
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
marginTop: '0', // Adjusted to remove excessive spacing
|
display: 'inline-block',
|
||||||
|
width: '100%',
|
||||||
},
|
},
|
||||||
select: {
|
select: {
|
||||||
|
fontSize: '16px',
|
||||||
|
padding: '10px',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
paddingRight: '30px', // Ensures padding for the icon
|
borderRadius: '4px',
|
||||||
|
border: '1px solid #ccc',
|
||||||
},
|
},
|
||||||
chevronIcon: {
|
chevronIcon: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
right: '10px',
|
|
||||||
top: '50%',
|
top: '50%',
|
||||||
|
right: '10px',
|
||||||
transform: 'translateY(-50%)',
|
transform: 'translateY(-50%)',
|
||||||
pointerEvents: 'none',
|
color: '#0542cc',
|
||||||
},
|
},
|
||||||
remainingQuota: {
|
remainingQuota: {
|
||||||
display: 'flex', // Ensures the text aligns properly
|
display: 'flex',
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
marginTop: '4px', // Adjust spacing from the label
|
|
||||||
},
|
},
|
||||||
quotaText: {
|
quotaText: {
|
||||||
fontSize: '40px',
|
fontSize: '24px',
|
||||||
color: '#0542cc',
|
|
||||||
fontWeight: '600',
|
fontWeight: '600',
|
||||||
},
|
},
|
||||||
timesText: {
|
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',
|
fontSize: '16px',
|
||||||
lineHeight: '13px',
|
fontWeight: '300',
|
||||||
},
|
},
|
||||||
fileWrapper: {
|
uploadWrapper: {
|
||||||
backgroundColor: '#fff',
|
|
||||||
border: '0.2px solid gray',
|
|
||||||
padding: '15px 0 0 17px',
|
|
||||||
borderRadius: '5px',
|
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: '10px',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
},
|
},
|
||||||
fileInfo: {
|
errorContainer: {
|
||||||
marginTop: '4rem',
|
marginTop: '10px',
|
||||||
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: {
|
|
||||||
padding: '10px',
|
padding: '10px',
|
||||||
border: '1px solid #ddd', // Light gray border around each cell
|
backgroundColor: '#f8d7da',
|
||||||
textAlign: 'left',
|
border: '1px solid #f5c6cb',
|
||||||
|
borderRadius: '4px',
|
||||||
|
},
|
||||||
|
errorText: {
|
||||||
|
color: '#721c24',
|
||||||
|
fontSize: '14px',
|
||||||
|
margin: '0',
|
||||||
},
|
},
|
||||||
loadingOverlay: {
|
loadingOverlay: {
|
||||||
position: 'fixed',
|
position: 'absolute',
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
color: 'white',
|
||||||
|
fontSize: '24px',
|
||||||
zIndex: 1000,
|
zIndex: 1000,
|
||||||
},
|
},
|
||||||
spinner: {
|
spinner: {
|
||||||
border: '4px solid rgba(0, 0, 0, 0.1)',
|
border: '4px solid #f3f3f3',
|
||||||
borderLeftColor: '#0542cc',
|
borderTop: '4px solid #3498db',
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
width: '90px',
|
width: '50px',
|
||||||
height: '90px',
|
height: '50px',
|
||||||
animation: 'spin 1s ease-in-out infinite',
|
animation: 'spin 2s linear infinite',
|
||||||
},
|
},
|
||||||
loadingText: {
|
loadingText: {
|
||||||
marginTop: '10px',
|
marginLeft: '20px',
|
||||||
fontSize: '1.2rem',
|
},
|
||||||
color: '#fff',
|
tableStyle: {
|
||||||
textAlign: 'center',
|
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