From b1f0405ac948754cefeaa0cef7c177a88022f883 Mon Sep 17 00:00:00 2001
From: Rizqika <rizqikaibnu@gmail.com>
Date: Fri, 15 Nov 2024 14:06:08 +0700
Subject: [PATCH] Improve code - Search and Quota

---
 .../FaceRecognition/Section/Search.jsx        | 79 ++++++++-----------
 src/screens/Home/Applications/CreateApps.jsx  |  7 +-
 2 files changed, 36 insertions(+), 50 deletions(-)

diff --git a/src/screens/Biometric/FaceRecognition/Section/Search.jsx b/src/screens/Biometric/FaceRecognition/Section/Search.jsx
index ead1911..f857dec 100644
--- a/src/screens/Biometric/FaceRecognition/Section/Search.jsx
+++ b/src/screens/Biometric/FaceRecognition/Section/Search.jsx
@@ -213,7 +213,9 @@ const Search = () => {
       console.log('Response Data:', data);
   
       if (response.ok) {
-        const resultsArray = Array.isArray(data.details.data) ? data.details.data : [];
+        const resultsArray = Array.isArray(data.details.data.result) ? data.details.data.result : [];
+        const updateQuota = data.details.data.quota
+
         const processedResults = resultsArray.map(item => ({
           identity: item.identity,
           similarity: item.similarity,
@@ -230,6 +232,7 @@ const Search = () => {
   
         setResults(processedResults);
         setResultImageLabel(selectedImageName)
+        setSelectedQuota(updateQuota)
         setShowResult(true);
       } else {
         console.error('Error response:', JSON.stringify(data, null, 2));
@@ -439,39 +442,29 @@ const Search = () => {
       borderRadius: '8px',
       margin: '1rem',
       width: '100%', // Full width for large screens
-    },
-    resultContainer: {
-        display: 'flex',
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: '1rem',
-        justifyContent: 'center',        
+    },resultGrid: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(5, 1fr)',  // Membuat 5 kolom dalam grid
+      gap: '16px', // Jarak antar card
     },
     resultItem: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        textAlign: 'center',
-        padding: '0.5rem',
-        backgroundColor: '#fff',
-        border: '1px solid #ddd',
-        borderRadius: '8px',
-        boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
-        width: '150px', // Default width for larger screens
+      border: '1px solid #ddd',
+      borderRadius: '8px',
+      padding: '10px',
+      boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
+      textAlign: 'center',
     },
     resultTextContainer: {
-        marginBottom: '0.5rem',
+      marginBottom: '10px',
     },
     resultText: {
-        fontSize: '0.9rem',
-        color: '#333',
-        margin: '0.2rem 0',
+      fontSize: '14px',
+      color: '#333',
     },
     resultImage: {
-        width: '80px',
-        height: '80px',
-        borderRadius: '50%',
-        marginTop: '0.5rem',
+      width: '100%',
+      height: 'auto',
+      borderRadius: '8px',
     },
 
     // Media query for mobile responsiveness
@@ -603,11 +596,7 @@ const Search = () => {
                 accept="image/jpeg, image/jpg"
                 onChange={e => handleImageUpload(e.target.files[0])}
             />
-            {(imageError || errorMessage) && (
-                <small style={{ color: 'red' }}>
-                    {imageError || errorMessage}
-                </small>
-            )}
+            {imageError && <small style={styles.uploadError}>{imageError}</small>}
         </div>
       </div>
 
@@ -638,23 +627,23 @@ const Search = () => {
       {
         showResult && results.length > 0 && (
           <div style={styles.containerResultStyle}>
-              <h1 style={{ color: '#0542cc', textAlign: 'center' }}>Results</h1>
-              <div style={styles.resultContainer}>
-                  {results.slice(0, limitId).map((result, index) => (
-                      <div key={index} style={styles.resultItem}>
-                          <div style={styles.resultTextContainer}>
-                              {/* Displaying the dynamically set resultImageLabel */}
-                              <p style={styles.resultText}>Image Name: {resultImageLabel}</p> {/* Updated here */}
-                              <p style={styles.resultText}>Similarity: {result.similarity}%</p>
-                              <p style={styles.resultText}>Distance: {result.distance}</p>
-                          </div>
-                          <img src={imageUrls[index]} alt={`Result ${index + 1}`} style={styles.resultImage} />
-                      </div>
-                  ))}
-              </div>
+            <h1 style={{ color: '#0542cc', textAlign: 'center' }}>Results</h1>
+            <div style={styles.resultGrid}>
+              {results.slice(0, limitId).map((result, index) => (
+                <div key={index} style={styles.resultItem}>
+                  <div style={styles.resultTextContainer}>
+                    <p style={styles.resultText}>Image Name: {resultImageLabel}</p>
+                    <p style={styles.resultText}>Similarity: {result.similarity}%</p>
+                    <p style={styles.resultText}>Distance: {result.distance}</p>
+                  </div>
+                  <img src={imageUrls[index]} alt={`Result ${index + 1}`} style={styles.resultImage} />
+                </div>
+              ))}
+            </div>
           </div>
         )
       }
+
     </div>
   );
 }
diff --git a/src/screens/Home/Applications/CreateApps.jsx b/src/screens/Home/Applications/CreateApps.jsx
index c2bd463..b34953b 100644
--- a/src/screens/Home/Applications/CreateApps.jsx
+++ b/src/screens/Home/Applications/CreateApps.jsx
@@ -83,14 +83,11 @@ const CreateApps = () => {
         // Tampilkan pesan sukses
         alert('Application ID created successfully!');
         
-        // Navigasikan kembali ke halaman sebelumnya
-        navigate(-1); // Jika menggunakan react-router-dom
-        // Atau jika menggunakan React Native:
-        // navigation.goBack();
+        navigate(-1);
   
       } catch (error) {
         console.error('Error creating application ID:', error);
-        setError('Failed to create Application ID. Please try again.');
+        setError(`Application ID already exists`);
       }
     }
   };