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

Improve code - Realtime Quota

Browse Source
This commit is contained in:
Rizqika 2024-11-15 11:27:27 +07:00
parent 47115a8ebb
commit 77e4f0cf4d
5 changed files with 59 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -215,6 +215,7 @@ const Compare = () => {
setVerified(data.details.data.result.verified); setVerified(data.details.data.result.verified);
setResultImageLabel(selectedImageName) setResultImageLabel(selectedImageName)
setResultCompareImageLabel(selectedCompareImageName) setResultCompareImageLabel(selectedCompareImageName)
setSelectedQuota(data.details.data.result.quota)
setShowResult(true); setShowResult(true);
console.log('Comparison successful:', data); console.log('Comparison successful:', data);
} else { } else {

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

@ -155,14 +155,14 @@ const Enroll = () => {
const handleEnrollClick = async () => { const handleEnrollClick = async () => {
let hasError = false; let hasError = false;
// Validate inputs and set corresponding errors // Validate inputs and set corresponding errors
const validationErrors = { const validationErrors = {
imageError: !selectedImageName ? 'Please upload a face photo before enrolling.' : '', imageError: !selectedImageName ? 'Please upload a face photo before enrolling.' : '',
applicationError: !applicationId ? 'Please select an Application ID before enrolling.' : '', applicationError: !applicationId ? 'Please select an Application ID before enrolling.' : '',
subjectError: !subjectId ? 'Please enter a Subject ID before enrolling.' : '', subjectError: !subjectId ? 'Please enter a Subject ID before enrolling.' : '',
}; };
// Update state with errors // Update state with errors
if (validationErrors.imageError) { if (validationErrors.imageError) {
setImageError(validationErrors.imageError); setImageError(validationErrors.imageError);
@ -170,43 +170,43 @@ const Enroll = () => {
} else { } else {
setImageError(''); // Clear error if valid setImageError(''); // Clear error if valid
} }
if (validationErrors.applicationError) { if (validationErrors.applicationError) {
setApplicationError(validationErrors.applicationError); setApplicationError(validationErrors.applicationError);
hasError = true; hasError = true;
} else { } else {
setApplicationError(''); // Clear error if valid setApplicationError(''); // Clear error if valid
} }
if (validationErrors.subjectError) { if (validationErrors.subjectError) {
setSubjectError(validationErrors.subjectError); setSubjectError(validationErrors.subjectError);
hasError = true; hasError = true;
} else { } else {
setSubjectError(''); // Clear error if valid setSubjectError(''); // Clear error if valid
} }
// If there are errors, return early // If there are errors, return early
if (hasError) return; if (hasError) return;
if (!file) { if (!file) {
setImageError('No file selected. Please upload a valid image file.'); setImageError('No file selected. Please upload a valid image file.');
return; return;
} }
const formData = new FormData(); const formData = new FormData();
formData.append('application_id', String(applicationId)); formData.append('application_id', String(applicationId));
formData.append('subject_id', subjectId); formData.append('subject_id', subjectId);
formData.append('file', file); formData.append('file', file);
console.log('Inputs:', { console.log('Inputs:', {
applicationId, applicationId,
subjectId, subjectId,
file: file.name, file: file.name,
}); });
setIsLoading(true); setIsLoading(true);
setErrorMessage(''); // Clear previous error message setErrorMessage(''); // Clear previous error message
try { try {
const response = await fetch(`${BASE_URL}/face_recognition/enroll`, { const response = await fetch(`${BASE_URL}/face_recognition/enroll`, {
method: 'POST', method: 'POST',
@ -216,7 +216,7 @@ const Enroll = () => {
'x-api-key': `${API_KEY}`, 'x-api-key': `${API_KEY}`,
} }
}); });
if (!response.ok) { if (!response.ok) {
const errorDetails = await response.json(); const errorDetails = await response.json();
console.error('Response error details:', errorDetails); console.error('Response error details:', errorDetails);
@ -227,22 +227,28 @@ const Enroll = () => {
} }
return; return;
} }
const result = await response.json(); const result = await response.json();
console.log('Enrollment response:', result); console.log('Enrollment response:', result);
// Update quota based on the response data
if (result.details && result.details.data && result.details.data.quota !== undefined) {
const updatedQuota = result.details.data.quota;
setSelectedQuota(updatedQuota); // Update the state with the new quota
}
if (result.details && result.details.data && result.details.data.image_url) { if (result.details && result.details.data && result.details.data.image_url) {
const imageFileName = result.details.data.image_url.split('/').pop(); const imageFileName = result.details.data.image_url.split('/').pop();
console.log('Image URL:', result.details.data.image_url); console.log('Image URL:', result.details.data.image_url);
await fetchImage(imageFileName); await fetchImage(imageFileName);
// Set resultImageLabel after successful enrollment // Set resultImageLabel after successful enrollment
setresultImageLabel(selectedImageName); // Set resultImageLabel after success setresultImageLabel(selectedImageName); // Set resultImageLabel after success
} else { } else {
console.error('Image URL not found in response:', result); console.error('Image URL not found in response:', result);
setErrorMessage('Image URL not found in response. Please try again.'); setErrorMessage('Image URL not found in response. Please try again.');
} }
setShowResult(true); setShowResult(true);
console.log('Enrollment successful:', result); console.log('Enrollment successful:', result);
} catch (error) { } catch (error) {
@ -251,7 +257,7 @@ const Enroll = () => {
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
}; };
const fetchImage = async (imageFileName) => { const fetchImage = async (imageFileName) => {
setIsLoading(true); setIsLoading(true);
@ -659,7 +665,7 @@ const Enroll = () => {
</div> </div>
{applicationError && <small style={{ color: 'red' }}>{applicationError}</small>} {applicationError && <small style={{ color: 'red' }}>{applicationError}</small>}
</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' }}> <p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', margin: '0', marginTop: '8px' }}>
Remaining Quota Remaining Quota
@ -670,6 +676,7 @@ const Enroll = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="form-group row align-items-center"> <div className="form-group row align-items-center">
<div className="col-md-6"> <div className="col-md-6">

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

@ -230,15 +230,25 @@ const Verify = () => {
const data = await response.json(); const data = await response.json();
if (response.ok) { // Log the response data for debugging
if (data.details && data.details.data && data.details.data.result && data.details.data.result.image_url) { console.log('API Response Data:', data);
const imageFileName = data.details.data.result.image_url.split('/').pop();
await fetchImage(imageFileName);
}
setShowResult(true); if (response.ok) {
setVerified(data.details.data.result.verified); if (data.details && data.details.data && data.details.data.result) {
setResultImageLabel(selectedImageName); const result = data.details.data.result;
// Update selectedQuota with the quota received from API
setSelectedQuota(result.quota);
if (result.image_url) {
const imageFileName = result.image_url.split('/').pop();
await fetchImage(imageFileName);
}
setShowResult(true);
setVerified(result.verified);
setResultImageLabel(selectedImageName);
}
} else { } else {
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);
@ -251,6 +261,7 @@ const Verify = () => {
} }
}; };
const fetchImage = async (imageFileName) => { const fetchImage = async (imageFileName) => {
setIsLoading(true); setIsLoading(true);
try { try {
@ -745,21 +756,6 @@ const Verify = () => {
onChange={(e) => handleImageUpload(e.target.files[0])} onChange={(e) => handleImageUpload(e.target.files[0])}
/> />
{/* Display selected file info */}
{selectedImageName && (
<div className="mt-3">
<p><strong>File:</strong> {selectedImageName}</p>
{file && (
<p style={styles.fileSize}>
Size: {formatFileSize(file.size)}
</p>
)}
<button className="btn btn-danger" onClick={handleImageCancel}>
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
</button>
</div>
)}
{/* Error Message */} {/* Error Message */}
{uploadError && <small style={styles.uploadError}>{uploadError}</small>} {uploadError && <small style={styles.uploadError}>{uploadError}</small>}
</div> </div>

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

@ -47,12 +47,15 @@ const Verify = () => {
'x-api-key': API_KEY, 'x-api-key': API_KEY,
}, },
}); });
if (!response.ok) { if (!response.ok) {
throw new Error('Failed to fetch application IDs'); throw new Error('Failed to fetch application IDs');
} }
const data = await response.json(); const data = await response.json();
// Log response data
console.log('Response Data:', data);
if (data.status_code === 200) { if (data.status_code === 200) {
setApplicationIds(data.details.data); setApplicationIds(data.details.data);
} else { } else {
@ -63,7 +66,7 @@ const Verify = () => {
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
}; };
fetchApplicationIds(); fetchApplicationIds();
@ -186,6 +189,7 @@ const Verify = () => {
if (result.status_code === 201) { if (result.status_code === 201) {
const responseData = result.details.data?.['data-ktp'] || {}; const responseData = result.details.data?.['data-ktp'] || {};
const updateQuota = result.details.data.quota
const data = { const data = {
nik: responseData.nik || 'N/A', nik: responseData.nik || 'N/A',
@ -204,6 +208,8 @@ const Verify = () => {
nationality: responseData.kewarganegaraan || 'N/A', nationality: responseData.kewarganegaraan || 'N/A',
imageUrl: result.details.data?.image_url || '', // Properly access image_url imageUrl: result.details.data?.image_url || '', // Properly access image_url
}; };
setSelectedQuota(updateQuota)
console.log('Image URL from OCR:', result.details.data?.image_url); // Log the image URL correctly console.log('Image URL from OCR:', result.details.data?.image_url); // Log the image URL correctly
@ -300,10 +306,10 @@ const Verify = () => {
}, },
uploadArea: { uploadArea: {
backgroundColor: '#e6f2ff', backgroundColor: '#e6f2ff',
height: !isMobile? '30svh' : '50svh', height: !isMobile? '43svh' : '50svh',
cursor: 'pointer', cursor: 'pointer',
marginTop: '1rem', marginTop: '1rem',
paddingTop: '22px', padding: '3rem',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',

5
src/screens/Biometric/OcrNpwp/Verify.jsx
View File

@ -186,7 +186,8 @@ const Verify = () => {
if (result.status_code === 201) { if (result.status_code === 201) {
const responseData = result.details.data?.['data-npwp'] || {}; const responseData = result.details.data?.['data-npwp'] || {};
const updateQuota = result.details.data.quota
const data = { const data = {
npwp: responseData.npwp || 'N/A', npwp: responseData.npwp || 'N/A',
npwpName: responseData.name || 'N/A', npwpName: responseData.name || 'N/A',
@ -194,6 +195,8 @@ const Verify = () => {
npwpX: responseData.npwp_x || 'N/A', npwpX: responseData.npwp_x || 'N/A',
imageUrl: result.details.data?.image_url || '', // Properly access image_url imageUrl: result.details.data?.image_url || '', // Properly access image_url
}; };
setSelectedQuota(updateQuota)
console.log('Image URL from OCR:', result.details.data?.image_url); // Log the image URL correctly console.log('Image URL from OCR:', result.details.data?.image_url); // Log the image URL correctly