aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/ChoreEdit
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--src/views/ChoreEdit/ChoreView.jsx106
1 files changed, 80 insertions, 26 deletions
diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx
index df45aa7..9e3357b 100644
--- a/src/views/ChoreEdit/ChoreView.jsx
+++ b/src/views/ChoreEdit/ChoreView.jsx
@@ -3,15 +3,19 @@ import {
CancelScheduleSend,
Check,
Checklist,
+ Edit,
+ History,
Note,
PeopleAlt,
Person,
+ Timelapse,
} from '@mui/icons-material'
import {
Box,
Button,
Card,
Checkbox,
+ Chip,
Container,
FormControl,
Grid,
@@ -84,21 +88,24 @@ const ChoreView = () => {
const generateInfoCards = chore => {
const cards = [
+ // {
+ // size: 6,
+ // icon: <CalendarMonth />,
+ // text: 'Due Date',
+ // subtext: moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A'),
+ // },
{
- icon: <CalendarMonth />,
- text: 'Due Date',
- subtext: moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A'),
- },
- {
+ size: 6,
icon: <PeopleAlt />,
text: 'Assigned To',
subtext: performers.find(p => p.id === chore.assignedTo)?.displayName,
},
- {
- icon: <Person />,
- text: 'Created By',
- subtext: performers.find(p => p.id === chore.createdBy)?.displayName,
- },
+ // {
+ // size: 6,
+ // icon: <Person />,
+ // text: 'Created By',
+ // subtext: performers.find(p => p.id === chore.createdBy)?.displayName,
+ // },
// {
// icon: <TextFields />,
// text: 'Frequency',
@@ -107,20 +114,23 @@ const ChoreView = () => {
// chore.frequencyType.slice(1),
// },
{
+ size: 6,
icon: <Checklist />,
- text: 'Total Completed',
- subtext: `${chore.totalCompletedCount}`,
+ text: 'Completed',
+ subtext: `${chore.totalCompletedCount} times`,
},
- // {
- // icon: <Timelapse />,
- // text: 'Last Completed',
- // subtext:
- // chore.lastCompletedDate &&
- // moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'),
- // },
{
+ size: 6,
+ icon: <Timelapse />,
+ text: 'Last time',
+ subtext:
+ chore.lastCompletedDate &&
+ moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'),
+ },
+ {
+ size: 6,
icon: <Person />,
- text: 'Last Completed',
+ text: 'Last',
subtext: chore.lastCompletedDate
? `${
chore.lastCompletedDate &&
@@ -132,6 +142,7 @@ const ChoreView = () => {
: 'Never',
},
{
+ size: 12,
icon: <Note />,
text: 'Recent Note',
subtext: chore.notes || '--',
@@ -195,22 +206,43 @@ const ChoreView = () => {
justifyContent: 'space-between',
}}
>
- <Box>
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ textAlign: 'center',
+ }}
+ >
<Typography
level='h3'
- textAlign={'center'}
+ // textAlign={'center'}
sx={{
mt: 2,
- mb: 4,
+ mb: 1,
}}
>
{chore.name}
</Typography>
-
+ <Chip startDecorator={<CalendarMonth />} size='lg' sx={{ mb: 4 }}>
+ {chore.nextDueDate
+ ? `Due at ${moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A')}`
+ : 'N/A'}
+ </Chip>
+ </Box>
+ <Box>
<Grid container spacing={1}>
{infoCards.map((info, index) => (
- <Grid key={index} item xs={12} sm={6}>
- <Sheet sx={{ mb: 1, borderRadius: 'md', p: 1, boxShadow: 'sm' }}>
+ <Grid key={index} item xs={info.size} sm={info.size}>
+ <Sheet
+ sx={{
+ mb: 1,
+ borderRadius: 'lg',
+ p: 1,
+ boxShadow: 'sm',
+ }}
+ >
<ListItem>
<ListItemDecorator>
<IconCard>{info.icon}</IconCard>
@@ -227,6 +259,28 @@ const ChoreView = () => {
</Sheet>
</Grid>
))}
+ <Grid item xs={6}>
+ <Button
+ startDecorator={<History />}
+ size='lg'
+ color='success'
+ variant='outlined'
+ fullWidth
+ >
+ History
+ </Button>
+ </Grid>
+ <Grid item xs={6}>
+ <Button
+ startDecorator={<Edit />}
+ size='lg'
+ color='success'
+ variant='outlined'
+ fullWidth
+ >
+ Edit
+ </Button>
+ </Grid>
</Grid>
</Box>
{/* <Divider