feat : update project get all

src/module/project/components/detail_project/detail_project.tsx

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

src/module/project/index.ts

@@ -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 }

src/module/project/lib/api_project.ts

@@ -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);
+}

src/module/project/lib/type_project.ts

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

src/module/project/ui/liat_anggota_detail_project.tsx

@@ -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>
+  );
+}
+

src/module/project/ui/list_file_detail_project.tsx

@@ -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>
+    </>
+  );
+}
+

src/module/project/ui/list_project.tsx

@@ -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 >
   );
 }
 

src/module/project/ui/list_tugas_detail_project.tsx

@@ -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>
+    </>
+  );
+}
+

src/module/project/ui/navbar_detail_project.tsx

@@ -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>
+    </>
+  );
+}
+

src/module/project/ui/progress_detail_project.tsx

@@ -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>
+    </>
+  );
+}
+

src/module/project/ui/tab_project.tsx

@@ -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>
   );