// ** 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) => ( {`project-${row.projectTitle}`} {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