Improve code

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

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

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

@@ -334,7 +334,6 @@ const Enroll = () => {
     };
 
     const styles = {
-        // Existing styles
         formGroup: {
             marginTop: '-45px',
         },
@@ -371,7 +370,7 @@ const Enroll = () => {
         },
         uploadArea: {
             backgroundColor: '#e6f2ff',
-          height: '250px', // Default height for non-mobile devices
+            height: '250px',
             cursor: 'pointer',
             marginTop: '1rem',
             paddingTop: '22px',
@@ -382,21 +381,19 @@ const Enroll = () => {
             border: '1px solid #ced4da',
             borderRadius: '0.25rem',
         },
-      
-        // Mobile responsive styles for upload area
         uploadAreaMobile: {
             backgroundColor: '#e6f2ff',
-          height: '50svh',  // Reduced height for mobile
+            height: '50svh',
             cursor: 'pointer',
             marginTop: '1rem',
-          paddingTop: '18px', // Adjusted padding for mobile
+            paddingTop: '18px',
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
             border: '1px solid #ced4da',
             borderRadius: '0.25rem',
-          padding: '20px'
+            padding: '20px',
         },
         uploadIcon: {
             fontSize: '40px',
@@ -412,8 +409,8 @@ const Enroll = () => {
         wrapper: {
             border: '1px solid #ddd',
             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',
             alignItems: 'center',
             justifyContent: 'space-between',
@@ -427,12 +424,12 @@ const Enroll = () => {
         },
         textContainer: {
             flex: '1',
-          fontSize: '16px', // Ukuran font lebih kecil
+            fontSize: '16px',
             marginLeft: '6px',
             overflow: 'hidden',
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
-          marginTop: '1rem'
+            marginTop: '1rem',
         },
         fileSize: {
             fontSize: '12px',
@@ -452,7 +449,7 @@ const Enroll = () => {
         },
         imageIcon: {
             color: '#0542cc',
-          fontSize: '18px', // Ukuran ikon sedikit lebih kecil
+            fontSize: '18px',
             marginRight: '6px',
         },
         closeIcon: {
@@ -471,8 +468,6 @@ const Enroll = () => {
             fontSize: '12px',
             marginTop: '5px',
         },
-      
-        // New styles added and merged
         containerResultStyle: {
             padding: '20px',
             border: '1px solid #0053b3',
@@ -482,9 +477,9 @@ const Enroll = () => {
         },
         resultContainer: {
             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%',
         },
         resultsTable: {
@@ -512,9 +507,9 @@ const Enroll = () => {
         imageContainer: {
             display: 'flex',
             flexDirection: 'column',
-            alignItems: isMobile ? 'center' : 'flex-start', // Center image on mobile
+            alignItems: isMobile ? 'center' : 'flex-start',
             width: '100%',
-            marginTop: isMobile ? '10px' : '0', // Add margin for spacing on mobile
+            marginTop: isMobile ? '10px' : '0',
         },
         imageStyle: {
             width: '300px',
@@ -522,13 +517,13 @@ const Enroll = () => {
             borderRadius: '5px',
         },
         imageStyleMobile: {
-            width: '100%', // Make image responsive on mobile
+            width: '100%',
             height: 'auto',
             borderRadius: '5px',
         },
         imageDetails: {
             marginTop: '10px',
-            fontSize: isMobile ? '14px' : '16px', // Adjust font size on mobile
+            fontSize: isMobile ? '14px' : '16px',
             color: '#1f2d3d',
         },
         loadingOverlay: {
@@ -576,31 +571,11 @@ const Enroll = () => {
             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' 
+            fontWeight: 600,
+            fontSize: '14px',
+            color: '#212529',
         },
-      
-        // Mobile responsiveness adjustments (if necessary)
         responsiveImageStyle: {
             width: '100%',
             maxHeight: '250px',
@@ -644,21 +619,19 @@ const Enroll = () => {
             color: 'white',
             marginTop: '10px',
         },
-    }
+    };
     
     return (
         <div>
-          {/* Inject keyframes for the spinner */}
             <style>
                 {`
                     @keyframes spin {
                         0% { transform: rotate(0deg); }
                         100% { transform: rotate(360deg); }
                     }
-
                     .select-wrapper {
-                  max-height: 200px; /* Limit the height of the container */
+                        max-height: 200px;
-                  overflow-y: auto;  /* Enable vertical scroll if the content overflows */
+                        overflow-y: auto;
                     }
                 `}
             </style>
@@ -670,7 +643,6 @@ const Enroll = () => {
                 </div>
             )}
     
-          {/* Application ID Selection */}
             <div className="form-group row align-items-center">
                 <div className="col-md-6">
                     <div className="select-wrapper">
@@ -684,7 +656,7 @@ const Enroll = () => {
                             menuPortalTarget={document.body}
                             menuPlacement="auto"
                             inputValue={inputValueApplication}
-                          onInputChange={handleInputChangeApplication} // Limit input length for Application ID
+                            onInputChange={handleInputChangeApplication}
                         />
                     </div>
                     {applicationError && <small style={{ color: 'red' }}>{applicationError}</small>}
@@ -701,7 +673,6 @@ const Enroll = () => {
                 </div>
             </div>
     
-          {/* Subject ID Input */}
             <div className="form-group row align-items-center">
                 <div className="col-md-6">
                     <input
@@ -723,7 +694,6 @@ const Enroll = () => {
                 </div>
             </div>
     
-          {/* Upload Section */}
             <div className='col-md-6'>
                 <div className="row form-group mt-4">
                     <CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
@@ -737,11 +707,9 @@ const Enroll = () => {
                         onDrop={(files) => {
                             if (files && files[0]) {
                                 handleImageUpload(files[0]);
-                        } else {
-                            console.error('No valid files dropped');
                             }
                         }}
-                      children={(
+                        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>
@@ -750,7 +718,7 @@ const Enroll = () => {
                                 <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"
@@ -764,60 +732,39 @@ const Enroll = () => {
                 </div>
             </div>
     
-          {/* Display uploaded image name */}
             {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} />
-                      <div style={styles.textContainer}>
-                          <h5>Uploaded File:</h5>
-                          <p>{selectedImageName}</p>
                     {file && (
                         <p style={styles.fileSize}>
                             Size: {formatFileSize(file.size)}
                         </p>
                     )}
-                      </div>
+                    <button className="btn btn-danger" onClick={handleImageCancel}>
-                      <div style={styles.closeButtonContainer}>
+                        <FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
-                          <button
-                              style={styles.closeButton}
-                              onClick={handleImageCancel}
-                              aria-label="Remove uploaded image"
-                          >
-                              <FontAwesomeIcon
-                                  icon={faTimes}
-                                  style={styles.closeIcon}
-                              />
                     </button>
                 </div>
-                  </div>
-              </div>
             )}
+            {errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
     
-          {/* 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"}
@@ -833,6 +780,7 @@ const Enroll = () => {
             )}
         </div>
     );
+    
 }
 export default Enroll;
 

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

@@ -121,27 +121,27 @@ const Search = () => {
   };
 
   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');
-      setImageError('Please upload a valid image file.');
-      return;
-    }
-  
       const fileExtension = file.name.split('.').pop().toUpperCase();
       if (fileTypes.includes(fileExtension)) {
         setSelectedImageName(file.name);
         setFile(file);
+        setUploadedFile(file); // Set uploadedFile to the selected file
         setImageError(''); // Clear any previous errors
       } else {
-      // Show an alert if the file type is not supported
         alert('Image format is not supported');
-      setImageError('Image format is not supported'); // Optionally set error message to display on the UI
+        setImageError('Image format is not supported');
-      setFile(null); // Optionally clear the selected file
+        setFile(null);
+        setUploadedFile(null); // Clear uploadedFile if the file is unsupported
+      }
+    } else {
+      console.error('No file selected or invalid file object.');
     }
   };
   
   
+
   const handleImageCancel = () => {
     setSelectedImageName('');
     setFile(null);
@@ -163,25 +163,25 @@ const Search = () => {
     // Validate Application ID
     if (!applicationId) {
       setApplicationIdError('Please select an Application ID before searching.');
-        hasError = true; // Set error flag
+      hasError = true;
     }
   
     // Validate Limit ID
     if (!limitId) {
       setLimitIdError('Please select a Limit before searching.');
-        hasError = true; // Set error flag
+      hasError = true;
     }
   
     // Validate Image Upload
     if (!selectedImageName) {
       setImageError('Please upload an image file.');
-        hasError = true; // Set error flag
+      hasError = true;
     }
   
     // Check if the file is uploaded
     if (!uploadedFile) {
       setErrorMessage('Please upload an image file.');
-        hasError = true; // Set error flag
+      hasError = true;
     }
   
     // If any errors were found, do not proceed
@@ -211,7 +211,7 @@ const Search = () => {
   
       const data = await response.json();
   
-        console.log('Response Data:', data); // Log the response
+      console.log('Response Data:', data);
   
       if (response.ok) {
         const resultsArray = Array.isArray(data.details.data) ? data.details.data : [];
@@ -226,12 +226,11 @@ const Search = () => {
         await Promise.all(processedResults.map(async result => {
           const imageFileName = result.imageUrl.split('/').pop(); // Extract file name if needed
           await fetchImage(imageFileName); // Fetch image
-              console.log('multiple image data: ', result.imageUrl); // Log the URL
+          console.log('multiple image data: ', result.imageUrl);
         }));
   
         setResults(processedResults);
         setShowResult(true);
-
       } else {
         console.error('Error response:', JSON.stringify(data, null, 2));
         const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.';
@@ -245,6 +244,7 @@ const Search = () => {
     }
   };
   
+  
   const fetchImage = async (imageFileName) => {
     setIsLoading(true);
     try {
@@ -322,7 +322,7 @@ const Search = () => {
     },
     uploadArea: {
         backgroundColor: '#e6f2ff',
-        height: '50svh',
+        height: '40svh',
         cursor: 'pointer',
         marginTop: '1rem',
         padding: '1rem',
@@ -438,18 +438,18 @@ const Search = () => {
       backgroundColor: '#f7f7f7',
       borderRadius: '8px',
       margin: '1rem',
-      width: isMobile ? '100%' : '50%',
+      width: '100%', // Full width for large screens
     },
     resultContainer: {
         display: 'flex',
-        flexDirection: isMobile ? 'column' : 'row',
+        flexDirection: 'row',
         flexWrap: 'wrap',
         gap: '1rem',
         justifyContent: 'center',        
     },
     resultItem: {
         display: 'flex',
-        flexDirection: isMobile ? 'row' : 'column',
+        flexDirection: 'column',
         alignItems: 'center',
         textAlign: 'center',
         padding: '0.5rem',
@@ -457,10 +457,10 @@ const Search = () => {
         border: '1px solid #ddd',
         borderRadius: '8px',
         boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
-        width: isMobile ? '100%' : '150px',
+        width: '150px', // Default width for larger screens
     },
     resultTextContainer: {
-        marginBottom: isMobile ? '0' : '0.5rem',
+        marginBottom: '0.5rem',
     },
     resultText: {
         fontSize: '0.9rem',
@@ -471,9 +471,21 @@ const Search = () => {
         width: '80px',
         height: '80px',
         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 (
@@ -600,34 +612,21 @@ const Search = () => {
       </div>
 
         {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} />
-                <div style={styles.textContainer}>
-                    <h5>Uploaded File:</h5>
-                    <p>{selectedImageName}</p>
                 {file && (
                     <p style={styles.fileSize}>
                         Size: {formatFileSize(file.size)}
                     </p>
                 )}
-                </div>
+                <button className="btn btn-danger" onClick={handleImageCancel}>
-                <div style={styles.closeButtonContainer}>
+                    <FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
-                    <button
-                        style={styles.closeButton}
-                        onClick={handleImageCancel}
-                        aria-label="Remove uploaded image"
-                    >
-                        <FontAwesomeIcon
-                            icon={faTimes}
-                            style={styles.closeIcon}
-                        />
                 </button>
             </div>
-            </div>
-        </div>
         )}
 
+        {errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
+
       {/* Submit Button */}
       <div style={styles.submitButton}>
         <button onClick={handleCheckClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>

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

@@ -78,203 +78,6 @@ const Verify = () => {
     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) => {
       if (!selectedOption) {
           console.error("Selected option is undefined");
@@ -325,33 +128,21 @@ const Verify = () => {
     }
   };
 
-
-  const handleFocus = () => {
-    setIsSelectOpen(true);
-  };
-
-  const handleBlur = () => {
-    setIsSelectOpen(false);
-  };
-
   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');
-      setUploadError('Please upload a valid image file.');
-      return;
-    }
-  
         const fileExtension = file.name.split('.').pop().toUpperCase();
         if (fileTypes.includes(fileExtension)) {
             setSelectedImageName(file.name);
             setFile(file);
             setUploadError(''); // Clear any previous errors
         } else {
-      // Show an alert if the file type is not supported
             alert('Image format is not supported');
-      setUploadError('Image format is not supported'); // Optionally set error message to display on the UI
+            setUploadError('Image format is not supported');
-      setFile(null); // Optionally clear the selected file
+            setFile(null);
+        }
+    } else {
+        console.error('No file selected or invalid file object.');
     }
   };
   
@@ -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 (
     <div>
@@ -568,7 +648,6 @@ const Verify = () => {
           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
             }
@@ -600,8 +679,6 @@ const Verify = () => {
               setThresholdId(e.target.value);
               setThresholdError(''); // Clear error if valid
             }}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
           >
             <option value="">Select Threshold</option>
             {thresholdIds.map((app) => (
@@ -611,7 +688,7 @@ const Verify = () => {
             ))}
           </select>
           <FontAwesomeIcon
-              icon={isSelectOpen ? faChevronDown : faChevronLeft}
+            icon={faChevronDown}
             style={styles.chevronIcon}
           />
           {thresholdError && <small style={styles.uploadError}>{thresholdError}</small>}
@@ -648,33 +725,19 @@ const Verify = () => {
     
     {/* Display uploaded image name */}
     {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} />
-                <div style={styles.textContainer}>
-                    <h5>Uploaded File:</h5>
-                    <p>{selectedImageName}</p>
         {file && (
           <p style={styles.fileSize}>
             Size: {formatFileSize(file.size)}
           </p>
         )}
-                </div>
+        <button className="btn btn-danger" onClick={handleImageCancel}>
-                <div style={styles.closeButtonContainer}>
+          <FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
-                    <button
-                        style={styles.closeButton}
-                        onClick={handleImageCancel}
-                        aria-label="Remove uploaded image"
-                    >
-                        <FontAwesomeIcon
-                            icon={faTimes}
-                            style={styles.closeIcon}
-                        />
         </button>
       </div>
-            </div>
-        </div>
     )}
+    {errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
 
     {/* Submit Button */}
     <div style={styles.submitButton}>
@@ -686,31 +749,26 @@ const Verify = () => {
     {/* Results Section */}
     {showResult && (
       <div style={styles.containerResultStyle}>
-          <h1 style={{ color: '#0542cc', fontSize: isMobile ? '1.5rem' : '2rem' }}>Results</h1>
+        <h1 style={{ color: '#0542cc', fontSize: '2rem' }}>Results</h1>
-          <div style={{ ...styles.resultContainer, flexDirection: isMobile ? 'column' : 'row' }}>
+        <div style={styles.resultContainer}>
-            <table style={isMobile ? styles.resultsTableMobile : styles.tableStyle}>
+          <table style={styles.resultsTableMobile}>
             <tbody>
               <tr>
-                  <td style={{ ...styles.resultsCell, width: '40%' }}>Similarity</td>
+                <td style={styles.resultsCell}>Similarity</td>
-                  <td
+                <td style={{ ...styles.resultsValueCell, color: verified ? 'green' : 'red' }}>
-                    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%' }}>
+          <div style={styles.imageContainer}>
             <img
               src={imageUrl || "path-to-your-image"} 
               alt="Example Image"
-                style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
+              style={styles.imageStyle}
             />
-              <p style={{ marginTop: '10px', fontSize: isMobile ? '12px' : '16px' }}>
+            <p style={{ marginTop: '10px' }}>
               File Name: {selectedImageName}
             </p>
           </div>
@@ -719,6 +777,7 @@ const Verify = () => {
     )}
     </div>
   );
+
 }
 
 export default Verify;

src/screens/Biometric/OcrKtp/Verify.jsx

@@ -27,6 +27,7 @@ const Verify = () => {
     const [data, setData] = useState(null);
     const [showResult, setShowResult] = useState(false);
     const [inputValueApplication, setInputValueApplication] = useState('');
+    const [selectedQuota, setSelectedQuota] = useState(0);
 
     // Validation state
     const [validationErrors, setValidationErrors] = useState({
@@ -87,7 +88,14 @@ const Verify = () => {
     };
 
     const handleApplicationChange = (selectedOption) => {
+        const selectedId = selectedOption.value;
+        const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
+
         setApplicationId(selectedOption ? selectedOption.value : '');
+
+        if (selectedApp) {
+            setSelectedQuota(selectedApp.quota);
+        }
     };
 
     const applicationOptions = applicationIds.map(app => ({
@@ -220,8 +228,6 @@ const Verify = () => {
         }
     };
     
-    
-    
     // The fetchImage function you already have in your code
     const fetchImage = async (imageFileName) => {
         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 (
         <div className="container" style={{ marginTop: '3%' }}>
             {/* Inject keyframes for the spinner */}
@@ -315,11 +447,11 @@ const Verify = () => {
                         {validationErrors.applicationId && <p style={styles.errorText}>{validationErrors.applicationId}</p>}
                     </div>
                     <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
                         </p>
                         <div style={styles.remainingQuota}>
-                            <span style={styles.quotaText}>0</span>
+                            <span style={styles.quotaText}>{selectedQuota}</span>
                             <span style={styles.timesText}>(times)</span>
                         </div>
                     </div>
@@ -362,6 +494,11 @@ const Verify = () => {
                             {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>
@@ -477,117 +614,3 @@ const 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',
-    },
-};