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,7 +1,7 @@
import { DIR, funSendWebPush, funUploadFile, prisma } from "@/module/_global"; import { DIR, funSendWebPush, funUploadFile, prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth"; import { funGetUserByCookies } from "@/module/auth";
import { createLogUser } from "@/module/user"; import { createLogUser } from "@/module/user";
import _ from "lodash"; import _, { ceil } from "lodash";
import { NextResponse } from "next/server"; import { NextResponse } from "next/server";
@@ -94,6 +94,15 @@ export async function GET(request: Request) {
select: { select: {
idUser: true idUser: true
} }
},
ProjectTask: {
where: {
isActive: true
},
select: {
title: true,
status: true
}
} }
}, },
orderBy: { orderBy: {
@@ -102,11 +111,11 @@ export async function GET(request: Request) {
}) })
const omitData = data.map((v: any) => ({ const omitData = data.map((v: any) => ({
..._.omit(v, ["ProjectMember"]), ..._.omit(v, ["ProjectMember", "ProjectTask"]),
progress: ceil((v.ProjectTask.filter((i: any) => i.status == 1).length * 100) / v.ProjectTask.length),
member: v.ProjectMember.length member: v.ProjectMember.length
})) }))
const totalData = await prisma.project.count({ const totalData = await prisma.project.count({
where: kondisi where: kondisi
}) })

View File

@@ -4,6 +4,7 @@ export interface IDataProject {
desc: string desc: string
status: number status: number
member: number member: number
progress: number
} }
export interface IDataListTaskProject { export interface IDataListTaskProject {

View File

@@ -1,7 +1,7 @@
"use client" "use client"
import { currentScroll, globalNotifPage, globalRole, ReloadButtonTop, SkeletonList, TEMA } from '@/module/_global'; import { currentScroll, globalNotifPage, globalRole, ReloadButtonTop, SkeletonList, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, 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 { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import _ from 'lodash'; import _ from 'lodash';
import { useRouter, useSearchParams } from 'next/navigation'; import { useRouter, useSearchParams } from 'next/navigation';
@@ -260,8 +260,16 @@ export default function ListProject() {
</Flex> </Flex>
</Box> </Box>
</Card.Section> </Card.Section>
<Box pt={10}> <Box pt={15}>
<Text>{v.desc}</Text> {
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'> <Group align='center' pt={10} justify='space-between'>
<Badge color={ <Badge color={
v.status === 0 ? '#1372C4' : v.status === 0 ? '#1372C4' :
@@ -273,7 +281,7 @@ export default function ListProject() {
v.status === 0 ? 'Segera' : v.status === 0 ? 'Segera' :
v.status === 1 ? 'Dikerjakan' : v.status === 1 ? 'Dikerjakan' :
v.status === 2 ? 'Selesai' : v.status === 2 ? 'Selesai' :
v.status === 3 ? 'Dibatalkan' : v.status === 3 ? 'Batal' :
"" ""
}</Badge> }</Badge>
<Avatar.Group> <Avatar.Group>

View File

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