// ** React Imports import { MouseEvent, useState } from 'react' // ** Next Import import Link from 'next/link' // ** MUI Imports import Box from '@mui/material/Box' import Card from '@mui/material/Card' import Menu from '@mui/material/Menu' import Button from '@mui/material/Button' import Tooltip from '@mui/material/Tooltip' import MenuItem from '@mui/material/MenuItem' import { styled } from '@mui/material/styles' import CardHeader from '@mui/material/CardHeader' import IconButton from '@mui/material/IconButton' import Typography from '@mui/material/Typography' import { DataGrid, GridColDef } from '@mui/x-data-grid' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Type Imports import { ThemeColor } from 'src/@core/layouts/types' import { InvoiceType } from 'src/types/apps/invoiceTypes' // ** Custom Component Imports import CustomAvatar from 'src/@core/components/mui/avatar' import OptionsMenu from 'src/@core/components/option-menu' interface Props { invoiceData: InvoiceType[] } interface InvoiceStatusObj { [key: string]: { icon: string color: ThemeColor } } interface CellType { row: InvoiceType } const LinkStyled = styled(Link)(({ theme }) => ({ textDecoration: 'none', color: theme.palette.primary.main })) // ** Vars const invoiceStatusObj: InvoiceStatusObj = { Sent: { color: 'secondary', icon: 'mdi:send' }, Paid: { color: 'success', icon: 'mdi:check' }, Draft: { color: 'primary', icon: 'mdi:content-save-outline' }, 'Partial Payment': { color: 'warning', icon: 'mdi:chart-pie' }, 'Past Due': { color: 'error', icon: 'mdi:information-outline' }, Downloaded: { color: 'info', icon: 'mdi:arrow-down' } } const columns: GridColDef[] = [ { flex: 0.2, field: 'id', minWidth: 90, headerName: '# ID', renderCell: ({ row }: CellType) => {`#${row.id}`} }, { flex: 0.15, minWidth: 80, field: 'invoiceStatus', renderHeader: () => , renderCell: ({ row }: CellType) => { const { dueDate, balance, invoiceStatus } = row const color = invoiceStatusObj[invoiceStatus] ? invoiceStatusObj[invoiceStatus].color : 'primary' return ( {invoiceStatus}
Balance: {' '} {balance}
Due Date: {' '} {dueDate} } >
) } }, { flex: 0.25, minWidth: 90, field: 'total', headerName: 'Total', renderCell: ({ row }: CellType) => ${row.total || 0} }, { flex: 0.3, minWidth: 125, field: 'issuedDate', headerName: 'Issued Date', renderCell: ({ row }: CellType) => {row.issuedDate} }, { flex: 0.1, minWidth: 130, sortable: false, field: 'actions', headerName: 'Actions', renderCell: ({ row }: CellType) => ( }, { text: 'Edit', href: `/apps/invoice/edit/${row.id}`, icon: }, { text: 'Duplicate', icon: } ]} /> ) } ] const InvoiceListTable = ({ invoiceData }: Props) => { // ** State const [anchorEl, setAnchorEl] = useState(null) const [paginationModel, setPaginationModel] = useState({ page: 0, pageSize: 7 }) // ** Var const open = Boolean(anchorEl) const handleClick = (event: MouseEvent) => { setAnchorEl(event.currentTarget) } const handleClose = () => { setAnchorEl(null) } return ( PDF XLSX CSV } /> ) } export default InvoiceListTable