Notes

import { Button } from "@qbe/ui-core";
import { useNavigate } from 'react-router-dom';
import { PolicyStatusBtn } from "../../../Components/PolicyStatusButton/PolicyStatusBtn";
import { useEffect, useState } from 'react';
import { useGetUserMutation } from "../../../Redux/Apis/userApi";
import { useGetPolicyMutation } from "../../../Redux/Apis/policyApi";
import { useGetPaymentMutation } from "../../../Redux/Apis/paymentApi";
import DropdownArrow from '../../../Assets/Icon/DropdownArrow.svg';
import "./DataTable.css";

export const DataTable = (props) => {
const { columns = [], activeTab } = props;
const [rows, setRows] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [lastPage, setLastPage] = useState(1);
const [sortOrder, setSortOrder] = useState(null); // State for sorting order

const navigate = useNavigate();
const [getUser] = useGetUserMutation();
const [getPolicy] = useGetPolicyMutation();
const [getPayment] = useGetPaymentMutation();

const fetchData = async () => {
let params = { pageSize, currentPage };
if (sortOrder) params.sortOrder = sortOrder; // Add sorting parameter to API call

switch (activeTab) {
case "Accounts":
const userData = await getUser(params).unwrap();
setRows(userData.users);
setLastPage(Math.ceil(userData.totalRows / pageSize));
break;
case "Policies":
const policyData = await getPolicy(params).unwrap();
setRows(policyData.policy);
setLastPage(Math.ceil(policyData.totalRows / pageSize));
break;
case "Payments":
const paymentData = await getPayment(params).unwrap();
setRows(paymentData.payments);
setLastPage(Math.ceil(paymentData.totalRows / pageSize));
break;
default:
break;
}
};

useEffect(() => {
fetchData();
}, [activeTab, currentPage, pageSize, sortOrder]); // Add sortOrder as a dependency

const handleSortOrderToggle = () => {
// Toggle between "ASC" and "DESC"
setSortOrder(prevOrder => (prevOrder === "ASC" ? "DESC" : "ASC"));
setCurrentPage(1); // Reset to first page when sorting
};

const handlePreviousPage = () => {
if (currentPage > 1) {
setCurrentPage(currentPage - 1);
}
};

const handleNextPage = () => {
if (currentPage < lastPage) {
setCurrentPage(currentPage + 1);
}
};

const handleLastPage = () => setCurrentPage(lastPage);
const handleFirstPage = () => setCurrentPage(1);
const handlePageSizeChange = (event) => setPageSize(event.target.value);

const renderAccountName = (row) => (
<td style={{ width: `${100 / columns.length}%` }} className="custom-td">
<a className="account-name-link">{row.firstName + ' ' + row.lastName}</a>
</td>
);

return (
<>
<div className="data-table-container">
<table className="table table-hover">
<thead className="thead">
<tr className="table-header-row">
{columns.map((column) => (
<th key={column.id} style={{ width: `${100 / columns.length}%` }} className="custom-thead">
<span>
{column.name}
</span>
{column.id === "account_name" && (
<img
src={DropdownArrow}
alt="Dropdown Arrow"
className="dropdown-arrow"
onClick={handleSortOrderToggle} // Toggle sort order on click
style={{ cursor: "pointer" }}
/>
)}
</th>
))}
</tr>
</thead>
<tbody>
{Array.isArray(rows) && rows.map((row) => (
<tr key={row.id}>
{columns.map(column => {
switch (column.id) {
case "account_name":
return renderAccountName(row);
// Add cases for other columns as needed
default:
return <td style={{ width: `${100 / columns.length}%` }} className="custom-td">{row[column.id]}</td>;
}
})}
</tr>
))}
</tbody>
</table>
</div>
<div className="datatable-pagination">
<div className="total-pages">
<p className="pagination-font-style">1-8 of 8</p>
<p className="ml-4 pagination-font-style">
Rows per page
<select value={pageSize} className="page-number" onChange={handlePageSizeChange}>
<option value={10}>10</option>
<option value={20}>20</option>
<option value={30}>30</option>
<option value={40}>40</option>
</select>
</p>
</div>
<div className="pagination-next-previous">
<button onClick={handleFirstPage}>First</button>
<button onClick={handlePreviousPage}>Previous</button>
<span className="active-page">{currentPage}</span>
<button onClick={handleNextPage}>Next</button>
<button onClick={handleLastPage}>Last</button>
</div>
</div>
</>
);
};