Implement API OCR-NPWP

src/App.js

@@ -30,6 +30,10 @@ import {
   VerifyKtp
 } from './screens/Biometric/OcrKtp';
 
+import { 
+  VerifyNpwp 
+} from './screens/Biometric/OcrNpwp';
+
 // Import all other components following the dataMenu structure...
 
 const App = () => {
@@ -74,6 +78,9 @@ const App = () => {
               {/* Biometric - KTP */}
               <Route path="/ktp-verify" element={<VerifyKtp />} />
 
+              {/* Biometric - NPWP */}
+              <Route path="/npwp-verify" element={<VerifyNpwp />} />
+
               {/* <Route path="/sms-otp-settings" element={<SmsOtpSettings />} /> */}
               {/* Continue for each link */}
 

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

@@ -699,24 +699,70 @@ const Verify = () => {
           <CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
             Upload Face Photo
           </CustomLabel>
-          <FileUploader
+          <div style={styles.uploadWrapper}>
-            handleChange={handleImageUpload}
+            <div
-            name="file"
+              style={styles.uploadArea}
-            types={fileTypes}
+              onDrop={(e) => {
-            multiple={false}
+                e.preventDefault();
-            onDrop={(files) => handleImageUpload(files[0])}
+                // Handle drop event
-            children={
+                const file = e.dataTransfer.files[0];
-              <div style={styles.uploadArea}>
+                handleImageUpload(file);
-                <i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
+              }}
-                <p style={styles.uploadText}>Drag and Drop Here</p>
+              onDragOver={(e) => e.preventDefault()}
-                <p>Or</p>
+            >
-                <a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
+              <i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
-                <p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
+              <p style={styles.uploadText}>Drag and Drop Here</p>
-                <p className="text-muted">Supported file types: JPG, JPEG</p>
+              <p>Or</p>
+              <a
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  // Only open file input if no file is selected
+                  if (!fileInputRef.current.files.length) {
+                    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
+              </p>
+            </div>
+
+            {/* File Input */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              id="uploadPhoto"
+              className="form-control"
+              style={{ display: 'none' }}
+              accept="image/jpeg, image/jpg"
+              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>
-            }
+            )}
-          />
+
-          {uploadError && <small style={styles.uploadError}>{uploadError}</small>}
+            {/* Error Message */}
+            {uploadError && <small style={styles.uploadError}>{uploadError}</small>}
+          </div>
         </div>
       </div>
       

src/screens/Biometric/OcrKtp/Verify.jsx

@@ -1,9 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faImage, faTimes, faChevronDown, faChevronLeft, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
+import { faImage, faTimes, 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>;
@@ -18,6 +17,7 @@ const Verify = () => {
     const [isMobile, setIsMobile] = useState(false);
     const [errorMessage, setErrorMessage] = useState('');
     const [selectedImageName, setSelectedImageName] = useState('');
+    const [resultImageLabel, setResultImageLabel] = useState('');
     const [file, setFile] = useState(null);
     const [applicationId, setApplicationId] = useState('');
     const [isLoading, setIsLoading] = useState(false);
@@ -211,6 +211,7 @@ const Verify = () => {
                 setShowResult(true);
                 setErrorMessage('');
                 setSelectedImageName('');
+                setResultImageLabel(selectedImageName);
     
                 // Fetch image if image URL exists in the result
                 if (result.details.data?.image_url) {
@@ -457,6 +458,7 @@ const Verify = () => {
                     </div>
                 </div>
 
+                {/* Image Upload */}
                 <div className="col-md-6">
                     <div className="form-group mt-4">
                         <CustomLabel htmlFor="imageInput" style={styles.customLabel}>
@@ -539,6 +541,9 @@ const Verify = () => {
                                 style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
                                 className="img-fluid"  // Menambahkan kelas Bootstrap img-fluid untuk responsif
                             />
+                            <p style={{ marginTop: '10px' }}>
+                                File Name: {resultImageLabel} {/* Display the resultImageLabel here */}
+                            </p>
                         </div>
 
                         {/* Tabel di kolom kedua */}

src/screens/Biometric/OcrNpwp/Verify.jsx

@@ -0,0 +1,571 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faImage, faTimes, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
+import { Link } from 'react-router-dom';
+import Select from 'react-select'
+
+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"];
+    const fileInputRef = useRef(null);
+
+    const [isMobile, setIsMobile] = useState(false);
+    const [errorMessage, setErrorMessage] = useState('');
+    const [selectedImageName, setSelectedImageName] = useState('');
+    const [resultImageLabel, setResultImageLabel] = 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('');
+    const [selectedQuota, setSelectedQuota] = useState(0);
+
+    // Validation state
+    const [validationErrors, setValidationErrors] = useState({
+        applicationId: '',
+        file: ''
+    });
+
+    // Fetch Application IDs
+    useEffect(() => {
+        const fetchApplicationIds = async () => {
+            try {
+                setIsLoading(true);
+                const response = await fetch(`${BASE_URL}/application/list`, {
+                    method: 'GET',
+                    headers: {
+                        'accept': 'application/json',
+                        'x-api-key': API_KEY,
+                    },
+                });
+
+                if (!response.ok) {
+                    throw new Error('Failed to fetch application IDs');
+                }
+
+                const data = await response.json();
+                if (data.status_code === 200) {
+                    setApplicationIds(data.details.data);
+                } else {
+                    throw new Error('Failed to fetch application IDs');
+                }
+            } catch (error) {
+                setErrorMessage(error.message || 'Error fetching application IDs');
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchApplicationIds();
+
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth <= 768);  // Example: 768px as the threshold for mobile devices
+        };
+
+        // Check on initial load
+        checkMobile();
+
+        // Add resize listener to adjust `isMobile` state on window resize
+        window.addEventListener('resize', checkMobile);
+
+        // Clean up the event listener when the component unmounts
+        return () => {
+            window.removeEventListener('resize', checkMobile);
+        };
+    }, []);
+
+    const handleInputChangeApplication = (inputValue) => {
+        setInputValueApplication(inputValue);
+    };
+
+    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 => ({
+        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('');
+        }
+    };
+
+    const handleImageCancel = () => {
+        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 (!validateForm()) {
+            return; // Form is not valid
+        }
+    
+        setIsLoading(true);
+        const formData = new FormData();
+        formData.append('application_id', applicationId);
+        formData.append('file', file);
+    
+        try {
+            const response = await fetch(`${BASE_URL}/ocr-npwp`, {
+                method: 'POST',
+                headers: {
+                    'accept': 'application/json',
+                    'x-api-key': API_KEY,
+                },
+                body: formData,
+            });
+    
+            if (!response.ok) {
+                throw new Error('OCR processing failed');
+            }
+    
+            const result = await response.json();
+    
+            // Log the full result to verify structure
+            console.log('OCR API Response:', result);
+    
+            if (result.status_code === 201) {
+                const responseData = result.details.data?.['data-npwp'] || {};
+    
+                const data = {
+                    npwp: responseData.npwp || 'N/A',
+                    npwpName: responseData.name || 'N/A',
+                    npwpAddress: responseData.address || 'N/A',
+                    npwpX: responseData.npwp_x || 'N/A',
+                    imageUrl: result.details.data?.image_url || '', // Properly access image_url
+                };
+    
+                console.log('Image URL from OCR:', result.details.data?.image_url); // Log the image URL correctly
+    
+                setData(data);
+                setShowResult(true);
+                setErrorMessage('');
+                setSelectedImageName('');
+                setResultImageLabel(selectedImageName);
+    
+                // 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');
+            }
+        } catch (error) {
+            setErrorMessage(error.message || 'Error during OCR processing');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+    
+    // 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);
+        }
+    };     
+
+    
+    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 */}
+            <style>
+            {`
+                @keyframes spin {
+                    0% { transform: rotate(0deg); }
+                    100% { transform: rotate(360deg); }
+                }
+            `}
+            </style>
+            {isLoading && (
+                <div style={styles.loadingOverlay}>
+                    <div style={styles.spinner}></div>
+                    <p style={styles.loadingText}>Loading...</p>
+                </div>
+            )}
+
+            <div className="row-card border-left border-primary shadow mb-4" style={{ backgroundColor: '#E2FBEA' }}>
+                <div className="d-flex flex-column justify-content-start align-items-start p-4">
+                    <div>
+                        <h4 className="mb-3 text-start"><i className="fas fa-warning fa-bold me-3"></i>Alert</h4>
+                        <p className="mb-0 text-start">
+                            Get started now by creating an Application ID and explore all the demo services available on the dashboard.
+                            Experience the ease and flexibility of trying out all our features firsthand.
+                        </p>
+                    </div>
+                    <div className="d-flex flex-row mt-3">
+                        <Link to="/createApps" style={{ textDecoration: 'none' }}>
+                            <button className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
+                                <i className="fas fa-plus text-white me-2"></i>
+                                <p className="text-white mb-0">Create New App ID</p>
+                            </button>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+
+            <div style={{ padding: '20px', border: '0.1px solid rgba(0, 0, 0, 0.2)', borderLeft: '4px solid #0542cc', borderRadius: '10px', width: '100%' }}>
+                <div className="form-group row align-items-center">
+                    <div className="col-md-6">
+                        <div style={styles.selectWrapper}>
+                        <Select
+                            id="applicationId"
+                            value={applicationOptions.find(option => option.value === applicationId)}
+                            onChange={handleApplicationChange}
+                            options={applicationOptions}
+                            placeholder="Select Application ID"
+                            isSearchable
+                            menuPortalTarget={document.body}
+                            menuPlacement="auto"
+                            inputValue={inputValueApplication}
+                            onInputChange={handleInputChangeApplication} // Limit input length for Application ID
+                        />
+                        </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', margin: '0', marginTop: '8px' }}>
+                            Remaining Quota
+                        </p>
+                        <div style={styles.remainingQuota}>
+                            <span style={styles.quotaText}>{selectedQuota}</span>
+                            <span style={styles.timesText}>(times)</span>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Image Upload */}
+                <div className="col-md-6">
+                    <div className="form-group mt-4">
+                        <CustomLabel htmlFor="imageInput" style={styles.customLabel}>
+                            Upload Image (NPWP)
+                        </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={(e) => handleImageUpload(e.target.files[0])}
+                            />
+
+                            {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>
+                            )}
+                            {validationErrors.file && <p style={styles.errorText}>{validationErrors.file}</p>}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="col-md-12 d-flex justify-content-end mt-4">
+                    <button
+                        className="btn btn-primary"
+                        onClick={handleCheckClick}
+                        disabled={isLoading || !file || !applicationId || validationErrors.file || validationErrors.applicationId}
+                    >
+                        <FontAwesomeIcon icon={faImage} className="me-2" />
+                        Check NPWP
+                    </button>
+                </div>
+
+                {errorMessage && (
+                    <div style={styles.errorContainer}>
+                        <p style={styles.errorText}>{errorMessage}</p>
+                    </div>
+                )}
+            </div>
+
+            {showResult && data && (                
+                <div className="mt-5">
+                    <h4>OCR NPWP Result</h4>
+                    <div className="row">
+                        {/* Gambar di kolom pertama */}
+                        <div className="col-md-6">
+                            <img
+                                src={imageUrl || "path-to-your-image"}
+                                alt="NPWP Image"
+                                style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
+                                className="img-fluid"  // Menambahkan kelas Bootstrap img-fluid untuk responsif
+                            />
+                            <p style={{ marginTop: '10px' }}>
+                                File Name: {resultImageLabel} {/* Display the resultImageLabel here */}
+                            </p>
+                        </div>
+
+                        {/* Tabel di kolom kedua */}
+                        <div className="col-md-6">
+                            <table style={styles.tableStyle}>
+                                <tbody>
+                                    <tr>
+                                        <td style={styles.tableCell}>NPWP</td>
+                                        <td style={styles.tableCell}>{data.npwp}</td>
+                                    </tr>
+                                    <tr>
+                                        <td style={styles.tableCell}>NPWP Name</td>
+                                        <td style={styles.tableCell}>{data.npwpName}</td>
+                                    </tr>
+                                    <tr>
+                                        <td style={styles.tableCell}>NPWP Address</td>
+                                        <td style={styles.tableCell}>{data.npwpAddress}</td>
+                                    </tr>
+                                    <tr>
+                                        <td style={styles.tableCell}>NPWP (X)</td>
+                                        <td style={styles.tableCell}>{data.npwpX}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+               
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Verify;
+

src/screens/Biometric/OcrNpwp/index.js

@@ -0,0 +1,5 @@
+import VerifyNpwp from "./Verify";
+
+export {
+    VerifyNpwp
+}