// ** React Imports import { useState, useEffect, MouseEvent, useCallback } from 'react' // ** Next Imports import Link from 'next/link' import { GetStaticProps, InferGetStaticPropsType } from 'next/types' // ** MUI Imports import Box from '@mui/material/Box' import Card from '@mui/material/Card' import Menu from '@mui/material/Menu' import Grid from '@mui/material/Grid' import { styled } from '@mui/material/styles' import MenuItem from '@mui/material/MenuItem' import IconButton from '@mui/material/IconButton' import Typography from '@mui/material/Typography' import { DataGrid, GridColDef } from '@mui/x-data-grid' import Select, { SelectChangeEvent } from '@mui/material/Select' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Store Imports import { useDispatch, useSelector } from 'react-redux' // ** Custom Components Imports import CardStatisticsHorizontal from 'src/@core/components/card-statistics/card-stats-horizontal' // ** Utils Import // ** Actions Imports import { fetchData, deleteUser } from 'src/store/apps/user' // ** Third Party Components import axios from 'axios' // ** Types Imports import { RootState, AppDispatch } from 'src/store' import { CardStatsType } from 'src/@fake-db/types' import { ThemeColor } from 'src/@core/layouts/types' import { AlertType } from 'src/types/apps/alertTypes' import { CardStatsHorizontalProps } from 'src/@core/components/card-statistics/types' // ** Custom Table Components Imports import TableHeader from 'src/views/apps/alert/list/TableHeader' interface UserRoleType { [key: string]: { icon: string; color: string } } interface UserStatusType { [key: string]: ThemeColor } interface CellType { row: AlertType } const LinkStyled = styled(Link)(({ theme }) => ({ fontWeight: 600, fontSize: '1rem', cursor: 'pointer', textDecoration: 'none', color: theme.palette.text.secondary, '&:hover': { color: theme.palette.primary.main } })) const RowOptions = ({ id }: { id: number | string }) => { // ** Hooks const dispatch = useDispatch<AppDispatch>() // ** State const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null) const rowOptionsOpen = Boolean(anchorEl) const handleRowOptionsClick = (event: MouseEvent<HTMLElement>) => { setAnchorEl(event.currentTarget) } const handleRowOptionsClose = () => { setAnchorEl(null) } const handleDelete = () => { dispatch(deleteUser(id)) handleRowOptionsClose() } return ( <> <IconButton size='small' onClick={handleRowOptionsClick}> <Icon icon='mdi:dots-vertical' /> </IconButton> <Menu keepMounted anchorEl={anchorEl} open={rowOptionsOpen} onClose={handleRowOptionsClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} transformOrigin={{ vertical: 'top', horizontal: 'right' }} PaperProps={{ style: { minWidth: '8rem' } }} > <MenuItem component={Link} sx={{ '& svg': { mr: 2 } }} onClick={handleRowOptionsClose} href='/apps/user/view/overview/' > <Icon icon='mdi:eye-outline' fontSize={20} /> View </MenuItem> <MenuItem onClick={handleRowOptionsClose} sx={{ '& svg': { mr: 2 } }}> <Icon icon='mdi:pencil-outline' fontSize={20} /> Edit </MenuItem> <MenuItem onClick={handleDelete} sx={{ '& svg': { mr: 2 } }}> <Icon icon='mdi:delete-outline' fontSize={20} /> Delete </MenuItem> </Menu> </> ) } const columns: GridColDef[] = [ { flex: 0.2, field: 'reportName', headerName: 'アラート種別', renderCell: ({ row }: CellType) => { return ( <Typography noWrap variant='body2'> {row.alert} </Typography> ) } }, { flex: 0.1, field: 'code', headerName: 'コード', renderCell: ({ row }: CellType) => { return ( <Typography noWrap variant='body2'> {row.code} </Typography> ) } }, { flex: 0.5, field: 'explain', minWidth: 150, headerName: '説明', renderCell: ({ row }: CellType) => { return ( <Typography noWrap variant='body2'> {row.explain} </Typography> ) } } ] const VehicleList = ({ apiData }: InferGetStaticPropsType<typeof getStaticProps>) => { // ** State const [role, setRole] = useState<string>('') const [plan, setPlan] = useState<string>('') const [value, setValue] = useState<string>('') const [status, setStatus] = useState<string>('') const [addUserOpen, setAddUserOpen] = useState<boolean>(false) const [paginationModel, setPaginationModel] = useState({ page: 0, pageSize: 10 }) // ** Hooks const dispatch = useDispatch<AppDispatch>() // const store = useSelector((state: RootState) => state.user const store = [ { id: 1, alert: '収集場所が複数あります', code: '1001', explain: '会社管理者', }, { id: 2, alert: '閉鎖中です', code: '031', explain: '会社管理者', }, { id: 3, alert: '工事中です', code: '069', explain: '会社管理者', }, ] useEffect(() => { dispatch( fetchData({ role, status, q: value, currentPlan: plan }) ) }, [dispatch, plan, role, status, value]) const handleFilter = useCallback((val: string) => { setValue(val) }, []) const handleRoleChange = useCallback((e: SelectChangeEvent) => { setRole(e.target.value) }, []) const handlePlanChange = useCallback((e: SelectChangeEvent) => { setPlan(e.target.value) }, []) const handleStatusChange = useCallback((e: SelectChangeEvent) => { setStatus(e.target.value) }, []) const toggleAddUserDrawer = () => setAddUserOpen(!addUserOpen) return ( <Grid container spacing={6}> <Grid item xs={12}> {apiData && ( <Grid container spacing={6}> {apiData.statsHorizontal.map((item: CardStatsHorizontalProps, index: number) => { return ( <Grid item xs={12} md={3} sm={6} key={index}> <CardStatisticsHorizontal {...item} icon={<Icon icon={item.icon as string} />} /> </Grid> ) })} </Grid> )} </Grid> <Grid item xs={12}> <Card> <TableHeader value={value} /> <DataGrid autoHeight rows={store} columns={columns} disableRowSelectionOnClick paginationModel={paginationModel} pageSizeOptions={[10, 25, 50]} onPaginationModelChange={setPaginationModel} sx={{ '& .MuiDataGrid-columnHeaders': { borderRadius: 0 } }} /> </Card> </Grid> </Grid> ) } export const getStaticProps: GetStaticProps = async () => { // const res = await axios.get('/cards/statistics') // const apiData: CardStatsType = res.data const apiData = null return { props: { apiData } } } VehicleList.acl = { action: 'manage', subject: 'admin' } export default VehicleList