styledgid

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"),
};

/* 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}
      />
    </>
  );
};

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 [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}
      />
    </>
  );
};

 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);
      }
    }
  };