Improve code - Realtime Quota

src/screens/Biometric/FaceRecognition/Section/Compare.jsx

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

src/screens/Biometric/FaceRecognition/Section/Enroll.jsx

@@ -231,6 +231,12 @@ const Enroll = () => {
             const result = await response.json();
             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) {
                 const imageFileName = result.details.data.image_url.split('/').pop();
                 console.log('Image URL:', result.details.data.image_url);
@@ -671,6 +677,7 @@ const Enroll = () => {
                 </div>
             </div>
 
+    
             <div className="form-group row align-items-center">
                 <div className="col-md-6">
                     <input

src/screens/Biometric/FaceRecognition/Section/Verify.jsx

@@ -230,15 +230,25 @@ const Verify = () => {
 
         const data = await response.json();
 
+        // Log the response data for debugging
+        console.log('API Response Data:', data);
+
         if (response.ok) {
-            if (data.details && data.details.data && data.details.data.result && data.details.data.result.image_url) {
+            if (data.details && data.details.data && data.details.data.result) {
-                const imageFileName = data.details.data.result.image_url.split('/').pop();
+                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(data.details.data.result.verified);
+                setVerified(result.verified);
                 setResultImageLabel(selectedImageName);
+            }
         } else {
             const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.';
             setErrorMessage(errorMessage);
@@ -251,6 +261,7 @@ const Verify = () => {
     }
   };
 
+
   const fetchImage = async (imageFileName) => {
     setIsLoading(true);
     try {
@@ -745,21 +756,6 @@ const Verify = () => {
               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 */}
             {uploadError && <small style={styles.uploadError}>{uploadError}</small>}
           </div>

src/screens/Biometric/OcrKtp/Verify.jsx

@@ -53,6 +53,9 @@ const Verify = () => {
                 }
         
                 const data = await response.json();
+                // Log response data
+                console.log('Response Data:', data);
+        
                 if (data.status_code === 200) {
                     setApplicationIds(data.details.data);
                 } else {
@@ -186,6 +189,7 @@ const Verify = () => {
     
             if (result.status_code === 201) {
                 const responseData = result.details.data?.['data-ktp'] || {};
+                const updateQuota = result.details.data.quota
     
                 const data = {
                     nik: responseData.nik || 'N/A',
@@ -205,6 +209,8 @@ const Verify = () => {
                     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
     
                 setData(data);
@@ -300,10 +306,10 @@ const Verify = () => {
         },
         uploadArea: {
             backgroundColor: '#e6f2ff',
-            height: !isMobile? '30svh' : '50svh',
+            height: !isMobile? '43svh' : '50svh',
             cursor: 'pointer',
             marginTop: '1rem',
-            paddingTop: '22px',
+            padding: '3rem',
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'center',

src/screens/Biometric/OcrNpwp/Verify.jsx

@@ -186,6 +186,7 @@ const Verify = () => {
     
             if (result.status_code === 201) {
                 const responseData = result.details.data?.['data-npwp'] || {};
+                const updateQuota = result.details.data.quota
 
                 const data = {
                     npwp: responseData.npwp || 'N/A',
@@ -195,6 +196,8 @@ const Verify = () => {
                     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
     
                 setData(data);