Untitled

import { Avatar, TableContainer } from "@material-ui/core";
import React, { Fragment, useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { injectIntl } from "react-intl";
import { Grid, DialogTitle, IconButton } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";
import { Helmet } from "react-helmet";
import brand from "enl-api/dummy/brand";
import AddBillPopup from "./AddBillPopup";
import Dialog from "@material-ui/core/Dialog";
import CloseIcon from "@material-ui/icons/Close";
import AddBillModel from "./AddBillModel";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import LoadingSpinner from "../../containers/spinner";
import { Button, Icon } from "@mui/material";
import "../../../app/style.css";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import { getClientData } from "../../redux/actions/dashboard_actions";
import BillStatusWidget from "./bill-status-widget";
import VisibilityIcon from "@mui/icons-material/Visibility";

const styles = () => ({
  buttonbgcolor: {
    backgoundClor: "#4050b5",
  },
  textColor: {
    color: "#4050b5",
  },
  dialogCustomizedWidth: {
    marginLeft: "50px",
  },
  backDrop: {
    backdropFilter: "blur(2px)",
    backgroundColor: "rgba(0,0,30,0.4)",
  },
});
const styl = {
  search_client: {
    backgroundColor: "white",
    marginRight: 15,
    display: "flex",
    color: "grey",
    boxShadow:
      "0px 1px 6px 0px rgba(142, 142, 142, 0.2), 0px 1px 1px 0px rgba(243, 243, 243, 0.14), 0px 2px 1px -1px rgba(204, 204, 204, 0.12)",
    borderRadius: "20px",
    overflow: "hidden",
    height: 40,
  },
  search_: {
    border: 0,
    padding: "0px 24px",
    fontSize: 15,
    Color: "#000",
  },
  download: {
    color: "blue",
    margin: "5px 7px 0px 8px",
  },
  outline_b: {
    border: " 1px solid blue",
    borderRadius: 5,
  },
  add: {
    color: "orange",
    margin: "5px 7px 0px 8px",
  },
  outline_a: {
    border: "1px solid orange",
    borderRadius: 5,
  },
  btn_group: {
    display: "flex",
    gap: 10,
  },
};


function CollectedBills(props) {
  const { classes, user, clients, loading } = props;
  const title = brand.name + " - Clients Bills";
  const description = brand.desc;
  const [show, setShow] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const [client, setClient] = useState();
  const [loaded, setLoaded] = useState(false);

  const handleClickClose = () => {
    setShow(false);
  };
  const handleAddbillOpen = (client) => {
    setOpen(true);
    setClient(client);
  };
  const handleAddbillClose = () => {
    setOpen(false);
  };

  const [filteredClient, setFilteredClients] = useState([]);

  const searchClient = (e) => {
    const str = e.target.value;
    const filteredData = clients.filter((client) => {
      if (
        client.client !== null &&
        !client.client.name.toLowerCase().includes(str) &&
        !client.client.email.toLowerCase().includes(str) &&
        !client.client.phone.toLowerCase().includes(str)
      ) {
        return true;
      } else {
        return false;
      }
    });

    setFilteredClients(filteredData.map((f) => f.client.oid));
  };

  useEffect(() => {
    if (clients.length === 0) {
      props.getClientData();
    }

    setLoaded(true);

    return () => {};
  }, []);

  if (user === null) {
    return null;
  }

  return (
    <div>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta property="twitter:title" content={title} />
        <meta property="twitter:description" content={description} />
      </Helmet>
      {loading ? <LoadingSpinner /> : ""}
      <Grid container justifyContent="flex-end" item md={12}>
        <h4
          style={{ flex: "1" }}
          className="MuiTypography-root MuiTypography-h4 title-bar">
          Clients Bill
        </h4>
        <div style={styl.btn_group}>
          <IconButton aria-label="delete">
            <VisibilityIcon />
          </IconButton>
          <div style={styl.search_client}>
            <input
              style={styl.search_}
              type="searchinp"
              placeholder="Search Bills"
              onChange={searchClient}
            />
            <Icon style={{ marginTop: 8, marginRight: 8 }}>search</Icon>
          </div>
        </div>
      </Grid>
      <Grid item xs={12}>
        <TableContainer style={{ padding: 3 }}>
          {clients.length > 0 ? (
            <table className="bill-data table">
              <tbody>
                {clients.map((data, index) => (
                  <Fragment key={"client-" + index}>
                    {data.client &&
                    !filteredClient.includes(data.client.oid) ? (
                      <Fragment>
                        <tr
                          className="text-center user spacer text-dark"
                          key={index}
                          style={{ textDecoration: "none" }}>
                          <td style={{ width: 40 }}>
                            <Link to={"/app/client/" + data.client.id}>
                              <Avatar
                                className=""
                                src={data.client.avatar}
                                aria-label={data.client.name}
                                sx={{ width: 24, height: 24 }}
                              />
                            </Link>
                          </td>
                          <td>
                            <Link
                              to={"/app/client/" + data.client.id}
                              style={{ textDecoration: "none" }}>
                              <div className="d-flex justify-content-left">
                                <span className="ml-1 userlist-item">
                                  <b className="u-title">{data.client.name}</b>
                                </span>
                              </div>
                            </Link>
                          </td>
                          <td>{data.client.phone}</td>
                          <td>{data.client.email}</td>

                          <td colSpan={2}>
                            <BillStatusWidget client={data.client} />
                          </td>

                          <td>
                            {user.role === "LIFE_NAVIGATOR" ? (
                              <Link to={`/app/clientpayment/${data.client.id}`}>
                                <Button
                                  style={{ height: "30px", fontSize: "12px" }}
                                  endIcon={
                                    <KeyboardArrowRightIcon className="paybtn" />
                                  }
                                  type="button"
                                  className="adduserbtn"
                                  variant="contained">
                                  Pay Bill
                                </Button>
                              </Link>
                            ) : (
                              <Link to={`/app/clientpayment/${data.client.id}`}>
                                <Button
                                  style={{ height: "30px", fontSize: "12px" }}
                                  endIcon={
                                    <KeyboardArrowRightIcon className="paybtn" />
                                  }
                                  type="button"
                                  className="adduserbtn"
                                  variant="contained">
                                  Approve Bill
                                </Button>
                              </Link>
                            )}
                          </td>
                          <td>
                            <Button
                              style={{ height: "30px", fontSize: "12px" }}
                              onClick={() => handleAddbillOpen(data.client)}
                              endIcon={
                                <KeyboardArrowRightIcon className="addbtn" />
                              }
                              type="button"
                              className="adduserbtn"
                              variant="contained">
                              Add Bill
                            </Button>
                          </td>
                        </tr>
                        <tr style={{ height: "20px" }}></tr>
                      </Fragment>
                    ) : null}
                  </Fragment>
                ))}
              </tbody>
            </table>
          ) : (
            ""
          )}
        </TableContainer>
      </Grid>

      {user.role === "ADVISOR" ? (
        <Grid item xs={12} style={{ height: "20px" }}></Grid>
      ) : (
        ""
      )}

      <Dialog
        disableAutoFocus={true}
        maxWidth="lg"
        open={show}
        BackdropProps={{
          classes: {
            root: classes.backDrop,
          },
        }}>
        <div id="dialer-form">
          <DialogTitle id="simple-dialog-title">
            <IconButton
              id="closebutton"
              justifyContent="flex-end"
              onClick={handleClickClose}>
              <CloseIcon />
            </IconButton>
          </DialogTitle>
          <AddBillPopup client={client} />
        </div>
      </Dialog>

      <Dialog
        maxWidth="xs"
        id="paybillmodel"
        open={open}
        BackdropProps={{
          classes: {
            root: classes.backDrop,
          },
        }}>
        <div id="dialer-form">
          <DialogTitle id="simple-dialog-title">
            <IconButton
              id="closebutton"
              justifyContent="flex-end"
              onClick={handleAddbillClose}>
              <CloseIcon />
            </IconButton>
          </DialogTitle>
          <AddBillModel client={client} />
        </div>
      </Dialog>
    </div>
  );
}

const mapStateToProps = (state) => ({
  user: state.authReducer.user,
  clients: state.authReducer.clients,
  loading: state.authReducer.loading,
  ...state,
});

CollectedBills.propTypes = {
  classes: PropTypes.object.isRequired,
  user: PropTypes.object,
  clients: PropTypes.array,
};

CollectedBills.defaultProps = {
  clients: [],
  user: {},
};

export default connect(mapStateToProps, { getClientData })(
  withStyles(styles)(injectIntl(CollectedBills))
);