Improve code

package-lock.json

@@ -21,6 +21,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-drag-drop-files": "^2.4.0",
+        "react-icons": "^5.3.0",
         "react-router-dom": "^6.28.0",
         "react-scripts": "^5.0.1",
         "react-select": "^5.8.2",
@@ -13472,6 +13473,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -16,6 +16,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-drag-drop-files": "^2.4.0",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.28.0",
     "react-scripts": "^5.0.1",
     "react-select": "^5.8.2",

src/screens/Biometric/FaceRecognition/Section/Enroll.jsx

@@ -14,6 +14,7 @@ const Enroll = () => {
 
     const [errorMessage, setErrorMessage] = useState('');
     const [selectedImageName, setSelectedImageName] = useState('');
+    const [resultImageLabel, setresultImageLabel] = useState("");
     const fileInputRef = useRef(null);
     const [showResult, setShowResult] = useState(false);
     const [applicationId, setApplicationId] = useState('');
@@ -102,7 +103,7 @@ const Enroll = () => {
     const fetchSubjectIds = async (appId) => {
         setIsLoading(true);
         try {
-            const response = await fetch(`${BASE_URL}/trx_face/list/subject?application_id=${appId}&search=${subjectId}&limit=10`, {
+            const response = await fetch(`${BASE_URL}/trx_face/list/subject?application_id=${appId}&search=${subjectId}&limit=99`, {
                 method: 'GET',
                 headers: {
                     'accept': 'application/json',
@@ -153,7 +154,7 @@ const Enroll = () => {
     };
 
     const handleEnrollClick = async () => {
-        let hasError = false; // Track if there are any errors
+        let hasError = false;
 
         // Validate inputs and set corresponding errors
         const validationErrors = {
@@ -219,9 +220,8 @@ const Enroll = () => {
             if (!response.ok) {
                 const errorDetails = await response.json();
                 console.error('Response error details:', errorDetails);
-                // Periksa jika detail error terkait dengan Subject ID
                 if (errorDetails.detail && errorDetails.detail.includes('Subject ID')) {
-                    setSubjectError(errorDetails.detail); // Tampilkan error di bawah input Subject ID
+                    setSubjectError(errorDetails.detail);
                 } else {
                     setErrorMessage(errorDetails.detail || 'Failed to enroll, please try again');
                 }
@@ -235,6 +235,9 @@ const Enroll = () => {
                 const imageFileName = result.details.data.image_url.split('/').pop();
                 console.log('Image URL:', result.details.data.image_url);
                 await fetchImage(imageFileName);
+
+                // Set resultImageLabel after successful enrollment
+                setresultImageLabel(selectedImageName);  // Set resultImageLabel after success
             } else {
                 console.error('Image URL not found in response:', result);
                 setErrorMessage('Image URL not found in response. Please try again.');
@@ -251,7 +254,6 @@ const Enroll = () => {
     };
 
     const fetchImage = async (imageFileName) => {
-
         setIsLoading(true);
         try {
             const response = await fetch(`${BASE_URL}/preview/image/${imageFileName}`, {
@@ -269,15 +271,11 @@ const Enroll = () => {
                 return;
             }
 
-            
             const imageBlob = await response.blob();
             const imageData = URL.createObjectURL(imageBlob);
             console.log('Fetched image URL:', imageData);
 
-            
-            
             setImageUrl(imageData);
-    
         } catch (error) {
             console.error('Error fetching image:', error);
             setErrorMessage(error.message);
@@ -772,7 +770,7 @@ const Enroll = () => {
                                 style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
                             />
                             <p style={isMobile ? { ...styles.imageDetails, fontSize: '14px' } : styles.imageDetails}>
-                                {selectedImageName}
+                                {resultImageLabel}  {/* Display resultImageLabel instead of selectedImageName */}
                             </p>
                         </div>
                     </div>
@@ -782,6 +780,7 @@ const Enroll = () => {
     );
     
 }
+
 export default Enroll;
 
 

src/screens/Biometric/FaceRecognition/Section/Verify.jsx

@@ -1,6 +1,6 @@
 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 { faChevronDown, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FileUploader } from 'react-drag-drop-files';
 import Select from 'react-select'
 
@@ -11,13 +11,13 @@ const Verify = () => {
   const fileTypes = ["JPG", "JPEG", "PNG"];
   const [file, setFile] = useState(null);
 
-  const [isSelectOpen, setIsSelectOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const [uploadError, setUploadError] = useState('');
   const [applicationError, setApplicationError] = useState('');
   const [subjectError, setSubjectError] = useState('');
   const [thresholdError, setThresholdError] = useState('');
   const [selectedImageName, setSelectedImageName] = useState('');
+  const [resultImageLabel, setResultImageLabel] = useState('');
   const fileInputRef = useRef(null);
   const [showResult, setShowResult] = useState(false);
   const [applicationId, setApplicationId] = useState('');
@@ -39,16 +39,20 @@ const Verify = () => {
     { id: 3, name: 'euclidean_l2', displayName: 'High' },
   ];
 
-  const options = subjectIds.map(id => ({ value: id, label: id }));
   const [inputValue, setInputValue] = useState('');
+
+  const options = subjectIds.map(id => ({ 
+    value: id, 
+    label: id 
+  }));
+
   const applicationOptions = applicationIds.map(app => ({
     value: app.id,
     label: app.name
   }));
-  useEffect(() => {
+
   const fetchApplicationIds = async () => {
     try {
-        setIsLoading(true);
       const url = `${BASE_URL}/application/list`;
       const response = await fetch(url, {
         method: 'GET',
@@ -58,32 +62,64 @@ const Verify = () => {
         },
       });
       const data = await response.json();
-
+      return data.details.data; // assuming the API returns an array of applications
-        if (data.status_code === 200) {
-          setApplicationIds(data.details.data);
-        } else {
-          console.error('Failed to fetch data:', data.details.message);
-        }
     } catch (error) {
       console.error('Error fetching application IDs:', error);
-      } finally {
+      return [];
-        setIsLoading(false);
     }
   };
   
-    fetchApplicationIds();
+  // Sample function to fetch Subject IDs based on applicationId
+  const fetchSubjectIds = async (appId) => {
+    try {
+      const response = await fetch(`${BASE_URL}/trx_face/list/subject?application_id=${appId}&limit=99`, {
+        method: 'GET',
+        headers: {
+          'accept': 'application/json',
+          'x-api-key': `${API_KEY}`,
+        },
+      });
+      const data = await response.json();
+      return data.details.data; // assuming the API returns an array of subjects
+    } catch (error) {
+      console.error('Error fetching subject IDs:', error);
+      return [];
+    }
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      const data = await fetchApplicationIds();
+      setApplicationIds(data);
+      setIsLoading(false);
+    };
+
+    fetchData();
 
     const handleResize = () => setIsMobile(window.innerWidth <= 768);
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
-  }, []);
+  }, []); // Empty dependency array, so this runs only once when the component mounts
 
-  const handleApplicationChange = async (selectedOption) => {
+  // Fetch Subject IDs when applicationId changes
-      if (!selectedOption) {
+  useEffect(() => {
-          console.error("Selected option is undefined");
+    const fetchSubjects = async () => {
-          return;
+      if (applicationId) {
+        setIsLoading(true);
+        const subjects = await fetchSubjectIds(applicationId);
+        setSubjectIds(subjects);
+        setIsLoading(false);
+      } else {
+        setSubjectIds([]); // Clear subjects if no applicationId is selected
       }
+    };
 
+    fetchSubjects();
+  }, [applicationId]); // Runs whenever applicationId changes
+
+  // Handler for changing applicationId
+  const handleApplicationChange = (selectedOption) => {
     const selectedId = selectedOption.value;
     const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
 
@@ -91,51 +127,17 @@ const Verify = () => {
       setSelectedQuota(selectedApp.quota);
     } 
 
-      setApplicationId(selectedId);
+    setApplicationId(selectedOption.value); // Update applicationId when user selects a new option
-
-      if (selectedId) {
-          await fetchSubjectIds(selectedId);
-      } else {
-          setSubjectIds([]);
-          setSubjectAvailabilityMessage('');
-      }
   };
 
 
-  const fetchSubjectIds = async (appId) => {
-    setIsLoading(true);
-    try {
-        const response = await fetch(`${BASE_URL}/trx_face/list/subject?application_id=${appId}&search=${subjectId}&limit=99`, {
-            method: 'GET',
-            headers: {
-                'accept': 'application/json',
-                'x-api-key': API_KEY,
-            },
-        });
-
-        const data = await response.json();
-        console.log("Fetched Subject IDs:", data); // Log data fetched from API
-
-        if (data.status_code === 200) {
-            setSubjectIds(data.details.data);
-        } else {
-            console.error('Failed to fetch subject IDs:', data.details.message);
-        }
-    } catch (error) {
-        console.error('Error fetching subject IDs:', error);
-    } finally {
-        setIsLoading(false);
-    }
-  };
-
   const handleImageUpload = (file) => {
-    // Ensure the file is not undefined or null before accessing its properties
     if (file && file.name) {
         const fileExtension = file.name.split('.').pop().toUpperCase();
         if (fileTypes.includes(fileExtension)) {
             setSelectedImageName(file.name);
             setFile(file);
-            setUploadError(''); // Clear any previous errors
+            setUploadError('');
         } else {
             alert('Image format is not supported');
             setUploadError('Image format is not supported');
@@ -165,23 +167,26 @@ const Verify = () => {
 
     let hasError = false; // Track if any errors occur
 
+    // Validate the applicationId
     if (!applicationId) {
         setApplicationError('Please select an Application ID before enrolling.');
         hasError = true; // Mark that an error occurred
     }
 
+    // Validate the subjectId
     if (!subjectId) {
         setSubjectError('Please enter a Subject ID before enrolling.');
         hasError = true; // Mark that an error occurred
     }
 
+    // Validate thresholdId
     const selectedThreshold = thresholdIds.find(threshold => threshold.name === thresholdId)?.name;
-
     if (!selectedThreshold) {
         setThresholdError('Invalid threshold selected.');
         hasError = true; // Mark that an error occurred
     }
 
+    // Validate image upload
     if (!selectedImageName) {
         setUploadError('Please upload a face photo before verifying.');
         hasError = true; // Mark that an error occurred
@@ -192,18 +197,18 @@ const Verify = () => {
         return;
     }
 
-    // Log the input values
+    // Log the input values for debugging
     console.log('Selected Image Name:', selectedImageName);
     console.log('Application ID:', applicationId);
     console.log('Subject ID:', subjectId);
     console.log('Selected Threshold:', selectedThreshold);
 
+    // Prepare FormData for the API request
     const formData = new FormData();
     formData.append('application_id', applicationId);
     formData.append('threshold', selectedThreshold);
     formData.append('subject_id', subjectId);
 
-    // const file = fileInputRef.current.files[0];
     if (file) {
         formData.append('file', file, file.name);
     } else {
@@ -218,7 +223,7 @@ const Verify = () => {
             method: 'POST',
             headers: {
                 'accept': 'application/json',
-                'x-api-key': `${API_KEY}`,
+                'x-api-key': API_KEY,
             },
             body: formData,
         });
@@ -233,6 +238,7 @@ const Verify = () => {
 
             setShowResult(true);
             setVerified(data.details.data.result.verified);
+            setResultImageLabel(selectedImageName);
         } else {
             const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.';
             setErrorMessage(errorMessage);
@@ -245,7 +251,6 @@ const Verify = () => {
     }
   };
 
-
   const fetchImage = async (imageFileName) => {
     setIsLoading(true);
     try {
@@ -611,7 +616,6 @@ const Verify = () => {
       {/* Application ID Selection */}
       <div className="form-group row align-items-center">
         <div className="col-md-6">
-          <div className="select-wrapper">
           <Select
               id="applicationId"
               value={applicationOptions.find(option => option.value === applicationId)}
@@ -619,15 +623,13 @@ const Verify = () => {
               options={applicationOptions}
               placeholder="Select Application ID"
               isSearchable
-              menuPortalTarget={document.body} // Use this for scroll behavior
+              menuPortalTarget={document.body}
               menuPlacement="auto"
               inputValue={inputValueApplication}
               onInputChange={handleInputChangeApplication} // Limit input length for Application ID
             />
         </div>
-          {applicationError && <small style={styles.uploadError}>{applicationError}</small>}
+        {applicationError && <small style={{color: 'red'}}>{applicationError}</small>}
-        </div>
-
         <div className="col-md-6">
             <p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', margin: '0', marginTop: '8px' }}>
                 Remaining Quota
@@ -644,22 +646,17 @@ const Verify = () => {
         <div className="col-md-6">
             <Select
               id="subjectId"
-          options={options}
               value={options.find(option => option.value === subjectId)}
-          onChange={selectedOption => setSubjectId(selectedOption ? selectedOption.value : '')}
+              onChange={(selectedOption) => setSubjectId(selectedOption ? selectedOption.value : '')}
-          onInputChange={(value) => {
+              options={options}
-            if (value.length <= 15) {
+              inputValue={inputValue}
-              setInputValue(value); // Set the input value if within limit
+              onInputChange={(newInputValue) => {
+                  if (newInputValue.length <= 15) {  // Limit the input length
+                      setInputValue(newInputValue);
                   }
               }}
-          onFocus={() => fetchSubjectIds(applicationId)} // Fetch subject IDs on focus
-          placeholder="Enter Subject ID"
-          isClearable
-          noOptionsMessage={() => (
-            <div style={{ color: 'red' }}>Subject ID not registered.</div>
-          )}
-          inputValue={inputValue}  // Bind the inputValue state to control the input
             />
+
             {subjectError && <small style={{ color: 'red' }}>{subjectError}</small>}
             {subjectAvailabilityMessage && (
                 <small style={{ color: subjectAvailabilityMessage.includes('available') ? 'green' : 'red' }}>
@@ -746,6 +743,7 @@ const Verify = () => {
         </button>
       </div>
 
+
       {/* Results Section */}
       {showResult && (
         <div style={styles.containerResultStyle}>
@@ -769,7 +767,7 @@ const Verify = () => {
                 style={styles.imageStyle}
               />
               <p style={{ marginTop: '10px' }}>
-              File Name: {selectedImageName}
+                File Name: {resultImageLabel} {/* Display the resultImageLabel here */}
               </p>
             </div>
           </div>

src/screens/Biometric/FaceRecognition/Transaction.jsx

@@ -1,11 +1,443 @@
-import React from 'react'
+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 Transaction = () => {
+// Pagination Component
-  return (
+const Pagination = ({ currentPage, totalPages, onPageChange }) => {
-    <div>
+  const handlePrev = () => {
-      <h1>Transaction Logs</h1>
+      if (currentPage > 1) {
-    </div>
+          onPageChange(currentPage - 1);
-  )
+      }
+  };
+
+  const handleNext = () => {
+      if (currentPage < totalPages) {
+          onPageChange(currentPage + 1);
+      }
+  };
+
+  const handleFirst = () => {
+      onPageChange(1); // Go to first page
+  };
+
+  const handleLast = () => {
+      onPageChange(totalPages); // Go to last page
+  };
+
+  // Logic to display only 3 pages in pagination
+  const getPaginationRange = () => {
+      const range = [];
+      const totalPagesCount = totalPages;
+
+      let start = currentPage - 1;
+      let end = currentPage + 1;
+
+      // Adjust start and end if near the boundaries
+      if (currentPage === 1) {
+          start = 1;
+          end = Math.min(3, totalPagesCount);
+      } else if (currentPage === totalPages) {
+          start = Math.max(totalPagesCount - 2, 1);
+          end = totalPagesCount;
       }
 
-export default Transaction
+      for (let i = start; i <= end; i++) {
+          range.push(i);
+      }
+
+      return range;
+  };
+
+  const pageRange = getPaginationRange();
+
+  return (
+      <div className="pagination-container d-flex justify-content-end mt-4">
+          {/* First Page Button */}
+          <button
+              className="btn"
+              onClick={handleFirst}
+              disabled={currentPage === 1}
+          >
+              <FaFastBackward /> {/* Double Arrow Left */}
+          </button>
+
+          <button
+              className="btn"
+              onClick={handlePrev}
+              disabled={currentPage === 1}
+          >
+              <FaChevronLeft /> {/* Single Arrow Left */}
+          </button>
+
+          {/* Page Numbers */}
+          {pageRange.map((pageNum) => (
+              <button
+                  key={pageNum}
+                  className={`btn ${pageNum === currentPage ? 'btn-primary' : ''}`}
+                  onClick={() => onPageChange(pageNum)}
+              >
+                  {pageNum}
+              </button>
+          ))}
+
+          <button
+              className="btn"
+              onClick={handleNext}
+              disabled={currentPage === totalPages}
+          >
+              <FaChevronRight /> {/* Single Arrow Right */}
+          </button>
+
+          {/* Last Page Button */}
+          <button
+              className="btn"
+              onClick={handleLast}
+              disabled={currentPage === totalPages}
+          >
+              <FaFastForward /> {/* Double Arrow Right */}
+          </button>
+      </div>
+  );
+};
+
+const Transaction = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [isMobile, setIsMobile] = useState(false); // State to detect mobile view
+    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 buttonData = [
+      { label: 'Copy', enabled: true },
+      { label: 'CSV', enabled: true },
+      { label: 'Excel', enabled: true },
+      { label: 'PDF', enabled: true },
+      { 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;
+    };
+
+    // Set the generated transaction data
+    useEffect(() => {
+        setTransactionData(generateDummyData(97513)); // count data dummy transactions
+    }, []);
+
+    // Sorting function
+    const sortData = (data, config) => {
+      const { key, direction } = config;
+      return [...data].sort((a, b) => {
+          if (a[key] < b[key]) {
+              return direction === 'asc' ? -1 : 1;
+          }
+          if (a[key] > b[key]) {
+              return direction === 'asc' ? 1 : -1;
+          }
+          return 0;
+      });
+    };
+
+    // Handle column header sort click
+    const handleSort = (key) => {
+        let direction = 'asc';
+        if (sortConfig.key === key && sortConfig.direction === 'asc') {
+            direction = 'desc'; // Toggle direction if the same column is clicked
+        }
+        setSortConfig({ key, direction });
+    };
+
+    // Get the paginated data
+    const getPaginatedData = (data, page, perPage) => {
+        const sortedData = sortData(data, sortConfig);
+        const startIndex = (page - 1) * perPage;
+        const endIndex = startIndex + perPage;
+        return sortedData.slice(startIndex, endIndex);
+    };
+
+    // Handle page change
+    const handlePageChange = (page) => {
+        setCurrentPage(page);
+    };
+
+    // Calculate total pages based on the data and data per page
+    const totalPages = Math.ceil(transactionData.length / dataPerPage);
+
+    // Paginated data
+    const paginatedData = getPaginatedData(transactionData, currentPage, dataPerPage);
+
+    // Detect screen size and update isMobile state
+    useEffect(() => {
+        const handleResize = () => {
+            setIsMobile(window.innerWidth <= 768); // Change 768 to your breakpoint
+        };
+
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return (
+        <div className="container mt-5">
+            {/* Welcome Message */}
+            <div className="row-card border-left border-primary shadow mb-4" style={{ backgroundColor: '#E2FBEA' }}>
+                <div className="d-flex flex-column justify-content-start align-items-start p-4">
+                    <div>
+                        <h4 className="mb-3 text-start">
+                            <i className="fas fa-warning fa-bold me-3"></i>Alert
+                        </h4>
+                        <p className="mb-0 text-start">
+                            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.
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div style={styles.contentContainer}>
+                {/* Filter Form */}
+                <div className="card p-3 mb-4">
+                    <div className="row">
+                        <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+                            <label>Start Date</label>
+                            <input type="date" className="form-control" />
+                        </div>
+                        <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+                            <label>End Date</label>
+                            <input type="date" className="form-control" />
+                        </div>
+                        <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+                            <label>Application</label>
+                            <select className="form-control">
+                                <option>Select Application</option>
+                                <option>App 1</option>
+                                <option>App 2</option>
+                                <option>App 3</option>
+                                <option>App 4</option>
+                                <option>App 5</option>
+                            </select>
+                        </div>
+                        <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+                            <label>End Point</label>
+                            <select className="form-control">
+                                <option>Select End Point</option>
+                                <option>Endpoint 1</option>
+                                <option>Endpoint 2</option>
+                                <option>Endpoint 3</option>
+                                <option>Endpoint 4</option>
+                                <option>Endpoint 5</option>
+                            </select>
+                        </div>
+                        <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+                            <label>Service Charged</label>
+                            <select className="form-control">
+                                <option>Select Service</option>
+                                <option>$5 - $20</option>
+                                <option>$20 - $40</option>
+                                <option>$40 - $60</option>
+                            </select>
+                        </div>
+                        <div className={`col-12 ${isMobile ? 'd-flex justify-content-between' : 'col-md-2 d-flex align-items-end'}`} style={{ gap: '10px' }}>
+                            <button className="btn btn-primary w-48">Apply</button>
+                            <button className="btn btn-secondary w-48">Cancel</button>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="d-flex justify-content-between align-items-center mb-3">
+                    <div>
+                        {buttonData.map((button, index) =>
+                            button.enabled ? (
+                                <button
+                                    key={index}
+                                    className={`btn btn-light ${isMobile ? 'mb-2' : ''}`} // Add margin on mobile
+                                    style={styles.actionButton}
+                                >
+                                    {button.label}
+                                </button>
+                            ) : null
+                        )}
+                    </div>
+
+                    {/* Search Bar with Icon */}
+                    <div className="input-group" style={{ width: '250px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+                        <input
+                            type="text"
+                            placeholder="Search..."
+                            className="form-control"
+                        />
+                        <span className="input-group-text">
+                            <i className="fas fa-search"></i> {/* FontAwesome search icon */}
+                        </span>
+                    </div>
+                </div>
+
+
+                {/* Table */}
+                <div className="table-responsive">
+                    <table className="table table-bordered" style={styles.tableContainer}>
+                      <thead>
+                        <tr>
+                          <th>No.</th> {/* Kolom untuk Nomor Urut */}
+                          <th>
+                            <button className="btn" onClick={() => handleSort('transactionId')}>
+                              Transaction ID 
+                              {sortConfig.key === 'transactionId' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'transactionId' && <FaSort style={styles.iconMarginLeft} />}
+                            </button>
+                          </th>
+                          <th>
+                            <button className="btn" onClick={() => handleSort('applicationName')}>
+                              Application Name 
+                              {sortConfig.key === 'applicationName' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'applicationName' && <FaSort style={styles.iconMarginLeft} />}
+                            </button>
+                          </th>
+                          <th>
+                            <button className="btn" onClick={() => handleSort('dataSent')}>
+                              Data Sent 
+                              {sortConfig.key === 'dataSent' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'dataSent' && <FaSort style={styles.iconMarginLeft} />}
+                            </button>
+                          </th>
+                          <th>
+                            <button className="btn" onClick={() => handleSort('endPoint')}>
+                              End Point 
+                              {sortConfig.key === 'endPoint' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'endPoint' && <FaSort style={styles.iconMarginLeft} />}
+                            </button>
+                          </th>
+                          <th>
+                            <button className="btn" onClick={() => handleSort('subjectId')}>
+                              Subject ID 
+                              {sortConfig.key === 'subjectId' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'subjectId' && <FaSort style={styles.iconMarginLeft} />}
+                            </button>
+                          </th>
+                          <th>
+                            <button className="btn" onClick={() => handleSort('serviceCharged')}>
+                              Service Charged 
+                              {sortConfig.key === 'serviceCharged' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'serviceCharged' && <FaSort style={styles.iconMarginLeft} />}
+                            </button>
+                          </th>
+                          <th>
+                            <button className="btn" onClick={() => handleSort('mode')}>
+                              Mode 
+                              {sortConfig.key === 'mode' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'mode' && <FaSort style={styles.iconMarginLeft} />}
+                            </button>
+                          </th>
+                          <th>
+                            <button className="btn" onClick={() => handleSort('status')}>
+                              Status 
+                              {sortConfig.key === 'status' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'status' && <FaSort style={styles.iconMarginLeft} />}
+                            </button>
+                          </th>
+                        </tr>
+                      </thead>
+
+                      <tbody>
+                        {paginatedData.length > 0 ? (
+                            paginatedData.map((transaction, index) => (
+                              <tr key={index}>
+                                {/* Kolom Nomor Urut */}
+                                <td>{(currentPage - 1) * dataPerPage + index + 1}</td> {/* Nomor urut berdasarkan halaman dan index */}
+
+                                <td>{transaction.transactionId}</td>
+                                <td>{transaction.applicationName}</td>
+                                <td>{transaction.dataSent}</td>
+                                <td>{transaction.endPoint}</td>
+                                <td>{transaction.subjectId}</td>
+                                <td>{transaction.serviceCharged}</td>
+                                <td>{transaction.mode}</td>
+                                <td>{transaction.status}</td>
+                              </tr>
+                            ))
+                        ) : (
+                          <tr>
+                            <td colSpan="9" className="text-center">
+                              <div className="d-flex flex-column align-items-center mt-5">
+                                  <img src={NoAvailable} alt="No Data Available" className="mb-3" style={styles.iconStyle} />
+                                  <p>Data not available</p>
+                              </div>
+                            </td>
+                          </tr>
+                        )}
+                      </tbody>
+
+                    </table>
+                </div>
+
+                {/* Pagination */}
+                <Pagination
+                    currentPage={currentPage}
+                    totalPages={totalPages}
+                    onPageChange={handlePageChange}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Transaction;
+
+const styles = {
+  contentContainer: {
+      padding: '20px',
+      border: '0.1px solid rgba(0, 0, 0, 0.2)',
+      borderLeft: '4px solid #0542cc',
+      borderRadius: '10px',
+      width: '100%',
+  },
+  tableContainer: {
+      minHeight: '300px',
+      maxHeight: '1500px',
+      overflowY: 'auto',
+  },
+  iconStyle: {
+      width: '50px',
+      height: '50px',
+  },
+  // Add margin-left style for icons
+  iconMarginLeft: {
+      marginLeft: '0.7rem', // Adjust as needed
+  },
+};
+