// ** 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 { GroupType } from 'src/types/apps/groupTypes' import { CardStatsHorizontalProps } from 'src/@core/components/card-statistics/types' // ** Custom Table Components Imports import TableHeader from 'src/views/apps/group/list/TableHeader' interface UserRoleType { [key: string]: { icon: string; color: string } } interface UserStatusType { [key: string]: ThemeColor } interface CellType { row: GroupType } 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() // ** State const [anchorEl, setAnchorEl] = useState(null) const rowOptionsOpen = Boolean(anchorEl) const handleRowOptionsClick = (event: MouseEvent) => { setAnchorEl(event.currentTarget) } const handleRowOptionsClose = () => { setAnchorEl(null) } const handleDelete = () => { dispatch(deleteUser(id)) handleRowOptionsClose() } return ( <> View Edit Delete ) } const columns: GridColDef[] = [ { flex: 0.2, minWidth: 230, field: 'groupName', headerName: 'グループ名', renderCell: ({ row }: CellType) => { const { groupName } = row return ( {groupName} ) } }, { flex: 0.2, minWidth: 250, field: 'contactName', headerName: '担当者名', renderCell: ({ row }: CellType) => { return ( {row.contactName} ) } }, { flex: 0.2, field: 'totalLicenses', minWidth: 150, headerName: '総ライセンス数', renderCell: ({ row }: CellType) => { return ( {row.totalLicenses} ) } }, { flex: 0.4, minWidth: 120, headerName: '備考', field: 'remarks', renderCell: ({ row }: CellType) => { return ( {row.remarks} ) } }, ] const GroupList = ({ apiData }: InferGetStaticPropsType) => { // ** State const [role, setRole] = useState('') const [plan, setPlan] = useState('') const [value, setValue] = useState('') const [status, setStatus] = useState('') const [addUserOpen, setAddUserOpen] = useState(false) const [paginationModel, setPaginationModel] = useState({ page: 0, pageSize: 10 }) // ** Hooks const dispatch = useDispatch() // const store = useSelector((state: RootState) => state.user const store = [ { id: 1, groupName: '〇〇ホールディングス', contactName: '山田 かずお', totalLicenses: '10', remarks: '' }, { id: 2, groupName: '〇〇ホールディングス', contactName: '山田 かずお', totalLicenses: '10', remarks: '' }, { id: 3, groupName: '〇〇ホールディングス', contactName: '山田 かずお', totalLicenses: '10', remarks: '' }, ] 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 ( {apiData && ( {apiData.statsHorizontal.map((item: CardStatsHorizontalProps, index: number) => { return ( } /> ) })} )} ) } export const getStaticProps: GetStaticProps = async () => { // const res = await axios.get('/cards/statistics') // const apiData: CardStatsType = res.data const apiData = null return { props: { apiData } } } GroupList.acl = { action: 'manage', subject: 'su' } export default GroupList