diff --git a/src/screens/Biometric/FaceRecognition/Section/Verify.jsx b/src/screens/Biometric/FaceRecognition/Section/Verify.jsx
index f84db28..b028cb5 100644
--- a/src/screens/Biometric/FaceRecognition/Section/Verify.jsx
+++ b/src/screens/Biometric/FaceRecognition/Section/Verify.jsx
@@ -4,6 +4,7 @@ import { faChevronDown, faTimes } from '@fortawesome/free-solid-svg-icons';
import Select from 'react-select'
import { ServerDownAnimation } from '../../../../assets/images';
import { FileUploader } from 'react-drag-drop-files';
+import { CustomLabel} from '../../../../components';
const Verify = () => {
const BASE_URL = process.env.REACT_APP_BASE_URL;
@@ -314,15 +315,6 @@ const Verify = () => {
}
};
- const CustomLabel = ({ overRide, children, ...props }) => {
- // We intentionally don't pass `overRide` to the label
- return (
-
- );
- };
-
const handleInputChangeApplication = (newInputValue) => {
// Limit input to 15 characters for Application ID
if (newInputValue.length <= 15) {
diff --git a/src/screens/Biometric/FaceRecognition/Transaction.jsx b/src/screens/Biometric/FaceRecognition/Transaction.jsx
index 3976893..6d195d0 100644
--- a/src/screens/Biometric/FaceRecognition/Transaction.jsx
+++ b/src/screens/Biometric/FaceRecognition/Transaction.jsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
import { FaChevronLeft, FaChevronRight, FaFastBackward, FaFastForward, FaSort, FaSortUp, FaSortDown } from 'react-icons/fa'; // Icons for sorting
import { NoAvailable } from '../../../assets/icon';
+const BASE_URL = process.env.REACT_APP_BASE_URL
+const API_KEY = process.env.REACT_APP_API_KEY
// Pagination Component
const Pagination = ({ currentPage, totalPages, onPageChange }) => {
const handlePrev = () => {
@@ -106,6 +108,10 @@ const Transaction = () => {
const [transactionData, setTransactionData] = useState([]);
const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' }); // Sorting state
const dataPerPage = 10; // Data per page (10 data per page)
+ const [totalPages, setTotalPages] = useState(1); // Total pages from API
+ const [searchTerm, setSearchTerm] = useState('');
+ const [sortColumn, setSortColumn] = useState('tf.id');
+ const [sortOrder, setSortOrder] = useState('asc');
const buttonData = [
{ label: 'Copy', enabled: true },
@@ -115,32 +121,52 @@ const Transaction = () => {
{ label: 'Print', enabled: true },
{ label: 'Column Visibility', enabled: true },
];
-
- // Generate 691 dummy transactions
- const generateDummyData = (numOfItems) => {
- const transactionData = [];
-
- for (let i = 1; i <= numOfItems; i++) {
- transactionData.push({
- transactionId: `TX${String(i).padStart(3, '0')}`,
- applicationName: `App ${Math.floor(Math.random() * 5) + 1}`,
- dataSent: `${Math.floor(Math.random() * 100) + 50}MB`,
- endPoint: `Endpoint ${Math.floor(Math.random() * 5) + 1}`,
- subjectId: `S${String(i).padStart(3, '0')}`,
- serviceCharged: `$${(Math.random() * 50 + 5).toFixed(2)}`,
- mode: Math.random() > 0.5 ? 'Online' : 'Offline',
- status: ['Completed', 'Pending', 'Failed'][Math.floor(Math.random() * 3)],
- });
- }
-
- return transactionData;
+ // Fetch transaction data from API
+ const fetchTransactionData = async (page, limit, search = '', sortColumn = 'tf.id', sortOrder = 'asc') => {
+ try {
+ console.log(`Fetching data for page: ${page}, limit: ${limit}, search: ${search}, sortColumn: ${sortColumn}, sortOrder: ${sortOrder}`); // Log page, limit, and search
+ const response = await fetch(`${BASE_URL}/trx_face/table-log?search=${search}&sortColumn=${sortColumn}&sortOrder=${sortOrder}&limit=${limit}&page=${page}`, {
+ method: 'GET',
+ headers: { 'accept': 'application/json', 'x-api-key': API_KEY },
+ });
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ const result = await response.json();
+ const { data, total } = result.details.details.data;
+ setTransactionData(data);
+ setTotalPages(Math.ceil(total / dataPerPage));
+ } catch (error) {
+ console.error('Error fetching transaction data:', error);
+ }
};
- // Set the generated transaction data
+ const fetchPaginationData = async (page, limit, search = '') => {
+ try {
+ console.log(`Fetching pagination data for page: ${page}, limit: ${limit}, search: ${search}`); // Log page, limit, and search
+ const url = `${BASE_URL}/header_detail_param/paging?header_id=1&page=${page}&limit=${limit}&search=${search}`;
+ console.log(`Fetching URL: ${url}`); // Log the URL
+ const response = await fetch(url, {
+ method: 'GET',
+ headers: { 'accept': 'application/json', 'x-api-key': API_KEY },
+ });
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ const result = await response.json();
+ const { data } = result.details;
+ setTotalPages(Math.ceil(data.length / dataPerPage));
+ } catch (error) {
+ console.error('Error fetching pagination data:', error);
+ }
+ };
+
+ // Fetch data when component mounts and when currentPage changes
useEffect(() => {
- setTransactionData(generateDummyData(97513)); // count data dummy transactions
- }, []);
+ fetchTransactionData(currentPage, dataPerPage, searchTerm, sortColumn, sortOrder);
+ fetchPaginationData(currentPage, dataPerPage);
+ }, [currentPage, searchTerm, sortColumn, sortOrder]);
// Sorting function
const sortData = (data, config) => {
@@ -178,8 +204,14 @@ const Transaction = () => {
setCurrentPage(page);
};
- // Calculate total pages based on the data and data per page
- const totalPages = Math.ceil(transactionData.length / dataPerPage);
+ // Handle search
+ const handleSearch = async (event) => {
+ const searchQuery = event.target.value;
+ setSearchTerm(searchQuery);
+ setCurrentPage(1); // Reset to first page on new search
+ await fetchPaginationData(1, dataPerPage, searchQuery);
+ await fetchTransactionData(1, dataPerPage, searchQuery);
+ };
// Paginated data
const paginatedData = getPaginatedData(transactionData, currentPage, dataPerPage);
@@ -279,11 +311,12 @@ const Transaction = () => {
{/* Search Bar with Icon */}
-
+
{/* FontAwesome search icon */}
@@ -297,59 +330,40 @@ const Transaction = () => {
| No. | {/* Kolom untuk Nomor Urut */}- | - | - - | -- | - | -- | @@ -377,15 +391,10 @@ const Transaction = () => { {paginatedData.length > 0 ? ( paginatedData.map((transaction, index) => ( | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {(currentPage - 1) * dataPerPage + index + 1} | {/* Nomor urut berdasarkan halaman dan index */} - -{transaction.transactionId} | -{transaction.applicationName} | -{transaction.dataSent} | -{transaction.endPoint} | -{transaction.subjectId} | -{transaction.serviceCharged} | +{transaction.transaction_id} | +{transaction.application_name} | +{transaction.endpoint} | +{transaction.subject_id || 'N/A'} | {transaction.mode} | {transaction.status} |