aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/History
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/History')
-rw-r--r--src/views/History/ChoreHistory.jsx140
-rw-r--r--src/views/History/HistoryCard.jsx53
2 files changed, 107 insertions, 86 deletions
diff --git a/src/views/History/ChoreHistory.jsx b/src/views/History/ChoreHistory.jsx
index b85e456..1db1f06 100644
--- a/src/views/History/ChoreHistory.jsx
+++ b/src/views/History/ChoreHistory.jsx
@@ -1,15 +1,13 @@
-import { Checklist, EventBusy, Timelapse } from '@mui/icons-material'
+import { Checklist, EventBusy, Group, Timelapse } from '@mui/icons-material'
import {
Avatar,
- Box,
Button,
- CircularProgress,
+ Chip,
Container,
Grid,
List,
ListItem,
ListItemContent,
- ListItemDecorator,
Sheet,
Typography,
} from '@mui/joy'
@@ -19,6 +17,7 @@ import { Link, useParams } from 'react-router-dom'
import { API_URL } from '../../Config'
import { GetAllCircleMembers } from '../../utils/Fetcher'
import { Fetch } from '../../utils/TokenManager'
+import LoadingComponent from '../components/Loading'
import HistoryCard from './HistoryCard'
const ChoreHistory = () => {
@@ -92,59 +91,49 @@ const ChoreHistory = () => {
const historyInfo = [
{
- icon: (
- <Avatar>
- <Checklist />
- </Avatar>
- ),
- text: `${histories.length} completed`,
- subtext: `${Object.keys(userHistories).length} users contributed`,
+ icon: <Checklist />,
+ text: 'Total Completed',
+ subtext: `${histories.length} times`,
},
{
- icon: (
- <Avatar>
- <Timelapse />
- </Avatar>
- ),
- text: `Completed within ${moment
- .duration(averageDelayMoment)
- .humanize()}`,
- subtext: `Maximum delay was ${moment
- .duration(maxDelayMoment)
- .humanize()}`,
+ icon: <Timelapse />,
+ text: 'Usually Within',
+ subtext: moment.duration(averageDelayMoment).humanize(),
},
{
- icon: <Avatar></Avatar>,
- text: `${
+ icon: <Timelapse />,
+ text: 'Maximum Delay',
+ subtext: moment.duration(maxDelayMoment).humanize(),
+ },
+ {
+ icon: <Avatar />,
+ text: ' Completed Most',
+ subtext: `${
performers.find(p => p.userId === Number(userCompletedByMost))
?.displayName
- } completed most`,
- subtext: `${userHistories[userCompletedByMost]} time/s`,
+ } `,
+ },
+ // contributes:
+ {
+ icon: <Group />,
+ text: 'Total Performers',
+ subtext: `${Object.keys(userHistories).length} users`,
+ },
+ {
+ icon: <Avatar />,
+ text: 'Last Completed',
+ subtext: `${
+ performers.find(p => p.userId === Number(histories[0].completedBy))
+ ?.displayName
+ }`,
},
]
- if (userCompletedByLeast !== userCompletedByMost) {
- historyInfo.push({
- icon: (
- <Avatar>
- {
- performers.find(p => p.userId === userCompletedByLeast)
- ?.displayName
- }
- </Avatar>
- ),
- text: `${
- performers.find(p => p.userId === Number(userCompletedByLeast))
- .displayName
- } completed least`,
- subtext: `${userHistories[userCompletedByLeast]} time/s`,
- })
- }
setHistoryInfo(historyInfo)
}
if (isLoading) {
- return <CircularProgress /> // Show loading indicator
+ return <LoadingComponent />
}
if (!choreHistory.length) {
return (
@@ -184,50 +173,43 @@ const ChoreHistory = () => {
return (
<Container maxWidth='md'>
- <Typography level='h3' mb={1.5}>
+ <Typography level='title-md' mb={1.5}>
Summary:
</Typography>
- {/* <Sheet sx={{ mb: 1, borderRadius: 'sm', p: 2, boxShadow: 'md' }}>
- <ListItem sx={{ gap: 1.5 }}>
- <ListItemDecorator>
- <Avatar>
- <AccountCircle />
- </Avatar>
- </ListItemDecorator>
- <ListItemContent>
- <Typography level='body1' sx={{ fontWeight: 'md' }}>
- {choreHistory.length} completed
- </Typography>
- <Typography level='body2' color='text.tertiary'>
- {Object.keys(userHistory).length} users contributed
- </Typography>
- </ListItemContent>
- </ListItem>
- </Sheet> */}
- <Grid container>
- {historyInfo.map((info, index) => (
- <Grid key={index} item xs={12} sm={6}>
- <Sheet sx={{ mb: 1, borderRadius: 'sm', p: 2, boxShadow: 'md' }}>
- <ListItem sx={{ gap: 1.5 }}>
- <ListItemDecorator>{info.icon}</ListItemDecorator>
+ <Sheet
+ // sx={{
+ // mb: 1,
+ // borderRadius: 'lg',
+ // p: 2,
+ // }}
+ sx={{ borderRadius: 'sm', p: 2 }}
+ variant='outlined'
+ >
+ <Grid container spacing={1}>
+ {historyInfo.map((info, index) => (
+ <Grid item xs={4} key={index}>
+ {/* divider between the list items: */}
+
+ <ListItem key={index}>
<ListItemContent>
- <Typography level='body1' sx={{ fontWeight: 'md' }}>
+ <Typography level='body-xs' sx={{ fontWeight: 'md' }}>
{info.text}
</Typography>
- <Typography level='body1' color='text.tertiary'>
- {info.subtext}
- </Typography>
+ <Chip color='primary' size='md' startDecorator={info.icon}>
+ {info.subtext ? info.subtext : '--'}
+ </Chip>
</ListItemContent>
</ListItem>
- </Sheet>
- </Grid>
- ))}
- </Grid>
+ </Grid>
+ ))}
+ </Grid>
+ </Sheet>
+
{/* User History Cards */}
- <Typography level='h3' my={1.5}>
+ <Typography level='title-md' my={1.5}>
History:
</Typography>
- <Box sx={{ borderRadius: 'sm', p: 2, boxShadow: 'md' }}>
+ <Sheet sx={{ borderRadius: 'sm', p: 2, boxShadow: 'md' }}>
{/* Chore History List (Updated Style) */}
<List sx={{ p: 0 }}>
@@ -241,7 +223,7 @@ const ChoreHistory = () => {
/>
))}
</List>
- </Box>
+ </Sheet>
</Container>
)
}
diff --git a/src/views/History/HistoryCard.jsx b/src/views/History/HistoryCard.jsx
index c606fbf..5e71f52 100644
--- a/src/views/History/HistoryCard.jsx
+++ b/src/views/History/HistoryCard.jsx
@@ -1,3 +1,4 @@
+import { CalendarViewDay, Check, Timelapse } from '@mui/icons-material'
import {
Avatar,
Box,
@@ -30,6 +31,50 @@ const HistoryCard = ({ allHistory, performers, historyEntry, index }) => {
return `${timeValue} ${unit}${timeValue !== 1 ? 's' : ''}`
}
+
+ const getCompletedChip = historyEntry => {
+ var text = 'No Due Date'
+ var color = 'info'
+ var icon = <CalendarViewDay />
+ // if completed few hours +-6 hours
+ if (
+ historyEntry.dueDate &&
+ historyEntry.completedAt > historyEntry.dueDate - 1000 * 60 * 60 * 6 &&
+ historyEntry.completedAt < historyEntry.dueDate + 1000 * 60 * 60 * 6
+ ) {
+ text = 'On Time'
+ color = 'success'
+ icon = <Check />
+ } else if (
+ historyEntry.dueDate &&
+ historyEntry.completedAt < historyEntry.dueDate
+ ) {
+ text = 'On Time'
+ color = 'success'
+ icon = <Check />
+ }
+
+ // if completed after due date then it's late
+ else if (
+ historyEntry.dueDate &&
+ historyEntry.completedAt > historyEntry.dueDate
+ ) {
+ text = 'Late'
+ color = 'warning'
+ icon = <Timelapse />
+ } else {
+ text = 'No Due Date'
+ color = 'info'
+ icon = <CalendarViewDay />
+ }
+
+ return (
+ <Chip startDecorator={icon} color={color}>
+ {text}
+ </Chip>
+ )
+ }
+
return (
<>
<ListItem sx={{ gap: 1.5, alignItems: 'flex-start' }}>
@@ -55,13 +100,7 @@ const HistoryCard = ({ allHistory, performers, historyEntry, index }) => {
<Typography level='body1' sx={{ fontWeight: 'md' }}>
{moment(historyEntry.completedAt).format('ddd MM/DD/yyyy HH:mm')}
</Typography>
-
- <Chip>
- {historyEntry.dueDate &&
- historyEntry.completedAt > historyEntry.dueDate
- ? 'Late'
- : 'On Time'}
- </Chip>
+ {getCompletedChip(historyEntry)}
</Box>
<Typography level='body2' color='text.tertiary'>
<Chip>
generated by cgit (git 2.34.1) at 2024-11-25 18:08:39 +0000