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) && ( - - {imageError || errorMessage} - - )} + {imageError && {imageError}} @@ -638,23 +627,23 @@ const Search = () => { { showResult && results.length > 0 && (
Image Name: {resultImageLabel}
{/* Updated here */} -Similarity: {result.similarity}%
-Distance: {result.distance}
-Image Name: {resultImageLabel}
+Similarity: {result.similarity}%
+Distance: {result.distance}
+