diff --git a/src/assets/icon/index.js b/src/assets/icon/index.js index 8187e5d..0205e8f 100644 --- a/src/assets/icon/index.js +++ b/src/assets/icon/index.js @@ -1,9 +1,35 @@ import OCR from './ocr.png'; import SmsAnnounce from './sms.png'; -import OTP from './sms-otp.png' +import OTP from './sms-otp.png'; + +import Enroll from './total-enroll.png'; +import Verify from './total-verify.png'; +import Compare from './total-compare.png'; +import Liveness from './total-liveness.png'; +import Search from './total-search.png'; +import Transaction from './total-transaction.png'; +import Extract from './total-extract.png'; +import Quality from './total-quality.png'; +import AsyncIcon from './total-async.png'; +import QualityAsync from './total-quality-async.png'; +import Failed from './total-failed.png' +import NoAvailable from './no-available.png'; export { OCR, SmsAnnounce, - OTP + OTP, + + Enroll, + Verify, + Compare, + Liveness, + Search, + Transaction, + NoAvailable, + Extract, + Quality, + AsyncIcon, + QualityAsync, + Failed, } \ No newline at end of file diff --git a/src/assets/icon/no-available.png b/src/assets/icon/no-available.png new file mode 100644 index 0000000..045f71d Binary files /dev/null and b/src/assets/icon/no-available.png differ diff --git a/src/assets/icon/total-async.png b/src/assets/icon/total-async.png new file mode 100644 index 0000000..d4dfeb9 Binary files /dev/null and b/src/assets/icon/total-async.png differ diff --git a/src/assets/icon/total-compare.png b/src/assets/icon/total-compare.png new file mode 100644 index 0000000..9e8eb7f Binary files /dev/null and b/src/assets/icon/total-compare.png differ diff --git a/src/assets/icon/total-enroll.png b/src/assets/icon/total-enroll.png new file mode 100644 index 0000000..1ee303d Binary files /dev/null and b/src/assets/icon/total-enroll.png differ diff --git a/src/assets/icon/total-extract.png b/src/assets/icon/total-extract.png new file mode 100644 index 0000000..be5f179 Binary files /dev/null and b/src/assets/icon/total-extract.png differ diff --git a/src/assets/icon/total-failed.png b/src/assets/icon/total-failed.png new file mode 100644 index 0000000..e69c9ca Binary files /dev/null and b/src/assets/icon/total-failed.png differ diff --git a/src/assets/icon/total-liveness.png b/src/assets/icon/total-liveness.png new file mode 100644 index 0000000..6fb3d45 Binary files /dev/null and b/src/assets/icon/total-liveness.png differ diff --git a/src/assets/icon/total-quality-async.png b/src/assets/icon/total-quality-async.png new file mode 100644 index 0000000..8260c8d Binary files /dev/null and b/src/assets/icon/total-quality-async.png differ diff --git a/src/assets/icon/total-quality.png b/src/assets/icon/total-quality.png new file mode 100644 index 0000000..3f5740c Binary files /dev/null and b/src/assets/icon/total-quality.png differ diff --git a/src/assets/icon/total-search.png b/src/assets/icon/total-search.png new file mode 100644 index 0000000..1d796e3 Binary files /dev/null and b/src/assets/icon/total-search.png differ diff --git a/src/assets/icon/total-transaction.png b/src/assets/icon/total-transaction.png new file mode 100644 index 0000000..2886472 Binary files /dev/null and b/src/assets/icon/total-transaction.png differ diff --git a/src/assets/icon/total-verify.png b/src/assets/icon/total-verify.png new file mode 100644 index 0000000..992d7a4 Binary files /dev/null and b/src/assets/icon/total-verify.png differ diff --git a/src/screens/Biometric/FaceRecognition/Summary.jsx b/src/screens/Biometric/FaceRecognition/Summary.jsx index 25fd862..b866ffb 100644 --- a/src/screens/Biometric/FaceRecognition/Summary.jsx +++ b/src/screens/Biometric/FaceRecognition/Summary.jsx @@ -1,11 +1,273 @@ -import React from 'react' +import React, { useState, useEffect } from 'react'; +import { + Enroll, + Verify, + Compare, + Liveness, + Search, + Transaction +} from '../../../assets/icon'; const Summary = () => { - return ( -
-

Summary

-
- ) -} + const [startDate, setStartDate] = useState(''); + const [endDate, setEndDate] = useState(''); + const [application, setApplication] = useState(''); + const [isMobile, setIsMobile] = useState(false); -export default Summary + const menuData = [ + { id: 1, value: '150', label: 'Total Transaction', icon: Transaction }, + { id: 2, value: '4', label: 'Total Enroll', icon: Enroll }, + { id: 3, value: '65', label: 'Total Verify', icon: Verify }, + { id: 6, value: '900', label: 'Total Compare', icon: Compare }, + { id: 4, value: '22', label: 'Total Search', icon: Search }, + { id: 5, value: '23', label: 'Total Liveness', icon: Liveness }, + ]; + + const handleApply = () => { + console.log({ startDate, endDate, application }); + }; + + const handleCancel = () => { + setStartDate(''); + setEndDate(''); + setApplication(''); + }; + + // Detect if the device is mobile based on window width + useEffect(() => { + const handleResize = () => { + setIsMobile(window.innerWidth <= 768); // Define mobile screen as width <= 768px + }; + + // Initialize on component mount + handleResize(); + + // Add event listener to update state on resize + window.addEventListener('resize', handleResize); + + // Cleanup event listener on component unmount + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + return ( +
+ {/* Welcome Message */} +
+
+
+

+ Alert +

+

+ 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. +

+
+
+
+ +
+
+ {/* Row 1: Start Date and End Date */} +
+ setStartDate(e.target.value)} + style={styles.filterInput} + placeholder="Start Date" + /> + setEndDate(e.target.value)} + style={styles.filterInput} + placeholder="End Date" + /> +
+ + {/* Row 2: Application Select */} +
+ +
+ + {/* Row 3: Apply and Cancel Buttons */} +
+ + +
+
+ +
+ {menuData.map((item) => ( +
+
+

{item.value}

+

{item.label}

+
+
+ {item.label} +
+
+ ))} +
+ + +
+
+ ); +}; + +const styles = { + container: { + margin: '3rem', + }, + filters: { + display: 'flex', + justifyContent: 'space-between', + marginBottom: '20px', + flexDirection: 'row', // Horizontal layout on desktop + gap: '10px', + }, + filtersMobile: { + display: 'flex', + flexDirection: 'column', // Vertical layout on mobile + gap: '15px', + }, + filterRow: { + display: 'flex', + justifyContent: 'space-between', + gap: '10px', + width: '100%', + }, + filterInput: { + padding: '10px', + border: '1px solid #ccc', + borderRadius: '5px', + fontSize: '16px', + width: '48%', // Adjust width to take up 48% of the row for input elements + }, + applyButton: { + backgroundColor: '#0542cc', + color: '#fff', + padding: '10px 20px', + border: 'none', + borderRadius: '5px', + cursor: 'pointer', + width: '48%', // Adjust button width to take half of the row + }, + cancelButton: { + backgroundColor: '#fff', + color: '#000', + padding: '10px 20px', + border: '1px solid gray', + borderRadius: '5px', + cursor: 'pointer', + width: '48%', // Adjust button width to take half of the row + }, + summaryContainer: { + padding: '20px', + border: '0.1px solid rgba(0, 0, 0, 0.2)', + borderLeft: '4px solid #0542cc', + borderRadius: '10px', + width: '100%', + }, + summaryCards: { + display: 'grid', + gridTemplateColumns: 'repeat(4, 1fr)', // 4 columns on desktop + gap: '20px', + marginTop: '20px', + }, + summaryCardsMobile: { + display: 'grid', + gridTemplateColumns: '1fr', // 1 column on mobile (full width) + gap: '15px', + marginTop: '20px', + }, + card: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + padding: '15px', // Reduced padding for a more compact card + backgroundColor: 'white', + borderRadius: '8px', // Slightly smaller border-radius for a sharper look + boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)', + textAlign: 'left', + minWidth: '200px', // Ensure minimum width for mobile responsiveness + maxWidth: '300px', // Limit the maximum width to prevent cards from becoming too wide + width: '100%', + transition: 'transform 0.3s ease', // Smooth transition for hover effects + }, + cardHover: { + transform: 'scale(1.05)', // Slight zoom on hover for interactivity + }, + iconContainer: { + display: 'flex', + justifyContent: 'flex-end', + alignItems: 'center', + }, + textContainer: { + display: 'flex', + flexDirection: 'column', + }, + icon: { + width: '36px', // Smaller icon size for a more compact card + height: '36px', // Matching height for the icon + }, + cardTitle: { + fontSize: '18px', // Smaller font size for title to prevent overflow + margin: '0', + fontWeight: 'bold', + }, + cardText: { + fontSize: '12px', // Smaller text size for description to keep it balanced + color: '#555', + }, + + // Optional: Hover effect for the cards to enhance interactivity + cardHover: { + transform: 'scale(1.05)', // Slight zoom effect when hovering over card + }, + + // Media query for smaller screens (e.g., phones in portrait mode) + "@media (max-width: 768px)": { + summaryCards: { + gridTemplateColumns: '1fr', // 1 column on mobile screens + }, + card: { + padding: '10px', // Smaller padding for smaller screens + minWidth: '180px', // Adjust min width for mobile devices + maxWidth: '250px', // Adjust max width for mobile devices + }, + icon: { + width: '30px', // Slightly smaller icon size for mobile + height: '30px', // Matching height for mobile icon + }, + cardTitle: { + fontSize: '16px', // Smaller font size for the card title + }, + cardText: { + fontSize: '10px', // Smaller font size for card description + }, + }, +}; + +export default Summary; diff --git a/src/screens/Biometric/OcrKtp/Summary.jsx b/src/screens/Biometric/OcrKtp/Summary.jsx new file mode 100644 index 0000000..e69de29