Feat : home page stats modify

johnny990628 · May 25, 2023 · 75e2404 · 75e2404
1 parent 7d65f78
commit 75e2404
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 50 deletions.
diff --git a/src/Components/CustomDialog/Style.js b/src/Components/CustomDialog/Style.js
@@ -2,7 +2,7 @@ import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
     dialogPaper: {
-        backgroundColor: theme.palette.background.secondary,
+        backgroundColor: theme.palette.background.opaque,
     },
 }))
 

diff --git a/src/Components/CustomNavbar/CustomNavbar.js b/src/Components/CustomNavbar/CustomNavbar.js
@@ -15,6 +15,7 @@ import { apiGetCookie } from '../../Axios/Cookie'
 
 import { openDialog } from '../../Redux/Slices/Dialog'
 import CustomDialog from '../CustomDialog/CustomDialog'
+import { fetchDashboard } from '../../Redux/Slices/Dashboard'
 
 const CustomNavbar = () => {
     const [event, setEvent] = useState('all')
@@ -39,6 +40,9 @@ const CustomNavbar = () => {
             case '/report':
                 dispatch(scheduleTrigger())
                 break
+            case '/':
+                dispatch(fetchDashboard())
+                break
             default:
                 break
         }

diff --git a/src/Components/LittleTable/LittleTable.js b/src/Components/LittleTable/LittleTable.js
@@ -28,7 +28,15 @@ const LittleTable = ({ title, rows, cols, route }) => {
                             <TableRow key={row.id} className={[classes.tableRow, classes.link]} component={Link} to={route}>
                                 {cols.map(col => (
                                     <TableCell key={col.accessor} component="th" scope="row" className={classes.tableCell}>
-                                        {row[col.accessor]}
+                                        {col.type === 'text' && row[col.accessor]}
+                                        {col.type === 'datetime' && (
+                                            <Box>
+                                                <Box>{new Date(row[col.accessor]).toLocaleDateString()}</Box>
+                                                <Box sx={{ fontSize: '.8rem', color: 'gray.main' }}>
+                                                    {new Date(row[col.accessor]).toLocaleTimeString()}
+                                                </Box>
+                                            </Box>
+                                        )}
                                     </TableCell>
                                 ))}
                             </TableRow>

diff --git a/src/Pages/Home/Home.js b/src/Pages/Home/Home.js
@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import Progressbar from '../../Components/Progressbar/Progressbar'
 import useStyles from './Style'
 import LittleTable from '../../Components/LittleTable/LittleTable'
-import { fetchDashboard, fetchDepartment } from '../../Redux/Slices/Dashboard'
+import { fetchDashboard } from '../../Redux/Slices/Dashboard'
 import { DayPicker } from 'react-day-picker'
 import { format, isValid, addDays } from 'date-fns'
 import { zhTW } from 'date-fns/locale'
@@ -15,41 +15,36 @@ const Home = () => {
     const classes = useStyles()
     const dispatch = useDispatch()
     const theme = useTheme()
-    const { patients, reports, schedules, count, departments } = useSelector(state => state.dashboard)
+    const { patients, waitExaminationSchedule, finishSchedule, count } = useSelector(state => state.dashboard)
+    const { departments } = useSelector(state => state.department4List)
     const isComputer = useMediaQuery(theme.breakpoints.up('xl'))
     const [selectDepartment, setSelectDepartment] = useState('all')
     const [date, setDate] = useState(new Date())
     const [datePickerDialog, setDatePickerDialog] = useState(false)
 
     const patientCol = useMemo(
         () => [
-            { accessor: 'id', Header: '身分證字號' },
-            { accessor: 'name', Header: '姓名' },
-            { accessor: 'gender', Header: '性別' },
+            { accessor: 'id', Header: '身分證字號', type: 'text' },
+            { accessor: 'name', Header: '姓名', type: 'text' },
+            { accessor: 'gender', Header: '性別', type: 'text' },
         ],
         []
     )
-    const scheduleCol = useMemo(
+    const waitScheduleCol = useMemo(
         () => [
-            { accessor: 'patientID', Header: '身分證字號' },
-            { accessor: 'procedureCode', Header: '病例代碼' },
+            { accessor: 'patientID', Header: '身分證字號', type: 'text' },
+            { accessor: 'createdAt', Header: '排程時間', type: 'datetime' },
         ],
         []
     )
-    const reportCol = useMemo(
+    const finishScheduleCol = useMemo(
         () => [
-            { accessor: 'patientID', Header: '身分證字號' },
-            { accessor: 'blood', Header: '抽血編號' },
-            { accessor: 'procedureCode', Header: '病例代碼' },
-            { accessor: 'status', Header: '狀態' },
+            { accessor: 'patientID', Header: '身分證字號', type: 'text' },
+            { accessor: 'updatedAt', Header: '完成時間', type: 'datetime' },
         ],
         []
     )
 
-    useEffect(() => {
-        dispatch(fetchDepartment())
-    }, [])
-
     useEffect(() => {
         const [dateFrom, dateTo] = [date.toLocaleDateString(), new Date(addDays(date, 1)).toLocaleDateString()]
         const department = selectDepartment === 'all' ? null : selectDepartment
@@ -105,12 +100,12 @@ const Home = () => {
                     <Grid container spacing={2}>
                         <Grid item xs={6} lg={4}>
                             <Box className={classes.box}>
-                                <LittleCard title={'未檢查'} value={count?.schedule} total={count?.patient} />
+                                <LittleCard title={'尚未檢查'} value={count?.waitExamination} total={count?.patient} />
                             </Box>
                         </Grid>
                         <Grid item xs={6} lg={4}>
                             <Box className={classes.box}>
-                                <LittleCard title={'報告數'} value={count?.report} total={count?.patient} />
+                                <LittleCard title={'完成檢查'} value={count?.finish} total={count?.patient} />
                             </Box>
                         </Grid>
                         <Grid item xs={6} lg={4}>
@@ -126,7 +121,7 @@ const Home = () => {
                     </Grid>
                 </Grid>
                 <Grid container item md={12} xl={4} spacing={2}>
-                    {isComputer && (
+                    {/* {isComputer && (
                         <Grid container item xs={12} spacing={2}>
                             <Grid item xs={6}>
                                 <Box className={classes.box}>
@@ -156,16 +151,16 @@ const Home = () => {
                                 </Box>
                             </Grid>
                         </Grid>
-                    )}
+                    )} */}
 
                     <Grid item xs={12}>
                         <Box className={classes.box}>
-                            <LittleTable title={'未檢查'} rows={schedules} cols={scheduleCol} route={'/createReport'} />
+                            <LittleTable title={'尚未檢查'} rows={waitExaminationSchedule} cols={waitScheduleCol} route={'/patient'} />
                         </Box>
                     </Grid>
                     <Grid item xs={12}>
                         <Box className={classes.box}>
-                            <LittleTable title={'當日報告'} rows={reports} cols={reportCol} route={'/report'} />
+                            <LittleTable title={'完成檢查'} rows={finishSchedule} cols={finishScheduleCol} route={'/report'} />
                         </Box>
                     </Grid>
                 </Grid>

diff --git a/src/Redux/Slices/Dashboard.js b/src/Redux/Slices/Dashboard.js
@@ -1,32 +1,20 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
-import { apiGetDashboard, apiGetDashboardByDepartmentID } from '../../Axios/Dashboard'
-import { apiGetDepartments } from '../../Axios/Department'
+import { apiGetDashboard } from '../../Axios/Dashboard'
 import { tokenExpirationHandler } from '../../Utils/ErrorHandle'
 
-export const fetchDashboard = createAsyncThunk('dashboard/fetchDashboard', async ({ dateFrom, dateTo, department }, thunkAPI) => {
+export const fetchDashboard = createAsyncThunk('dashboard/fetchDashboard', async (_, thunkAPI) => {
     try {
-        const response = department
-            ? await apiGetDashboardByDepartmentID(department, { dateFrom, dateTo, limit: 5 })
-            : await apiGetDashboard({ dateFrom, dateTo, limit: 5 })
-        const { patients, reports, schedules, count } = response.data
+        const response = await apiGetDashboard({ limit: 5 })
+        const { patients, waitExaminationSchedule, finishSchedule, count } = response.data
 
-        return { patients: patients, reports: reports, schedules: schedules, count: count }
+        return { patients, waitExaminationSchedule, finishSchedule, count }
     } catch (e) {
         thunkAPI.dispatch(tokenExpirationHandler(e.response))
         return thunkAPI.rejectWithValue()
     }
 })
 
-export const fetchDepartment = createAsyncThunk('dashboard/fetchDepartment', async (_, thunkAPI) => {
-    try {
-        const departments = await apiGetDepartments({ limit: 100, offset: 0, sort: 'createdAt', desc: -1 })
-        return { departments: departments.data.results }
-    } catch (e) {
-        thunkAPI.dispatch(tokenExpirationHandler(e.response))
-        return thunkAPI.rejectWithValue()
-    }
-})
-const initialState = { patients: [], reports: [], schedules: [], departments: [], count: { patient: 0, report: 0, schedule: 0 } }
+const initialState = { patients: [], waitExamintionSchedule: [], finishSchedule: [], count: { patient: 0, waitExamination: 0, finish: 0 } }
 const dashboardSlice = createSlice({
     name: 'dashboard',
     initialState,
@@ -36,13 +24,7 @@ const dashboardSlice = createSlice({
             return { ...state, ...action.payload }
         },
         [fetchDashboard.rejected]: (state, action) => {
-            return { ...initialState, departments: state.departments }
-        },
-        [fetchDepartment.fulfilled]: (state, action) => {
-            return { ...state, ...action.payload }
-        },
-        [fetchDepartment.rejected]: (state, action) => {
-            return { ...initialState, departments: [] }
+            return initialState
         },
     },
 })