// ** 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 (
}
aria-controls={open ? 'user-view-overview-export' : undefined}
>
Export
>
}
/>
)
}
export default InvoiceListTable