124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
import React from "react";
|
|
import useTableColumns from "./useTableColumns";
|
|
import DashBody from "../../Layout/Dashboard/DashBody";
|
|
import DashHeader from "../../Layout/Dashboard/DashHeader";
|
|
import { QueryStatusEnum } from "../../config/QueryStatus";
|
|
import LyTable from "../../Layout/Dashboard/LyTable";
|
|
import { useGetOrder } from "../../api/order";
|
|
import SelectField from "./ui/CustomSelectField";
|
|
import { useGetCoupon } from "../../api/Coupon";
|
|
import SelectWSearchField from "./ui/CustomSelectWSearchField";
|
|
// import SearchField from "../../Components/ValidationField/View/SearchField";
|
|
import CustomDateRange from "./ui/CustomDateRange";
|
|
import { FaCheck, FaTimes, FaClock, FaBan } from 'react-icons/fa';
|
|
import { Button } from "antd";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import { useOrderFillterState } from "../../zustand/OrderFillter";
|
|
import CustomSearchField from "./ui/CustomSearchField";
|
|
import CustomNumber from "./ui/CustomNumber";
|
|
|
|
const OrderPage = () => {
|
|
|
|
const { data, status } = useGetOrder();
|
|
|
|
const totalRows = data?.pagination?.total || 0;
|
|
|
|
const columns = useTableColumns();
|
|
|
|
/// Coupon status Created from -> to Price from => to
|
|
const stateSelect = [
|
|
{ label: <div className='orderStatus_select'><FaClock /> Pending Approve</div>, value: "pending_approve" },
|
|
{ label: <div className='orderStatus_select'><FaCheck /> Approved</div>, value: "approved" },
|
|
{ label: <div className='orderStatus_select'><FaTimes /> Rejected</div>, value: "rejected" },
|
|
{ label: <div className='orderStatus_select'><FaBan /> Pending Cancellation</div>, value: "pending_cancellation" }
|
|
];
|
|
const { data:Coupon } = useGetCoupon()
|
|
|
|
|
|
const SelectData = Coupon?.coupons?.map((item:any)=>(
|
|
{
|
|
label : item?.name,
|
|
value : item?.id
|
|
}
|
|
))
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { username, coupon, state, fromDate, toDate, totalFrom, totalTo,reset } = useOrderFillterState();
|
|
|
|
|
|
const handleSubmit = () => {
|
|
let queryParams = [];
|
|
|
|
if (username !== null) {
|
|
queryParams.push(`username=${username}`);
|
|
}
|
|
if (coupon !== null) {
|
|
queryParams.push(`coupon=${coupon}`);
|
|
}
|
|
if (state !== null) {
|
|
queryParams.push(`state=${state}`);
|
|
}
|
|
if (fromDate !== null) {
|
|
queryParams.push(`fromDate=${fromDate}`);
|
|
}
|
|
if (toDate !== null) {
|
|
queryParams.push(`toDate=${toDate}`);
|
|
}
|
|
if (totalFrom !== null) {
|
|
queryParams.push(`totalFrom=${totalFrom}`);
|
|
}
|
|
if (totalTo !== null) {
|
|
queryParams.push(`totalTo=${totalTo}`);
|
|
}
|
|
|
|
const queryString = queryParams.join('&');
|
|
const newPathname = `${location.pathname}${queryString ? '?' : ''}${queryString}`;
|
|
|
|
navigate(newPathname);
|
|
};
|
|
|
|
|
|
const handelReset=()=>{
|
|
|
|
navigate(`${location.pathname}`);
|
|
reset()
|
|
|
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
<DashBody status={status as QueryStatusEnum} >
|
|
|
|
<DashHeader title="orders" showAddButton={false}>
|
|
<div className='FillterSection'>
|
|
<CustomSearchField searchBy={"username"} />
|
|
<SelectWSearchField selectBy="coupon" submiteBy="coupon_id" lebel="Coupon" option={SelectData} />
|
|
<SelectField selectBy="state" lebel="status" option={stateSelect} />
|
|
<CustomDateRange/>
|
|
<CustomNumber/>
|
|
<Button type="dashed" onClick={handelReset} >reset</Button>
|
|
<Button type="primary" onClick={handleSubmit} >submite</Button>
|
|
|
|
</div>
|
|
</DashHeader>
|
|
|
|
|
|
<LyTable
|
|
data={data?.Orders}
|
|
total={totalRows}
|
|
column={columns}
|
|
is_pagination={true}
|
|
|
|
|
|
/>
|
|
</DashBody>
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default OrderPage;
|