const handleOnInputChange = (reason?: string, id?: string | null) => {
if (!id) {
setPreviewUrl(null);
setValue("type", 2);
reset({ type: 2 });
if (feeType === FeeType.sameFees) {
const editCourtValueReset: FormProps = {
...getAllValues,
name: "",
gameId: "",
courtId: "",
midNight: "",
morning: "",
evening: "",
night: "",
image: "",
};
// setValue("midNight", "");
// setValue("morning", "");
// setValue("evening", "");
// setValue("night", "");
// setValue("courtId", "");
reset(editCourtValueReset);
} else {
setValue("type", 2);
const dayWiseValues = {
...getAllValues,
name: "",
// gameId: "",
// courtId: "",
midNight: "",
morning: "",
evening: "",
night: "",
image: "",
// fees: DAYWISE_FEE,
type: 2,
};
setFeeType(2);
setDayWiseFeesData(DAYWISE_FEE);
reset(dayWiseValues);
}
}
};
/* 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}
/>
</>
);
};
import Box from "@mui/material/Box";
import { styled } from "@mui/material/styles";
import { images } from "constants/images";
import { Image } from "uiCore/image";
const StyledGridOverlay = styled("div")(({ theme }) => ({
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
height: "330px",
"& .ant-empty-img-1": {
fill: theme.palette.mode === "light" ? "#aeb8c2" : "#262626",
},
"& .ant-empty-img-2": {
fill: theme.palette.mode === "light" ? "#f5f5f7" : "#595959",
},
"& .ant-empty-img-3": {
fill: theme.palette.mode === "light" ? "#dce0e6" : "#434343",
},
"& .ant-empty-img-4": {
fill: theme.palette.mode === "light" ? "#fff" : "#1c1c1c",
},
"& .ant-empty-img-5": {
fillOpacity: theme.palette.mode === "light" ? "0.8" : "0.08",
fill: theme.palette.mode === "light" ? "#f5f5f5" : "#fff",
},
".noDataText": {
marginTop: "0.3rem",
paddingLeft: "0.1rem",
color: theme.palette.grey[400],
},
}));
export const NoData = () => {
return (
<StyledGridOverlay>
<Image src={images.noData} />
<Box className="noDataText">No Record Found</Box>
</StyledGridOverlay>
);
};
/* 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 [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
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}
/>
</>
);
};
export const images = {
confirmationImage: require("assets/images/confirmation/confirmation.gif"),
excelIcon: require("assets/images/excel/excelIcon.png"),
error: require("assets/images/error/error.png"),
emptyImage: require("assets/images/emptyImage/emptyImage.png"),
success: require("assets/icons/success.png"),
inProgress: require("assets/icons/inProgress.gif"),
fail: require("assets/icons/fail.png"),
totalEarning: require("assets/icons/totalEarning.png"),
totalAmount: require("assets/icons/Paid.svg"),
wallet: require("assets/icons/Wallet.svg"),
booking: require("assets/icons/Bookings.svg"),
totalBooking: require("assets/icons/totalBooking.png"),
totalPaid: require("assets/icons/totalPaid.png"),
lastPayout: require("assets/icons/lastPayout.png"),
lastPayoutTime: require("assets/icons/lastPayoutTime.png"),
noImage: require("assets/images/emptyImage/initialImage.jpg"),
uploadImage: require("assets/icons/upload.png"),
download: require("assets/icons/download.svg"),
filter: require("assets/icons/Filter.svg"),
};
Save snippets that work with our extensions
