rizqikaibnu/rekan_veri_fe_new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve code

Browse Source
This commit is contained in:
Rizqika 2024-11-12 15:50:54 +07:00
parent 83f9bd135c
commit dae4f6a9a1
5 changed files with 954 additions and 948 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/screens/Biometric/FaceRecognition/Section/Compare.jsx
View File

@ -3,7 +3,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft, faChevronDown, faTimes, faImage } from '@fortawesome/free-solid-svg-icons'; import { faChevronLeft, faChevronDown, faTimes, faImage } from '@fortawesome/free-solid-svg-icons';
import { FileUploader } from 'react-drag-drop-files'; import { FileUploader } from 'react-drag-drop-files';
import Select from 'react-select' import Select from 'react-select'
import { height } from '@fortawesome/free-solid-svg-icons/fa0';
const Compare = () => { const Compare = () => {
@ -425,34 +424,20 @@ const Compare = () => {
{/* Display uploaded image name */} {/* Display uploaded image name */}
{selectedImageName && ( {selectedImageName && (
<div className="mt-4" style={styles.wrapper}> <div className="mt-3">
<div style={styles.fileWrapper}> <p><strong>File:</strong> {selectedImageName}</p>
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} /> {file && (
<div style={styles.textContainer}> <p style={styles.fileSize}>
<h5>Uploaded File:</h5> Size: {formatFileSize(file.size)}
<p>{selectedImageName}</p> </p>
{file && ( )}
<p style={styles.fileSize}> <button className="btn btn-danger" onClick={handleImageCancel}>
Size: {formatFileSize(file.size)} <FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
</p> </button>
)}
</div>
<div style={styles.closeButtonContainer}>
<button
style={styles.closeButton}
onClick={handleImageCancel}
aria-label="Remove uploaded image"
>
<FontAwesomeIcon
icon={faTimes}
style={styles.closeIcon}
/>
</button>
</div>
</div>
</div> </div>
)} )}
</div> </div>
{errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
{/* Upload Image #2 */} {/* Upload Image #2 */}
<div className="col-md-6"> <div className="col-md-6">
@ -479,31 +464,16 @@ const Compare = () => {
{/* Display uploaded image name */} {/* Display uploaded image name */}
{selectedCompareImageName && ( {selectedCompareImageName && (
<div className="mt-4" style={styles.wrapper}> <div className="mt-3">
<div style={styles.fileWrapper}> <p><strong>File:</strong> {selectedCompareImageName}</p>
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} /> {compareFile && (
<div style={styles.textContainer}> <p style={styles.fileSize}>
<h5>Uploaded File:</h5> Size: {formatFileSize(compareFile.size)}
<p>{selectedCompareImageName}</p> </p>
{file && ( )}
<p style={styles.fileSize}> <button className="btn btn-danger" onClick={handleCompareImageCancel}>
Size: {formatFileSize(file.size)} <FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
</p> </button>
)}
</div>
<div style={styles.closeButtonContainer}>
<button
style={styles.closeButton}
onClick={handleImageCancel}
aria-label="Remove uploaded image"
>
<FontAwesomeIcon
icon={faTimes}
style={styles.closeIcon}
/>
</button>
</div>
</div>
</div> </div>
)} )}
</div> </div>
@ -518,7 +488,14 @@ const Compare = () => {
{/* Results Section */} {/* Results Section */}
{showResult && ( {showResult && (
<ResultsSection/> <ResultsSection
showResult={showResult}
verified={verified}
imageUrl={imageUrl}
selectedImageName={selectedImageName}
imageCompareUrl={imageCompareUrl}
selectedCompareImageName={selectedCompareImageName}
/>
)} )}
</div> </div>
) )

502
src/screens/Biometric/FaceRecognition/Section/Enroll.jsx
View File

@ -334,7 +334,6 @@ const Enroll = () => {
}; };
const styles = { const styles = {
// Existing styles
formGroup: { formGroup: {
marginTop: '-45px', marginTop: '-45px',
}, },
@ -370,33 +369,31 @@ const Enroll = () => {
fontSize: '20px', fontSize: '20px',
}, },
uploadArea: { uploadArea: {
backgroundColor: '#e6f2ff', backgroundColor: '#e6f2ff',
height: '250px', // Default height for non-mobile devices height: '250px',
cursor: 'pointer', cursor: 'pointer',
marginTop: '1rem', marginTop: '1rem',
paddingTop: '22px', paddingTop: '22px',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
border: '1px solid #ced4da', border: '1px solid #ced4da',
borderRadius: '0.25rem', borderRadius: '0.25rem',
}, },
// Mobile responsive styles for upload area
uploadAreaMobile: { uploadAreaMobile: {
backgroundColor: '#e6f2ff', backgroundColor: '#e6f2ff',
height: '50svh', // Reduced height for mobile height: '50svh',
cursor: 'pointer', cursor: 'pointer',
marginTop: '1rem', marginTop: '1rem',
paddingTop: '18px', // Adjusted padding for mobile paddingTop: '18px',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
border: '1px solid #ced4da', border: '1px solid #ced4da',
borderRadius: '0.25rem', borderRadius: '0.25rem',
padding: '20px' padding: '20px',
}, },
uploadIcon: { uploadIcon: {
fontSize: '40px', fontSize: '40px',
@ -410,54 +407,54 @@ const Enroll = () => {
lineHeight: '13px', lineHeight: '13px',
}, },
wrapper: { wrapper: {
border: '1px solid #ddd', border: '1px solid #ddd',
borderRadius: '6px', borderRadius: '6px',
padding: '18px 10px 0 8px', // Padding lebih seragam padding: '18px 10px 0 8px',
height: '13svh', // Tinggi lebih kecil untuk menyesuaikan tampilan height: '13svh',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
backgroundColor: '#f9f9f9', backgroundColor: '#f9f9f9',
overflow: 'hidden', overflow: 'hidden',
}, },
fileWrapper: { fileWrapper: {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
flex: '1', flex: '1',
}, },
textContainer: { textContainer: {
flex: '1', flex: '1',
fontSize: '16px', // Ukuran font lebih kecil fontSize: '16px',
marginLeft: '6px', marginLeft: '6px',
overflow: 'hidden', overflow: 'hidden',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
marginTop: '1rem' marginTop: '1rem',
}, },
fileSize: { fileSize: {
fontSize: '12px', fontSize: '12px',
color: '#555', color: '#555',
marginBottom: '2rem', marginBottom: '2rem',
}, },
closeButtonContainer: { closeButtonContainer: {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
marginLeft: 'auto', marginLeft: 'auto',
}, },
closeButton: { closeButton: {
background: 'transparent', background: 'transparent',
border: 'none', border: 'none',
cursor: 'pointer', cursor: 'pointer',
padding: '0', padding: '0',
}, },
imageIcon: { imageIcon: {
color: '#0542cc', color: '#0542cc',
fontSize: '18px', // Ukuran ikon sedikit lebih kecil fontSize: '18px',
marginRight: '6px', marginRight: '6px',
}, },
closeIcon: { closeIcon: {
color: 'red', color: 'red',
fontSize: '18px', fontSize: '18px',
}, },
submitButton: { submitButton: {
marginLeft: 'auto', marginLeft: 'auto',
@ -471,20 +468,18 @@ const Enroll = () => {
fontSize: '12px', fontSize: '12px',
marginTop: '5px', marginTop: '5px',
}, },
// New styles added and merged
containerResultStyle: { containerResultStyle: {
padding: '20px', padding: '20px',
border: '1px solid #0053b3', border: '1px solid #0053b3',
borderRadius: '5px', borderRadius: '5px',
width: '100%', width: '100%',
margin: '20px auto', margin: '20px auto',
}, },
resultContainer: { resultContainer: {
display: 'flex', display: 'flex',
justifyContent: 'space-between', // Horizontal alignment justifyContent: 'space-between',
alignItems: 'flex-start', // Align items at the top alignItems: 'flex-start',
flexDirection: isMobile ? 'column' : 'row', // Stack vertically on mobile flexDirection: isMobile ? 'column' : 'row',
width: '100%', width: '100%',
}, },
resultsTable: { resultsTable: {
@ -512,9 +507,9 @@ const Enroll = () => {
imageContainer: { imageContainer: {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: isMobile ? 'center' : 'flex-start', // Center image on mobile alignItems: isMobile ? 'center' : 'flex-start',
width: '100%', width: '100%',
marginTop: isMobile ? '10px' : '0', // Add margin for spacing on mobile marginTop: isMobile ? '10px' : '0',
}, },
imageStyle: { imageStyle: {
width: '300px', width: '300px',
@ -522,13 +517,13 @@ const Enroll = () => {
borderRadius: '5px', borderRadius: '5px',
}, },
imageStyleMobile: { imageStyleMobile: {
width: '100%', // Make image responsive on mobile width: '100%',
height: 'auto', height: 'auto',
borderRadius: '5px', borderRadius: '5px',
}, },
imageDetails: { imageDetails: {
marginTop: '10px', marginTop: '10px',
fontSize: isMobile ? '14px' : '16px', // Adjust font size on mobile fontSize: isMobile ? '14px' : '16px',
color: '#1f2d3d', color: '#1f2d3d',
}, },
loadingOverlay: { loadingOverlay: {
@ -576,31 +571,11 @@ const Enroll = () => {
fontSize: '16px', fontSize: '16px',
color: '#1f2d3d', 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: { customLabel: {
fontWeight: 600, fontSize: '14px', color: '#212529' fontWeight: 600,
fontSize: '14px',
color: '#212529',
}, },
// Mobile responsiveness adjustments (if necessary)
responsiveImageStyle: { responsiveImageStyle: {
width: '100%', width: '100%',
maxHeight: '250px', maxHeight: '250px',
@ -644,195 +619,168 @@ const Enroll = () => {
color: 'white', color: 'white',
marginTop: '10px', marginTop: '10px',
}, },
} };
return ( return (
<div> <div>
{/* Inject keyframes for the spinner */} <style>
<style> {`
{` @keyframes spin {
@keyframes spin { 0% { transform: rotate(0deg); }
0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
100% { transform: rotate(360deg); } }
} .select-wrapper {
max-height: 200px;
overflow-y: auto;
}
`}
</style>
.select-wrapper { {isLoading && (
max-height: 200px; /* Limit the height of the container */ <div style={styles.loadingOverlay}>
overflow-y: auto; /* Enable vertical scroll if the content overflows */ <div style={styles.spinner}></div>
} <p style={styles.loadingText}>Loading...</p>
`} </div>
</style> )}
{isLoading && ( <div className="form-group row align-items-center">
<div style={styles.loadingOverlay}> <div className="col-md-6">
<div style={styles.spinner}></div> <div className="select-wrapper">
<p style={styles.loadingText}>Loading...</p> <Select
</div> id="applicationId"
)} value={applicationOptions.find(option => option.value === applicationId)}
onChange={handleApplicationChange}
{/* Application ID Selection */} options={applicationOptions}
<div className="form-group row align-items-center"> placeholder="Select Application ID"
<div className="col-md-6"> isSearchable
<div className="select-wrapper"> menuPortalTarget={document.body}
<Select menuPlacement="auto"
id="applicationId" inputValue={inputValueApplication}
value={applicationOptions.find(option => option.value === applicationId)} onInputChange={handleInputChangeApplication}
onChange={handleApplicationChange}
options={applicationOptions}
placeholder="Select Application ID"
isSearchable
menuPortalTarget={document.body}
menuPlacement="auto"
inputValue={inputValueApplication}
onInputChange={handleInputChangeApplication} // Limit input length for Application ID
/>
</div>
{applicationError && <small style={{ color: 'red' }}>{applicationError}</small>}
</div>
<div className="col-md-6">
<p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', margin: '0', marginTop: '8px' }}>
Remaining Quota
</p>
<div style={styles.remainingQuota}>
<span style={styles.quotaText}>{selectedQuota}</span>
<span style={styles.timesText}>(times)</span>
</div>
</div>
</div>
{/* Subject ID Input */}
<div className="form-group row align-items-center">
<div className="col-md-6">
<input
type="text"
id="subjectId"
className="form-control"
placeholder="Enter Subject ID"
value={subjectId}
onChange={handleSubjectIdChange}
onFocus={() => fetchSubjectIds(applicationId)}
maxLength={15}
/>
{subjectError && <small style={{ color: 'red' }}>{subjectError}</small>}
{subjectAvailabilityMessage && (
<small style={{ color: subjectAvailabilityMessage.includes('available') ? 'green' : 'red' }}>
{subjectAvailabilityMessage}
</small>
)}
</div>
</div>
{/* Upload Section */}
<div className='col-md-6'>
<div className="row form-group mt-4">
<CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
Upload Face Photo
</CustomLabel>
<FileUploader
handleChange={handleImageUpload}
name="file"
types={fileTypes}
multiple={false}
onDrop={(files) => {
if (files && files[0]) {
handleImageUpload(files[0]);
} else {
console.error('No valid files dropped');
}
}}
children={(
<div style={isMobile ? styles.uploadAreaMobile : styles.uploadArea}>
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
<p style={styles.uploadText}>Drag and Drop Here</p>
<p>Or</p>
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
<p className="text-muted">Supported file types: JPG, JPEG</p>
</div>
)}
/>
<input
type="file"
id="fileUpload"
ref={fileInputRef}
style={{ display: 'none' }}
accept="image/jpeg, image/jpg"
onChange={e => handleImageUpload(e.target.files[0])}
/>
{imageError && <small style={{ color: 'red' }}>{imageError}</small>}
</div>
</div>
{/* Display uploaded image name */}
{selectedImageName && (
<div className="col-md-6 mt-4" style={styles.wrapper}>
<div style={styles.fileWrapper}>
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} />
<div style={styles.textContainer}>
<h5>Uploaded File:</h5>
<p>{selectedImageName}</p>
{file && (
<p style={styles.fileSize}>
Size: {formatFileSize(file.size)}
</p>
)}
</div>
<div style={styles.closeButtonContainer}>
<button
style={styles.closeButton}
onClick={handleImageCancel}
aria-label="Remove uploaded image"
>
<FontAwesomeIcon
icon={faTimes}
style={styles.closeIcon}
/>
</button>
</div>
</div>
</div>
)}
{/* Submit Button */}
<div style={styles.submitButton}>
<button onClick={handleEnrollClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
<p className="text-white mb-0">Enroll Now</p>
</button>
</div>
{/* Result Section */}
{showResult && (
<div style={styles.containerResultStyle}>
<h1 style={{ color: '#0542cc', fontSize: isMobile ? '1.5rem' : '2rem' }}>Results</h1>
<div style={styles.resultContainer}>
{/* Table Styling: responsive */}
<table style={isMobile ? styles.resultsTableMobile : styles.resultsTable}>
<tbody>
<tr>
<td style={{ ...styles.resultsCell, width: '40%' }}>Similarity</td>
<td style={{ ...styles.resultsValueCell, ...styles.resultsTrueValue }}>True</td>
</tr>
{/* More rows can go here */}
</tbody>
</table>
{/* Image and Details Container */}
<div style={styles.imageContainer}>
<img
src={imageUrl || "path-to-your-image"}
alt="Contoh Foto"
style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
/> />
<p style={isMobile ? { ...styles.imageDetails, fontSize: '14px' } : styles.imageDetails}> </div>
{selectedImageName} {applicationError && <small style={{ color: 'red' }}>{applicationError}</small>}
</p> </div>
<div className="col-md-6">
<p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', margin: '0', marginTop: '8px' }}>
Remaining Quota
</p>
<div style={styles.remainingQuota}>
<span style={styles.quotaText}>{selectedQuota}</span>
<span style={styles.timesText}>(times)</span>
</div> </div>
</div> </div>
</div> </div>
)}
</div> <div className="form-group row align-items-center">
<div className="col-md-6">
<input
type="text"
id="subjectId"
className="form-control"
placeholder="Enter Subject ID"
value={subjectId}
onChange={handleSubjectIdChange}
onFocus={() => fetchSubjectIds(applicationId)}
maxLength={15}
/>
{subjectError && <small style={{ color: 'red' }}>{subjectError}</small>}
{subjectAvailabilityMessage && (
<small style={{ color: subjectAvailabilityMessage.includes('available') ? 'green' : 'red' }}>
{subjectAvailabilityMessage}
</small>
)}
</div>
</div>
<div className='col-md-6'>
<div className="row form-group mt-4">
<CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
Upload Face Photo
</CustomLabel>
<FileUploader
handleChange={handleImageUpload}
name="file"
types={fileTypes}
multiple={false}
onDrop={(files) => {
if (files && files[0]) {
handleImageUpload(files[0]);
}
}}
children={
<div style={isMobile ? styles.uploadAreaMobile : styles.uploadArea}>
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
<p style={styles.uploadText}>Drag and Drop Here</p>
<p>Or</p>
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
<p className="text-muted">Supported file types: JPG, JPEG</p>
</div>
}
/>
<input
type="file"
id="fileUpload"
ref={fileInputRef}
style={{ display: 'none' }}
accept="image/jpeg, image/jpg"
onChange={e => handleImageUpload(e.target.files[0])}
/>
{imageError && <small style={{ color: 'red' }}>{imageError}</small>}
</div>
</div>
{selectedImageName && (
<div className="mt-3">
<p><strong>File:</strong> {selectedImageName}</p>
{file && (
<p style={styles.fileSize}>
Size: {formatFileSize(file.size)}
</p>
)}
<button className="btn btn-danger" onClick={handleImageCancel}>
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
</button>
</div>
)}
{errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
<div style={styles.submitButton}>
<button onClick={handleEnrollClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
<p className="text-white mb-0">Enroll Now</p>
</button>
</div>
{showResult && (
<div style={styles.containerResultStyle}>
<h1 style={{ color: '#0542cc', fontSize: isMobile ? '1.5rem' : '2rem' }}>Results</h1>
<div style={styles.resultContainer}>
<table style={isMobile ? styles.resultsTableMobile : styles.resultsTable}>
<tbody>
<tr>
<td style={{ ...styles.resultsCell, width: '40%' }}>Similarity</td>
<td style={{ ...styles.resultsValueCell, ...styles.resultsTrueValue }}>True</td>
</tr>
</tbody>
</table>
<div style={styles.imageContainer}>
<img
src={imageUrl || "path-to-your-image"}
alt="Contoh Foto"
style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
/>
<p style={isMobile ? { ...styles.imageDetails, fontSize: '14px' } : styles.imageDetails}>
{selectedImageName}
</p>
</div>
</div>
</div>
)}
</div>
); );
} }
export default Enroll; export default Enroll;

181
src/screens/Biometric/FaceRecognition/Section/Search.jsx
View File

@ -121,27 +121,27 @@ const Search = () => {
}; };
const handleImageUpload = (file) => { const handleImageUpload = (file) => {
// Ensure file exists before accessing its properties // Ensure the file is not undefined or null before accessing its properties
if (!file) { if (file && file.name) {
console.error('File is undefined'); const fileExtension = file.name.split('.').pop().toUpperCase();
setImageError('Please upload a valid image file.'); if (fileTypes.includes(fileExtension)) {
return; setSelectedImageName(file.name);
} setFile(file);
setUploadedFile(file); // Set uploadedFile to the selected file
const fileExtension = file.name.split('.').pop().toUpperCase(); setImageError(''); // Clear any previous errors
if (fileTypes.includes(fileExtension)) { } else {
setSelectedImageName(file.name); alert('Image format is not supported');
setFile(file); setImageError('Image format is not supported');
setImageError(''); // Clear any previous errors setFile(null);
setUploadedFile(null); // Clear uploadedFile if the file is unsupported
}
} else { } else {
// Show an alert if the file type is not supported console.error('No file selected or invalid file object.');
alert('Image format is not supported');
setImageError('Image format is not supported'); // Optionally set error message to display on the UI
setFile(null); // Optionally clear the selected file
} }
}; };
const handleImageCancel = () => { const handleImageCancel = () => {
setSelectedImageName(''); setSelectedImageName('');
setFile(null); setFile(null);
@ -162,31 +162,31 @@ const Search = () => {
// Validate Application ID // Validate Application ID
if (!applicationId) { if (!applicationId) {
setApplicationIdError('Please select an Application ID before searching.'); setApplicationIdError('Please select an Application ID before searching.');
hasError = true; // Set error flag hasError = true;
} }
// Validate Limit ID // Validate Limit ID
if (!limitId) { if (!limitId) {
setLimitIdError('Please select a Limit before searching.'); setLimitIdError('Please select a Limit before searching.');
hasError = true; // Set error flag hasError = true;
} }
// Validate Image Upload // Validate Image Upload
if (!selectedImageName) { if (!selectedImageName) {
setImageError('Please upload an image file.'); setImageError('Please upload an image file.');
hasError = true; // Set error flag hasError = true;
} }
// Check if the file is uploaded // Check if the file is uploaded
if (!uploadedFile) { if (!uploadedFile) {
setErrorMessage('Please upload an image file.'); setErrorMessage('Please upload an image file.');
hasError = true; // Set error flag hasError = true;
} }
// If any errors were found, do not proceed // If any errors were found, do not proceed
if (hasError) { if (hasError) {
return; return;
} }
const parsedLimitId = parseInt(limitId, 10); const parsedLimitId = parseInt(limitId, 10);
@ -200,43 +200,42 @@ const Search = () => {
setIsLoading(true); setIsLoading(true);
try { try {
const response = await fetch(`${BASE_URL}/face_recognition/search`, { const response = await fetch(`${BASE_URL}/face_recognition/search`, {
method: 'POST', method: 'POST',
headers: { headers: {
'accept': 'application/json', 'accept': 'application/json',
'x-api-key': `${API_KEY}`, 'x-api-key': `${API_KEY}`,
}, },
body: formData, body: formData,
}); });
const data = await response.json(); const data = await response.json();
console.log('Response Data:', data); // Log the response console.log('Response Data:', data);
if (response.ok) { if (response.ok) {
const resultsArray = Array.isArray(data.details.data) ? data.details.data : []; const resultsArray = Array.isArray(data.details.data) ? data.details.data : [];
const processedResults = resultsArray.map(item => ({ const processedResults = resultsArray.map(item => ({
identity: item.identity, identity: item.identity,
similarity: item.similarity, similarity: item.similarity,
imageUrl: item.image_url, imageUrl: item.image_url,
distance: item.distance, distance: item.distance,
})); }));
// Fetch images using their URLs // Fetch images using their URLs
await Promise.all(processedResults.map(async result => { await Promise.all(processedResults.map(async result => {
const imageFileName = result.imageUrl.split('/').pop(); // Extract file name if needed const imageFileName = result.imageUrl.split('/').pop(); // Extract file name if needed
await fetchImage(imageFileName); // Fetch image await fetchImage(imageFileName); // Fetch image
console.log('multiple image data: ', result.imageUrl); // Log the URL console.log('multiple image data: ', result.imageUrl);
})); }));
setResults(processedResults); setResults(processedResults);
setShowResult(true); setShowResult(true);
} else {
} else { console.error('Error response:', JSON.stringify(data, null, 2));
console.error('Error response:', JSON.stringify(data, null, 2)); const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.';
const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.'; setErrorMessage(errorMessage);
setErrorMessage(errorMessage); }
}
} catch (error) { } catch (error) {
console.error('Error:', error); console.error('Error:', error);
setErrorMessage('An error occurred while making the request.'); setErrorMessage('An error occurred while making the request.');
@ -245,6 +244,7 @@ const Search = () => {
} }
}; };
const fetchImage = async (imageFileName) => { const fetchImage = async (imageFileName) => {
setIsLoading(true); setIsLoading(true);
try { try {
@ -322,7 +322,7 @@ const Search = () => {
}, },
uploadArea: { uploadArea: {
backgroundColor: '#e6f2ff', backgroundColor: '#e6f2ff',
height: '50svh', height: '40svh',
cursor: 'pointer', cursor: 'pointer',
marginTop: '1rem', marginTop: '1rem',
padding: '1rem', padding: '1rem',
@ -438,18 +438,18 @@ const Search = () => {
backgroundColor: '#f7f7f7', backgroundColor: '#f7f7f7',
borderRadius: '8px', borderRadius: '8px',
margin: '1rem', margin: '1rem',
width: isMobile ? '100%' : '50%', width: '100%', // Full width for large screens
}, },
resultContainer: { resultContainer: {
display: 'flex', display: 'flex',
flexDirection: isMobile ? 'column' : 'row', flexDirection: 'row',
flexWrap: 'wrap', flexWrap: 'wrap',
gap: '1rem', gap: '1rem',
justifyContent: 'center', justifyContent: 'center',
}, },
resultItem: { resultItem: {
display: 'flex', display: 'flex',
flexDirection: isMobile ? 'row' : 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
textAlign: 'center', textAlign: 'center',
padding: '0.5rem', padding: '0.5rem',
@ -457,10 +457,10 @@ const Search = () => {
border: '1px solid #ddd', border: '1px solid #ddd',
borderRadius: '8px', borderRadius: '8px',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
width: isMobile ? '100%' : '150px', width: '150px', // Default width for larger screens
}, },
resultTextContainer: { resultTextContainer: {
marginBottom: isMobile ? '0' : '0.5rem', marginBottom: '0.5rem',
}, },
resultText: { resultText: {
fontSize: '0.9rem', fontSize: '0.9rem',
@ -471,9 +471,21 @@ const Search = () => {
width: '80px', width: '80px',
height: '80px', height: '80px',
borderRadius: '50%', borderRadius: '50%',
marginTop: isMobile ? '0' : '0.5rem', marginTop: '0.5rem',
}, },
// Media query for mobile responsiveness
'@media screen and (max-width: 768px)': {
containerResultStyle: {
width: '100%', // Full width on mobile
},
resultContainer: {
flexDirection: 'column', // Stack results vertically on small screens
},
resultItem: {
width: '100%', // Make result items take full width on mobile
},
},
}; };
return ( return (
@ -599,34 +611,21 @@ const Search = () => {
</div> </div>
</div> </div>
{selectedImageName && ( {selectedImageName && (
<div className="col-md-6 mt-4" style={styles.wrapper}> <div className="mt-3">
<div style={styles.fileWrapper}> <p><strong>File:</strong> {selectedImageName}</p>
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} /> {file && (
<div style={styles.textContainer}> <p style={styles.fileSize}>
<h5>Uploaded File:</h5> Size: {formatFileSize(file.size)}
<p>{selectedImageName}</p> </p>
{file && ( )}
<p style={styles.fileSize}> <button className="btn btn-danger" onClick={handleImageCancel}>
Size: {formatFileSize(file.size)} <FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
</p> </button>
)}
</div>
<div style={styles.closeButtonContainer}>
<button
style={styles.closeButton}
onClick={handleImageCancel}
aria-label="Remove uploaded image"
>
<FontAwesomeIcon
icon={faTimes}
style={styles.closeIcon}
/>
</button>
</div>
</div> </div>
</div> )}
)}
{errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
{/* Submit Button */} {/* Submit Button */}
<div style={styles.submitButton}> <div style={styles.submitButton}>

815
src/screens/Biometric/FaceRecognition/Section/Verify.jsx
View File

@ -78,203 +78,6 @@ const Verify = () => {
return () => window.removeEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize);
}, []); }, []);
const 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',
cursor: 'pointer',
marginTop: '1rem',
padding: '22px 10px 0 20px',
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',
},
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',
},
containerResultStyle: {
padding: '20px',
border: '1px solid #0053b3',
borderRadius: '5px',
width: '100%',
maxWidth: '600px',
margin: '20px auto',
},
resultContainer: {
display: 'flex',
alignItems: 'center',
width: '100%',
},
tableStyle: {
width: '60%',
borderCollapse: 'collapse',
},
resultsTableMobile: {
width: '100%',
borderCollapse: 'collapse',
fontSize: '14px',
},
resultsCell: {
border: '0.1px solid gray',
padding: '8px',
},
resultsValueCell: {
border: '0.1px solid gray',
padding: '8px',
width: '60%',
},
imageContainer: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: isMobile ? '20px' : '0',
},
imageStyle: {
width: '300px',
height: '300px',
borderRadius: '5px',
objectFit: 'cover',
},
imageStyleMobile: {
width: '100%',
height: 'auto',
},
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',
},
};
const handleApplicationChange = async (selectedOption) => { const handleApplicationChange = async (selectedOption) => {
if (!selectedOption) { if (!selectedOption) {
console.error("Selected option is undefined"); console.error("Selected option is undefined");
@ -325,33 +128,21 @@ const Verify = () => {
} }
}; };
const handleFocus = () => {
setIsSelectOpen(true);
};
const handleBlur = () => {
setIsSelectOpen(false);
};
const handleImageUpload = (file) => { const handleImageUpload = (file) => {
// Ensure file exists before accessing its properties // Ensure the file is not undefined or null before accessing its properties
if (!file) { if (file && file.name) {
console.error('File is undefined'); const fileExtension = file.name.split('.').pop().toUpperCase();
setUploadError('Please upload a valid image file.'); if (fileTypes.includes(fileExtension)) {
return; setSelectedImageName(file.name);
} setFile(file);
setUploadError(''); // Clear any previous errors
const fileExtension = file.name.split('.').pop().toUpperCase(); } else {
if (fileTypes.includes(fileExtension)) { alert('Image format is not supported');
setSelectedImageName(file.name); setUploadError('Image format is not supported');
setFile(file); setFile(null);
setUploadError(''); // Clear any previous errors }
} else { } else {
// Show an alert if the file type is not supported console.error('No file selected or invalid file object.');
alert('Image format is not supported');
setUploadError('Image format is not supported'); // Optionally set error message to display on the UI
setFile(null); // Optionally clear the selected file
} }
}; };
@ -509,6 +300,295 @@ const Verify = () => {
} }
}; };
const 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',
cursor: 'pointer',
marginTop: '1rem',
paddingTop: '22px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #ced4da',
borderRadius: '0.25rem',
},
uploadAreaMobile: {
backgroundColor: '#e6f2ff',
height: '50svh', // Use viewport height for a more responsive size
cursor: 'pointer',
marginTop: '1rem',
paddingTop: '18px',
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',
height: '13svh',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: '#f9f9f9',
overflow: 'hidden',
},
fileWrapper: {
display: 'flex',
alignItems: 'center',
flex: '1',
},
textContainer: {
flex: '1',
fontSize: '16px',
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',
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',
},
containerResultStyle: {
padding: '20px',
border: '1px solid #0053b3',
borderRadius: '5px',
width: '100%',
margin: '20px auto',
},
resultContainer: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
flexDirection: 'row',
width: '100%',
flexWrap: 'wrap', // Allow wrapping on smaller screens
},
resultsTable: {
width: '60%',
borderCollapse: 'collapse',
},
resultsTableMobile: {
width: '100%',
borderCollapse: 'collapse',
},
resultsCell: {
padding: '8px',
width: '30%',
fontSize: '16px',
},
resultsValueCell: {
padding: '8px',
width: '70%',
fontSize: '16px',
color: 'red',
},
resultsTrueValue: {
color: 'inherit',
},
imageContainer: {
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
width: '100%',
marginTop: '20px',
},
imageStyle: {
width: isMobile ? '200px' : '320px', // 200px for mobile, 320px for larger screens
height: isMobile ? '200px' : '320px',
borderRadius: '5px',
objectFit: 'cover', // Ensures the image fits within the specified dimensions
},
imageStyleMobile: {
width: '100%',
height: 'auto',
borderRadius: '5px',
},
imageDetails: {
marginTop: '10px',
fontSize: '16px',
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',
},
customLabel: {
fontWeight: 600,
fontSize: '14px',
color: '#212529',
},
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>
@ -533,16 +613,16 @@ const Verify = () => {
<div className="col-md-6"> <div className="col-md-6">
<div className="select-wrapper"> <div className="select-wrapper">
<Select <Select
id="applicationId" id="applicationId"
value={applicationOptions.find(option => option.value === applicationId)} value={applicationOptions.find(option => option.value === applicationId)}
onChange={handleApplicationChange} onChange={handleApplicationChange}
options={applicationOptions} options={applicationOptions}
placeholder="Select Application ID" placeholder="Select Application ID"
isSearchable isSearchable
menuPortalTarget={document.body} // Use this for scroll behavior menuPortalTarget={document.body} // Use this for scroll behavior
menuPlacement="auto" menuPlacement="auto"
inputValue={inputValueApplication} inputValue={inputValueApplication}
onInputChange={handleInputChangeApplication} // Limit input length for Application ID onInputChange={handleInputChangeApplication} // Limit input length for Application ID
/> />
</div> </div>
{applicationError && <small style={styles.uploadError}>{applicationError}</small>} {applicationError && <small style={styles.uploadError}>{applicationError}</small>}
@ -559,166 +639,145 @@ const Verify = () => {
</div> </div>
</div> </div>
{/* Subject ID Input */} {/* Subject ID Input */}
<div className="form-group row align-items-center"> <div className="form-group row align-items-center">
<div className="col-md-6">
<Select
id="subjectId"
options={options}
value={options.find(option => option.value === subjectId)}
onChange={selectedOption => setSubjectId(selectedOption ? selectedOption.value : '')}
onInputChange={(value) => {
// Check if input value length is within the 15-character limit
if (value.length <= 15) {
setInputValue(value); // Set the input value if within limit
}
}}
onFocus={() => fetchSubjectIds(applicationId)} // Fetch subject IDs on focus
placeholder="Enter Subject ID"
isClearable
noOptionsMessage={() => (
<div style={{ color: 'red' }}>Subject ID not registered.</div>
)}
inputValue={inputValue} // Bind the inputValue state to control the input
/>
{subjectError && <small style={{ color: 'red' }}>{subjectError}</small>}
{subjectAvailabilityMessage && (
<small style={{ color: subjectAvailabilityMessage.includes('available') ? 'green' : 'red' }}>
{subjectAvailabilityMessage}
</small>
)}
</div>
<div className="col-md-6">
<div style={styles.selectWrapper}>
<select
id="thresholdId"
className="form-control"
style={styles.select}
value={thresholdId}
onChange={(e) => {
setThresholdId(e.target.value);
setThresholdError(''); // Clear error if valid
}}
onFocus={handleFocus}
onBlur={handleBlur}
>
<option value="">Select Threshold</option>
{thresholdIds.map((app) => (
<option key={app.id} value={app.name}>
{app.displayName}
</option>
))}
</select>
<FontAwesomeIcon
icon={isSelectOpen ? faChevronDown : faChevronLeft}
style={styles.chevronIcon}
/>
{thresholdError && <small style={styles.uploadError}>{thresholdError}</small>}
</div>
</div>
</div>
{/* Upload Section */}
<div className="col-md-6"> <div className="col-md-6">
<div className="row form-group mt-4"> <Select
<CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}> id="subjectId"
Upload Face Photo options={options}
</CustomLabel> value={options.find(option => option.value === subjectId)}
<FileUploader onChange={selectedOption => setSubjectId(selectedOption ? selectedOption.value : '')}
handleChange={handleImageUpload} onInputChange={(value) => {
name="file" if (value.length <= 15) {
types={fileTypes} setInputValue(value); // Set the input value if within limit
multiple={false}
onDrop={(files) => handleImageUpload(files[0])}
children={
<div style={styles.uploadArea}>
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
<p style={styles.uploadText}>Drag and Drop Here</p>
<p>Or</p>
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
<p className="text-muted">Supported file types: JPG, JPEG</p>
</div>
} }
/> }}
{uploadError && <small style={styles.uploadError}>{uploadError}</small>} onFocus={() => fetchSubjectIds(applicationId)} // Fetch subject IDs on focus
</div> placeholder="Enter Subject ID"
isClearable
noOptionsMessage={() => (
<div style={{ color: 'red' }}>Subject ID not registered.</div>
)}
inputValue={inputValue} // Bind the inputValue state to control the input
/>
{subjectError && <small style={{ color: 'red' }}>{subjectError}</small>}
{subjectAvailabilityMessage && (
<small style={{ color: subjectAvailabilityMessage.includes('available') ? 'green' : 'red' }}>
{subjectAvailabilityMessage}
</small>
)}
</div> </div>
{/* Display uploaded image name */} <div className="col-md-6">
{selectedImageName && ( <div style={styles.selectWrapper}>
<div className="col-md-6 mt-4" style={styles.wrapper}> <select
<div style={styles.fileWrapper}> id="thresholdId"
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} /> className="form-control"
<div style={styles.textContainer}> style={styles.select}
<h5>Uploaded File:</h5> value={thresholdId}
<p>{selectedImageName}</p> onChange={(e) => {
{file && ( setThresholdId(e.target.value);
<p style={styles.fileSize}> setThresholdError(''); // Clear error if valid
Size: {formatFileSize(file.size)} }}
</p> >
)} <option value="">Select Threshold</option>
</div> {thresholdIds.map((app) => (
<div style={styles.closeButtonContainer}> <option key={app.id} value={app.name}>
<button {app.displayName}
style={styles.closeButton} </option>
onClick={handleImageCancel} ))}
aria-label="Remove uploaded image" </select>
> <FontAwesomeIcon
<FontAwesomeIcon icon={faChevronDown}
icon={faTimes} style={styles.chevronIcon}
style={styles.closeIcon} />
/> {thresholdError && <small style={styles.uploadError}>{thresholdError}</small>}
</button>
</div>
</div>
</div> </div>
)} </div>
</div>
{/* Submit Button */} {/* Upload Section */}
<div style={styles.submitButton}> <div className="col-md-6">
<button onClick={handleCheckClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}> <div className="row form-group mt-4">
<p className="text-white mb-0">Check Now</p> <CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
Upload Face Photo
</CustomLabel>
<FileUploader
handleChange={handleImageUpload}
name="file"
types={fileTypes}
multiple={false}
onDrop={(files) => handleImageUpload(files[0])}
children={
<div style={styles.uploadArea}>
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
<p style={styles.uploadText}>Drag and Drop Here</p>
<p>Or</p>
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
<p className="text-muted">Supported file types: JPG, JPEG</p>
</div>
}
/>
{uploadError && <small style={styles.uploadError}>{uploadError}</small>}
</div>
</div>
{/* Display uploaded image name */}
{selectedImageName && (
<div className="mt-3">
<p><strong>File:</strong> {selectedImageName}</p>
{file && (
<p style={styles.fileSize}>
Size: {formatFileSize(file.size)}
</p>
)}
<button className="btn btn-danger" onClick={handleImageCancel}>
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
</button> </button>
</div> </div>
)}
{errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
{/* Results Section */} {/* Submit Button */}
{showResult && ( <div style={styles.submitButton}>
<div style={styles.containerResultStyle}> <button onClick={handleCheckClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
<h1 style={{ color: '#0542cc', fontSize: isMobile ? '1.5rem' : '2rem' }}>Results</h1> <p className="text-white mb-0">Check Now</p>
<div style={{ ...styles.resultContainer, flexDirection: isMobile ? 'column' : 'row' }}> </button>
<table style={isMobile ? styles.resultsTableMobile : styles.tableStyle}> </div>
<tbody>
<tr>
<td style={{ ...styles.resultsCell, width: '40%' }}>Similarity</td>
<td
style={{
...styles.resultsValueCell,
color: verified ? 'green' : verified === false ? 'red' : 'black',
}}
>
<strong>{verified !== null ? (verified ? 'True' : 'False') : 'N/A'}</strong>
</td>
</tr>
</tbody>
</table>
<div style={{ ...styles.imageContainer, width: isMobile ? '100%' : '30%' }}> {/* Results Section */}
<img {showResult && (
src={imageUrl || "path-to-your-image"} <div style={styles.containerResultStyle}>
alt="Example Image" <h1 style={{ color: '#0542cc', fontSize: '2rem' }}>Results</h1>
style={isMobile ? styles.imageStyleMobile : styles.imageStyle} <div style={styles.resultContainer}>
/> <table style={styles.resultsTableMobile}>
<p style={{ marginTop: '10px', fontSize: isMobile ? '12px' : '16px' }}> <tbody>
File Name: {selectedImageName} <tr>
</p> <td style={styles.resultsCell}>Similarity</td>
</div> <td style={{ ...styles.resultsValueCell, color: verified ? 'green' : 'red' }}>
<strong>{verified !== null ? (verified ? 'True' : 'False') : 'N/A'}</strong>
</td>
</tr>
</tbody>
</table>
<div style={styles.imageContainer}>
<img
src={imageUrl || "path-to-your-image"}
alt="Example Image"
style={styles.imageStyle}
/>
<p style={{ marginTop: '10px' }}>
File Name: {selectedImageName}
</p>
</div> </div>
</div> </div>
)} </div>
)}
</div> </div>
); );
} }
export default Verify; export default Verify;

259
src/screens/Biometric/OcrKtp/Verify.jsx
View File

@ -27,6 +27,7 @@ const Verify = () => {
const [data, setData] = useState(null); const [data, setData] = useState(null);
const [showResult, setShowResult] = useState(false); const [showResult, setShowResult] = useState(false);
const [inputValueApplication, setInputValueApplication] = useState(''); const [inputValueApplication, setInputValueApplication] = useState('');
const [selectedQuota, setSelectedQuota] = useState(0);
// Validation state // Validation state
const [validationErrors, setValidationErrors] = useState({ const [validationErrors, setValidationErrors] = useState({
@ -87,7 +88,14 @@ const Verify = () => {
}; };
const handleApplicationChange = (selectedOption) => { const handleApplicationChange = (selectedOption) => {
const selectedId = selectedOption.value;
const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
setApplicationId(selectedOption ? selectedOption.value : ''); setApplicationId(selectedOption ? selectedOption.value : '');
if (selectedApp) {
setSelectedQuota(selectedApp.quota);
}
}; };
const applicationOptions = applicationIds.map(app => ({ const applicationOptions = applicationIds.map(app => ({
@ -220,8 +228,6 @@ const Verify = () => {
} }
}; };
// The fetchImage function you already have in your code // The fetchImage function you already have in your code
const fetchImage = async (imageFileName) => { const fetchImage = async (imageFileName) => {
setIsLoading(true); setIsLoading(true);
@ -257,6 +263,132 @@ const Verify = () => {
} }
}; };
const styles = {
selectWrapper: {
position: 'relative',
display: 'inline-block',
width: '100%',
},
select: {
fontSize: '16px',
padding: '10px',
width: '100%',
borderRadius: '4px',
border: '1px solid #ccc',
},
remainingQuota: {
display: 'flex',
alignItems: 'center',
},
quotaText: {
fontSize: '24px',
fontWeight: '600',
},
timesText: {
fontSize: '16px',
fontWeight: '300',
},
customLabel: {
fontSize: '18px',
fontWeight: '600',
color: '#1f2d3d',
},
uploadWrapper: {
marginTop: '1rem',
},
uploadArea: {
backgroundColor: '#e6f2ff',
height: !isMobile? '30svh' : '50svh',
cursor: 'pointer',
marginTop: '1rem',
paddingTop: '22px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #ced4da',
borderRadius: '0.25rem',
textAlign: 'center',
},
uploadIcon: {
fontSize: '40px',
color: '#0542cc',
marginBottom: '10px',
},
uploadText: {
color: '#1f2d3d',
fontWeight: '400',
fontSize: '16px',
},
browseLink: {
color: '#0542cc',
textDecoration: 'none',
fontWeight: 'bold',
},
uploadError: {
color: 'red',
fontSize: '12px',
marginTop: '10px',
},
errorContainer: {
marginTop: '10px',
padding: '10px',
backgroundColor: '#f8d7da',
border: '1px solid #f5c6cb',
borderRadius: '4px',
},
errorText: {
color: '#721c24',
fontSize: '14px',
margin: '0',
},loadingOverlay: {
position: 'fixed', // Gunakan fixed untuk overlay penuh layar
top: 0,
left: 0,
right: 0,
bottom: 0, // Pastikan menutupi seluruh layar
display: 'flex',
justifyContent: 'center', // Posisikan spinner di tengah secara horizontal
alignItems: 'center', // Posisikan spinner di tengah secara vertikal
backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semitransparan di background
color: 'white',
fontSize: '24px',
zIndex: 1000, // Pastikan overlay muncul di atas konten lainnya
},
spinner: {
border: '4px solid #f3f3f3', // Border gray untuk spinner
borderTop: '4px solid #3498db', // Border biru untuk spinner
borderRadius: '50%', // Membuat spinner bulat
width: '50px', // Ukuran spinner
height: '50px', // Ukuran spinner
animation: 'spin 2s linear infinite', // Menambahkan animasi spin
},
loadingText: {
marginLeft: '20px',
},
tableStyle: {
width: '100%',
borderCollapse: 'collapse',
marginTop: '20px',
},
tableCell: {
padding: '8px 15px',
border: '1px solid #ccc',
textAlign: 'left',
},
};
const formatFileSize = (sizeInBytes) => {
if (sizeInBytes < 1024) {
return `${sizeInBytes} bytes`; // Jika ukuran lebih kecil dari 1 KB
} else if (sizeInBytes < 1048576) {
return `${(sizeInBytes / 1024).toFixed(2)} KB`; // Jika ukuran lebih kecil dari 1 MB
} else {
return `${(sizeInBytes / 1048576).toFixed(2)} MB`; // Jika ukuran lebih besar dari 1 MB
}
};
return ( return (
<div className="container" style={{ marginTop: '3%' }}> <div className="container" style={{ marginTop: '3%' }}>
{/* Inject keyframes for the spinner */} {/* Inject keyframes for the spinner */}
@ -315,11 +447,11 @@ const Verify = () => {
{validationErrors.applicationId && <p style={styles.errorText}>{validationErrors.applicationId}</p>} {validationErrors.applicationId && <p style={styles.errorText}>{validationErrors.applicationId}</p>}
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', marginTop: '8px' }}> <p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', margin: '0', marginTop: '8px' }}>
Remaining Quota Remaining Quota
</p> </p>
<div style={styles.remainingQuota}> <div style={styles.remainingQuota}>
<span style={styles.quotaText}>0</span> <span style={styles.quotaText}>{selectedQuota}</span>
<span style={styles.timesText}>(times)</span> <span style={styles.timesText}>(times)</span>
</div> </div>
</div> </div>
@ -362,6 +494,11 @@ const Verify = () => {
{selectedImageName && ( {selectedImageName && (
<div className="mt-3"> <div className="mt-3">
<p><strong>File:</strong> {selectedImageName}</p> <p><strong>File:</strong> {selectedImageName}</p>
{file && (
<p style={styles.fileSize}>
Size: {formatFileSize(file.size)}
</p>
)}
<button className="btn btn-danger" onClick={handleImageCancel}> <button className="btn btn-danger" onClick={handleImageCancel}>
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel <FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
</button> </button>
@ -477,117 +614,3 @@ const Verify = () => {
export default Verify; export default Verify;
const styles = {
selectWrapper: {
position: 'relative',
display: 'inline-block',
width: '100%',
},
select: {
fontSize: '16px',
padding: '10px',
width: '100%',
borderRadius: '4px',
border: '1px solid #ccc',
},
remainingQuota: {
display: 'flex',
alignItems: 'center',
},
quotaText: {
fontSize: '24px',
fontWeight: '600',
},
timesText: {
fontSize: '16px',
fontWeight: '300',
},
customLabel: {
fontSize: '18px',
fontWeight: '600',
color: '#1f2d3d',
},
uploadWrapper: {
marginTop: '1rem',
},
uploadArea: {
backgroundColor: '#e6f2ff',
height: '58svh',
cursor: 'pointer',
marginTop: '1rem',
paddingTop: '22px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #ced4da',
borderRadius: '0.25rem',
textAlign: 'center',
},
uploadIcon: {
fontSize: '40px',
color: '#0542cc',
marginBottom: '10px',
},
uploadText: {
color: '#1f2d3d',
fontWeight: '400',
fontSize: '16px',
},
browseLink: {
color: '#0542cc',
textDecoration: 'none',
fontWeight: 'bold',
},
uploadError: {
color: 'red',
fontSize: '12px',
marginTop: '10px',
},
errorContainer: {
marginTop: '10px',
padding: '10px',
backgroundColor: '#f8d7da',
border: '1px solid #f5c6cb',
borderRadius: '4px',
},
errorText: {
color: '#721c24',
fontSize: '14px',
margin: '0',
},loadingOverlay: {
position: 'fixed', // Gunakan fixed untuk overlay penuh layar
top: 0,
left: 0,
right: 0,
bottom: 0, // Pastikan menutupi seluruh layar
display: 'flex',
justifyContent: 'center', // Posisikan spinner di tengah secara horizontal
alignItems: 'center', // Posisikan spinner di tengah secara vertikal
backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semitransparan di background
color: 'white',
fontSize: '24px',
zIndex: 1000, // Pastikan overlay muncul di atas konten lainnya
},
spinner: {
border: '4px solid #f3f3f3', // Border gray untuk spinner
borderTop: '4px solid #3498db', // Border biru untuk spinner
borderRadius: '50%', // Membuat spinner bulat
width: '50px', // Ukuran spinner
height: '50px', // Ukuran spinner
animation: 'spin 2s linear infinite', // Menambahkan animasi spin
},
loadingText: {
marginLeft: '20px',
},
tableStyle: {
width: '100%',
borderCollapse: 'collapse',
marginTop: '20px',
},
tableCell: {
padding: '8px 15px',
border: '1px solid #ccc',
textAlign: 'left',
},
};