Front-Complete/src/app/main/invoice/listInvoice/ListInvoiceRender.tsx

import FusePageSimple from "@fuse/core/FusePageSimple";
import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
import {
  Button,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Typography,
  styled,
} from "@mui/material";
import clsx from "clsx";
import { format } from "date-fns";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";

const Root = styled(FusePageSimple)(({ theme }) => ({
  "& .FusePageSimple-header": {
    backgroundColor: theme.palette.background.paper,
    boxShadow: `inset 0 0 0 1px  ${theme.palette.divider}`,
  },
}));

const ListInvoiceRender = () => {
  const { t } = useTranslation("invoicePage");
  const columns = [
    "Número factura",
    "Fecha",
    "Cliente",
    "Identificación",
    "Valor",
    "Estado",
    "Acciones",
  ];

  const rows = [
    {
      id: "528651571NT",
      date: "2019-10-07T22:22:37.274Z",
      name: "Morgan Page",
      identification: "17215896114",
      amount: 1358.75,
      status: "completed",
      action: true,
    },
    {
      id: "421436904YT",
      date: "2019-12-18T14:51:24.461Z",
      name: "Nita Hebert",
      identification: "17215896114",
      amount: -1042.82,
      status: "completed",
      action: true,
    },
    {
      id: "685377421YT",
      date: "2019-12-25T17:52:14.304Z",
      name: "Marsha Chambers",
      identification: "17215896114",
      amount: 1828.16,
      status: "pending",
      action: true,
    },
    {
      id: "884960091RT",
      date: "2019-11-29T06:32:16.111Z",
      name: "Charmaine Jackson",
      identification: "17215896114",
      amount: 1647.55,
      status: "completed",
      action: true,
    },
    {
      id: "361402213NT",
      date: "2019-11-24T12:13:23.064Z",
      name: "Maura Carey",
      identification: "17215896114",
      amount: -927.43,
      status: "completed",
      action: true,
    },
    {
      id: "361402213NT",
      date: "2019-11-24T12:13:23.064Z",
      name: "Maura Carey",
      identification: "17215896114",
      amount: -927.43,
      status: "completed",
      action: true,
    },
    {
      id: "361402213NT",
      date: "2019-11-24T12:13:23.064Z",
      name: "Maura Carey",
      identification: "17215896114",
      amount: -927.43,
      status: "completed",
      action: true,
    },
    {
      id: "361402213NT",
      date: "2019-11-24T12:13:23.064Z",
      name: "Maura Carey",
      identification: "17215896114",
      amount: -927.43,
      status: "completed",
      action: true,
    },
  ];

  return (
    <Root
      header={
        <div className="p-24">
          <h4>{t("TITLE")}</h4>
        </div>
      }
      content={
        <Paper className="flex flex-col flex-auto p-24 shadow rounded-2 overflow-hidden mt-6">
          <div className="flex md:flex-row justify-between flex-col">
            <div>
              <Typography className="mr-16 text-lg font-medium tracking-tight leading-6 truncate">
                {t("TITLE_TABLE")}
              </Typography>
              <Typography className="font-medium" color="text.secondary">
                1 pendiente, 4 completadas
              </Typography>
            </div>
            <div>
              <Button
                size="small"
                variant="contained"
                color="secondary"
                component={Link}
                to={'/invoice/edit'}
                startIcon={
                  <FuseSvgIcon
                    className="text-48 text-white"
                    size={24}
                    color="action"
                  >
                    heroicons-outline:plus
                  </FuseSvgIcon>
                }
              >
                Nueva factura
              </Button>
            </div>
          </div>
          <div className="table-responsive mt-24">
            <Table className="simple w-full min-w-full h-full">
              <TableHead>
                <TableRow>
                  {columns.map((column, index) => (
                    <TableCell key={index}>
                      <Typography
                        color="text.secondary"
                        className="font-semibold text-12 whitespace-nowrap"
                      >
                        {column}
                      </Typography>
                    </TableCell>
                  ))}
                </TableRow>
              </TableHead>

              <TableBody>
                {rows.map((row, index) => (
                  <TableRow key={index}>
                    {Object.entries(row).map(([key, value]) => {
                      switch (key) {
                        case "id": {
                          return (
                            <TableCell key={key} component="th" scope="row">
                              <Typography color="text.secondary">
                                {value}
                              </Typography>
                            </TableCell>
                          );
                        }
                        case "date": {
                          return (
                            <TableCell key={key} component="th" scope="row">
                              <Typography>
                                {
                                  // @ts-ignore
                                  format(new Date(value), "dd/MM/yyyy")
                                }
                              </Typography>
                            </TableCell>
                          );
                        }
                        case "amount": {
                          return (
                            <TableCell key={key} component="th" scope="row">
                              <Typography>
                                {value.toLocaleString("en-US", {
                                  style: "currency",
                                  currency: "USD",
                                })}
                              </Typography>
                            </TableCell>
                          );
                        }
                        case "status": {
                          return (
                            <TableCell key={key} component="th" scope="row">
                              <Typography
                                className={clsx(
                                  "inline-flex items-center font-bold text-10 px-10 py-2 rounded-full tracking-wide uppercase",
                                  value === "pending" &&
                                    "bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50",
                                  value === "completed" &&
                                    "bg-green-50 text-green-800 dark:bg-green-600 dark:text-green-50"
                                )}
                              >
                                {value}
                              </Typography>
                            </TableCell>
                          );
                        }
                        case "action": {
                          return (
                            <TableCell key={key} component="th" scope="row">
                              <Button
                                size="small"
                                variant="contained"
                                color="primary"
                              >
                                Ver
                              </Button>
                            </TableCell>
                          );
                        }
                        default: {
                          return (
                            <TableCell key={key} component="th" scope="row">
                              <Typography>{value}</Typography>
                            </TableCell>
                          );
                        }
                      }
                    })}
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </Paper>
      }
    />
  );
};

export default ListInvoiceRender;