// ** React Imports
import { useState, useEffect } from 'react'
// ** MUI Imports
import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import { styled } from '@mui/material/styles'
import TextField from '@mui/material/TextField'
import CardHeader from '@mui/material/CardHeader'
import Typography from '@mui/material/Typography'
import CardContent from '@mui/material/CardContent'
import { DataGrid, GridColDef } from '@mui/x-data-grid'
import LinearProgress from '@mui/material/LinearProgress'
// ** Third Party Imports
import axios from 'axios'
// ** Type Imports
import { ProjectListDataType } from 'src/types/apps/userTypes'
interface CellType {
row: ProjectListDataType
}
const Img = styled('img')(({ theme }) => ({
width: 32,
height: 32,
borderRadius: '50%',
marginRight: theme.spacing(3)
}))
const columns: GridColDef[] = [
{
flex: 0.3,
minWidth: 230,
field: 'projectTitle',
headerName: 'Project',
renderCell: ({ row }: CellType) => (
{row.projectTitle}
{row.projectType}
)
},
{
flex: 0.15,
minWidth: 100,
field: 'totalTask',
headerName: 'Total Tasks',
renderCell: ({ row }: CellType) => {row.totalTask}
},
{
flex: 0.15,
minWidth: 200,
headerName: 'Progress',
field: 'progressValue',
renderCell: ({ row }: CellType) => (
{row.progressValue}%
)
},
{
flex: 0.15,
minWidth: 100,
field: 'hours',
headerName: 'Hours',
renderCell: ({ row }: CellType) => {row.hours}
}
]
const InvoiceListTable = () => {
// ** State
const [value, setValue] = useState('')
const [data, setData] = useState([])
const [paginationModel, setPaginationModel] = useState({ page: 0, pageSize: 7 })
useEffect(() => {
axios
.get('/apps/users/project-list', {
params: {
q: value
}
})
.then(res => setData(res.data))
}, [value])
return (
Search:
setValue(e.target.value)} />
)
}
export default InvoiceListTable