upd: tampilan kegiatan dan tugas divisi

Deskripsi:
- menambahkan chart progres pada list kegiatan
- menambahkan label status pada list tugas divisi

No Issues
This commit is contained in:
amel
2025-02-05 12:00:37 +08:00
parent 52aafa9fe5
commit 9679b5d326
4 changed files with 49 additions and 15 deletions

View File

@@ -1,6 +1,6 @@
import { currentScroll, globalNotifPage, ReloadButtonTop, SkeletonList, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core";
import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { useParams, useRouter, useSearchParams } from "next/navigation";
@@ -246,14 +246,30 @@ export default function ListDivisionTask() {
</Flex>
</Box>
</Card.Section>
<Box pt={10}>
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
<Progress.Section value={_.isNull(v.progress) ? 0 : v.progress} color="yellow" striped >
<Progress.Label>{_.isNull(v.progress) ? 0 : v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text my={10}>{v.desc}</Text>
<Box pt={15}>
{
v.status > 0 &&
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
<Progress.Section value={_.isNull(v.progress) ? 0 : v.progress} color="yellow" striped >
<Progress.Label>{_.isNull(v.progress) ? 0 : v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
}
<Text lineClamp={2} my={v.status > 0 ? 10 : 0}>{v.desc}</Text>
<Group align='center' pt={10} justify='space-between'>
<Badge color={
v.status === 0 ? '#1372C4' :
v.status === 1 ? '#C5771A' :
v.status === 2 ? '#0B6025' :
v.status === 3 ? '#BB1F1F' :
""
}>{
v.status === 0 ? 'Segera' :
v.status === 1 ? 'Dikerjakan' :
v.status === 2 ? 'Selesai' :
v.status === 3 ? 'Batal' :
""
}</Badge>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={tema.get().utama} />