hamid zarghami
121 lines
4.1 KiB
TypeScript
121 lines
4.1 KiB
TypeScript
import { Add, Eye } from "iconsax-react";
|
||
import { FC, useState } from "react";
|
||
import { useTranslation } from "react-i18next";
|
||
import { Link } from "react-router-dom";
|
||
import Button from "../../components/Button";
|
||
import Input from "../../components/Input";
|
||
import PageLoading from "../../components/PageLoading";
|
||
import Pagination from "../../components/Pagination";
|
||
import Td from "../../components/Td";
|
||
import { Pages } from "../../config/Pages";
|
||
import { useGetCustomers } from "./hooks/useCustomerData";
|
||
import { CustomerItemType } from "./types/CustomerTypes";
|
||
|
||
const CustomerList: FC = () => {
|
||
const { t } = useTranslation("global");
|
||
const [page, setPage] = useState(1);
|
||
const [limit, setLimit] = useState(10);
|
||
const [search, setSearch] = useState("");
|
||
const getCustomers = useGetCustomers(page, limit, false, search);
|
||
|
||
const handleSearch = (value: string) => {
|
||
setPage(1);
|
||
setSearch(value);
|
||
};
|
||
|
||
return (
|
||
<div className="mt-4">
|
||
<div className="flex w-full justify-between items-center">
|
||
<div>{t("customer.customer_list")}</div>
|
||
<Link to={Pages.customer.create}>
|
||
<Button className="px-5">
|
||
<div className="flex gap-2">
|
||
<Add
|
||
className="size-5"
|
||
color="#fff"
|
||
/>
|
||
<div>{t("customer.add_cutomer")}</div>
|
||
</div>
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="flex justify-end items-center mt-12">
|
||
<div>
|
||
<Input
|
||
variant="search"
|
||
placeholder={t("search")}
|
||
className="bg-white border border-border"
|
||
onChangeSearchFinal={handleSearch}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{getCustomers.isPending ? (
|
||
<PageLoading />
|
||
) : (
|
||
<div className="relative overflow-x-auto rounded-3xl mt-9 w-full">
|
||
<table className="w-full text-sm ">
|
||
<thead className="thead">
|
||
<tr>
|
||
<Td text={t("customer.name")} />
|
||
<Td text={t("customer.company")} />
|
||
<Td text={t("customer.email")} />
|
||
<Td text={t("customer.active_services")} />
|
||
<Td text={t("customer.factor")} />
|
||
<Td text={t("customer.tickets")} />
|
||
<Td text={t("customer.detail")} />
|
||
<Td text={""} />
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
|
||
return (
|
||
<tr
|
||
key={item.id}
|
||
className="tr"
|
||
>
|
||
<Td text={item.firstName + " " + item.lastName} />
|
||
<Td text={item?.legalUser?.registrationName} />
|
||
<Td text={item.email ? item.email : ""} />
|
||
<Td text={item.subscriptionsCount} />
|
||
<Td text={""}>
|
||
<Link to={Pages.receipts.index + `?user=${item.id}`}>
|
||
<div className="text-[#0047FF]">{item.invoicesCount} صورت حساب</div>
|
||
</Link>
|
||
</Td>
|
||
<Td text={""}>
|
||
<Link to={Pages.ticket.list + `?user=${item.id}`}>
|
||
<div className="text-[#0047FF]">{item.ticketsCount} تیکت</div>
|
||
</Link>
|
||
</Td>
|
||
<Td text={""}>
|
||
<Link to={Pages.customer.update + item.id}>
|
||
<Eye
|
||
size={20}
|
||
color="#8C90A3"
|
||
/>
|
||
</Link>
|
||
</Td>
|
||
<Td text={""} />
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
|
||
<Pagination
|
||
totalPages={getCustomers.data?.data?.pager?.totalPages}
|
||
currentPage={page}
|
||
onPageChange={setPage}
|
||
limit={limit}
|
||
onLimitChange={setLimit}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default CustomerList;
|