/* eslint-disable max-lines */
import { useDashboardData } from "api/hooks/dashboard/useDashboardData";
import { useEffect, useState } from "react";
import { isAdminSite } from "utils/appUtils";
import { getColumnTotal } from "utils/helper";
import { rowsPerPageOptions } from "constants/data";
import { SubHeading } from "constants/enums";
import { images } from "constants/images";
import { paymentHistoryColumns } from "pages/bookings/paymentHistoryTable";
import { Box, Card, Loader, IconButton, Image } from "uiCore";
import { DetailsCard } from "uiCore/detailsCard/DetailsCard";
import { excelDownload } from "../downloadList";
import { BookingFilter } from "../Filter";
import { PaymentDetailsDialog } from "../PaymentDetailsModel";
import { BookingTable } from "../Table";
import { useStyle } from "./style";
export interface FilterProps {
gameId?: string;
courtId?: string;
startDate?: string;
endDate?: string;
createdEndDate?: string;
createdStartDate?: string;
}
export interface Props {
isUpcomingBooking?: boolean;
}
export const ManageBookings = ({ isUpcomingBooking = false }: Props) => {
const [upcomingLimit, setUpcomingLimit] = useState(10);
const [bookingHistoryLimit, setBookingHistoryLimit] = useState(10);
const initialFilterData = {
page: 1,
limit: upcomingLimit,
gameId: "",
courtId: "",
startDate: "",
endDate: "",
createdEndDate: "",
createdStartDate: "",
isClear: false,
isUpcoming: isUpcomingBooking,
};
const [filterData, setFilterData] = useState(initialFilterData);
const [totalAmount, setTotalAmount] = useState(0);
const [filterOpen, setFilterOpen] = useState(false);
const classes = useStyle({ filterOpen });
const [queryData, setQueryData] = useState(filterData);
const [openPaymentDetailModal, setOpenPaymentDetailModal] = useState(false);
const [isFilterApplied, setIsFilterApplied] = useState(false);
const [selectedOrderId, setSelectedOrderId] = useState("");
const [selectedGameId, setSelectedGameId] = useState("");
const [selectedCourtId, setSelectedCourtId] = useState("");
const [isExcelDataLoading, setIsExcelDataLoading] = useState(false);
const { dashboardData, isDashboardLoading, isDashboardSuccess } =
useDashboardData(queryData);
useEffect(() => {
if (dashboardData?.data?.paymentLogs?.length) {
const amount = getColumnTotal(dashboardData.data.paymentLogs, "amount");
setTotalAmount(amount);
}
}, [dashboardData]);
useEffect(() => {
if (filterData.isClear) {
isFilterApplied && setQueryData({ ...filterData });
setFilterData({ ...filterData, isClear: false });
setIsFilterApplied(false);
}
}, [filterData]);
useEffect(() => {
setQueryData({
...initialFilterData,
limit: isUpcomingBooking ? upcomingLimit : bookingHistoryLimit,
isUpcoming: isUpcomingBooking,
});
setFilterData(initialFilterData);
}, [isUpcomingBooking]);
const handleFilter = () => {
setFilterOpen(!filterOpen);
};
const handleSetFilterData = (filterProps: FilterProps) => {
setFilterData((prev) => ({
...prev,
...filterProps,
}));
};
const handleFilterSubmit = () => {
let dateData = {};
if (filterData.startDate && !filterData.endDate) {
dateData = { endDate: filterData.startDate };
}
if (filterData.createdStartDate && !filterData.createdEndDate) {
dateData = { createdEndDate: filterData.createdStartDate };
}
setQueryData((prev) => ({
...prev,
...filterData,
isUpcoming: isUpcomingBooking,
...dateData,
}));
setFilterOpen(false);
setIsFilterApplied(true);
};
const handleFilterClear = () => {
setFilterData({
...initialFilterData,
isClear: true,
isUpcoming: isUpcomingBooking,
});
};
const handlePageChange = (newPage: number) => {
setQueryData({ ...queryData, page: newPage + 1 });
};
const handlePageSizeChange = (limit: number) => {
if (queryData.isUpcoming) {
setUpcomingLimit(limit);
} else {
setBookingHistoryLimit(limit);
}
setQueryData({ ...queryData, page: 1, limit });
};
const closePaymentDetailsDialog = () => {
setOpenPaymentDetailModal(false);
};
const handleExport = async () => {
const totalCount = isUpcomingBooking
? dashboardData?.data?.totalUpcomingBookings
: dashboardData?.data?.totalBooking;
if (totalCount && dashboardData?.data?.paymentLogs?.length) {
try {
await excelDownload({
totalCount,
queryData,
setIsExcelDataLoading,
});
} finally {
setIsExcelDataLoading(false);
}
}
};
const {
courtId,
createdEndDate,
createdStartDate,
endDate,
gameId,
startDate,
} = filterData;
const buttonDisable =
!gameId &&
!courtId &&
!startDate &&
!endDate &&
!createdStartDate &&
!createdEndDate;
return (
<>
<Box className={classes.topCardsGroup}>
{!isUpcomingBooking && (
<>
<DetailsCard
label={isAdminSite ? "Total Earnings" : "Total Paid"}
isLoading={isDashboardLoading}
data={dashboardData?.data?.totalEarning}
rupeesIcon
decimal={2}
icon={images.totalAmount.default}
/>
<DetailsCard
label="Total Bookings"
isLoading={isDashboardLoading}
data={dashboardData?.data?.totalBooking}
icon={images.booking.default}
isTotalBooking
/>
</>
)}
<DetailsCard
label="Total Amount"
isLoading={isDashboardLoading}
rupeesIcon
data={
dashboardData?.data?.paymentLogs.length > 0
? Number(totalAmount)
: 0
}
icon={images.totalAmount.default}
decimal={2}
/>
</Box>
<Card
title={
isUpcomingBooking
? SubHeading.upcomingBookings
: SubHeading.bookingHistory
}
headerActionClassName={classes.DashboardHeaderAction}
sx={{ boxShadow: 5 }}
action={
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<IconButton
onClick={handleExport}
id="export-image"
title="Export"
color="primary"
disabled={dashboardData?.data?.paymentLogs?.length === 0}
>
{isExcelDataLoading ? (
<Loader size={22} />
) : (
<Image src={images.download.default} />
)}
</IconButton>
{(dashboardData?.data?.paymentLogs?.length > 0 ||
!buttonDisable) && (
<IconButton onClick={handleFilter} color="primary" title="Filter">
<Image
src={images.filter.default}
className={classes.dashboardFilterIcon}
/>
</IconButton>
)}
</Box>
}
>
<Box className={classes.dashboardMain}>
<Box className={classes.dashboardCard}>
<Box className={classes.top}>
<Box className={classes.dashboardFilter}>
<Box className={classes.dashboardFilterIconMain}>
{filterOpen && (
<BookingFilter
selectedGameId={selectedGameId}
setSelectedGameId={setSelectedGameId}
selectedCourtId={selectedCourtId}
setSelectedCourtId={setSelectedCourtId}
gameId={filterData.gameId}
courtId={filterData.courtId}
endDate={filterData.endDate}
startDate={filterData.startDate}
createdEndDate={filterData.createdEndDate}
createdStartDate={filterData.createdStartDate}
handleFilterSubmit={handleFilterSubmit}
handleFilterClear={handleFilterClear}
handleSetFilterData={handleSetFilterData}
/>
)}
</Box>
</Box>
</Box>
<Box className={classes.bottom}>
<Box className={classes.tablesection}>
<BookingTable
rowData={dashboardData?.data?.paymentLogs}
columns={paymentHistoryColumns(
setOpenPaymentDetailModal,
setSelectedOrderId,
isUpcomingBooking
)}
page={queryData.page - 1}
rowCount={
queryData.isUpcoming
? dashboardData?.data?.totalUpcomingBookings
: dashboardData?.data?.totalBooking
}
pageSize={queryData.limit}
onPageSizeChange={handlePageSizeChange}
onPageChange={handlePageChange}
rowsPerPageOptions={rowsPerPageOptions}
loading={isDashboardLoading || !isDashboardSuccess}
/>
</Box>
</Box>
</Box>
</Box>
</Card>
<PaymentDetailsDialog
closePaymentDetailsDialog={closePaymentDetailsDialog}
openPaymentDetailModal={openPaymentDetailModal}
selectedOrderId={selectedOrderId}
/>
</>
);
};
Comments