Permalink
October 19, 2023 16:50
October 19, 2023 16:50
October 19, 2023 16:50
October 19, 2023 16:50
November 4, 2023 13:42
October 19, 2023 16:50
October 24, 2023 00:32
October 24, 2023 00:32
August 23, 2024 02:46
October 19, 2023 16:50
November 4, 2023 13:42
February 29, 2024 02:14
August 23, 2024 02:46
August 23, 2024 02:46
October 19, 2023 16:50
May 12, 2024 02:02
October 19, 2023 16:50
October 19, 2023 16:50
October 19, 2023 16:50
October 19, 2023 16:50
Newer
100644
170 lines (159 sloc)
5.1 KB
1
import {
2
Box,
3
Button,
4
Card,
5
CardBody,
6
CardFooter,
7
CardHeader,
8
Heading,
10
Stack,
11
StackDivider,
12
Text,
15
} from "@chakra-ui/react";
17
18
export default function (
19
props: InactivityNoticeProps & { port?: MessagePort },
20
) {
41
});
42
43
return;
44
}
45
46
toast({
47
description: `Inactivity notice ${accepted ? "accepted" : "denied"}.`,
48
isClosable: true,
49
status: "success",
58
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
64
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
68
const Pending = () => (
69
<svg
70
xmlns="http://www.w3.org/2000/svg"
71
width="16"
72
height="16"
73
fill="currentColor"
74
viewBox="0 0 16 16"
75
>
76
<path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z" />
77
</svg>
78
);
79
80
return (
81
<Card w="100%">
82
<CardHeader>
83
<Heading size="md">Inactivity Notice for {props.user.username}</Heading>
84
<Text fontSize="xs">ID: {props.user.id}</Text>
85
</CardHeader>
86
<CardBody>
87
<Stack divider={<StackDivider />}>
88
<Box>
89
<Heading size="xs">Reason for Inactivity</Heading>
90
<Text>{props.reason}</Text>
91
</Box>
92
<Box>
93
<Heading size="xs">Start Date</Heading>
94
<Text>{new Date(props.start).toLocaleDateString()}</Text>
95
</Box>
96
<Box>
97
<Heading size="xs">End Date</Heading>
98
<Text>{new Date(props.end).toLocaleDateString()}</Text>
99
</Box>
100
{typeof props.hiatus === "boolean" ? (
101
<Box>
102
<Heading size="xs">Notice Type</Heading>
103
<Text>
104
{props.hiatus ? "Hiatus/Inactivity" : "Activity Decrease"}
105
</Text>
108
<Box>
109
<Heading size="xs">Decisions</Heading>
110
<UnorderedList>
111
{props.departments.map((d) => {
112
const dept = d as "ET" | "DM" | "FM" | "WM";
113
114
return (
117
<Text>{d}: </Text>
118
{typeof props.decisions[dept] === "boolean" ? (
119
props.decisions[dept] ? (
120
<Approved />
121
) : (
122
<Denied />
123
)
124
) : (
125
<Pending />
126
)}
133
</Stack>
134
</CardBody>
135
<CardFooter
136
display={
137
props.departments.length !==
138
Object.values(
139
props.decisions as {
140
[k: string]: boolean;
141
},
142
).length
143
? undefined
144
: "none"
145
}
146
pb="4px"
147
>
148
<Box>
149
<Button
150
colorScheme="red"
151
onClick={async () => await makeDecision(false)}
154
>
155
Deny
156
</Button>
157
<Button
158
colorScheme="blue"
159
ml="8px"
160
onClick={async () => await makeDecision(true)}
164
Accept
165
</Button>
166
</Box>
167
</CardFooter>
168
</Card>
169
);
170
}