From daf0e7e54d7dce34f0fc002318e889ff4624fc22 Mon Sep 17 00:00:00 2001 From: Rizqika Date: Thu, 2 Jan 2025 18:38:56 +0700 Subject: [PATCH] Implementasi API table face dan ktp --- Backend/rekan_veri_be | 2 +- SingleMessage.js | 0 .../Biometric/FaceRecognition/Transaction.jsx | 3 +- src/screens/Biometric/OcrKtp/Transaction.jsx | 253 ++++++++++-------- 4 files changed, 145 insertions(+), 113 deletions(-) create mode 100644 SingleMessage.js diff --git a/Backend/rekan_veri_be b/Backend/rekan_veri_be index addaac2..e15616c 160000 --- a/Backend/rekan_veri_be +++ b/Backend/rekan_veri_be @@ -1 +1 @@ -Subproject commit addaac2b9a73b75761c7449341ecc23bfbe63cc2 +Subproject commit e15616c8ba2cd26017469382b0f58121b07e8cac diff --git a/SingleMessage.js b/SingleMessage.js new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/Biometric/FaceRecognition/Transaction.jsx b/src/screens/Biometric/FaceRecognition/Transaction.jsx index 6d195d0..5eabb1c 100644 --- a/src/screens/Biometric/FaceRecognition/Transaction.jsx +++ b/src/screens/Biometric/FaceRecognition/Transaction.jsx @@ -3,6 +3,7 @@ import { FaChevronLeft, FaChevronRight, FaFastBackward, FaFastForward, FaSort, F import { NoAvailable } from '../../../assets/icon'; const BASE_URL = process.env.REACT_APP_BASE_URL +const LOCAL_URL = 'http://127.0.0.1:8000' const API_KEY = process.env.REACT_APP_API_KEY // Pagination Component const Pagination = ({ currentPage, totalPages, onPageChange }) => { @@ -126,7 +127,7 @@ const Transaction = () => { 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}`, { + const response = await fetch(`${LOCAL_URL}/trx_face/table-log?search=${search}&sortColumn=${sortColumn}&sortOrder=${sortOrder}`, { method: 'GET', headers: { 'accept': 'application/json', 'x-api-key': API_KEY }, }); diff --git a/src/screens/Biometric/OcrKtp/Transaction.jsx b/src/screens/Biometric/OcrKtp/Transaction.jsx index 64b29bd..2586887 100644 --- a/src/screens/Biometric/OcrKtp/Transaction.jsx +++ b/src/screens/Biometric/OcrKtp/Transaction.jsx @@ -2,6 +2,9 @@ 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 LOCAL_URL = 'http://127.0.0.1:8000' +const API_KEY = process.env.REACT_APP_API_KEY // Pagination Component const Pagination = ({ currentPage, totalPages, onPageChange }) => { const handlePrev = () => { @@ -106,6 +109,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,31 +122,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}`, - createdAt: new Date(2023, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toLocaleDateString(), // Random date - referenceId: `REF${String(i).padStart(3, '0')}`, - status: ['Completed', 'Pending', 'Failed'][Math.floor(Math.random() * 3)], - mode: Math.random() > 0.5 ? 'Online' : 'Offline', - }); - } - - 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(`${LOCAL_URL}/ocr-ktp/table-transactions?search=${search}&sortColumn=${sortColumn}&sortOrder=${sortOrder}`, { + 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); + } }; + 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); + } + }; - // Set the generated transaction data + // Fetch data when component mounts and when currentPage changes useEffect(() => { - setTransactionData(generateDummyData(3113)); // count data dummy transactions - }, []); + fetchTransactionData(currentPage, dataPerPage, searchTerm, sortColumn, sortOrder); + fetchPaginationData(currentPage, dataPerPage); + }, [currentPage, searchTerm, sortColumn, sortOrder]); // Sorting function const sortData = (data, config) => { @@ -177,8 +205,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); @@ -258,11 +292,12 @@ const Transaction = () => { {/* Search Bar with Icon */} -
+
{/* FontAwesome search icon */} @@ -273,93 +308,90 @@ const Transaction = () => { {/* Table */}
- - - - {/* Kolom untuk Nomor Urut */} - - - - - - - - +
No. - - - - - - - - - - - -
+ + + + + + + + + + - - {paginatedData.length > 0 ? ( - paginatedData.map((transaction, index) => ( - - {/* Kolom Nomor Urut */} - {/* Nomor urut berdasarkan halaman dan index */} - - - - - - - - )) - ) : ( - - - - )} - -
+ + + + + + + + + + + +
{(currentPage - 1) * dataPerPage + index + 1}{transaction.transactionId}{transaction.applicationName}{transaction.createdAt}{transaction.referenceId}{transaction.status}{transaction.mode}
-
- No Data Available -

Data not available

-
-
+ + {paginatedData.length > 0 ? ( + paginatedData.map((transaction, index) => ( + + {transaction.transaction_id} + {transaction.app_name} + {transaction.service_name} + {new Date(transaction.created_at).toLocaleString()} + {transaction.mode_name} + {transaction.status_name} + + )) + ) : ( + + +
+ No Data Available +

Data not available

+
+ + + )} + +
{/* Pagination */} @@ -397,4 +429,3 @@ const styles = { marginLeft: '0.7rem', // Adjust as needed }, }; -