fix: dashboard fix

main
minuk926 2 years ago
parent d0ba54e818
commit c3338d8736

@ -1,17 +1,21 @@
import { useEffect, useState, useCallback } from 'react'; import { useEffect, useState, useCallback } from 'react';
// material-ui // material-ui
import { Grid, Link, Typography } from '@mui/material'; import { Card, CardContent, Grid, Link, Typography } from '@mui/material';
import PlaylistAddCheckIcon from '@mui/icons-material/PlaylistAddCheck';
// project imports // project imports
import { gridSpacing } from 'store/constant'; import { gridSpacing } from 'store/constant';
import { findDashboard } from 'apis/judge'; import { findDashboard } from 'apis/judge';
import MuiDataGrid from 'views/cmm/mui-grid/MuiDataGrid'; import MuiDataGrid from 'views/cmm/mui-grid/MuiDataGrid';
import { IconFileText } from '@tabler/icons'; import { IconFileText } from '@tabler/icons';
import { useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
// ==============================|| DEFAULT DASHBOARD ||============================== // // ==============================|| DEFAULT DASHBOARD ||============================== //
const Dashboard = () => { const Dashboard = () => {
const theme = useTheme();
const [totalCount, setTotalCount] = useState(0); const [totalCount, setTotalCount] = useState(0);
const [rowsState, setRowsState] = useState({ const [rowsState, setRowsState] = useState({
page: 0, page: 0,
@ -105,14 +109,14 @@ const Dashboard = () => {
headerAlign: 'center', headerAlign: 'center',
field: 'name', field: 'name',
align: 'center', align: 'center',
width: 100 width: 95
}, },
{ {
headerName: '완료 / 전체', headerName: '완료 / 전체',
headerAlign: 'center', headerAlign: 'center',
field: 'judge', field: 'judge',
align: 'center', align: 'center',
width: 100, width: 95,
valueGetter: (params) => `${params.row.jcnt} / ${params.row.tcnt}` valueGetter: (params) => `${params.row.jcnt} / ${params.row.tcnt}`
} }
]; ];
@ -155,40 +159,143 @@ const Dashboard = () => {
return ( return (
<Grid container spacing={gridSpacing}> <Grid container spacing={gridSpacing}>
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="subtitle1">공지사항</Typography> <Card
<MuiDataGrid columns={columns} rowsState={rowsState} totalCount={totalCount || 0} setRowsState={setRowsState} gridHeight={250} /> sx={{
background: theme.palette.mode === 'dark' ? theme.palette.dark[900] : '#fff',
[theme.breakpoints.down('sm')]: {
border: 0,
boxShadow: 'none'
}
}}
>
<CardContent>
<Box
sx={{
display: 'flex',
[theme.breakpoints.down('md')]: {
width: 'auto'
}
}}
>
<PlaylistAddCheckIcon />
<Typography variant="subtitle1" ml={1}>
공지사항
</Typography>
</Box>
<MuiDataGrid
columns={columns}
rowsState={rowsState}
totalCount={totalCount || 0}
setRowsState={setRowsState}
gridHeight={255}
/>
</CardContent>
</Card>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Grid container spacing={gridSpacing}> <Grid container spacing={1}>
<Grid item xs={4}> <Grid item xs={4}>
<Typography variant="subtitle1">주정차심사자현황 (심사종료일 : {msEdate1})</Typography> <Card
<MuiDataGrid sx={{
columns={judgeColumns} background: theme.palette.mode === 'dark' ? theme.palette.dark[900] : '#fff',
rowsState={rowsState1} [theme.breakpoints.down('sm')]: {
totalCount={totalCount1 || 0} border: 0,
setRowsState={() => {}} boxShadow: 'none'
gridHeight={300} }
/> }}
>
<CardContent>
<Box
sx={{
display: 'flex',
[theme.breakpoints.down('md')]: {
width: 'auto'
}
}}
>
<PlaylistAddCheckIcon />
<Typography variant="subtitle1" ml={1}>
주정차 심사 현황 (종료일 : {msEdate1})
</Typography>
</Box>
<MuiDataGrid
columns={judgeColumns}
rowsState={rowsState1}
totalCount={totalCount1 || 0}
setRowsState={() => {}}
gridHeight={300}
/>
</CardContent>
</Card>
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={4}>
<Typography variant="subtitle1">거주자심사자현황 (심사종료일 : {msEdate2})</Typography> <Card
<MuiDataGrid sx={{
columns={judgeColumns} background: theme.palette.mode === 'dark' ? theme.palette.dark[900] : '#fff',
rowsState={rowsState2} [theme.breakpoints.down('sm')]: {
totalCount={totalCount2 || 0} border: 0,
setRowsState={() => {}} boxShadow: 'none'
gridHeight={300} }
/> }}
>
<CardContent>
<Box
sx={{
display: 'flex',
[theme.breakpoints.down('md')]: {
width: 'auto'
}
}}
>
<PlaylistAddCheckIcon />
<Typography variant="subtitle1" ml={1}>
거주자 심사 현황 (종료일 : {msEdate2})
</Typography>
</Box>
<MuiDataGrid
columns={judgeColumns}
rowsState={rowsState2}
totalCount={totalCount2 || 0}
setRowsState={() => {}}
gridHeight={300}
/>
</CardContent>
</Card>
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={4}>
<Typography variant="subtitle1">장애인심사자현황 (심사종료일 : {msEdate3})</Typography> <Card
<MuiDataGrid sx={{
columns={judgeColumns} background: theme.palette.mode === 'dark' ? theme.palette.dark[900] : '#fff',
rowsState={rowsState3} [theme.breakpoints.down('sm')]: {
totalCount={totalCount3 || 0} border: 0,
setRowsState={() => {}} boxShadow: 'none'
gridHeight={300} }
/> }}
>
<CardContent>
<Box
sx={{
display: 'flex',
[theme.breakpoints.down('md')]: {
width: 'auto'
}
}}
>
<PlaylistAddCheckIcon />
<Typography variant="subtitle1" ml={1}>
{' '}
장애인 심사 현황 (종료일 : {msEdate3})
</Typography>
</Box>
<MuiDataGrid
columns={judgeColumns}
rowsState={rowsState3}
totalCount={totalCount3 || 0}
setRowsState={() => {}}
gridHeight={300}
/>
</CardContent>
</Card>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>

Loading…
Cancel
Save