wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : update project get all

Browse Source
This commit is contained in:
lukman
2024-08-21 14:01:17 +08:00
parent 07369e5db9
commit d2d2b0cc9e
19 changed files with 683 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
prisma/schema.prisma
View File

@@ -167,6 +167,7 @@ model Project {
Group Group @relation(fields: [idGroup], references: [id])
idGroup String
name String
status Int @default(0) // 0 = pending, 1 = ongoing, 2 = done, 3 = cancelled
desc String @db.Text
isActive Boolean @default(true)
User User @relation(fields: [createdBy], references: [id])

13
src/app/(application)/project/[id]/page.tsx
View File

@@ -1,9 +1,18 @@
import { ViewDetailProject } from '@/module/project';
import { LiatAnggotaDetailProject, ListFileDetailProject, ListTugasDetailProject, NavbarDetailProject, ProgressDetailProject, ViewDetailProject } from '@/module/project';
import { Box } from '@mantine/core';
import React from 'react';
function Page() {
return (
<ViewDetailProject/>
<Box>
<NavbarDetailProject />
<Box p={20}>
<ProgressDetailProject />
<ListTugasDetailProject />
<ListFileDetailProject />
<LiatAnggotaDetailProject />
</Box>
</Box>
);
}

4
src/app/(application)/project/page.tsx
View File

@@ -1,12 +1,12 @@
import { ViewFilter } from '@/module/_global';
import { ViewProject } from '@/module/project';
import { TabProject, ViewProject } from '@/module/project';
import React from 'react';
function Page({ searchParams }: { searchParams: { cat: string } }) {
if (searchParams.cat == 'filter')
return <ViewFilter linkFilter='project' />
return (
<ViewProject />
<TabProject />
);
}

41
src/app/api/project/[id]/route.ts Normal file
View File

@@ -0,0 +1,41 @@
import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth";
import { NextResponse } from "next/server";
// GET ONE PROJECT
export async function GET(request: Request, context: { params: { id: string } }) {
try {
const { id } = context.params;
const user = await funGetUserByCookies()
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const data = await prisma.project.findFirst({
where: {
id: id
},
select: {
id: true,
name: true,
desc: true,
status: true,
ProjectMember: {
where: {
isActive: true
},
select: {
idUser: true
}
}
}
})
return NextResponse.json({ success: true, message: "Berhasil mendapatkan project", data: data, }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan project, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
}

65
src/app/api/project/route.ts Normal file
View File

@@ -0,0 +1,65 @@
import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth";
import _ from "lodash";
import { NextResponse } from "next/server";
// GET ALL DATA PROJECT
export async function GET(request: Request) {
try {
const user = await funGetUserByCookies()
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const { searchParams } = new URL(request.url);
const name = searchParams.get('search');
const status = searchParams.get('status');
const villageId = user.idVillage
const groupId = user.idGroup
const userId = user.id
const data = await prisma.project.findMany({
where: {
isActive: true,
idVillage: String(villageId),
idGroup: String(groupId),
createdBy: String(userId),
name: {
contains: (name == undefined || name == "null") ? "" : name,
mode: "insensitive"
},
status: (status == "0" || status == "1" || status == "2" || status == "3") ? Number(status) : 0
},
select: {
id: true,
name: true,
desc: true,
status: true,
ProjectMember: {
where: {
isActive: true
},
select: {
idUser: true
}
}
}
})
const omitData = data.map((v: any) => ({
..._.omit(v, ["ProjectMember"]),
member: v.ProjectMember.length
}))
return NextResponse.json({ success: true, message: "Berhasil mendapatkan project", data: omitData, }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan project, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
}

1
src/module/project/components/detail_project/detail_project.tsx
View File

@@ -109,7 +109,6 @@ export default function DetailProject() {
size="xl"
value={60}
/>
<Text>18 Juni 2024</Text>
</Box>
</Grid.Col>
</Grid>

14
src/module/project/index.ts
View File

@@ -9,6 +9,12 @@ import DetailCreateUserProject from "./components/detail_project/detail_create_u
import DetailDateEndTask from "./components/detail_project/detail_date_end_task";
import DetailFileSave from "./components/detail_project/detail_file_save";
import FileUploadProgres from "./components/detail_project/file_upload_progres";
import TabProject from "./ui/tab_project";
import NavbarDetailProject from "./ui/navbar_detail_project";
import ProgressDetailProject from "./ui/progress_detail_project";
import ListTugasDetailProject from "./ui/list_tugas_detail_project";
import ListFileDetailProject from "./ui/list_file_detail_project";
import LiatAnggotaDetailProject from "./ui/liat_anggota_detail_project";
export { ViewProject }
export { ViewCreateProject }
@@ -20,4 +26,10 @@ export { ViewUpdateProgres }
export { DetailCreateUserProject }
export { DetailDateEndTask }
export { DetailFileSave }
export { FileUploadProgres }
export { FileUploadProgres }
export { TabProject }
export { NavbarDetailProject }
export { ProgressDetailProject }
export { ListTugasDetailProject }
export { ListFileDetailProject }
export { LiatAnggotaDetailProject }

6
src/module/project/lib/api_project.ts
View File

@@ -0,0 +1,6 @@
export const funGetAllProject = async (path?: string) => {
const response = await fetch(`/api/project${(path) ? path : ''}`, { next: { tags: ['project'] } });
return await response.json().catch(() => null);
}

7
src/module/project/lib/type_project.ts
View File

@@ -0,0 +1,7 @@
export interface IDataProject {
id: string
name: string
desc: string
status: number
member: number
}

0
src/module/project/ui/.gitkeep
View File

90
src/module/project/ui/liat_anggota_detail_project.tsx Normal file
View File

@@ -0,0 +1,90 @@
'use client'
import { WARNA } from '@/module/_global';
import { Avatar, Box, Flex, Group, Text } from '@mantine/core';
import React from 'react';
const dataTugas = [
{
id: 1,
name: "Iqbal Ramadan",
image: "https://i.pravatar.cc/1000?img=5",
email: "iqbal.ramadan@gmail.com",
},
{
id: 2,
name: "Doni Setiawan",
image: "https://i.pravatar.cc/1000?img=10",
email: "doni.setiawan@gmail.com",
},
{
id: 3,
name: "Rangga Agung",
image: "https://i.pravatar.cc/1000?img=51",
email: "rangga.agung@gmail.com",
},
{
id: 4,
name: "Ramadan Sananta",
image: "https://i.pravatar.cc/1000?img=15",
email: "ramadan@gmail.com",
},
{
id: 5,
name: "Imam Baroni",
image: "https://i.pravatar.cc/1000?img=22",
email: "imam.baroni@gmail.com",
},
];
export default function LiatAnggotaDetailProject() {
return (
<Box pt={20}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total 10 Anggota</Text>
</Group>
<Box pt={10}>
<Box mb={20}>
<Box
style={{
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
py={10}
>
<Text c={WARNA.biruTua} fw={"bold"}>
Divisi Kerohanian
</Text>
{dataTugas.map((v, i) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mt={20}
key={i}
>
<Group>
<Avatar src={v.image} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
</Text>
<Text c={"#5A687D"} fz={14}>
{v.email}
</Text>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
Anggota
</Text>
</Flex>
);
})}
</Box>
</Box>
</Box>
</Box>
);
}

22
src/module/project/ui/list_file_detail_project.tsx Normal file
View File

@@ -0,0 +1,22 @@
'use client'
import { WARNA } from '@/module/_global';
import { Box, Text } from '@mantine/core';
import React from 'react';
export default function ListFileDetailProject() {
return (
<>
<Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>File</Text>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20
}}>
<Text>Tidak ada file</Text>
</Box>
</Box>
</>
);
}

293
src/module/project/ui/list_project.tsx
View File

@@ -1,158 +1,177 @@
"use client"
import { WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Text, TextInput, Title } from '@mantine/core';
import { useRouter } from 'next/navigation';
import { useRouter, useSearchParams } from 'next/navigation';
import React, { useState } from 'react';
import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
import { MdAccountCircle } from 'react-icons/md';
import { RiCircleFill } from 'react-icons/ri';
import { funGetAllProject } from '../lib/api_project';
import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks';
import { IDataProject } from '../lib/type_project';
const dataProject = [
{
id: 1,
title: 'Project 1',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROJECT PROSES',
},
{
id: 2,
title: 'Project 2',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROJECT PROSES',
},
{
id: 3,
title: 'Project 3',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROJECT PROSES',
},
{
id: 4,
title: 'Project 4',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROJECT PROSES',
},
{
id: 5,
title: 'Project 5',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROJECT PROSES',
},
{
id: 6,
title: 'Project 6',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROJECT PROSES',
},
]
export default function ListProject() {
const [isList, setIsList] = useState(false)
const router = useRouter()
const [isData, setData] = useState<IDataProject[]>([])
const [loading, setLoading] = useState(true);
const searchParams = useSearchParams()
const status = searchParams.get('status')
const [searchQuery, setSearchQuery] = useState('')
const fetchData = async () => {
try {
setData([]);
setLoading(true);
const response = await funGetAllProject('?status=' + status + '&search=' + searchQuery)
if (response.success) {
setData(response?.data)
} else {
toast.error(response.message);
}
setLoading(false);
} catch (error) {
toast.error("Gagal mendapatkan proyek, coba lagi nanti");
console.error(error);
} finally {
setLoading(false);
}
};
useShallowEffect(() => {
fetchData();
}, [status, searchQuery]);
const handleList = () => {
setIsList(!isList)
}
return (
<Box mt={20}>
<Grid justify='center' align='center'>
<Grid.Col span={10}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: '#A3A3A3',
borderColor: '#A3A3A3',
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/>
</Grid.Col>
<Grid.Col span={'auto'}>
<Flex justify={'center'}>
{isList ? (
<HiOutlineListBullet size={35} color={WARNA.biruTua} onClick={handleList} />
) : (
<HiSquares2X2 size={35} color={WARNA.biruTua} onClick={handleList} />
)}
</Flex>
</Grid.Col>
</Grid>
<Box pt={20}>
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>35</Text>
</Flex>
</Box>
{isList ? (
<Box pt={20}>
{dataProject.map((v, i) => {
return (
<Box key={i}>
<Group justify="space-between" mb={10} onClick={() => router.push(`/project/${v.id}`)}>
<Group>
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
gradient={{
from: '#DFDA7C',
to: '#F2AF46',
deg: 174
}}
>
<HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Text>{v.title}</Text>
</Group>
<Box>
<RiCircleFill size={12} color={'#C5771A'} />
</Box>
</Group>
<Divider my="sm" />
</Box>
);
})}
</Box>
) : (
<Box pt={20}>
{dataProject.map((v, i) => {
return (
<Box key={i} mb={20}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
<Card.Section>
<Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.title}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10}>
<Text>{v.description}</Text>
<Group align='center' pt={10} justify='space-between'>
<Badge color={'#C5771A'}>{v.status}</Badge>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+5</Avatar>
</Avatar.Group>
</Group>
</Box>
</Card>
</Box>
);
})}
</Box>
)}
<Grid justify='center' align='center'>
<Grid.Col span={10}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: '#A3A3A3',
borderColor: '#A3A3A3',
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
onChange={(event) => setSearchQuery(event.currentTarget.value)}
value={searchQuery}
/>
</Grid.Col>
<Grid.Col span={'auto'}>
<Flex justify={'center'}>
{isList ? (
<HiOutlineListBullet size={35} color={WARNA.biruTua} onClick={handleList} />
) : (
<HiSquares2X2 size={35} color={WARNA.biruTua} onClick={handleList} />
)}
</Flex>
</Grid.Col>
</Grid>
<Box pt={20}>
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
</Flex>
</Box>
</Box >
{isList ? (
<Box pt={20}>
{isData.map((v, i) => {
return (
<Box key={i}>
<Group justify="space-between" mb={10} onClick={() => router.push(`/project/${v.id}`)}>
<Group>
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
gradient={{
from: '#DFDA7C',
to: '#F2AF46',
deg: 174
}}
>
<HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Text>{v.name}</Text>
</Group>
<Box>
<RiCircleFill size={12} color={
v.status === 0 ? '#1372C4' :
v.status === 1 ? '#C5771A' :
v.status === 2 ? '#0B6025' :
v.status === 3 ? '#BB1F1F' :
""
} />
</Box>
</Group>
<Divider my="sm" />
</Box>
);
})}
</Box>
) : (
<Box pt={20}>
{isData.map((v, i) => {
return (
<Box key={i} mb={20}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
<Card.Section>
<Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.name}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10}>
<Text>{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 ? 'Dibatalkan' :
""
}</Badge>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.member - 1}</Avatar>
</Avatar.Group>
</Group>
</Box>
</Card>
</Box>
);
})}
</Box>
)}
</Box>
</Box >
);
}

80
src/module/project/ui/list_tugas_detail_project.tsx Normal file
View File

@@ -0,0 +1,80 @@
'use client'
import { WARNA } from '@/module/_global';
import { Box, Center, Checkbox, Grid, Group, SimpleGrid, Text } from '@mantine/core';
import React from 'react';
import { AiOutlineFileSync } from 'react-icons/ai';
export default function ListTugasDetailProject() {
return (
<>
<Box pt={20}>
<Text fw={"bold"} c={WARNA.biruTua}>
Tanggal & Tugas
</Text>
<Box
bg={"white"}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20,
}}
>
<Grid>
<Grid.Col span={"auto"}>
<Center>
<Checkbox color="teal" size="md" />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Box
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10,
}}
>
<Group>
<AiOutlineFileSync size={25} />
<Text>Laporan Permasyarakatan</Text>
</Group>
</Box>
<Box>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Text>Tanggal Mulai</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}}
>
<Text>16 Juni 2024</Text>
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}}
>
<Text>20 Juni 2024</Text>
</Group>
</Box>
</SimpleGrid>
</Box>
</Grid.Col>
</Grid>
</Box>
</Box>
</>
);
}

104
src/module/project/ui/navbar_detail_project.tsx Normal file
View File

@@ -0,0 +1,104 @@
'use client'
import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { FaPencil, FaUsers } from 'react-icons/fa6';
import { HiMenu } from 'react-icons/hi';
import { IoAddCircle } from 'react-icons/io5';
import { MdCancel } from 'react-icons/md';
export default function NavbarDetailProject() {
const router = useRouter()
const param = useParams<{ id: string }>()
const [name, setName] = useState('')
const [isOpen, setOpen] = useState(false)
return (
<>
<LayoutNavbarNew back="" title={name} menu={
<ActionIcon
variant="light"
bg={WARNA.bgIcon}
size="lg"
radius="lg"
aria-label="Settings"
onClick={() => { setOpen(true) }}
>
<HiMenu size={20} color="white" />
</ActionIcon>
} />
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{
cursor: 'pointer'
}}
onClick={() => {
router.push(param.id + '/add-task')
}}
>
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Tambah Tugas</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{
cursor: 'pointer'
}}
onClick={() => {
router.push(param.id + '/add-member')
}}
>
<Box>
<FaUsers size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Tambah anggota</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{
cursor: 'pointer'
}}
onClick={() => { router.push(param.id + '/cancel') }}
>
<Box>
<MdCancel size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Batal</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{
cursor: 'pointer'
}}
onClick={() => { router.push(param.id + '/edit') }}
>
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Edit</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>
</LayoutDrawer>
</>
);
}

51
src/module/project/ui/progress_detail_project.tsx Normal file
View File

@@ -0,0 +1,51 @@
'use client'
import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Grid, Progress, Text } from '@mantine/core';
import React from 'react';
import { HiMiniPresentationChartBar } from 'react-icons/hi2';
export default function ProgressDetailProject() {
return (
<>
<Box mt={10}>
<Box
p={20}
bg={"#DCEED8"}
style={{
borderRadius: 10,
}}
>
<Grid gutter={"lg"}>
<Grid.Col span={3}>
<ActionIcon
variant="gradient"
size={68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
>
<HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={9}>
<Box>
<Text>Kemajuan Proyek 60%</Text>
<Progress
style={{
border: `1px solid ${"#BDBDBD"}`,
}}
w={"100%"}
color="#FCAA4B"
radius="md"
size="xl"
value={60}
/>
</Box>
</Grid.Col>
</Grid>
</Box>
</Box>
</>
);
}

98
src/module/project/ui/tab_project.tsx
View File

@@ -5,8 +5,8 @@ import React, { useEffect, useState } from 'react';
import { HiMenu } from 'react-icons/hi';
import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
import { MdAccountCircle } from 'react-icons/md';
import { RiCircleFill } from "react-icons/ri";
import { useRouter } from 'next/navigation';
import { RiCircleFill, RiProgress3Line } from "react-icons/ri";
import { useRouter, useSearchParams } from 'next/navigation';
import { TbClockPause } from 'react-icons/tb';
import { IoIosCheckmarkCircleOutline } from 'react-icons/io';
import { IoCloseCircleOutline } from 'react-icons/io5';
@@ -15,46 +15,11 @@ import MenuDrawerProject from './menu_drawer_project';
export default function TabProject() {
const [openDrawer, setOpenDrawer] = useState(false)
const router = useRouter()
const searchParams = useSearchParams()
const status = searchParams.get('status')
const iconStyle = { width: rem(20), height: rem(20) };
const tabsData = [
{
value: 'segera',
label: 'Proyek Proses',
mobileLabel: 'Proses',
icon: <TbClockPause style={iconStyle} />,
},
{
value: 'selesai',
label: 'Proyek Selesai',
mobileLabel: 'Selesai',
icon: <IoIosCheckmarkCircleOutline style={iconStyle} />,
},
{
value: 'batal',
label: 'Proyek Batal',
mobileLabel: ' Batal',
icon: <IoCloseCircleOutline style={iconStyle} />,
},
];
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const handleResize = () => {
if (window.innerWidth < 495) {
setIsMobile(true);
} else {
setIsMobile(false);
}
};
window.addEventListener('resize', handleResize);
handleResize();
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return (
<Box>
<LayoutNavbarNew back='/home' title='proyek'
@@ -63,36 +28,41 @@ export default function TabProject() {
</ActionIcon>} />
<Box p={20}>
<Tabs variant="pills" radius="xl" defaultValue="segera">
<Tabs variant="pills" radius="xl" defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}>
<Tabs.List grow justify='center'>
{tabsData.map((tab) => (
<Tabs.Tab
key={tab.value}
value={tab.value}
color={WARNA.biruTua}
leftSection={tab.icon}
>
{isMobile ? tab.mobileLabel : tab.label}
</Tabs.Tab>
))}
<Tabs.Tab value="0" w={"23%"}
leftSection={<TbClockPause style={iconStyle} />}
onClick={() => { router.push("?status=0") }}
color={WARNA.biruTua}
>
Segera
</Tabs.Tab>
<Tabs.Tab value="1" w={"28%"}
leftSection={<RiProgress3Line style={iconStyle} />}
onClick={() => { router.push("?status=1") }}
color={WARNA.biruTua}
>
Dikerjakan
</Tabs.Tab>
<Tabs.Tab value="2" w={"23%"}
leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}
onClick={() => { router.push("?status=2") }}
color={WARNA.biruTua}>
Selesai
</Tabs.Tab>
<Tabs.Tab value="3" w={"20%"}
leftSection={<IoCloseCircleOutline style={iconStyle} />}
onClick={() => { router.push("?status=3") }}
color={WARNA.biruTua}>
Batal
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="segera">
<ListProject/>
</Tabs.Panel>
<Tabs.Panel value="selesai">
<ListProject/>
</Tabs.Panel>
<Tabs.Panel value="batal">
<ListProject/>
</Tabs.Panel>
<ListProject />
</Tabs>
</Box>
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<MenuDrawerProject/>
<MenuDrawerProject />
</LayoutDrawer>
</Box>
);

46
src/module/task/ui/list_division_task.tsx
View File

@@ -9,52 +9,6 @@ import { funGetAllTask } from "../lib/api_task";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
const dataProject = [
{
id: 1,
title: 'Project 1',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROJECT SELESAI',
color: '#387529'
},
{
id: 2,
title: 'Project 2',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROJECT SELESAI',
color: '#387529'
},
{
id: 3,
title: 'Project 3',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROJECT SELESAI',
color: '#387529'
},
{
id: 4,
title: 'Project 4',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROSES',
color: '#C5771A'
},
{
id: 5,
title: 'Project5',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROSES',
color: '#C5771A'
},
{
id: 6,
title: 'Project 6',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROSES',
color: '#C5771A'
},
]
export default function ListDivisionTask() {
const [isList, setIsList] = useState(false)
const router = useRouter()

1
src/module/task/ui/navbar_detail_division_task.tsx
View File

@@ -122,7 +122,6 @@ export default function NavbarDetailDivisionTask() {
</Stack>
</Box>
</LayoutDrawer>
</>
)
}