From d74e9f9adf04f8db6cbbca89191dfc3d5d20d5bc Mon Sep 17 00:00:00 2001 From: Rizqika Date: Wed, 13 Nov 2024 09:41:34 +0700 Subject: [PATCH] Slicing UI - Biometric(Face Recog-Summary) --- src/assets/icon/index.js | 30 +- src/assets/icon/no-available.png | Bin 0 -> 1640 bytes src/assets/icon/total-async.png | Bin 0 -> 2010 bytes src/assets/icon/total-compare.png | Bin 0 -> 1130 bytes src/assets/icon/total-enroll.png | Bin 0 -> 349 bytes src/assets/icon/total-extract.png | Bin 0 -> 953 bytes src/assets/icon/total-failed.png | Bin 0 -> 1445 bytes src/assets/icon/total-liveness.png | Bin 0 -> 1743 bytes src/assets/icon/total-quality-async.png | Bin 0 -> 1597 bytes src/assets/icon/total-quality.png | Bin 0 -> 874 bytes src/assets/icon/total-search.png | Bin 0 -> 483 bytes src/assets/icon/total-transaction.png | Bin 0 -> 1296 bytes src/assets/icon/total-verify.png | Bin 0 -> 1083 bytes .../Biometric/FaceRecognition/Summary.jsx | 278 +++++++++++++++++- src/screens/Biometric/OcrKtp/Summary.jsx | 0 15 files changed, 298 insertions(+), 10 deletions(-) create mode 100644 src/assets/icon/no-available.png create mode 100644 src/assets/icon/total-async.png create mode 100644 src/assets/icon/total-compare.png create mode 100644 src/assets/icon/total-enroll.png create mode 100644 src/assets/icon/total-extract.png create mode 100644 src/assets/icon/total-failed.png create mode 100644 src/assets/icon/total-liveness.png create mode 100644 src/assets/icon/total-quality-async.png create mode 100644 src/assets/icon/total-quality.png create mode 100644 src/assets/icon/total-search.png create mode 100644 src/assets/icon/total-transaction.png create mode 100644 src/assets/icon/total-verify.png create mode 100644 src/screens/Biometric/OcrKtp/Summary.jsx 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 0000000000000000000000000000000000000000..045f71d3ca5b6a5dde0da36fb73587d45fd4f9e1 GIT binary patch literal 1640 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 literal 0 HcmV?d00001 diff --git a/src/assets/icon/total-compare.png b/src/assets/icon/total-compare.png new file mode 100644 index 0000000000000000000000000000000000000000..9e8eb7f487bd90f5a9db9c5aa755544301d1b6ab GIT binary patch literal 1130 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 literal 0 HcmV?d00001 diff --git a/src/assets/icon/total-liveness.png b/src/assets/icon/total-liveness.png new file mode 100644 index 0000000000000000000000000000000000000000..6fb3d453c821b621e59f7733f94680ebc27cda0f GIT binary patch literal 1743 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 literal 0 HcmV?d00001 diff --git a/src/assets/icon/total-quality.png b/src/assets/icon/total-quality.png new file mode 100644 index 0000000000000000000000000000000000000000..3f5740cee8dd0c0d5f1a47738a9eb94bf0711ef2 GIT binary patch literal 874 zcmV-w1C{)VP)GQh|mLTz?^E%f-X&ojwQfYL^VQH-Rm{K~5D*q#ZtT2=gfME!fhXr8HzGta*YEos zMlJbz^C_=_vS2Ccz~c(3q$|XkLiW{OZN=nxwQUPX$U;=SWf2%j@)ROKYlH(Qk+{394iGUxG<04yXOU0orSbcIyX6;er8h*%6@?$P1y z1F#fHv+L^!Nh(Of0yspJWS7X^hdx38ZzNVG>!NPg_TFao8CXi`u)eQeij#He=;{i_ zTdhg>mXH$iODFxc(Ie}>$tbvu65mcIJ(v)?C0S5)>>>)toL={DKoTtX^&d%s%G)1x zpNmB-$&nyuhoHcGQZbz7dM!W?^QsuAI8!mMsIlaUsuJhj=hFnCuva@3_bWlI`&Il|9G%&daiMwj1uKULr8!q!8lV_tkLy?Xp&Qi zVkiimxPnaV#Q=+{mo;w1Bo+etnp@Q#2e&VKy_uFIGJD>UlwjQJsews%A&R literal 0 HcmV?d00001 diff --git a/src/assets/icon/total-search.png b/src/assets/icon/total-search.png new file mode 100644 index 0000000000000000000000000000000000000000..1d796e30806c540545767d23812a863dbc44c1e7 GIT binary patch literal 483 zcmeAS@N?(olHy`uVBq!ia0vp^HXzKw1|+Ti+$;i8oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBxe8Ag$B+ufw=*664h0Cb{jXfPCYB@bHRl!4 z;}f`NJmR%zGBvAt0{ll=a zH;3=<$IFs?q#c9{f0|hDSUcS>Kd#^UXc3F+o&=-QRgWwDR%IDA{7Brfnl^pD%UpvuJZr6>iUVlv!1^+L7Hc95F z(bZYfliPx{5}i)`Pn#`wOe9}4C-c#%nzFizc>TFCw##Ivrv$hteD=-S`PZwwD@nx4 zIU~qJs!spaQVr>Ozf?^=);0BC`84~>hVSk#6T=rUTz1~VgVjkOhrUegzT`a9`O&{H tUE7$79iE#drazfg9R5oGn$#51tBlaxD99>fRIP<)c809>3s%wIL|X2H;!Q8g#89k zUefS3)CnnX0mKOI&%S02+brbC%}4rtdhMklnFz?Y)c8t| zCYPD)3<mY4dx{w|mnzpQ?7D+HP z<|!f7^QQ~hAj%8Lag_gRj16UQ#vQP%k19zxxw(Y9^J~@Ln~ce6UFN8BbjVlzn>0 z!}T2Yu_k#^tDLncmgVT1@%gqkcfk&*;5rm@_=9BHA zX09UYom_ZMNHE&xa!rJ|kXFn)P2o8qk(Yy7dl+||Mo1kSgM;J^rTh<`6Fgs4*ityr zm}!I*mQk@Mi>Fw1z=~KOLg+xF<{ETTJ*SRNCJ%pI{6i|8sW#$Z)vbm6g;Z-|qYKX& z$%%&|O!IUI=}q28CExxA^c3$e4xud7)q1CtIlV@eYg+cdP!$q8r7C-Av3fgHsgg1t zv7QFGG|?Fp0jbEl^348%*LYicOO}7$|;R*qS<%jKaUnZ82EVp}De=9lM z;G1JYh%E8+b)L97-$`4%ZiH7r(S#)D)?6aeM2YI^u0oE&HUh0F-yIY>pB)aO$vk{ugycXhrJkgUxxSlQQ0-CwG}oeK9}s;!{=9v70d*{%fTYC#sNnqWoZA|=}Q z7elC!a>eC!_#JY_UD66~sp(xY3%MLJ;-lo=%}Rmmw5kGt@sQyyUPHxHDvQu9;D$lT<=4&MMuoPHDLB-ADV0000+po;;>M zcSh-_l&T{_;d1ljHN=P$;Vb9Q)={Z4y;}+lp#dm<+d6pxF<~t{oM|bmHlo|aDPDjD zdh?P}lw63`AYyLyeD45az)JX%Ts)+QO@mV~zd-{E%oq#TOPqG?m*AdM(_3Jlbz|XD z;5M*<90Pg{W8o-74){pjFFn}+Myza{6X8i#JGT(78ZgC}FLgv#;l2<*fe~ZjI@AP4 zxZ`*88CSseVBCYMv9NK;wiL;X>cEV#@IW=wzz3@<(|BMA3d{l@p&$RA`A{3yaJ8~` zKr5sx;PL&d$AkJC3+E=X9~Y2P(4FuY*54+8DFYvk%gy&?V8miqmqVAK1)T34Vl4b( z>rI7zu>>&!p$N=a#_Fm7j-mWpT_UBin6VP>HRp7K(CMsG@KUJ8kae}rxvhQLKUNBI z;E14k^`O%Y^>bMo+R;-zQ(u(A#y*pxU7fW%qZz6>%u+Xc`rbY+Yakf*>FLt6tFu0j zJKo*dck?#Z!lf_2fHON+rw|j?!fTl#*%Fq)0XGE1CfrTPs<1$7-YRw{H&*Poo6|j9 zqwi4_k!)FY*)koQd$$MuxDI!vwX^+Krs-zwyFFApCT@%_AP#jdzWWtFGbrqJmTZ*% zjUzC$bsGJAHRc;rXTn2US7xDR9FbZlPSeW@%`&gmG2D+&Y+jw4M7Rr3q0#Nfz0Z5M z!4U20wCn2p8P?Bf>WSQ$QIgR6ms~Wm^RJt4^$Bt0G7=|#TwfVWDfC@=4h#r`6Q%NT z76KUy*VPcW#Nwksgh$dHaD*-g5ul0}Tkk5s$VkGq*d;l?9tg}~K>`(1RL$RM~ArJbOFerh(dD3JSIj?zx_EvBDRf`})? z { - 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