import React, { useMemo, useState } from "react";
import "../Bonus/bonus.css";
import LoadingAnimation from "../Loading/LoadingAnimation";
import { useGetBonusList } from "../../../apis/Bonus";
import EmptyData from "../../../component/EmptyData/EmptyData";
/**
*
* Represents a page for company bonus information in list view
* @module BonusList
* @returns {JSX.Element} Returns a JSS element that displays company bonus information
*/
const BonusList = () => {
/**
* React state for storing filter dropdown status
* @name filterDropdown
* @type {boolean}
* @default {false}
* @memberof module:BonusList
*/
const [filterDropdown, setFilterDropdown] = useState(false);
/**
* React state for storing search input
* @name searchInput
* @type {string}
* @default {''}
* @memberof module:BonusList
*/
const [searchInput, setSearchInput] = useState("");
/**
* React state for storing sort by
* @name sortBy
* @type {string}
* @default {''}
* @memberof module:BonusList
*/
const [sortBy, setSortBy] = useState("");
/**
* React query hook for getting bonus list
* @name useGetBonusList
* @memberof module:BonusList
*/
const { data: bonusData, isLoading: bonusLoading } = useGetBonusList();
/**
* React memoized value for getting bonus list
* @type {Array.<object>}
* @default {[]}
* @memberof module:BonusList
*/
const getBonusList = useMemo(() => {
const temp = bonusData?.data?.data?.results || [];
if (searchInput) {
const filteredList = temp.filter((contract) =>
contract.name.toLowerCase().includes(searchInput.toLowerCase())
);
return filteredList.reverse();
}
switch (sortBy) {
case "AZ":
return [...temp].sort((a, b) => a.company.localeCompare(b.company));
case "ZA":
return [...temp]
.sort((a, b) => a.company.localeCompare(b.company))
.reverse();
case "OLD":
return [...temp].reverse();
case "RECENT":
return temp;
}
return temp;
}, [bonusData?.data, searchInput, sortBy]);
if (bonusLoading) {
return <LoadingAnimation />;
}
return (
<div className="bonus_container">
<h1 className="font-[600] text-xl ">Bonus</h1>
<div className="bonus_heading flex justify-end">
<div className="bonus_search">
<div className="left_bonus_search">
<div className="search_input">
<input
type="text"
placeholder="Search"
onChange={(e) => setSearchInput(e.target.value)}
/>
</div>
<div className="left_bonus_search">
<ion-icon name="search"></ion-icon>
</div>
</div>
<div className="right_bonus_search">
<div
className="bonus_filter_div"
onClick={() => {
setFilterDropdown(!filterDropdown);
}}
>
<p>Sort by</p>
{filterDropdown ? (
<ion-icon name="chevron-up-outline"></ion-icon>
) : (
<ion-icon name="chevron-down-outline"></ion-icon>
)}
{filterDropdown && (
<div className="bonus_filter_dropdown">
<p onClick={() => setSortBy("AZ")}>A - Z</p>
<p onClick={() => setSortBy("ZA")}>Z - A</p>
<p onClick={() => setSortBy("RECENT")}>Recent</p>
<p onClick={() => setSortBy("OLD")}>Oldest</p>
</div>
)}
</div>
</div>
</div>
</div>
<div className="navigation_for_mobile">
<div className="left_mobile_navigation">
<input
type="text"
placeholder="search"
onChange={(e) => setSearchInput(e.target.value)}
/>
<ion-icon name="search-outline"></ion-icon>
</div>
<div className="right_mobile_navigation">
<ul>
<li>
<ion-icon name="options"></ion-icon>
</li>
</ul>
</div>
</div>
<div className="share_history_body">
<div className="share_contract_for_desktop">
<table>
<thead>
<tr>
<th>Company</th>
<th>Total Bonus</th>
<th>Total Dividend</th>
{/* <th>Serial Number From</th>
<th>Serial Number To</th> */}
<th>Bonus in percentage</th>
<th>Dividend in percentage</th>
<th>Fiscal Year</th>
</tr>
</thead>
<tbody>
{!getBonusList.length ? (
<EmptyData />
) : (
getBonusList.map((bonus, i) => {
return (
<tr key={i}>
<td>{bonus?.company}</td>
<td>{bonus?.total_bonus}</td>
<td>{bonus?.total_dividend}</td>
{/* <td>{bonus?.serial_number_form}</td>
<td>{bonus?.serial_number_to}</td> */}
<td>{bonus?.bonus_name?.bonus_in_percentage} %</td>
<td>{bonus?.bonus_name?.dividend_in_percentage} %</td>
<td>{bonus?.fiscal_year}</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
<div className="share_fontract_for_mobile">
{!getBonusList.length ? (
<EmptyData />
) : (
getBonusList.map((bonus, i) => {
return (
<div className="share_fontract_for_mobile_left_col" key={i}>
<div className="share_fontract_for_mobile_left_col_col">
<p>Company</p>
<p>{bonus?.company}</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Total Bonus</p>
<p>{bonus?.total_bonus}</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Total Dividend</p>
<p>{bonus?.total_dividend}</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Bonus in percentage</p>
<p>{bonus?.bonus_name?.bonus_in_percentage} %</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Dividend in percentage</p>
<p>{bonus?.bonus_name?.dividend_in_percentage} %</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Fiscal Year</p>
<p>{bonus?.fiscal_year}</p>
</div>
</div>
);
})
)}
</div>
</div>
</div>
);
};
export default BonusList;
Source