Implement API on OCR KTP
This commit is contained in:
parent
0a46ddab93
commit
83f9bd135c
@ -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 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 handleFocus = () => setIsSelectOpen(true);
|
||||
const handleBlur = () => setIsSelectOpen(false);
|
||||
|
||||
// Handle file upload
|
||||
const handleImageUpload = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const fileType = file.type; // Use MIME type instead of file extension
|
||||
if (!fileTypes.includes(fileType)) {
|
||||
setImageError('Image format is not supported');
|
||||
setFile(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.size > 2 * 1024 * 1024) { // 2MB check
|
||||
setImageError('File size exceeds 2MB');
|
||||
setFile(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedImageName(file.name);
|
||||
setFile(file);
|
||||
setImageError('');
|
||||
const handleInputChangeApplication = (inputValue) => {
|
||||
setInputValueApplication(inputValue);
|
||||
};
|
||||
|
||||
const handleApplicationChange = (selectedOption) => {
|
||||
setApplicationId(selectedOption ? selectedOption.value : '');
|
||||
};
|
||||
|
||||
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) {
|
||||
setErrorMessage('Please select an application and upload a file.');
|
||||
return;
|
||||
if (!validateForm()) {
|
||||
return; // Form is not valid
|
||||
}
|
||||
|
||||
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',
|
||||
@ -116,36 +172,13 @@ 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 || '',
|
||||
dark: responseData.dark || 'N/A',
|
||||
blur: responseData.blur || 'N/A',
|
||||
grayscale: responseData.grayscale || 'N/A',
|
||||
flashlight: responseData.flashlight || '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('');
|
||||
|
||||
// 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,15 +220,53 @@ 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 {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
`}
|
||||
`}
|
||||
</style>
|
||||
{isLoading && (
|
||||
<div style={styles.loadingOverlay}>
|
||||
@ -223,27 +299,20 @@ const Verify = () => {
|
||||
<div className="form-group row align-items-center">
|
||||
<div className="col-md-6">
|
||||
<div style={styles.selectWrapper}>
|
||||
<select
|
||||
id="applicationId"
|
||||
className="form-control"
|
||||
style={styles.select}
|
||||
value={applicationId}
|
||||
onChange={(e) => setApplicationId(e.target.value)}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
>
|
||||
<option value="">Select Application ID</option>
|
||||
{applicationIds.map((app) => (
|
||||
<option key={app.id} value={app.id}>
|
||||
{app.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<FontAwesomeIcon
|
||||
icon={isSelectOpen ? faChevronDown : faChevronLeft}
|
||||
style={styles.chevronIcon}
|
||||
/>
|
||||
<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', 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
|
||||
@ -299,79 +390,93 @@ const Verify = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showResult && data && (
|
||||
{showResult && data && (
|
||||
<div className="mt-5">
|
||||
<h4>OCR Result</h4>
|
||||
<table style={styles.tableStyle}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>NIK</td>
|
||||
<td style={styles.tableCell}>{data.nik}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>District</td>
|
||||
<td style={styles.tableCell}>{data.district}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Name</td>
|
||||
<td style={styles.tableCell}>{data.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>City</td>
|
||||
<td style={styles.tableCell}>{data.city}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Date of Birth</td>
|
||||
<td style={styles.tableCell}>{data.dob}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>State</td>
|
||||
<td style={styles.tableCell}>{data.state}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Gender</td>
|
||||
<td style={styles.tableCell}>{data.gender}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Religion</td>
|
||||
<td style={styles.tableCell}>{data.religion}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Blood Type</td>
|
||||
<td style={styles.tableCell}>{data.bloodType}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Marital Status</td>
|
||||
<td style={styles.tableCell}>{data.maritalStatus}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Address</td>
|
||||
<td style={styles.tableCell}>{data.address}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Occupation</td>
|
||||
<td style={styles.tableCell}>{data.occupation}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>RT/RW</td>
|
||||
<td style={styles.tableCell}>{data.rtRw}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
<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>
|
||||
<td style={styles.tableCell}>NIK</td>
|
||||
<td style={styles.tableCell}>{data.nik}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>District</td>
|
||||
<td style={styles.tableCell}>{data.district}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Name</td>
|
||||
<td style={styles.tableCell}>{data.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>City</td>
|
||||
<td style={styles.tableCell}>{data.city}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Date of Birth</td>
|
||||
<td style={styles.tableCell}>{data.dob}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>State</td>
|
||||
<td style={styles.tableCell}>{data.state}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Gender</td>
|
||||
<td style={styles.tableCell}>{data.gender}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Religion</td>
|
||||
<td style={styles.tableCell}>{data.religion}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Blood Type</td>
|
||||
<td style={styles.tableCell}>{data.bloodType}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Marital Status</td>
|
||||
<td style={styles.tableCell}>{data.maritalStatus}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Address</td>
|
||||
<td style={styles.tableCell}>{data.address}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Occupation</td>
|
||||
<td style={styles.tableCell}>{data.occupation}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>RT/RW</td>
|
||||
<td style={styles.tableCell}>{data.rtRw}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={styles.tableCell}>Nationality</td>
|
||||
<td style={styles.tableCell}>{data.nationality}</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: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 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',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
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,
|
||||
zIndex: 1000, // Pastikan overlay muncul di atas konten lainnya
|
||||
},
|
||||
spinner: {
|
||||
border: '4px solid #f3f3f3',
|
||||
borderTop: '4px solid #3498db',
|
||||
borderRadius: '50%',
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
animation: 'spin 2s linear infinite',
|
||||
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',
|
||||
@ -455,5 +591,3 @@ const styles = {
|
||||
textAlign: 'left',
|
||||
},
|
||||
};
|
||||
|
||||
export default Verify;
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user