Implement API on OCR KTP

src/screens/Biometric/OcrKtp/Verify.jsx

@@ -1,24 +1,38 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronDown, faChevronLeft, faImage, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faImage, faTimes, faChevronDown, faChevronLeft, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
+import { Link } from 'react-router-dom';
+import Select from 'react-select'
+import { DummyKtp } from '../../../assets/images';
+
+const CustomLabel = ({ overRide, children, ...props }) => {
+    return <label {...props}>{children}</label>;
+};
 
 const Verify = () => {
     const BASE_URL = process.env.REACT_APP_BASE_URL;
     const API_KEY = process.env.REACT_APP_API_KEY;
-    const fileTypes = ["image/jpeg", "image/png"]; // Use MIME types for better file validation
+    const fileTypes = ["image/jpeg", "image/png"];
     const fileInputRef = useRef(null);
 
-    const [isSelectOpen, setIsSelectOpen] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
     const [errorMessage, setErrorMessage] = useState('');
     const [selectedImageName, setSelectedImageName] = useState('');
     const [file, setFile] = useState(null);
     const [applicationId, setApplicationId] = useState('');
     const [isLoading, setIsLoading] = useState(false);
     const [applicationIds, setApplicationIds] = useState([]);
+    const [imageUrl, setImageUrl] = useState('');
     const [imageError, setImageError] = useState('');
     const [data, setData] = useState(null);
     const [showResult, setShowResult] = useState(false);
+    const [inputValueApplication, setInputValueApplication] = useState('');
+
+    // Validation state
+    const [validationErrors, setValidationErrors] = useState({
+        applicationId: '',
+        file: ''
+    });
 
     // Fetch Application IDs
     useEffect(() => {
@@ -51,47 +65,91 @@ const Verify = () => {
         };
 
         fetchApplicationIds();
-    }, []);
 
-    const handleFocus = () => setIsSelectOpen(true);
+        const checkMobile = () => {
-    const handleBlur = () => setIsSelectOpen(false);
+            setIsMobile(window.innerWidth <= 768);  // Example: 768px as the threshold for mobile devices
-
+        };
-    // Handle file upload
+
-    const handleImageUpload = (e) => {
+        // Check on initial load
-        const file = e.target.files[0];
+        checkMobile();
-        if (!file) return;
+
-
+        // Add resize listener to adjust `isMobile` state on window resize
-        const fileType = file.type; // Use MIME type instead of file extension
+        window.addEventListener('resize', checkMobile);
-        if (!fileTypes.includes(fileType)) {
+
-            setImageError('Image format is not supported');
+        // Clean up the event listener when the component unmounts
-            setFile(null);
+        return () => {
-            return;
+            window.removeEventListener('resize', checkMobile);
-        }
+        };
-
+    }, []);
-        if (file.size > 2 * 1024 * 1024) { // 2MB check
+
-            setImageError('File size exceeds 2MB');
+    const handleInputChangeApplication = (inputValue) => {
-            setFile(null);
+        setInputValueApplication(inputValue);
-            return;
+    };
-        }
+
-
+    const handleApplicationChange = (selectedOption) => {
-        setSelectedImageName(file.name);
+        setApplicationId(selectedOption ? selectedOption.value : '');
-        setFile(file);
+    };
-        setImageError('');
+
+    const applicationOptions = applicationIds.map(app => ({
+        value: app.id,   // This is what will be sent when an option is selected
+        label: app.name  // This is what will be displayed in the dropdown
+    }));
+
+    // Handle file upload
+    const handleFileDrop = (files) => {
+        if (files && files[0]) {
+            handleImageUpload(files[0]);
+        } else {
+            console.error('No valid files dropped');
+        }
+    };
+
+    const handleImageUpload = (file) => {
+        setFile(file);
+        setSelectedImageName(file.name);
+
+        // Validate file type
+        if (!fileTypes.includes(file.type)) {
+            setImageError('Invalid file type. Only JPG, JPEG, and PNG are allowed.');
+        } else if (file.size > 2 * 1024 * 1024) { // Max 2MB
+            setImageError('File size exceeds 2MB.');
+        } else {
+            setImageError('');
+        }
     };
 
-    // Cancel file upload
     const handleImageCancel = () => {
-        setSelectedImageName('');
         setFile(null);
+        setSelectedImageName('');
         setImageError('');
         fileInputRef.current.value = '';
     };
 
+    // Validate form inputs before submitting
+    const validateForm = () => {
+        const errors = {
+            applicationId: '',
+            file: ''
+        };
+
+        if (!applicationId) {
+            errors.applicationId = 'Please select an Application ID.';
+        }
+
+        if (!file) {
+            errors.file = 'Please upload an image file.';
+        } else if (imageError) {
+            errors.file = imageError;
+        }
+
+        setValidationErrors(errors);
+        return Object.values(errors).every(error => error === '');
+    };
+
     // Submit form and trigger OCR API
     const handleCheckClick = async () => {
-        if (!file || !applicationId) {
+        if (!validateForm()) {
-            setErrorMessage('Please select an application and upload a file.');
+            return; // Form is not valid
-            return;
         }
     
         setIsLoading(true);
@@ -99,8 +157,6 @@ const Verify = () => {
         formData.append('application_id', applicationId);
         formData.append('file', file);
     
-        console.log(`id: ${applicationId}, file: ${file}`)
-    
         try {
             const response = await fetch(`${BASE_URL}/ocr-ktp`, {
                 method: 'POST',
@@ -117,35 +173,12 @@ const Verify = () => {
     
             const result = await response.json();
     
-            console.log('Full response:', result); // Log full response to inspect the structure
+            // Log the full result to verify structure
+            console.log('OCR API Response:', result);
     
             if (result.status_code === 201) {
-                console.log('Success');
-                // Correct the path to access the data-ktp object
                 const responseData = result.details.data?.['data-ktp'] || {};
     
-                // Log each field to inspect the data
-                console.log('NIK:', responseData.nik);
-                console.log('District:', responseData.kecamatan);
-                console.log('Name:', responseData.nama);
-                console.log('City:', responseData.kabkot);
-                console.log('Date of Birth:', responseData.tanggal_lahir);
-                console.log('State:', responseData.provinsi);
-                console.log('Gender:', responseData.jenis_kelamin);
-                console.log('Religion:', responseData.agama);
-                console.log('Blood Type:', responseData.golongan_darah);
-                console.log('Marital Status:', responseData.status_perkawinan);
-                console.log('Address:', responseData.alamat);
-                console.log('Occupation:', responseData.pekerjaan);
-                console.log('RT/RW:', `${responseData.rt}/${responseData.rw}`);
-                console.log('Nationality:', responseData.kewarganegaraan);
-                console.log('Image URL:', result.details.image_url);
-                console.log('Dark:', responseData.dark);
-                console.log('Blur:', responseData.blur);
-                console.log('Grayscale:', responseData.grayscale);
-                console.log('Flashlight:', responseData.flashlight);
-    
-                // Map the response data to a new object with default values if the property doesn't exist
                 const data = {
                     nik: responseData.nik || 'N/A',
                     district: responseData.kecamatan || 'N/A',
@@ -161,17 +194,22 @@ const Verify = () => {
                     occupation: responseData.pekerjaan || 'N/A',
                     rtRw: `${responseData.rt || 'N/A'}/${responseData.rw || 'N/A'}`,
                     nationality: responseData.kewarganegaraan || 'N/A',
-                    imageUrl: result.details.image_url || '',
+                    imageUrl: result.details.data?.image_url || '', // Properly access image_url
-                    dark: responseData.dark || 'N/A',
-                    blur: responseData.blur || 'N/A',
-                    grayscale: responseData.grayscale || 'N/A',
-                    flashlight: responseData.flashlight || 'N/A',
                 };
     
+                console.log('Image URL from OCR:', result.details.data?.image_url); // Log the image URL correctly
+    
                 setData(data);
                 setShowResult(true);
                 setErrorMessage('');
                 setSelectedImageName('');
+    
+                // Fetch image if image URL exists in the result
+                if (result.details.data?.image_url) {
+                    const imageFileName = result.details.data.image_url.split('/').pop(); // Get the image filename
+                    console.log('Image file name:', imageFileName);  // Debug the file name
+                    await fetchImage(imageFileName);  // Call the fetchImage function to fetch the image
+                }
             } else {
                 setErrorMessage('OCR processing failed');
             }
@@ -182,8 +220,46 @@ const Verify = () => {
         }
     };
     
+    
+    
+    // The fetchImage function you already have in your code
+    const fetchImage = async (imageFileName) => {
+        setIsLoading(true);
+        try {
+            const response = await fetch(`${BASE_URL}/preview/image/${imageFileName}`, {
+                method: 'GET',
+                headers: {
+                    'accept': 'application/json',
+                    'x-api-key': API_KEY,
+                }
+            });
+    
+            if (!response.ok) {
+                const errorDetails = await response.json();
+                console.error('Image fetch error details:', errorDetails);
+                setErrorMessage('Failed to fetch image, please try again.');
+                return;
+            }
+    
+            // Get the image blob
+            const imageBlob = await response.blob();
+            const imageData = URL.createObjectURL(imageBlob); // Create object URL from the blob
+    
+            // Debugging: Make sure imageData is correct
+            console.log('Fetched image URL:', imageData);
+    
+            setImageUrl(imageData); // Update imageUrl state with the fetched image data
+        } catch (error) {
+            console.error('Error fetching image:', error);
+            setErrorMessage(error.message);
+        } finally {
+            setIsLoading(false);
+        }
+    };     
+
     return (
         <div className="container" style={{ marginTop: '3%' }}>
+            {/* Inject keyframes for the spinner */}
             <style>
             {`
                 @keyframes spin {
@@ -223,27 +299,20 @@ const Verify = () => {
                 <div className="form-group row align-items-center">
                     <div className="col-md-6">
                         <div style={styles.selectWrapper}>
-                            <select
+                        <Select
                             id="applicationId"
-                                className="form-control"
+                            value={applicationOptions.find(option => option.value === applicationId)}
-                                style={styles.select}
+                            onChange={handleApplicationChange}
-                                value={applicationId}
+                            options={applicationOptions}
-                                onChange={(e) => setApplicationId(e.target.value)}
+                            placeholder="Select Application ID"
-                                onFocus={handleFocus}
+                            isSearchable
-                                onBlur={handleBlur}
+                            menuPortalTarget={document.body}
-                            >
+                            menuPlacement="auto"
-                                <option value="">Select Application ID</option>
+                            inputValue={inputValueApplication}
-                                {applicationIds.map((app) => (
+                            onInputChange={handleInputChangeApplication} // Limit input length for Application ID
-                                    <option key={app.id} value={app.id}>
-                                        {app.name}
-                                    </option>
-                                ))}
-                            </select>
-                            <FontAwesomeIcon
-                                icon={isSelectOpen ? faChevronDown : faChevronLeft}
-                                style={styles.chevronIcon}
                         />
                         </div>
+                        {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' }}>
@@ -258,16 +327,38 @@ const Verify = () => {
 
                 <div className="col-md-6">
                     <div className="form-group mt-4">
-                        <label htmlFor="imageInput" className="form-label">Upload Image (KTP)</label>
+                        <CustomLabel htmlFor="imageInput" style={styles.customLabel}>
+                            Upload Image (KTP)
+                        </CustomLabel>
                         <div style={styles.uploadWrapper}>
+                            {/* Drag and Drop File Input */}
+                            <div
+                                style={styles.uploadArea}
+                                onDrop={(e) => {
+                                    e.preventDefault();
+                                    handleFileDrop(e.dataTransfer.files);
+                                }}
+                                onDragOver={(e) => e.preventDefault()}
+                            >
+                                <FontAwesomeIcon icon={faCloudUploadAlt} style={styles.uploadIcon} />
+                                <p style={styles.uploadText}>Drag and Drop Here</p>
+                                <p>Or</p>
+                                <a href="#" onClick={() => fileInputRef.current.click()} style={styles.browseLink}>Browse</a>
+                                <p className="text-muted" style={styles.uploadText}>Recommended size: 300x300 (Max File Size: 2MB)</p>
+                                <p className="text-muted" style={styles.uploadText}>Supported file types: JPG, JPEG, PNG</p>
+                            </div>
+
+                            {/* File Input */}
                             <input
                                 ref={fileInputRef}
                                 type="file"
                                 id="imageInput"
                                 className="form-control"
+                                style={{ display: 'none' }}
                                 accept="image/jpeg, image/png"
-                                onChange={handleImageUpload}
+                                onChange={(e) => handleImageUpload(e.target.files[0])}
                             />
+
                             {selectedImageName && (
                                 <div className="mt-3">
                                     <p><strong>File:</strong> {selectedImageName}</p>
@@ -276,7 +367,7 @@ const Verify = () => {
                                     </button>
                                 </div>
                             )}
-                            {imageError && <p style={{ color: 'red' }}>{imageError}</p>}
+                            {validationErrors.file && <p style={styles.errorText}>{validationErrors.file}</p>}
                         </div>
                     </div>
                 </div>
@@ -285,7 +376,7 @@ const Verify = () => {
                     <button
                         className="btn btn-primary"
                         onClick={handleCheckClick}
-                        disabled={isLoading || !file || !applicationId}
+                        disabled={isLoading || !file || !applicationId || validationErrors.file || validationErrors.applicationId}
                     >
                         <FontAwesomeIcon icon={faImage} className="me-2" />
                         Check KTP
@@ -301,7 +392,20 @@ const Verify = () => {
 
             {showResult && data && (                
                 <div className="mt-5">
-                    <h4>OCR Result</h4>
+                    <h4>OCR KTP Result</h4>
+                    <div className="row">
+                        {/* Gambar di kolom pertama */}
+                        <div className="col-md-6">
+                            <img
+                                src={imageUrl || "path-to-your-image"}
+                                alt="KTP Image"
+                                style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
+                                className="img-fluid"  // Menambahkan kelas Bootstrap img-fluid untuk responsif
+                            />
+                        </div>
+
+                        {/* Tabel di kolom kedua */}
+                        <div className="col-md-6">
                             <table style={styles.tableStyle}>
                                 <tbody>
                                     <tr>
@@ -360,18 +464,19 @@ const Verify = () => {
                                         <td style={styles.tableCell}>Nationality</td>
                                         <td style={styles.tableCell}>{data.nationality}</td>
                                     </tr>
-                            <tr>
-                                <td style={styles.tableCell}>Image</td>
-                                <td style={styles.tableCell}><img src={data.imageUrl} alt="KTP" width="150" /></td>
-                            </tr>
                                 </tbody>
                             </table>
                         </div>
+                    </div>
+               
+                </div>
             )}
         </div>
     );
 };
 
+export default Verify;
+
 const styles = {
     selectWrapper: {
         position: 'relative',
@@ -385,13 +490,6 @@ const styles = {
         borderRadius: '4px',
         border: '1px solid #ccc',
     },
-    chevronIcon: {
-        position: 'absolute',
-        top: '50%',
-        right: '10px',
-        transform: 'translateY(-50%)',
-        color: '#0542cc',
-    },
     remainingQuota: {
         display: 'flex',
         alignItems: 'center',
@@ -404,8 +502,47 @@ const styles = {
         fontSize: '16px',
         fontWeight: '300',
     },
+    customLabel: {
+        fontSize: '18px',
+        fontWeight: '600',
+        color: '#1f2d3d',
+    },
     uploadWrapper: {
-        position: 'relative',
+        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',
@@ -418,28 +555,27 @@ const styles = {
         color: '#721c24',
         fontSize: '14px',
         margin: '0',
-    },
+    },loadingOverlay: {
-    loadingOverlay: {
+        position: 'fixed',  // Gunakan fixed untuk overlay penuh layar
-        position: 'absolute',
         top: 0, 
         left: 0, 
         right: 0, 
-        bottom: 0,
+        bottom: 0,  // Pastikan menutupi seluruh layar
         display: 'flex',
-        justifyContent: 'center',
+        justifyContent: 'center',  // Posisikan spinner di tengah secara horizontal
-        alignItems: 'center',
+        alignItems: 'center',      // Posisikan spinner di tengah secara vertikal
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',  // Semitransparan di background
         color: 'white',
         fontSize: '24px',
-        zIndex: 1000,
+        zIndex: 1000,  // Pastikan overlay muncul di atas konten lainnya
     },
     spinner: {
-        border: '4px solid #f3f3f3',
+        border: '4px solid #f3f3f3', // Border gray untuk spinner
-        borderTop: '4px solid #3498db',
+        borderTop: '4px solid #3498db', // Border biru untuk spinner
-        borderRadius: '50%',
+        borderRadius: '50%',  // Membuat spinner bulat
-        width: '50px',
+        width: '50px', // Ukuran spinner
-        height: '50px',
+        height: '50px', // Ukuran spinner
-        animation: 'spin 2s linear infinite',
+        animation: 'spin 2s linear infinite', // Menambahkan animasi spin
     },
     loadingText: {
         marginLeft: '20px',
@@ -455,5 +591,3 @@ const styles = {
         textAlign: 'left',
     },
 };
-
-export default Verify;

src/screens/Home/Applications/Applications.jsx

@@ -135,7 +135,7 @@ const Applications = () => {
       />
       <div style={styles.wrapperCard(isMobile)}>
         <div style={styles.createButtonContainer}>
-          <Link to="/create-new-application" style={styles.link}>
+          <Link to="/createApps" style={styles.link}>
             <button style={styles.createButton}>
               <FontAwesomeIcon icon={faPlus} style={{ marginRight: '8px' }} /> 
               Create New App ID