1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
import { Card, Grid, Typography } from '@mui/joy'
import moment from 'moment'
import ChoreCard from '../Chores/ChoreCard'
const DemoMyChore = () => {
const cards = [
{
id: 12,
name: '♻️ Take out recycle ',
frequencyType: 'days_of_the_week',
frequency: 1,
frequencyMetadata:
'{"days":["thursday"],"time":"2024-07-07T22:00:00-04:00"}',
nextDueDate: moment().add(1, 'days').hour(8).minute(0).toISOString(),
isRolling: false,
assignedTo: 1,
},
{
id: 9,
name: '🐜 Spray Pesticide',
frequencyType: 'interval',
frequency: 3,
frequencyMetadata: '{"unit":"months"}',
nextDueDate: moment().subtract(7, 'day').toISOString(),
isRolling: false,
assignedTo: 1,
},
{
id: 6,
name: '🍂 Gutter Cleaning',
frequencyType: 'day_of_the_month',
frequency: 1,
frequencyMetadata: '{"months":["may"]}',
nextDueDate: moment()
.month('may')
.year(moment().year() + 1)
.date(1)
.hour(17)
.minute(0)
.toISOString(),
isRolling: false,
assignedTo: 1,
},
// {
// id: 10,
// name: '💨 Air dust Synology NAS and',
// frequencyType: 'interval',
// frequency: 12,
// frequencyMetadata: '{"unit":"weeks"}',
// nextDueDate: '2024-07-24T17:18:00Z',
// isRolling: false,
// assignedTo: 1,
// },
// {
// id: 8,
// name: '🛁 Deep Cleaning Bathroom',
// frequencyType: 'monthly',
// frequency: 1,
// frequencyMetadata: '{}',
// nextDueDate: '2024-08-04T17:15:00Z',
// isRolling: false,
// assignedTo: 1,
// },
// {
// id: 11,
// name: '☴ Replace AC Air filter',
// frequencyType: 'adaptive',
// frequency: 1,
// frequencyMetadata: '{"unit":"days"}',
// nextDueDate: moment().add(120, 'days').toISOString(),
// isRolling: false,
// assignedTo: 1,
// },
// {
// id: 6,
// name: '🍂 Gutter Cleaning ',
// frequencyType: 'day_of_the_month',
// frequency: 1,
// frequencyMetadata: '{"months":["may"]}',
// nextDueDate: '2025-05-01T17:00:00Z',
// isRolling: false,
// assignedTo: 1,
// },
// {
// id: 13,
// name: '🚰 Replace Water Filter',
// frequencyType: 'yearly',
// frequency: 1,
// frequencyMetadata: '{}',
// nextDueDate: '2025-07-08T01:00:00Z',
// isRolling: false,
// assignedTo: 1,
// },
]
const users = [{ displayName: 'Me', id: 1 }]
return (
<>
<Grid item xs={12} sm={5} data-aos-first-tasks-list>
{cards.map((card, index) => (
<div
key={index}
data-aos-delay={100 * index + 200}
data-aos-anchor='[data-aos-first-tasks-list]'
data-aos='fade-up'
>
<ChoreCard chore={card} performers={users} viewOnly={true} />
</div>
))}
</Grid>
<Grid item xs={12} sm={7} data-aos-my-chore-demo-section>
<Card
sx={{
p: 4,
py: 6,
}}
data-aos-delay={200}
data-aos-anchor='[data-aos-my-chore-demo-section]'
data-aos='fade-left'
>
<Typography level='h3' textAlign='center' sx={{ mt: 2, mb: 4 }}>
Glance at your task and chores
</Typography>
<Typography level='body-lg' textAlign='center' sx={{ mb: 4 }}>
Main view prioritize tasks due today, followed by overdue ones, and
finally, future tasks or those without due dates. With Donetick, you
can view all the tasks you've created (whether assigned to you or
not) as well as tasks assigned to you by others. Quickly mark them
as done with just one click, ensuring a smooth and efficient task
management experience.
</Typography>
</Card>
</Grid>
</>
)
}
export default DemoMyChore
|
