import React, { useEffect, useMemo, useState } from "react";
import {
  Box,
  Button,
  Card,
  CircularProgress,
  Grid,
  InputAdornment,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useNavigate, useParams } from "react-router-dom";
import { useStyles } from "../../theme/appStyles";
import {
  useDeleteCustomerProjectMutation,
  useDeleteCustomerTransactionMutation,
  useGetCustomerProjectQuery,
  useGetCustomerQuery,
  useGetCustomerTransactionQuery,
  useGetWorkOrderByCustomerProjectQuery,
  useRemovedCustomerProjectMMutation,
} from "../../Api/attoDeskApi";
import {
  ICustomer,
  ICustomerProject,
  ICustomerTransaction,
  IQuoteWorkOrder,
} from "../../Api/Interface/api.interface";
import NewCustomerTransactionPopUp from "./Components/NewCustomerTransactionPopUp";
import { useNotifier } from "../../Core/Notifier";
import DeletePopup from "../../Components/Delete/DeletePopup";
import DeletePopupMutaion from "../../Components/Delete/DeletePopupMutaion";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import { CiSearch } from "react-icons/ci";
import useDebounce from "../../Components/SearchDebonce/useDebounce";
import DeleteOutlineSharpIcon from "@mui/icons-material/DeleteOutlineSharp";
import EditSharpIcon from "@mui/icons-material/EditSharp";
import NewPopUpCustomer from "../Customer/Edit/index";
import AddProject from "./Components/AddProject";
import dayjs from "dayjs";
import ReceiptIcon from "@mui/icons-material/Receipt";
import AssignWorkOrder from "./Components/AssignWorkOrder";
import RemoveCircleOutlineRoundedIcon from "@mui/icons-material/RemoveCircleOutlineRounded";

const Index = () => {
  const classes = useStyles();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const navigate = useNavigate();

  const [searchQuery, setSearchQuery] = useState("");
  const [currentSearchQuery, setCurrentSearchQuery] = useState("");
  const debouncedSearchQuery = useDebounce(searchQuery, 300);

  const [searchQueryProject, setSearchQueryProject] = useState("");
  const [currentSearchQueryProject, setCurrentSearchQueryProject] =
    useState("");
  const debouncedSearchQueryProject = useDebounce(searchQueryProject, 300);

  const { id: customerId } = useParams<{ id: string }>();
  const [selectCustomer, setSelectCustomer] = useState<ICustomer | null>(null);
  const [transactionData, setTransactionData] =
    useState<ICustomerTransaction>();

  const [deleteCategory] = useDeleteCustomerTransactionMutation();
  const [deleteProject] = useDeleteCustomerProjectMutation();

  const [openDialog, setOpenDialog] = useState(false);
  const [openAddTransaction, setOpenAddTransaction] = useState(false);
  const [openAddProject, setOpenAddProject] = useState(false);
  const [projectData, setProjecData] = useState<ICustomerProject>();

  const [openAddWorkOrder, setOpenAddWorkOrder] = useState(false);
  const [WorkOrderData, setWorkOrderData] = useState<IQuoteWorkOrder>();

  const { showErrorMessage, showMessage } = useNotifier();
  const [openDeleteCategory, setOpenDeleteCategory] = useState(false);
  const [coursingToDelete, setCoursingToDelete] =
    useState<ICustomerTransaction | null>(null);

  const [openDeleteProject, setOpenDeleteProject] = useState(false);
  const [projectToDelete, setProjectToDelete] =
    useState<ICustomerProject | null>(null);

  const [openDeleteProjectWrokOrder, setOpenDeleteProjectWrokOrder] =
    useState(false);
  const [projectWrokOrderToDelete, setProjectWrokOrderToDelete] =
    useState<IQuoteWorkOrder | null>(null);

  const [openProjectTable, setOpenProjectTable] = useState(false);
  const [projectId, setProjectId] = useState<number>(0);
  const [projectName, setProjectName] = useState<string>("");

  useEffect(() => {}, [customerId]);

  const { data, isLoading, isError } = useGetCustomerQuery({
    searchText: "",
    id: String(customerId),
  });

  const {
    data: customerTransactionData,
    isLoading: customerDataIsLoading,
    refetch,
  } = useGetCustomerTransactionQuery({
    searchText: currentSearchQuery,
    customerId: String(customerId),
    projectId: "",
  });

  const {
    data: customerProjectData,
    isLoading: customerProjectDataIsLoading,
    refetch: cutomerProjectRefetch,
  } = useGetCustomerProjectQuery({
    searchText: currentSearchQueryProject,
    customerId: String(customerId),
    id: ""
  });

  const {
    data: workOrderProjectData,
    isLoading: workOrderProjectDataIsLoading,
    refetch: workOrderProjectRefetch,
  } = useGetWorkOrderByCustomerProjectQuery({
    searchText: "",
    quoteWorkOrderCustomerId: String(customerId),
    quoteWorkOrderCustomerProjectId: String(projectId),
  });

  const [newCustomer, { isLoading: rmoveIsLoading }] =
    useRemovedCustomerProjectMMutation();

  const customer = useMemo(() => {
    if (data && Array.isArray(data.data) && data.data.length > 0) {
      return data.data[0] as ICustomer;
    }
    return null;
  }, [data]);

  const transactions: ICustomerTransaction[] = useMemo(() => {
    if (
      customerTransactionData &&
      Array.isArray(customerTransactionData.data)
    ) {
      return customerTransactionData.data as ICustomerTransaction[];
    }
    return [];
  }, [customerTransactionData]);

  const project: ICustomerProject[] = useMemo(() => {
    if (customerProjectData && Array.isArray(customerProjectData.data)) {
      return customerProjectData.data as ICustomerProject[];
    }
    return [];
  }, [customerProjectData]);

  const workOrderProject: IQuoteWorkOrder[] = useMemo(() => {
    if (workOrderProjectData && Array.isArray(workOrderProjectData.data)) {
      return workOrderProjectData.data as IQuoteWorkOrder[];
    }
    return [];
  }, [workOrderProjectData]);

  useEffect(() => {
    if (debouncedSearchQuery.length >= 4 || debouncedSearchQuery === "") {
      setCurrentSearchQuery(debouncedSearchQuery);
      refetch();
    }
  }, [debouncedSearchQuery]);

  useEffect(() => {
    if (
      debouncedSearchQueryProject.length >= 4 ||
      debouncedSearchQueryProject === ""
    ) {
      setCurrentSearchQueryProject(debouncedSearchQueryProject);
      refetch();
    }
  }, [debouncedSearchQueryProject]);

  const handleOpenDialog = (customer: ICustomer) => {
    setSelectCustomer(customer);
    setOpenDialog(true);
  };

  const handleCloseDialog = () => {
    setSelectCustomer(null);
    setOpenDialog(false);
  };

  const handleOpenAddTransaction = () => {
    setTransactionData(undefined);
    setOpenAddTransaction(true);
  };

  const handleCloseAddTransaction = () => {
    setTransactionData(undefined);
    setOpenAddTransaction(false);
  };

  const handleOpenAddProject = () => {
    setProjecData(undefined);
    setOpenAddProject(true);
  };

  const handleCloseAddProject = () => {
    setProjecData(undefined);
    setOpenAddProject(false);
  };

  const handleOpenAddWorkOrder = () => {
    setWorkOrderData(undefined);
    setOpenAddWorkOrder(true);
  };

  const handleCloseAddWorkOrder = () => {
    setWorkOrderData(undefined);
    setOpenAddWorkOrder(false);
  };

  const handleOpenEditSuites = () => {
    setSelectCustomer(customer);
    setOpenDialog(true);
  };

  if (isLoading || customerDataIsLoading) {
    return (
      <Box
        display="flex"
        justifyContent="center"
        alignItems="center"
        height="10vh"
      >
        <CircularProgress />
      </Box>
    );
  }

  if (isError) {
    return (
      <Typography color="error">
        Error fetching customer data. Please try again later.
      </Typography>
    );
  }

  if (!customer) {
    return <Typography>No customer data available.</Typography>;
  }
  const handleOpenDeletePopup = (coursing: ICustomerTransaction) => {
    setCoursingToDelete(coursing);
    setOpenDeleteCategory(true);
  };

  const handleCloseDeletePopup = () => {
    setCoursingToDelete(null);
    setOpenDeleteCategory(false);
  };

  const handleDelete = async (id: string) => {
    try {
      const response = await deleteCategory(id).unwrap();
      if (response.status) {
        showMessage("Deleted successfully");
        setOpenDeleteCategory(false);
      } else {
        showErrorMessage("Failed to delete the customer");
      }
    } catch (error) {
      showErrorMessage("Failed to delete the customer");
    }
  };

  const handleOpenDeleteProjectPopup = (project: ICustomerProject) => {
    setProjectToDelete(project);
    setOpenDeleteProject(true);
  };

  const handleCloseDeleteProjectPopup = () => {
    setProjectToDelete(null);
    setOpenDeleteProject(false);
  };

  const handleDeleteProject = async (id: string) => {
    try {
      const response = await deleteProject(id).unwrap();
      if (response.status) {
        showMessage("Deleted successfully");
        setOpenDeleteProject(false);
      } else {
        showErrorMessage("Failed to delete the customer project");
      }
    } catch (error) {
      showErrorMessage("Failed to delete the customer project");
    }
  };

  const handleOpenDeleteWrokOrderPopup = (project: IQuoteWorkOrder) => {
    setProjectWrokOrderToDelete(project);
    setOpenDeleteProjectWrokOrder(true);
  };

  const handleCloseDeleteWrokOrderPopup = () => {
    setProjectWrokOrderToDelete(null);
    setOpenDeleteProjectWrokOrder(false);
  };

  const handleDeleteWrokOrder = async (id: string) => {
    try {
      const temData = {
        id: id,
        quoteWorkOrderCustomerId: String(customerId),
      };
      const response = await newCustomer(temData).unwrap();

      if (response.status) {
        showMessage("Deleted successfully");
        setOpenDeleteProjectWrokOrder(false);
      } else {
        showErrorMessage("Failed to remove the customer project work order");
      }
    } catch (error) {
      showErrorMessage("Failed to remove the customer project remove");
    }
  };

  const gridHeight = isMobile ? "30px" : "400px";

  return (
    <div>
      <Grid container spacing={3}>
        <Grid item lg={12} md={12} sm={12} xs={12}>
          <Card className={classes.stepperCard}>
            <Grid
              container
              justifyContent={"space-between"}
              spacing={5}
              sx={{ borderBottom: 2, padding: 2 }}
              className={classes.titleGrid}
            >
              <Grid
                item
                lg={11}
                md={11}
                sm={11}
                xs={11}
                pt={2}
                alignContent={"center"}
              >
                <Typography variant="h2">
                  {customer.customerFirstName + " " + customer.customerLastName}
                </Typography>
              </Grid>
              <Grid
                item
                lg={1}
                md={1}
                sm={1}
                xs={1}
                pt={2}
                alignContent={"center"}
              >
                <Button
                  variant="outlined"
                  endIcon={<ArrowForwardIosIcon />}
                  className={classes.addButton}
                  onClick={() => navigate(-1)}
                >
                  Back
                </Button>
              </Grid>
            </Grid>
          </Card>
        </Grid>
        <Grid item lg={3} md={3} sm={12} xs={12}>
          <Grid container spacing={2}>
            <Grid item lg={12} md={12} sm={12} xs={12} pt={2}>
              <Card className={classes.stepperCard}>
                <Grid container spacing={2}>
                  <Grid item lg={12} md={12} sm={12} xs={12} pt={2}>
                    <Grid
                      container
                      justifyContent={"space-between"}
                      spacing={5}
                      sx={{ borderBottom: 2, padding: 2 }}
                      className={classes.titleGrid}
                    >
                      <Grid
                        item
                        lg={8}
                        md={8}
                        sm={8}
                        xs={8}
                        pt={2}
                        alignContent={"center"}
                      >
                        <Typography className={classes.cardTitle}>
                          Customer Details
                        </Typography>
                      </Grid>
                      <Grid
                        item
                        lg={4}
                        md={4}
                        sm={4}
                        xs={4}
                        sx={{ display: "flex", justifyContent: "flex-end" }}
                      >
                        <Grid
                          container
                          spacing={1}
                          justifyContent="flex-end"
                          sx={{ display: "flex" }}
                        >
                          <Grid item>
                            <Button
                              variant="contained"
                              className={classes.editButtonList}
                              onClick={handleOpenEditSuites}
                            >
                              <EditSharpIcon className={classes.editListIcon} />
                            </Button>
                          </Grid>
                        </Grid>
                      </Grid>
                    </Grid>
                  </Grid>

                  <Grid item lg={12} md={12} sm={12} xs={12} pt={2}>
                    <Grid
                      container
                      justifyContent={"space-between"}
                      spacing={5}
                      sx={{ borderBottom: 2, px: 2 }}
                      className={classes.titleGrid}
                    >
                      <Grid
                        item
                        lg={12}
                        md={12}
                        sm={12}
                        xs={12}
                        pt={2}
                        alignContent={"center"}
                        direction={"column"}
                      >
                        <Typography variant="subtitle1">
                          <span className={classes.customerDetails}>
                            Phone:
                          </span>{" "}
                          {customer.customerMobileNum}
                        </Typography>
                      </Grid>
                    </Grid>
                  </Grid>

                  <Grid item lg={12} md={12} sm={12} xs={12} pt={2}>
                    <Grid
                      container
                      justifyContent={"space-between"}
                      spacing={5}
                      sx={{ borderBottom: 2, px: 2 }}
                      className={classes.titleGrid}
                    >
                      <Grid
                        item
                        lg={12}
                        md={12}
                        sm={12}
                        xs={12}
                        pt={2}
                        alignContent={"center"}
                        direction={"column"}
                      >
                        <Typography variant="subtitle1">
                          <span className={classes.customerDetails}>
                            E-mail:
                          </span>{" "}
                          {customer.customerEmail}
                        </Typography>
                      </Grid>
                    </Grid>
                  </Grid>

                  <Grid item lg={12} md={12} sm={12} xs={12} pt={2}>
                    <Grid
                      container
                      justifyContent={"space-between"}
                      spacing={5}
                      sx={{ borderBottom: 2, px: 2 }}
                      className={classes.titleGrid}
                    >
                      <Grid
                        item
                        lg={12}
                        md={12}
                        sm={12}
                        xs={12}
                        pt={2}
                        alignContent={"center"}
                        direction={"column"}
                      >
                        <Typography variant="subtitle1">
                          <span className={classes.customerDetails}>
                            Phone:
                          </span>{" "}
                          {customer.customerMobileNum}
                        </Typography>
                      </Grid>
                    </Grid>
                  </Grid>

                  <Grid item lg={12} md={12} sm={12} xs={12} pt={2}>
                    <Grid
                      container
                      justifyContent={"space-between"}
                      spacing={5}
                      sx={{ borderBottom: 2, px: 2 }}
                      className={classes.titleGrid}
                    >
                      <Grid
                        item
                        lg={12}
                        md={12}
                        sm={12}
                        xs={12}
                        pt={2}
                        alignContent={"center"}
                        direction={"column"}
                      >
                        <Typography variant="subtitle1">
                          <span className={classes.customerDetails}>
                            Address:
                          </span>{" "}
                          {customer.customerAddress}
                        </Typography>
                      </Grid>
                    </Grid>
                  </Grid>
                </Grid>
              </Card>
            </Grid>
            <Grid item lg={12} md={12} sm={12} xs={12} pt={2}>
              <Card className={classes.stepperCard}>
                <Grid container spacing={2}>
                  <Grid item lg={12} md={12} sm={12} xs={12} pt={2}>
                    <Grid
                      container
                      justifyContent={"space-between"}
                      spacing={5}
                      sx={{ borderBottom: 2, padding: 2 }}
                      className={classes.titleGrid}
                    >
                      <Grid
                        item
                        lg={12}
                        md={12}
                        sm={12}
                        xs={12}
                        pt={2}
                        alignContent={"center"}
                      >
                        <Typography className={classes.cardTitle}>
                          Description
                        </Typography>
                      </Grid>
                    </Grid>
                  </Grid>

                  <Grid item lg={12} md={12} sm={12} xs={12} pt={2}>
                    <Grid
                      container
                      justifyContent={"space-between"}
                      spacing={5}
                      sx={{ borderBottom: 2, px: 2 }}
                      className={classes.titleGrid}
                      minHeight={"400px"}
                    >
                      <Grid item lg={12} md={12} sm={12} xs={12} pt={2}>
                        <Typography variant="subtitle1">
                          {customer.customerDescription}
                        </Typography>
                      </Grid>
                    </Grid>
                  </Grid>
                </Grid>
              </Card>
            </Grid>
          </Grid>
        </Grid>
        <Grid item lg={9} md={9} sm={12} xs={12}>
          <Grid container spacing={2}>
            <Grid item lg={12} md={12} sm={12} xs={12}>
              <Card className={classes.card}>
                <Grid
                  container
                  justifyContent={"space-between"}
                  spacing={5}
                  sx={{ borderBottom: 2, padding: 2 }}
                  className={classes.titleGrid}
                >
                  <Grid
                    item
                    lg={4}
                    md={4}
                    sm={4}
                    xs={4}
                    pt={2}
                    alignContent={"center"}
                  >
                    <Typography className={classes.cardTitle}>
                      Customer Project
                    </Typography>
                  </Grid>
                  <Grid
                    item
                    lg={8}
                    md={8}
                    sm={8}
                    xs={8}
                    sx={{ display: "flex", justifyContent: "flex-end" }}
                  >
                    <Grid
                      container
                      spacing={1}
                      justifyContent="flex-end"
                      sx={{ display: "flex" }}
                    >
                      <Grid item>
                        <TextField
                          InputProps={{
                            startAdornment: (
                              <InputAdornment position="start">
                                <CiSearch
                                  className={classes.searchWidgetIcon}
                                />
                              </InputAdornment>
                            ),
                            classes: {
                              root: classes.formControlList,
                            },
                          }}
                          fullWidth
                          value={searchQueryProject}
                          onChange={(e) =>
                            setSearchQueryProject(e.target.value)
                          }
                          placeholder="Name .."
                          sx={{ width: "100%" }}
                          size="small"
                        />
                      </Grid>

                      <Grid item>
                        <Button
                          variant="contained"
                          className={classes.addButton}
                          onClick={handleOpenAddProject}
                        >
                          Add Project
                        </Button>
                      </Grid>
                    </Grid>
                  </Grid>
                </Grid>

                <Grid>
                  <TableContainer>
                    <Table className={classes.table}>
                      <TableHead className={classes.tableHeaderRow}>
                        <TableRow>
                          <TableCell className={classes.tablheader}>
                            <strong>Project Name</strong>
                          </TableCell>
                          <TableCell className={classes.tablheader}>
                            <strong>Create Date</strong>
                          </TableCell>
                          <TableCell className={classes.tablheader}>
                            <strong>Project Type</strong>
                          </TableCell>
                          <TableCell className={classes.tablheader}>
                            <strong>Project Domin</strong>
                          </TableCell>

                          <TableCell
                            className={classes.tablheader}
                            sx={{ textAlign: "right" }}
                          >
                            <strong>Actions</strong>
                          </TableCell>
                        </TableRow>
                      </TableHead>
                      <TableBody>
                        {project.map((project) => (
                          <TableRow
                            key={project.id}
                            className={classes.tableRowHover}
                          >
                            <TableCell
                              component="th"
                              scope="row"
                              className={classes.tablCell}
                            >
                              {project.projectName}
                            </TableCell>
                            <TableCell scope="row" className={classes.tablCell}>
                              {project?.created_at
                                ? dayjs(project.created_at).format(
                                    "MMMM D, YYYY [at] h:mm A"
                                  )
                                : ""}
                            </TableCell>
                            <TableCell scope="row" className={classes.tablCell}>
                              {project.projectType}
                            </TableCell>
                            <TableCell scope="row" className={classes.tablCell}>
                              {project.projectDomainName}
                            </TableCell>
                            <TableCell className={classes.tablCell}>
                              <Grid
                                container
                                spacing={1}
                                sx={{
                                  display: "flex",
                                  justifyContent: "flex-end",
                                }}
                              >
                                <Grid item>
                                  <Button
                                    variant="contained"
                                    className={classes.viewButtonList}
                                    onClick={() => {
                                      setProjectId(project.id);
                                      setProjectName(project.projectName);
                                      setOpenProjectTable(true);
                                    }}
                                  >
                                    <ReceiptIcon
                                      className={classes.viewListIcon}
                                    />
                                  </Button>
                                </Grid>
                                <Grid item>
                                  <Button
                                    variant="contained"
                                    className={classes.editButtonList}
                                    onClick={() => {
                                      setProjecData(project);
                                      setOpenAddProject(true);
                                    }}
                                  >
                                    <EditSharpIcon
                                      className={classes.editListIcon}
                                    />
                                  </Button>
                                </Grid>
                                <Grid item>
                                  <Button
                                    variant="contained"
                                    className={classes.deleteButtonList}
                                    onClick={() =>
                                      handleOpenDeleteProjectPopup(project)
                                    }
                                  >
                                    <DeleteOutlineSharpIcon
                                      className={classes.deleteButtonList}
                                    />
                                  </Button>
                                </Grid>
                              </Grid>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </TableContainer>

                  {openAddProject && (
                    <AddProject
                      openModel={openAddProject}
                      handleCloseDialog={handleCloseAddProject}
                      data={projectData}
                      customerId={customerId}
                    />
                  )}
                  {projectToDelete && (
                    <DeletePopup
                      open={openDeleteProject}
                      handleCloseDelete={handleCloseDeleteProjectPopup}
                      onConfirm={async () => {
                        await handleDeleteProject(
                          projectToDelete.id.toString()
                        );
                      }}
                      title="Delete Project"
                      content={`Are you sure you want to delete "${projectToDelete.projectName}"?`}
                    />
                  )}
                </Grid>
              </Card>
            </Grid>
            {openProjectTable && (
              <Grid item lg={12} md={12} sm={12} xs={12}>
                <Card className={classes.card}>
                  <Grid
                    container
                    justifyContent={"space-between"}
                    spacing={5}
                    sx={{ borderBottom: 2, padding: 2 }}
                    className={classes.titleGrid}
                  >
                    <Grid
                      item
                      lg={4}
                      md={4}
                      sm={4}
                      xs={4}
                      pt={2}
                      alignContent={"center"}
                    >
                      <Typography className={classes.cardTitle}>
                        {projectName} - Assign Work Order
                      </Typography>
                    </Grid>
                    <Grid
                      item
                      lg={8}
                      md={8}
                      sm={8}
                      xs={8}
                      sx={{ display: "flex", justifyContent: "flex-end" }}
                    >
                      <Grid
                        container
                        spacing={1}
                        justifyContent="flex-end"
                        sx={{ display: "flex" }}
                      >
                        {/* <Grid item>
                          <TextField
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <CiSearch
                                    className={classes.searchWidgetIcon}
                                  />
                                </InputAdornment>
                              ),
                              classes: {
                                root: classes.formControlList,
                              },
                            }}
                            fullWidth
                            value={searchQueryProject}
                            onChange={(e) =>
                              setSearchQueryProject(e.target.value)
                            }
                            placeholder="Name .."
                            sx={{ width: "100%" }}
                            size="small"
                          />
                        </Grid> */}

                        <Grid item>
                          <Button
                            variant="contained"
                            className={classes.addButton}
                            onClick={handleOpenAddWorkOrder}
                          >
                            Add Work Order
                          </Button>
                        </Grid>
                      </Grid>
                    </Grid>
                  </Grid>

                  <Grid>
                    <TableContainer>
                      <Table className={classes.table}>
                        <TableHead className={classes.tableHeaderRow}>
                          <TableRow>
                            <TableCell className={classes.tablheader}>
                              <strong>Work Order Id</strong>
                            </TableCell>
                            <TableCell className={classes.tablheader}>
                              <strong>Create Date</strong>
                            </TableCell>
                            <TableCell
                              className={classes.tablheader}
                              sx={{ textAlign: "right" }}
                            >
                              <strong>Actions</strong>
                            </TableCell>
                          </TableRow>
                        </TableHead>
                        <TableBody>
                          {workOrderProject.map((project) => (
                            <TableRow
                              key={project.id}
                              className={classes.tableRowHover}
                            >
                              <TableCell
                                component="th"
                                scope="row"
                                className={classes.tablCell}
                              >
                                {project.quoteWorkOrderNo}
                              </TableCell>
                              <TableCell
                                scope="row"
                                className={classes.tablCell}
                              >
                                {project?.created_at
                                  ? dayjs(project.created_at).format(
                                      "MMMM D, YYYY [at] h:mm A"
                                    )
                                  : ""}
                              </TableCell>

                              <TableCell className={classes.tablCell}>
                                <Grid
                                  container
                                  spacing={1}
                                  sx={{
                                    display: "flex",
                                    justifyContent: "flex-end",
                                  }}
                                >
                                  <Grid item>
                                    <Button
                                      variant="contained"
                                      className={classes.deleteButtonList}
                                      onClick={() =>
                                        handleOpenDeleteWrokOrderPopup(project)
                                      }
                                    >
                                      <RemoveCircleOutlineRoundedIcon
                                        className={classes.deleteButtonList}
                                      />
                                    </Button>
                                  </Grid>
                                </Grid>
                              </TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </TableContainer>

                    {openAddWorkOrder && (
                      <AssignWorkOrder
                        openModel={openAddWorkOrder}
                        handleCloseDialog={handleCloseAddWorkOrder}
                        data={WorkOrderData}
                        quoteWorkOrderCustomerId={customerId}
                        quoteWorkOrderCustomerProjectId={String(projectId)}
                      />
                    )}
                    {projectWrokOrderToDelete && (
                      <DeletePopupMutaion
                        open={openDeleteProjectWrokOrder}
                        handleCloseDelete={handleCloseDeleteWrokOrderPopup}
                        onConfirm={async () => {
                          await handleDeleteWrokOrder(
                            projectWrokOrderToDelete.id.toString()
                          );
                        }}
                        title="Remove Work Oder from project"
                        content={`Are you sure you want to remove "${projectWrokOrderToDelete.quoteWorkOrderNo}"?`}
                      />
                    )}
                  </Grid>
                </Card>
              </Grid>
            )}
            <Grid item lg={12} md={12} sm={12} xs={12}>
              <Card className={classes.card}>
                <Grid
                  container
                  justifyContent={"space-between"}
                  spacing={5}
                  sx={{ borderBottom: 2, padding: 2 }}
                  className={classes.titleGrid}
                >
                  <Grid
                    item
                    lg={4}
                    md={4}
                    sm={4}
                    xs={4}
                    pt={2}
                    alignContent={"center"}
                  >
                    <Typography className={classes.cardTitle}>
                      Customer Transaction
                    </Typography>
                  </Grid>
                  <Grid
                    item
                    lg={8}
                    md={8}
                    sm={8}
                    xs={8}
                    sx={{ display: "flex", justifyContent: "flex-end" }}
                  >
                    <Grid
                      container
                      spacing={1}
                      justifyContent="flex-end"
                      sx={{ display: "flex" }}
                    >
                      <Grid item>
                        <TextField
                          InputProps={{
                            startAdornment: (
                              <InputAdornment position="start">
                                <CiSearch
                                  className={classes.searchWidgetIcon}
                                />
                              </InputAdornment>
                            ),
                            classes: {
                              root: classes.formControlList,
                            },
                          }}
                          fullWidth
                          value={searchQuery}
                          onChange={(e) => setSearchQuery(e.target.value)}
                          placeholder="Name .."
                          sx={{ width: "100%" }}
                          size="small"
                        />
                      </Grid>

                      <Grid item>
                        <Button
                          variant="contained"
                          className={classes.addButton}
                          onClick={handleOpenAddTransaction}
                        >
                          Add Transaction
                        </Button>
                      </Grid>
                    </Grid>
                  </Grid>
                </Grid>

                <Grid>
                  <TableContainer>
                    <Table className={classes.table}>
                      <TableHead className={classes.tableHeaderRow}>
                        <TableRow>
                          <TableCell className={classes.tablheader}>
                            <strong>Transaction Name</strong>
                          </TableCell>
                          <TableCell className={classes.tablheader}>
                            <strong>Amount</strong>
                          </TableCell>
                          <TableCell className={classes.tablheader}>
                            <strong>Collection</strong>
                          </TableCell>
                          <TableCell className={classes.tablheader}>
                            <strong>Reminder</strong>
                          </TableCell>
                          <TableCell className={classes.tablheader}>
                            <strong>Description</strong>
                          </TableCell>
                          <TableCell
                            className={classes.tablheader}
                            sx={{ textAlign: "right" }}
                          >
                            <strong>Actions</strong>
                          </TableCell>
                        </TableRow>
                      </TableHead>
                      <TableBody>
                        {transactions.map((transaction) => (
                          <TableRow
                            key={transaction.id}
                            className={classes.tableRowHover}
                          >
                            <TableCell
                              component="th"
                              scope="row"
                              className={classes.tablCell}
                            >
                              {transaction.transactionName}
                            </TableCell>
                            <TableCell scope="row" className={classes.tablCell}>
                              {transaction.transactionAmount}
                            </TableCell>
                            <TableCell scope="row" className={classes.tablCell}>
                              {transaction.transactionCollection}
                            </TableCell>
                            <TableCell scope="row" className={classes.tablCell}>
                              {transaction.transactionReminderDate}
                            </TableCell>
                            <TableCell scope="row" className={classes.tablCell}>
                              {transaction.transactionDescription}
                            </TableCell>
                            <TableCell className={classes.tablCell}>
                              <Grid
                                container
                                spacing={1}
                                sx={{
                                  display: "flex",
                                  justifyContent: "flex-end",
                                }}
                              >
                                <Grid item>
                                  <Button
                                    variant="contained"
                                    className={classes.editButtonList}
                                    onClick={() => {
                                      setTransactionData(transaction);
                                      setOpenAddTransaction(true);
                                    }}
                                  >
                                    <EditSharpIcon
                                      className={classes.editListIcon}
                                    />
                                  </Button>
                                </Grid>
                                <Grid item>
                                  <Button
                                    variant="contained"
                                    className={classes.deleteButtonList}
                                    onClick={() =>
                                      handleOpenDeletePopup(transaction)
                                    }
                                  >
                                    <DeleteOutlineSharpIcon
                                      className={classes.deleteButtonList}
                                    />
                                  </Button>
                                </Grid>
                              </Grid>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </TableContainer>
                  {selectCustomer && (
                    <NewPopUpCustomer
                      openModel={openDialog}
                      handleCloseDialog={handleCloseDialog}
                      data={selectCustomer}
                    />
                  )}
                  {openAddTransaction && (
                    <NewCustomerTransactionPopUp
                      openModel={openAddTransaction}
                      handleCloseDialog={handleCloseAddTransaction}
                      data={transactionData}
                      customerId={customerId}
                    />
                  )}
                  {coursingToDelete && (
                    <DeletePopup
                      open={openDeleteCategory}
                      handleCloseDelete={handleCloseDeletePopup}
                      onConfirm={async () => {
                        await handleDelete(coursingToDelete.id.toString());
                      }}
                      title="Delete Customer"
                      content={`Are you sure you want to delete "${coursingToDelete.transactionName}"?`}
                    />
                  )}
                </Grid>
              </Card>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </div>
  );
};

export default Index;
