OCR KTP
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user