diff --git a/.env b/.env
new file mode 100644
index 0000000..5b07576
--- /dev/null
+++ b/.env
@@ -0,0 +1,2 @@
+REACT_APP_BASE_URL = https://kapi.absys.ninja/veri
+REACT_APP_API_KEY = NGKrycQefQrRvYm3KYwCIQQGnllGKlDd
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e726adc
--- /dev/null
+++ b/index.html
@@ -0,0 +1,687 @@
+
+
+
+ Dashboard - SB Admin
+
+
+ Start Bootstrap
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Dashboard
+
+ Dashboard
+
+
+
+
+
+
+
+
+
+ Name
+ Position
+ Office
+ Age
+ Start date
+ Salary
+
+
+
+
+ Name
+ Position
+ Office
+ Age
+ Start date
+ Salary
+
+
+
+
+ Tiger Nixon
+ System Architect
+ Edinburgh
+ 61
+ 2011/04/25
+ $320,800
+
+
+ Garrett Winters
+ Accountant
+ Tokyo
+ 63
+ 2011/07/25
+ $170,750
+
+
+ Ashton Cox
+ Junior Technical Author
+ San Francisco
+ 66
+ 2009/01/12
+ $86,000
+
+
+ Cedric Kelly
+ Senior Javascript Developer
+ Edinburgh
+ 22
+ 2012/03/29
+ $433,060
+
+
+ Airi Satou
+ Accountant
+ Tokyo
+ 33
+ 2008/11/28
+ $162,700
+
+
+ Brielle Williamson
+ Integration Specialist
+ New York
+ 61
+ 2012/12/02
+ $372,000
+
+
+ Herrod Chandler
+ Sales Assistant
+ San Francisco
+ 59
+ 2012/08/06
+ $137,500
+
+
+ Rhona Davidson
+ Integration Specialist
+ Tokyo
+ 55
+ 2010/10/14
+ $327,900
+
+
+ Colleen Hurst
+ Javascript Developer
+ San Francisco
+ 39
+ 2009/09/15
+ $205,500
+
+
+ Sonya Frost
+ Software Engineer
+ Edinburgh
+ 23
+ 2008/12/13
+ $103,600
+
+
+ Jena Gaines
+ Office Manager
+ London
+ 30
+ 2008/12/19
+ $90,560
+
+
+ Quinn Flynn
+ Support Lead
+ Edinburgh
+ 22
+ 2013/03/03
+ $342,000
+
+
+ Charde Marshall
+ Regional Director
+ San Francisco
+ 36
+ 2008/10/16
+ $470,600
+
+
+ Haley Kennedy
+ Senior Marketing Designer
+ London
+ 43
+ 2012/12/18
+ $313,500
+
+
+ Tatyana Fitzpatrick
+ Regional Director
+ London
+ 19
+ 2010/03/17
+ $385,750
+
+
+ Michael Silva
+ Marketing Designer
+ London
+ 66
+ 2012/11/27
+ $198,500
+
+
+ Paul Byrd
+ Chief Financial Officer (CFO)
+ New York
+ 64
+ 2010/06/09
+ $725,000
+
+
+ Gloria Little
+ Systems Administrator
+ New York
+ 59
+ 2009/04/10
+ $237,500
+
+
+ Bradley Greer
+ Software Engineer
+ London
+ 41
+ 2012/10/13
+ $132,000
+
+
+ Dai Rios
+ Personnel Lead
+ Edinburgh
+ 35
+ 2012/09/26
+ $217,500
+
+
+ Jenette Caldwell
+ Development Lead
+ New York
+ 30
+ 2011/09/03
+ $345,000
+
+
+ Yuri Berry
+ Chief Marketing Officer (CMO)
+ New York
+ 40
+ 2009/06/25
+ $675,000
+
+
+ Caesar Vance
+ Pre-Sales Support
+ New York
+ 21
+ 2011/12/12
+ $106,450
+
+
+ Doris Wilder
+ Sales Assistant
+ Sidney
+ 23
+ 2010/09/20
+ $85,600
+
+
+ Angelica Ramos
+ Chief Executive Officer (CEO)
+ London
+ 47
+ 2009/10/09
+ $1,200,000
+
+
+ Gavin Joyce
+ Developer
+ Edinburgh
+ 42
+ 2010/12/22
+ $92,575
+
+
+ Jennifer Chang
+ Regional Director
+ Singapore
+ 28
+ 2010/11/14
+ $357,650
+
+
+ Brenden Wagner
+ Software Engineer
+ San Francisco
+ 28
+ 2011/06/07
+ $206,850
+
+
+ Fiona Green
+ Chief Operating Officer (COO)
+ San Francisco
+ 48
+ 2010/03/11
+ $850,000
+
+
+ Shou Itou
+ Regional Marketing
+ Tokyo
+ 20
+ 2011/08/14
+ $163,000
+
+
+ Michelle House
+ Integration Specialist
+ Sidney
+ 37
+ 2011/06/02
+ $95,400
+
+
+ Suki Burks
+ Developer
+ London
+ 53
+ 2009/10/22
+ $114,500
+
+
+ Prescott Bartlett
+ Technical Author
+ London
+ 27
+ 2011/05/07
+ $145,000
+
+
+ Gavin Cortez
+ Team Leader
+ San Francisco
+ 22
+ 2008/10/26
+ $235,500
+
+
+ Martena Mccray
+ Post-Sales support
+ Edinburgh
+ 46
+ 2011/03/09
+ $324,050
+
+
+ Unity Butler
+ Marketing Designer
+ San Francisco
+ 47
+ 2009/12/09
+ $85,675
+
+
+ Howard Hatfield
+ Office Manager
+ San Francisco
+ 51
+ 2008/12/16
+ $164,500
+
+
+ Hope Fuentes
+ Secretary
+ San Francisco
+ 41
+ 2010/02/12
+ $109,850
+
+
+ Vivian Harrell
+ Financial Controller
+ San Francisco
+ 62
+ 2009/02/14
+ $452,500
+
+
+ Timothy Mooney
+ Office Manager
+ London
+ 37
+ 2008/12/11
+ $136,200
+
+
+ Jackson Bradshaw
+ Director
+ New York
+ 65
+ 2008/09/26
+ $645,750
+
+
+ Olivia Liang
+ Support Engineer
+ Singapore
+ 64
+ 2011/02/03
+ $234,500
+
+
+ Bruno Nash
+ Software Engineer
+ London
+ 38
+ 2011/05/03
+ $163,500
+
+
+ Sakura Yamamoto
+ Support Engineer
+ Tokyo
+ 37
+ 2009/08/19
+ $139,575
+
+
+ Thor Walton
+ Developer
+ New York
+ 61
+ 2013/08/11
+ $98,540
+
+
+ Finn Camacho
+ Support Engineer
+ San Francisco
+ 47
+ 2009/07/07
+ $87,500
+
+
+ Serge Baldwin
+ Data Coordinator
+ Singapore
+ 64
+ 2012/04/09
+ $138,575
+
+
+ Zenaida Frank
+ Software Engineer
+ New York
+ 63
+ 2010/01/04
+ $125,250
+
+
+ Zorita Serrano
+ Software Engineer
+ San Francisco
+ 56
+ 2012/06/01
+ $115,000
+
+
+ Jennifer Acosta
+ Junior Javascript Developer
+ Edinburgh
+ 43
+ 2013/02/01
+ $75,650
+
+
+ Cara Stevens
+ Sales Assistant
+ New York
+ 46
+ 2011/12/06
+ $145,600
+
+
+ Hermione Butler
+ Regional Director
+ London
+ 47
+ 2011/03/21
+ $356,250
+
+
+ Lael Greer
+ Systems Administrator
+ London
+ 21
+ 2009/02/27
+ $103,500
+
+
+ Jonas Alexander
+ Developer
+ San Francisco
+ 30
+ 2010/07/14
+ $86,500
+
+
+ Shad Decker
+ Regional Director
+ Edinburgh
+ 51
+ 2008/11/13
+ $183,000
+
+
+ Michael Bruce
+ Javascript Developer
+ Singapore
+ 29
+ 2011/06/27
+ $183,000
+
+
+ Donna Snider
+ Customer Support
+ New York
+ 27
+ 2011/01/25
+ $112,000
+
+
+
+
+
+
+
+
+
+
Copyright © Your Website 2023
+
+
+
+
+
+
+
+
+
+
+ {/* Main Dashboard */}
+
+
+
+
);
-}
+};
export default App;
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render(
+
+
+
Copyright © Your Website 2023
+
+
+
+ );
+};
+
+export default Footer;
diff --git a/src/components/Main.jsx b/src/components/Main.jsx
new file mode 100644
index 0000000..b91f337
--- /dev/null
+++ b/src/components/Main.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Main = () => {
+ return (
+
+
+
Dashboard
+
+ Dashboard
+
+
+ );
+};
+
+export default Main;
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
new file mode 100644
index 0000000..51965b3
--- /dev/null
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,165 @@
+import React, { useState, useEffect } from 'react';
+import { Logo } from '../assets/images';
+import { Link } from 'react-router-dom';
+
+const Navbar = () => {
+ const messageCount = 5; // Example count for messages
+ const notificationCount = 3; // Example count for notifications
+
+ const [isMobile, setIsMobile] = useState(false);
+
+ useEffect(() => {
+ const handleResize = () => {
+ setIsMobile(window.innerWidth < 600);
+ };
+
+ // Check the initial screen size
+ handleResize();
+
+ // Add event listener for window resize
+ window.addEventListener('resize', handleResize);
+
+ // Cleanup event listener on component unmount
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+
+ return (
+
+
+ {/* Logo Image */}
+
+
+
+
+
+ {/* Show navigation and search only on larger screens */}
+ {!isMobile && (
+ <>
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default Navbar;
diff --git a/src/components/Sidebar/DeepMenu.jsx b/src/components/Sidebar/DeepMenu.jsx
new file mode 100644
index 0000000..cc6fb5a
--- /dev/null
+++ b/src/components/Sidebar/DeepMenu.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import DeeperMenu from './DeeperMenu';
+
+const DeepMenu = ({ name, link, target, subMenus, activeMenu, onMenuClick }) => {
+ return (
+ <>
+ {subMenus ? (
+ onMenuClick(name)} // Menangani klik pada DeepMenu
+ >
+ {name}
+
+
+
+ ) : (
+ onMenuClick(name)} // Menangani klik pada DeepMenu
+ >
+ {name}
+
+ )}
+
+ {subMenus && (
+
+
+ {subMenus.map((deepSubMenu, index) => (
+
+
+ )}
+
+ );
+};
+
+export default DeepMenu;
diff --git a/src/components/Sidebar/DeeperMenu.jsx b/src/components/Sidebar/DeeperMenu.jsx
new file mode 100644
index 0000000..0652262
--- /dev/null
+++ b/src/components/Sidebar/DeeperMenu.jsx
@@ -0,0 +1,15 @@
+import { Link } from 'react-router-dom';
+
+const DeeperMenu = ({ name, link, target, activeMenu, onMenuClick }) => {
+ return (
+
+
+ {filteredMenu.map((menuSection, index) => (
+
+ {menuSection.items.map((item, idx) => (
+ // Jika item memiliki submenu, render SubMenu
+ item.subMenus ? (
+
+ subMenu.name.toLowerCase().includes(searchQuery)
+ )}
+ activeMenu={activeMenu}
+ onMenuClick={handleMenuClick}
+ />
+ ) : (
+ // Jika item tidak memiliki submenu, gunakan
+ {item.iconClass &&
+ {item.name}
+
+ )
+ ))}
+
+ ))}
+
+
+
+
Alexander Pierce
+
+
+
+
+);
+
+export default SearchBar;
+
+
+const styles = {
+ container: {
+ padding: '0.1rem',
+ display: 'flex',
+ alignItems: 'center',
+ margin: '0 0.5rem 0 0.6rem'
+ },
+ input: {
+ width: '100%',
+ padding: '6px',
+ borderRadius: '4px 0 0 4px',
+ border: '1px solid #ddd',
+ outline: 'none',
+ fontSize: '0.9em',
+ },
+ button: {
+ padding: '6px',
+ border: '1px solid #ddd',
+ borderLeft: 'none',
+ borderRadius: '0 4px 4px 0',
+ backgroundColor: '#fff',
+ cursor: 'pointer',
+ },
+ icon: {
+ color: '#555',
+ fontSize: '0.9em',
+ },
+};
diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
new file mode 100644
index 0000000..70f61e7
--- /dev/null
+++ b/src/components/Sidebar/Sidebar.jsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import Menu from './Menu';
+import Profile from './Profile';
+import SearchBar from './SearchBar';
+
+const Sidebar = () => {
+ const [searchQuery, setSearchQuery] = useState('');
+
+ return (
+
+
+ setSearchQuery(query.toLowerCase())} />
+
+
Logged in as:
+ Start Bootstrap
+
+
{heading}
+ onMenuClick(heading)} // Memperbarui activeMenu
+ >
+
+
+ {heading}
+
+
+
+
+
+ {subMenus.map((subMenu, index) => (
+
+
+
+ );
+};
+
+export default SubMenu;
diff --git a/src/components/Sidebar/dataMenu.js b/src/components/Sidebar/dataMenu.js
new file mode 100644
index 0000000..10f7077
--- /dev/null
+++ b/src/components/Sidebar/dataMenu.js
@@ -0,0 +1,263 @@
+// src/components/dataMenu.js
+
+const dataMenu = [
+ {
+ items: [
+ {
+ name: 'Main Dashboard', // Changed the name
+ target: 'collapseHome',
+ subMenus: [
+ {
+ name: 'Getting Started',
+ link: '/getting-started'
+ },
+ {
+ name: 'Dashboard Overview', // Changed the name
+ link: '/dashboard'
+ },
+ {
+ name: 'Application Settings', // Changed the name
+ link: '/application'
+ },
+ ],
+ },
+ ],
+ iconClass: 'fas fa-tachometer-alt',
+ },
+ {
+ items: [
+ {
+ name: 'Biometric Systems', // Changed the name
+ target: 'collapseBiometric',
+ subMenus: [
+ {
+ name: 'Face Recognition System', // Changed the name
+ target: 'collapseFaceRecog',
+ subMenus: [
+ { name: 'Verify Identity', link: '/face-verify'}, // Changed the name
+ { name: 'Summary Report', link: '/face-summary'}, // Changed the name
+ { name: 'Transaction Log', link: '/face-transaction'}, // Changed the name
+ ],
+ },
+ {
+ name: 'KTP OCR', // Changed the name
+ target: 'collapseOcrKtp',
+ subMenus: [
+ { name: 'Verify KTP', link: '/ktp-verify'}, // Changed the name
+ { name: 'Manage Basic Auth', link: '/ktp-manage'},
+ { name: 'Summary of KTPs', link: '/ktp-summary'}, // Changed the name
+ { name: 'KTP Transaction History', link: '/ktp-transaction'}, // Changed the name
+ ],
+ },
+ {
+ name: 'NPWP OCR', // Changed the name
+ target: 'collapseOcrNpwp',
+ subMenus: [
+ { name: 'Verify NPWP', link: '/npwp-verify'}, // Changed the name
+ { name: 'NPWP Summary', link: '/npwp-summary'}, // Changed the name
+ { name: 'NPWP Transaction Log', link: '/npwp-transaction'}, // Changed the name
+ ],
+ },
+ {
+ name: 'SIM OCR', // Changed the name
+ target: 'collapseOcrSim',
+ subMenus: [
+ { name: 'Verify SIM', link: '/sim-verify'}, // Changed the name
+ { name: 'SIM Summary', link: '/sim-summary'}, // Changed the name
+ { name: 'SIM Transaction Log', link: '/sim-transaction'}, // Changed the name
+ ],
+ },
+ {
+ name: 'Document OCR', // Changed the name
+ target: 'collapseOcrDocument',
+ subMenus: [
+ { name: 'Verify Document', link: '/document-verify'}, // Changed the name
+ { name: 'Document Summary', link: '/document-summary'}, // Changed the name
+ { name: 'Document Transaction History', link: '/document-transaction'}, // Changed the name
+ ],
+ },
+ ],
+ },
+ ],
+ iconClass: 'fas fa-user',
+ },
+ {
+ items: [
+ {
+ name: 'SMS Services', // Changed the name
+ target: 'collapseSms',
+ subMenus: [
+ {
+ name: 'SMS Verification', // Changed the name
+ link: '/sms-verify'
+ },
+ {
+ name: 'SMS OTP Management', // Changed the name
+ target: 'collapseSmsOtp',
+ subMenus: [
+ { name: 'Settings', link: '/sms-otp-settings'},
+ { name: 'Summary Report', link: '/sms-otp-summary'}, // Changed the name
+ { name: 'Transaction Log', link: '/sms-otp-transaction'}, // Changed the name
+ { name: 'Detail View', link: '/sms-otp-detail'}, // Changed the name
+ ],
+ },
+ {
+ name: 'SMS Announcements', // Changed the name
+ target: 'collapseAnnouncement',
+ subMenus: [
+ { name: 'Bulk Message', link: '/sms-announcement-bulk'}, // Changed the name
+ { name: 'Announcement Summary', link: '/sms-announcement-summary'}, // Changed the name
+ { name: 'Transaction Logs', link: '/sms-announcement-transaction'},
+ ],
+ },
+ {
+ name: 'Blocked Numbers', // Changed the name
+ link: '/sms-block'
+ },
+ {
+ name: 'SMS Anomaly Report', // Changed the name
+ link: '/sms-anomaly'
+ },
+ ],
+ },
+ ],
+ iconClass: 'fas fa-phone',
+ },
+ {
+ items: [
+ {
+ name: 'WhatsApp Communication', // Changed the name
+ target: 'collapseWa',
+ subMenus: [
+ {
+ name: 'Verify WhatsApp Account', // Changed the name
+ link: '/wa-verify'
+ },
+ {
+ name: 'WhatsApp Management', // Changed the name
+ target: 'collapseWaManage',
+ subMenus: [
+ { name: 'Register Business Account', link: '/wa-manage-register'}, // Changed the name
+ { name: 'WhatsApp Profile Settings', link: '/wa-manage-profile'}, // Changed the name
+ { name: 'Message Templates', link: '/wa-manage-template'}, // Changed the name
+ { name: 'Integration Settings', link: '/wa-manage-integration'}, // Changed the name
+ ],
+ },
+ {
+ name: 'WhatsApp Activity', // Changed the name
+ target: 'collapseActivity',
+ subMenus: [
+ { name: 'Settings', link: '/wa-activity-settings'}, // Changed the name
+ { name: 'Activity Summary', link: '/wa-activity-summary'}, // Changed the name
+ { name: 'Transaction Logs', link: '/wa-activity-transaction'},
+ { name: 'Bulk Sending', link: '/wa-activity-bulk'}, // Changed the name
+ ],
+ },
+ {
+ name: 'WhatsApp Inbox', // Changed the name
+ link: '/wa-inbox'
+ },
+ {
+ name: 'Blocked WhatsApp Numbers', // Changed the name
+ link: '/wa-block'
+ },
+ ],
+ },
+ ],
+ iconClass: 'fab fa-whatsapp',
+ },
+ {
+ items: [
+ {
+ name: 'Identity Verification', // Changed the name
+ target: 'collapseIdentify',
+ subMenus: [
+ {
+ name: 'Electronic Certificate Verification', // Changed the name
+ target: 'collapseElectro',
+ subMenus: [
+ { name: 'Verify Certificate', link: '/identify-electro-verify'}, // Changed the name
+ { name: 'Transaction Logs', link: '/identify-electro-transaction'},
+ ],
+ },
+ {
+ name: 'NPWP Verification', // Changed the name
+ target: 'collapseIdentifyNpwp',
+ subMenus: [
+ { name: 'Transaction Logs', link: '/identify-npwp-transaction'}
+ ],
+ },
+ {
+ name: 'Tax Number Verification', // Changed the name
+ target: 'collapseTax',
+ subMenus: [
+ { name: 'Verify Tax Number', link: '/identify-tax-verify'}, // Changed the name
+ { name: 'Transaction Logs', link: '/identify-tax-transaction'}
+ ],
+ },
+ {
+ name: 'Income Verification', // Changed the name
+ target: 'collapseIncome',
+ subMenus: [
+ { name: 'Verify Income', link: '/identify-income-verify'}, // Changed the name
+ { name: 'Transaction Logs', link: '/identify-income-transaction'}
+ ],
+ },
+ {
+ name: 'ID Verification', // Changed the name
+ target: 'collapseIdVerification',
+ subMenus: [
+ { name: 'Verify ID', link: '/identify-id-verify'}, // Changed the name
+ { name: 'Transaction Logs', link: '/identify-id-transaction'}
+ ],
+ },
+ ],
+ },
+ ],
+ iconClass: 'fas fa-edit',
+ },
+ {
+ items: [
+ {
+ name: 'Watchlist Management', // Changed the name
+ target: 'collapseWatchlist',
+ subMenus: [
+ {
+ name: 'Watchlist Screening', // Changed the name
+ target: 'collapseScreening',
+ subMenus: [
+ { name: 'Verify Watchlist', link: '/watchlist-screening-verify'}, // Changed the name
+ { name: 'Admin Settings', link: '/watchlist-screening-admin'},
+ { name: 'Search Watchlist', link: '/watchlist-screening-search'}, // Changed the name
+ { name: 'Transaction Logs', link: '/watchlist-screening-transaction'},
+ { name: 'Monitor Watchlist', link: '/watchlist-screening-monitor'},
+ ],
+ },
+ ],
+ },
+ ],
+ iconClass: 'fas fa-calendar',
+ },
+ {
+ items: [
+ {
+ name: 'File Management', // Changed the name
+ target: 'collapseFiles',
+ subMenus: [
+ {
+ name: 'File Screening', // Changed the name
+ target: 'collapseScreening',
+ subMenus: [
+ { name: 'Verify File', link: '/files-screening-verify'}, // Changed the name
+ { name: 'Search Files', link: '/files-screening-search'}, // Changed the name
+ { name: 'File Management Settings', link: '/files-screening-admin'},
+ ],
+ },
+ ],
+ },
+ ],
+ iconClass: 'fas fa-cogs',
+ }
+];
+
+export default dataMenu;
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..9e170ca
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,11 @@
+import Navbar from "./Navbar";
+import Sidebar from "./Sidebar/Sidebar";
+import Main from "./Main";
+import Footer from "./Footer";
+
+export {
+ Navbar,
+ Sidebar,
+ Main,
+ Footer
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/src/index.js b/src/index.js
index d563c0f..fae780b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,17 @@
import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
+import ReactDOM from 'react-dom';
+import './assets/css/app.css';
import App from './App';
-import reportWebVitals from './reportWebVitals';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min.js';
+import ExternalScripts from './assets/js/externalScript'; // Mengimpor komponen ExternalScripts
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
+// Menyisipkan ExternalScripts di luar App
+ReactDOM.render(
+ {/* Menambahkan ExternalScripts ke dalam aplikasi */}
+
+ ,
+ document.getElementById('root')
);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
+
Results
+
+
+
+
+ Similarity
+
+ {verified !== null ? (verified ? 'True' : 'False') : 'N/A'}
+
+
+
+
+
+
+
+
+
{selectedImageName}
+
+
+
+
+
{selectedCompareImageName}
+
+
+
+
+ {/* Inject keyframes for the spinner */}
+
+
+ {isLoading && (
+
+ )}
+
+
+ {/* Application ID Selection */}
+
+
+
+ option.value === applicationId)}
+ onChange={handleApplicationChange} // Pass selected option directly
+ options={applicationOptions}
+ placeholder="Select Application ID"
+ isSearchable
+ menuPortalTarget={document.body}
+ menuPlacement="auto"
+ inputValue={inputValueApplication}
+ onInputChange={handleInputChangeApplication}
+ />
+
+ {applicationError &&
{applicationError} }
+
+
+
+
+ Remaining Quota
+
+
+ {selectedQuota} {/* Display selected quota */}
+ (times)
+
+
+
+
+ {/* Subject ID Input and Threshold Selection */}
+
+
+
+ setTresholdId(e.target.value)}
+ onFocus={handleFocus}
+ onBlur={handleBlur}
+ >
+ Select Threshold
+ {thresholdIds.map((app) => (
+
+ {app.displayName}
+
+ ))}
+
+ {thresholdError} }
+
+
+
+
+
+ {/* Upload Image #1 */}
+
+
+
Upload Face Photo
+
+ Drag and Drop Here
+ Or
+ Browse
+ Recommended size: 250x250 (Max File Size: 2MB)
+ Supported file types: JPG, JPEG
+
+ }
+ />
+ {uploadError &&
{uploadError} }
+
+
+ {/* Display uploaded image name */}
+ {selectedImageName && (
+
+
+
+
+
Uploaded File:
+
{selectedImageName}
+ {file && (
+
+ Size: {formatFileSize(file.size)}
+
+ )}
+
+
+
+
+
+
+
+ )}
+
+
+ {/* Upload Image #2 */}
+
+
+
Upload Compare Photo
+
+ Drag and Drop Here
+ Or
+ Browse
+ Recommended size: 250x250 (Max File Size: 2MB)
+ Supported file types: JPG, JPEG
+
+ }
+ />
+ {compareUploadError &&
{compareUploadError} }
+
+
+ {/* Display uploaded image name */}
+ {selectedCompareImageName && (
+
+
+
+
+
Uploaded File:
+
{selectedCompareImageName}
+ {file && (
+
+ Size: {formatFileSize(file.size)}
+
+ )}
+
+
+
+
+
+
+
+ )}
+
+ {children}
+
+ );
+ };
+
+ const applicationOptions = applicationIds.map(app => ({
+ value: app.id,
+ label: app.name
+ }));
+
+ const handleSubjectIdChange = async (e) => {
+ const id = e.target.value;
+ setSubjectId(id);
+
+ console.log("Current Subject ID Input:", id); // Debugging: Log input
+
+ if (id) {
+ const exists = subjectIds.includes(id);
+ console.log("Subject IDs:", subjectIds); // Debugging: Log existing Subject IDs
+
+ if (exists) {
+ setSubjectAvailabilityMessage('Subject already exists.'); // Error message
+ setSubjectError(''); // Clear any subject error
+ } else {
+ setSubjectAvailabilityMessage('This subject ID is available.'); // Success message
+ setSubjectError('');
+ }
+ } else {
+ setSubjectAvailabilityMessage(''); // Clear message if input is empty
+ }
+ };
+
+ // Fungsi untuk mengonversi ukuran file dari byte ke KB/MB
+ 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 (
+
+ {/* Inject keyframes for the spinner */}
+
+
+ {isLoading && (
+
+ )}
+
+ {/* Application ID Selection */}
+
+
+
+ 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
+ />
+
+ {applicationError &&
{applicationError} }
+
+
+
+
+ Remaining Quota
+
+
+ {selectedQuota}
+ (times)
+
+
+
+
+ {/* Subject ID Input */}
+
+
+ {subjectError} }
+ {subjectAvailabilityMessage && (
+
+ {subjectAvailabilityMessage}
+
+ )}
+
+
+
+ {/* Upload Section */}
+
+
+ {/* Display uploaded image name */}
+ {selectedImageName && (
+
+
+
+
+
Uploaded File:
+
{selectedImageName}
+ {file && (
+
+ Size: {formatFileSize(file.size)}
+
+ )}
+
+
+
+
+
+
+
+ )}
+
+ {/* Submit Button */}
+
+
+ {/* Result Section */}
+ {showResult && (
+
+
Results
+
+ {/* Table Styling: responsive */}
+
+
+
+ Similarity
+ True
+
+ {/* More rows can go here */}
+
+
+
+ {/* Image and Details Container */}
+
+
+
+ {selectedImageName}
+
+
+
+
+ )}
+
+
Face Recognition - Liveness
+
+ )
+}
+
+export default Liveness
diff --git a/src/screens/Biometric/FaceRecognition/Section/Search.jsx b/src/screens/Biometric/FaceRecognition/Section/Search.jsx
new file mode 100644
index 0000000..d0e8a3a
--- /dev/null
+++ b/src/screens/Biometric/FaceRecognition/Section/Search.jsx
@@ -0,0 +1,662 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronLeft, faChevronDown, faTimes, faImage } from '@fortawesome/free-solid-svg-icons';
+import { FileUploader } from 'react-drag-drop-files';
+import Select from 'react-select'
+
+const fileTypes = ["JPG", "JPEG", "PNG"]; // Allowed file types
+
+
+const Search = () => {
+
+ const BASE_URL = process.env.REACT_APP_BASE_URL
+ const API_KEY = process.env.REACT_APP_API_KEY
+
+ const [isSelectOpen, setIsSelectOpen] = useState(false);
+ const [errorMessage, setErrorMessage] = useState('');
+ const [selectedImageName, setSelectedImageName] = useState('');
+ const fileInputRef = useRef(null);
+ const [showResult, setShowResult] = useState(false);
+ const [applicationId, setApplicationId] = useState('');
+ const [selectedQuota, setSelectedQuota] = useState(0);
+ const [limitId, setLimitId] = useState('');
+ const [imageUrls, setImageUrls] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const [results, setResults] = useState([]);
+ const [file, setFile] = useState(null);
+ const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+
+ const [applicationIds, setApplicationIds] = useState([]);
+ const [inputValueApplication, setInputValueApplication] = useState(''); // Controlled input value for Application ID
+
+ const [limitIds] = useState(
+ Array.from({ length: 10 }, (_, index) => ({
+ id: index + 1,
+ name: index + 1,
+ }))
+ );
+
+ const [applicationIdError, setApplicationIdError] = useState('');
+ const [limitIdError, setLimitIdError] = useState('');
+ const [imageError, setImageError] = useState('');
+ const [uploadedFile, setUploadedFile] = useState(null);
+
+ 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
+ }
+ };
+
+ useEffect(() => {
+ const fetchApplicationIds = async () => {
+ try {
+ setIsLoading(true)
+ const url = `${BASE_URL}/application/list`;
+ console.log('Fetching URL:', url); // Log the URL
+
+ const response = await fetch(url, {
+ method: 'GET',
+ headers: {
+ 'accept': 'application/json',
+ 'x-api-key': `${API_KEY}`,
+ },
+ });
+
+ const data = await response.json();
+
+ if (data.status_code === 200) {
+ const ids = data.details.data.map(app => app.id);
+ console.log('Application Id: ' + ids); // Log the IDs
+ setApplicationIds(data.details.data); // Update state with the fetched data
+ } else {
+ console.error('Failed to fetch data:', data.details.message);
+ }
+ } catch (error) {
+ console.error('Error fetching application IDs:', error);
+ } finally {
+ setIsLoading(false)
+ }
+ };
+
+ fetchApplicationIds();
+
+ const handleResize = () => setIsMobile(window.innerWidth <= 768);
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ const applicationOptions = applicationIds.map(app => ({
+ value: app.id,
+ label: app.name
+ }));
+
+ const handleApplicationChange = (selectedOption) => {
+ if (selectedOption) {
+ const selectedId = selectedOption.value;
+ const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
+ if (selectedApp) {
+ setSelectedQuota(selectedApp.quota); // Set the selected quota
+ setApplicationId(selectedId); // Set the selected application ID
+ }
+ }
+ };
+
+ const handleInputChangeApplication = (newInputValue) => {
+ // Limit input to 15 characters for Application ID
+ if (newInputValue.length <= 15) {
+ setInputValueApplication(newInputValue);
+ }
+};
+
+ const handleFocus = () => {
+ setIsSelectOpen(true);
+ };
+
+ const handleBlur = () => {
+ setIsSelectOpen(false);
+ };
+
+ const handleImageUpload = (file) => {
+ // Ensure file exists before accessing its properties
+ if (!file) {
+ console.error('File is undefined');
+ setImageError('Please upload a valid image file.');
+ return;
+ }
+
+ const fileExtension = file.name.split('.').pop().toUpperCase();
+ if (fileTypes.includes(fileExtension)) {
+ setSelectedImageName(file.name);
+ setFile(file);
+ setImageError(''); // Clear any previous errors
+ } else {
+ // Show an alert if the file type is not supported
+ alert('Image format is not supported');
+ setImageError('Image format is not supported'); // Optionally set error message to display on the UI
+ setFile(null); // Optionally clear the selected file
+ }
+ };
+
+
+ const handleImageCancel = () => {
+ setSelectedImageName('');
+ setFile(null);
+ if (fileInputRef.current) {
+ fileInputRef.current.value = '';
+ }
+ };
+
+ const handleCheckClick = async () => {
+ // Clear existing errors
+ setApplicationIdError('');
+ setLimitIdError('');
+ setImageError('');
+ setErrorMessage('');
+
+ // Initialize validation flags
+ let hasError = false;
+
+ // Validate Application ID
+ if (!applicationId) {
+ setApplicationIdError('Please select an Application ID before searching.');
+ hasError = true; // Set error flag
+ }
+
+ // Validate Limit ID
+ if (!limitId) {
+ setLimitIdError('Please select a Limit before searching.');
+ hasError = true; // Set error flag
+ }
+
+ // Validate Image Upload
+ if (!selectedImageName) {
+ setImageError('Please upload an image file.');
+ hasError = true; // Set error flag
+ }
+
+ // Check if the file is uploaded
+ if (!uploadedFile) {
+ setErrorMessage('Please upload an image file.');
+ hasError = true; // Set error flag
+ }
+
+ // If any errors were found, do not proceed
+ if (hasError) {
+ return;
+ }
+
+ const parsedLimitId = parseInt(limitId, 10);
+
+ const formData = new FormData();
+ formData.append('application_id', applicationId);
+ formData.append('threshold', 1);
+ formData.append('limit', parsedLimitId);
+ formData.append('file', uploadedFile, uploadedFile.name); // Use the uploaded file
+
+ setIsLoading(true);
+
+ try {
+ const response = await fetch(`${BASE_URL}/face_recognition/search`, {
+ method: 'POST',
+ headers: {
+ 'accept': 'application/json',
+ 'x-api-key': `${API_KEY}`,
+ },
+ body: formData,
+ });
+
+ const data = await response.json();
+
+ console.log('Response Data:', data); // Log the response
+
+ if (response.ok) {
+ const resultsArray = Array.isArray(data.details.data) ? data.details.data : [];
+ const processedResults = resultsArray.map(item => ({
+ identity: item.identity,
+ similarity: item.similarity,
+ imageUrl: item.image_url,
+ distance: item.distance,
+ }));
+
+ // Fetch images using their URLs
+ await Promise.all(processedResults.map(async result => {
+ const imageFileName = result.imageUrl.split('/').pop(); // Extract file name if needed
+ await fetchImage(imageFileName); // Fetch image
+ console.log('multiple image data: ', result.imageUrl); // Log the URL
+ }));
+
+ setResults(processedResults);
+ setShowResult(true);
+
+ } else {
+ console.error('Error response:', JSON.stringify(data, null, 2));
+ const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.';
+ setErrorMessage(errorMessage);
+ }
+ } catch (error) {
+ console.error('Error:', error);
+ setErrorMessage('An error occurred while making the request.');
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ 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;
+ }
+
+ const imageBlob = await response.blob();
+ const imageData = URL.createObjectURL(imageBlob);
+ console.log('Fetched image URL:', imageData);
+ setImageUrls(prevUrls => [...prevUrls, imageData]); // Store the blob URL
+
+ } catch (error) {
+ console.error('Error fetching image:', error);
+ setErrorMessage(error.message);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const CustomLabel = ({ overRide, children, ...props }) => {
+ // We intentionally don't pass `overRide` to the label
+ return (
+
+ {children}
+
+ );
+ };
+
+ const styles = {
+ formGroup: {
+ marginTop: '-45px',
+ },
+ selectWrapper: {
+ position: 'relative',
+ marginTop: '0',
+ },
+ select: {
+ width: '100%',
+ paddingRight: '30px',
+ },
+ chevronIcon: {
+ position: 'absolute',
+ right: '10px',
+ top: '50%',
+ transform: 'translateY(-50%)',
+ pointerEvents: 'none',
+ },
+ remainingQuota: {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginTop: '4px',
+ },
+ quotaText: {
+ fontSize: '40px',
+ color: '#0542cc',
+ fontWeight: '600',
+ },
+ timesText: {
+ marginLeft: '8px',
+ verticalAlign: 'super',
+ fontSize: '20px',
+ },
+ uploadArea: {
+ backgroundColor: '#e6f2ff',
+ height: '50svh',
+ cursor: 'pointer',
+ marginTop: '1rem',
+ padding: '1rem',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ border: '1px solid #ced4da',
+ borderRadius: '0.25rem',
+ },
+ uploadIcon: {
+ fontSize: '40px',
+ color: '#0542cc',
+ marginBottom: '7px',
+ },
+ uploadText: {
+ color: '#1f2d3d',
+ fontWeight: '400',
+ fontSize: '16px',
+ lineHeight: '13px',
+ },
+ wrapper: {
+ border: '1px solid #ddd',
+ borderRadius: '6px',
+ padding: '18px 10px 0 8px', // Padding lebih seragam
+ height: '13svh', // Tinggi lebih kecil untuk menyesuaikan tampilan
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ backgroundColor: '#f9f9f9',
+ overflow: 'hidden',
+ },
+ fileWrapper: {
+ display: 'flex',
+ alignItems: 'center',
+ flex: '1',
+ },
+ textContainer: {
+ flex: '1',
+ fontSize: '16px', // Ukuran font lebih kecil
+ marginLeft: '6px',
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ marginTop: '1rem'
+ },
+ fileSize: {
+ fontSize: '12px',
+ color: '#555',
+ marginBottom: '2rem',
+ },
+ closeButtonContainer: {
+ display: 'flex',
+ alignItems: 'center',
+ marginLeft: 'auto',
+ },
+ closeButton: {
+ background: 'transparent',
+ border: 'none',
+ cursor: 'pointer',
+ padding: '0',
+ },
+ imageIcon: {
+ color: '#0542cc',
+ fontSize: '18px', // Ukuran ikon sedikit lebih kecil
+ marginRight: '6px',
+ },
+ closeIcon: {
+ color: 'red',
+ fontSize: '18px',
+ },
+ submitButton: {
+ marginLeft: 'auto',
+ marginTop: '4rem',
+ textAlign: 'start',
+ position: 'relative',
+ zIndex: 1,
+ },
+ uploadError: {
+ color: 'red',
+ fontSize: '12px',
+ marginTop: '5px',
+ },
+ loadingOverlay: {
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ backgroundColor: 'rgba(0, 0, 0, 0.2)',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ zIndex: 1000,
+ },
+ spinner: {
+ border: '4px solid rgba(0, 0, 0, 0.1)',
+ borderLeftColor: '#0542cc',
+ borderRadius: '50%',
+ width: '90px',
+ height: '90px',
+ animation: 'spin 1s ease-in-out infinite',
+ },
+ loadingText: {
+ marginTop: '10px',
+ fontSize: '1.2rem',
+ color: '#fff',
+ textAlign: 'center',
+ },
+ containerResultStyle: {
+ padding: '1rem',
+ backgroundColor: '#f7f7f7',
+ borderRadius: '8px',
+ margin: '1rem',
+ width: isMobile ? '100%' : '50%',
+ },
+ resultContainer: {
+ display: 'flex',
+ flexDirection: isMobile ? 'column' : 'row',
+ flexWrap: 'wrap',
+ gap: '1rem',
+ justifyContent: 'center',
+ },
+ resultItem: {
+ display: 'flex',
+ flexDirection: isMobile ? 'row' : 'column',
+ alignItems: 'center',
+ textAlign: 'center',
+ padding: '0.5rem',
+ backgroundColor: '#fff',
+ border: '1px solid #ddd',
+ borderRadius: '8px',
+ boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
+ width: isMobile ? '100%' : '150px',
+ },
+ resultTextContainer: {
+ marginBottom: isMobile ? '0' : '0.5rem',
+ },
+ resultText: {
+ fontSize: '0.9rem',
+ color: '#333',
+ margin: '0.2rem 0',
+ },
+ resultImage: {
+ width: '80px',
+ height: '80px',
+ borderRadius: '50%',
+ marginTop: isMobile ? '0' : '0.5rem',
+ },
+
+ };
+
+ return (
+
+ {/* Inject keyframes for the spinner */}
+
+
+ {isLoading && (
+
+ )}
+
+ {/* Application ID Selection */}
+
+
+
+ option.value === applicationId)}
+ onChange={handleApplicationChange}
+ options={applicationOptions}
+ placeholder="Select Application ID"
+ isSearchable
+ menuPortalTarget={document.body}
+ menuPlacement="auto"
+ inputValue={inputValueApplication}
+ onInputChange={handleInputChangeApplication}
+ />
+
+ {applicationIdError && (
+
{applicationIdError}
+ )}
+
+
+
+
+ Remaining Quota
+
+
+ {selectedQuota} {/* Display selected quota */}
+ (times)
+
+
+
+
+ {/* limit ID Input and Threshold Selection */}
+
+
+
+ setLimitId(e.target.value)}
+ onFocus={handleFocus}
+ onBlur={handleBlur}
+ >
+ Select Limit
+ {limitIds.map((app) => (
+
+ {app.name}
+
+ ))}
+
+ {limitIdError}
+ )}
+
+
+
+
+ {/* Upload Section */}
+ {/* Drag and Drop File Uploader */}
+
+
+ {selectedImageName && (
+
+
+
+
+
Uploaded File:
+
{selectedImageName}
+ {file && (
+
+ Size: {formatFileSize(file.size)}
+
+ )}
+
+
+
+
+
+
+
+ )}
+
+ {/* Submit Button */}
+
+
+ {/* Results Section */}
+ {
+ showResult && results.length > 0 && (
+
+
Results
+
+ {results.slice(0, limitId).map((result, index) => (
+
+
+
Image Name: image_{index + 1}
+
Similarity: {result.similarity}%
+
Distance: {result.distance}
+
+
+
+ ))}
+
+
+ )}
+
+ {children}
+
+ );
+ };
+
+ const handleInputChangeApplication = (newInputValue) => {
+ // Limit input to 15 characters for Application ID
+ if (newInputValue.length <= 15) {
+ setInputValueApplication(newInputValue);
+ }
+ };
+
+ // Fungsi untuk mengonversi ukuran file dari byte ke KB/MB
+ 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 (
+
+
+
+ {isLoading && (
+
+ )}
+
+ {/* Application ID Selection */}
+
+
+
+ option.value === applicationId)}
+ onChange={handleApplicationChange}
+ options={applicationOptions}
+ placeholder="Select Application ID"
+ isSearchable
+ menuPortalTarget={document.body} // Use this for scroll behavior
+ menuPlacement="auto"
+ inputValue={inputValueApplication}
+ onInputChange={handleInputChangeApplication} // Limit input length for Application ID
+ />
+
+ {applicationError &&
{applicationError} }
+
+
+
+
+ Remaining Quota
+
+
+ {selectedQuota} {/* Display selected quota */}
+ (times)
+
+
+
+
+ {/* Subject ID Input */}
+
+
+
option.value === subjectId)}
+ onChange={selectedOption => setSubjectId(selectedOption ? selectedOption.value : '')}
+ onInputChange={(value) => {
+ // Check if input value length is within the 15-character limit
+ if (value.length <= 15) {
+ setInputValue(value); // Set the input value if within limit
+ }
+ }}
+ onFocus={() => fetchSubjectIds(applicationId)} // Fetch subject IDs on focus
+ placeholder="Enter Subject ID"
+ isClearable
+ noOptionsMessage={() => (
+ Subject ID not registered.
+ )}
+ inputValue={inputValue} // Bind the inputValue state to control the input
+ />
+ {subjectError && {subjectError} }
+ {subjectAvailabilityMessage && (
+
+ {subjectAvailabilityMessage}
+
+ )}
+
+
+
+
+ {
+ setThresholdId(e.target.value);
+ setThresholdError(''); // Clear error if valid
+ }}
+ onFocus={handleFocus}
+ onBlur={handleBlur}
+ >
+ Select Threshold
+ {thresholdIds.map((app) => (
+
+ {app.displayName}
+
+ ))}
+
+ {thresholdError} }
+
+
+
+
+ {/* Upload Section */}
+
+
+
+ Upload Face Photo
+
+
handleImageUpload(files[0])}
+ children={
+
+ }
+ />
+ {uploadError && {uploadError} }
+
+
+
+ {/* Display uploaded image name */}
+ {selectedImageName && (
+
+
+
+
+
Uploaded File:
+
{selectedImageName}
+ {file && (
+
+ Size: {formatFileSize(file.size)}
+
+ )}
+
+
+
+
+
+
+
+ )}
+
+ {/* Submit Button */}
+
+
+ {/* Results Section */}
+ {showResult && (
+
+
Results
+
+
+
+
+ Similarity
+
+ {verified !== null ? (verified ? 'True' : 'False') : 'N/A'}
+
+
+
+
+
+
+
+
+ File Name: {selectedImageName}
+
+
+
+
+ )}
+
+
Summary
+
+ )
+}
+
+export default Summary
diff --git a/src/screens/Biometric/FaceRecognition/Transaction.jsx b/src/screens/Biometric/FaceRecognition/Transaction.jsx
new file mode 100644
index 0000000..46b9e75
--- /dev/null
+++ b/src/screens/Biometric/FaceRecognition/Transaction.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Transaction = () => {
+ return (
+
+
Transaction
+
+ )
+}
+
+export default Transaction
diff --git a/src/screens/Biometric/FaceRecognition/Verify.jsx b/src/screens/Biometric/FaceRecognition/Verify.jsx
new file mode 100644
index 0000000..160db3e
--- /dev/null
+++ b/src/screens/Biometric/FaceRecognition/Verify.jsx
@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from 'react';
+import { Link, Routes, Route, useNavigate } from 'react-router-dom';
+import {
+ Enroll,
+ Compare,
+ Liveness,
+ Search,
+ VerifySection
+} from './Section';
+
+const Verify = () => {
+ const verifyTabs = [
+ { name: 'Enroll', link: 'face-enroll' },
+ { name: 'Verify', link: 'face-verifysection' },
+ { name: 'Liveness', link: 'face-liveness' },
+ { name: 'Compare', link: 'face-compare' },
+ { name: 'Search', link: 'face-search' },
+ ];
+
+ const [isMobile, setIsMobile] = useState(false);
+ const navigate = useNavigate();
+
+ // Redirect otomatis ke rute default saat akses ke /face-verify
+ useEffect(() => {
+ if (window.location.pathname === '/face-verify') {
+ navigate('face-enroll', { replace: true });
+ }
+ }, [navigate]);
+
+ // Update state isMobile berdasarkan ukuran layar
+ useEffect(() => {
+ const handleResize = () => {
+ setIsMobile(window.innerWidth <= 768);
+ };
+
+ handleResize();
+ window.addEventListener('resize', handleResize);
+
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ return (
+
+ {/* Static Content */}
+
+
+
+
+
+ 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.
+
+
+
+
+ Create New App ID
+
+
+
+
+
+
+ {/* Tab Navigation */}
+
+
+
+ {verifyTabs.map((tab) => (
+
+
+
+ {/* Dynamic Tab Content */}
+
+
+
+
+
+
+ {/* Inject keyframes for the spinner */}
+
+
+ {isLoading && (
+
+ )}
+ {/* Welcome Message */}
+
+
+
+
+
+
+ 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.
+
+
+ {/* Tombol di bawah teks */}
+
+
+
+ Create New App ID
+
+
+
+
+
+
+ {/* Section */}
+
+ {/* Application ID Selection */}
+
{/* Added align-items-center for vertical alignment */}
+
+
+ setApplicationId(e.target.value)}
+ onFocus={handleFocus}
+ onBlur={handleBlur}
+ >
+ Select Application ID
+ {applicationIds.map((app) => (
+
+ {app.name}
+
+ ))}
+
+
+
+
+
+
{/* Adjusted margins */}
+ Remaining Quota
+
+
+ 0
+ (times)
+
+
+
+
+ {/* Upload Section */}
+
+
+
Upload your e-KTP Photo
+
document.getElementById('fileUpload').click()}
+ >
+
+
Drag and Drop Here
+
Or
+
Browse
+
Recommended size: 300x300 (Max File Size: 2MB)
+
Supported file types: JPG, JPEG
+
+
+ {errorMessage && (
+
{errorMessage}
+ )}
+
+
+
+ {/* Display uploaded image name */}
+ {selectedImageName && (
+
+
+
+
+
Uploaded File:
+
{selectedImageName}
+
+
+
+
+
+ )}
+
+ {/* Submit Button */}
+
+
+ {/* Result Section */}
+ {showResult && (
+
+
+
Results
+
+
+
+
+
+ NIK
+ {data.nik}
+
+
+ District
+ {data.district}
+
+
+ Name
+ {data.name}
+
+
+ City
+ {data.city}
+
+
+ Date of Birth
+ {data.dob}
+
+
+ State
+ {data.state}
+
+
+ Gender
+ {data.gender}
+
+
+
+
+
+
+ Religion
+ {data.religion}
+
+
+ Blood Type
+ {data.bloodType}
+
+
+ Marital Status
+ {data.maritalStatus}
+
+
+ Address
+ {data.address}
+
+
+ Occupation
+ {data.occupation}
+
+
+ RT/RW
+ {data.rtRw}
+
+
+ Nationality
+ {data.nationality}
+
+
+
+
+
+
+
+
+
+
+
Dark: {data.dark.toString()}
+
Blur: {data.blur.toString()}
+
+
+
Grayscale: {data.grayscale.toString()}
+
Flashlight: {data.flashlight.toString()}
+
+
+
+
+ )}
+
+
+
List of Applications
+
setSearchTerm(e.target.value)}
+ />
+
+
+
+
+
+
+ {errorMessage ? (
+
{errorMessage}
+ ) : (
+
+ {applications.map((application, index) => (
+
handleMouseEnter(index)}
+ onMouseLeave={() => handleMouseLeave(index)}
+ >
+
{application.name}
+
Application ID: {application.id}
+
Date & Time:
+ {application.created_at ? new Date(application.created_at).toLocaleString() : "Date not available"}
+
+
handleCopy(index, application.name)}
+ style={styles.copyButton}
+ >
+ {copiedIndex === index ? 'Copied!' : 'Copy'}
+
+
+ ))}
+
+ )}
+
+
+ {path.map((item, index) => (
+
+ {index > 0 && ' > '}
+
+ {item.name}
+
+
+ ))}
+
+ );
+ };
+
+ const breadcrumbPath = [
+ { name: 'Application', link: '/application' },
+ { name: 'Create Application ID', link: '/createApps' },
+ ];
+
+ const handleMouseEnter = () => setButtonState({ ...buttonState, isHovered: true });
+ const handleMouseLeave = () => setButtonState({ ...buttonState, isHovered: false, isActive: false });
+ const handleMouseDown = () => setButtonState({ ...buttonState, isActive: true });
+ const handleMouseUp = () => setButtonState({ ...buttonState, isActive: false });
+
+ const handleInputChange = (e) => {
+ setInputValue(e.target.value);
+ if (error) setError(''); // Clear error when user starts typing
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (!inputValue) {
+ setError('Application name is required.');
+ } else {
+ const requestData = {
+ name: inputValue,
+ quota: 100,
+ mode_id: 9,
+ status_id: 1,
+ };
+
+ try {
+ const response = await fetch(`${BASE_URL}/application/add`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'accept': 'application/json',
+ 'x-api-key': `${API_KEY}`,
+ },
+ body: JSON.stringify(requestData),
+ });
+
+ if (!response.ok) {
+ throw new Error('Network response was not ok');
+ }
+
+ const result = await response.json();
+ console.log('Form submitted successfully:', result);
+
+ // Tampilkan pesan sukses
+ alert('Application ID created successfully!');
+
+ // Navigasikan kembali ke halaman sebelumnya
+ navigate(-1); // Jika menggunakan react-router-dom
+ // Atau jika menggunakan React Native:
+ // navigation.goBack();
+
+ } catch (error) {
+ console.error('Error creating application ID:', error);
+ setError('Failed to create Application ID. Please try again.');
+ }
+ }
+ };
+
+ return (
+
+
+
+
Create Application ID
+
+
+
+
+ {/* Check Our Service Status Section */}
+
+
+
+
Check Our Service Status
+
+ Stay updated on the current status of our services in real-time. Easily monitor performance, downtime, and maintenance schedules to ensure seamless integration and uninterrupted usage.
+
+
+
+
+
+
+
+ {/* Your Daily Usage Section */}
+
+
+ Your Daily Usage
+
+
+
+ {cardData.map((card, index) => (
+
+
+
+
+
+
{card.title}
+
+
+
+
{card.hits}
+
Hits
+
+ {card.percentage}
+
+
{card.note}
+
+
+
+
+ ))}
+
+
+ {/* Subscribe Other Services Section */}
+
+
+
+
+
+ {/* Image on top for smaller screens, beside text on larger screens */}
+
+
+
Subscribe Other Services
+
+ Unlock access to more features by subscribing to our other services. Once subscribed, you'll gain insights through detailed statistics and data tailored to your needs.
+
+
Contact Us
+
+
+
+
+
+
+
+
+ {/* Welcome Section */}
+
+
+
+
+
+
+ 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.
+
+
+ {/* Buttons */}
+
+
+
+ Create New App ID
+
+
+
+
+ Read Our API Docs
+
+
+
+
+
+ {/* Cards Section */}
+
+ {cardData.map((card, index) => (
+
+ ))}
+
+