From 4acac52a0ca4490ccf00fa2eee8addc09e328972 Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Mon, 8 Jul 2024 17:30:39 +0800
Subject: [PATCH] style : update project

Deskripsi:
- add view create project
- add view filter project

No issue
---
 .../project/components/ui/drawer_project.tsx  |  34 +++
 .../project/components/ui/navbar_project.tsx  | 194 ++++++++++++++++++
 src/module/project/index.ts                   |   6 +-
 .../project/view/view_create_project.tsx      |  10 +
 .../project/view/view_filter_project.tsx      |  73 +++++++
 src/module/project/view/view_project.tsx      |   3 +-
 6 files changed, 318 insertions(+), 2 deletions(-)
 create mode 100644 src/module/project/components/ui/drawer_project.tsx
 create mode 100644 src/module/project/components/ui/navbar_project.tsx
 create mode 100644 src/module/project/view/view_create_project.tsx
 create mode 100644 src/module/project/view/view_filter_project.tsx

diff --git a/src/module/project/components/ui/drawer_project.tsx b/src/module/project/components/ui/drawer_project.tsx
new file mode 100644
index 0000000..8ab49a5
--- /dev/null
+++ b/src/module/project/components/ui/drawer_project.tsx
@@ -0,0 +1,34 @@
+import { WARNA } from '@/module/_global';
+import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
+import React, { useState } from 'react';
+import { HiOutlineFilter } from 'react-icons/hi';
+import { IoAddCircle } from 'react-icons/io5';
+
+export default function DrawerProject() {
+  return (
+    <Box>
+      <Stack pt={10}>
+        <SimpleGrid
+          cols={{ base: 3, sm: 3, lg: 3 }}
+        >
+          <Flex onClick={() => window.location.href = "/project/create"} justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <IoAddCircle size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Tambah Proyek</Text>
+            </Box>
+          </Flex>
+          <Flex onClick={() => window.location.href = "/project/filter"}  justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <HiOutlineFilter size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Filter</Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/src/module/project/components/ui/navbar_project.tsx b/src/module/project/components/ui/navbar_project.tsx
new file mode 100644
index 0000000..33224be
--- /dev/null
+++ b/src/module/project/components/ui/navbar_project.tsx
@@ -0,0 +1,194 @@
+"use client"
+import { isDrawer, LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Text, TextInput, Title } from '@mantine/core';
+import React, { 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 DrawerProject from './drawer_project';
+
+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 NavbarProject() {
+  const [isList, setIsList] = useState(false)
+  const [openDrawer, setOpenDrawer] = useState(false)
+
+  const handleList = () => {
+    setIsList(!isList)
+  }
+  return (
+    <Box>
+      <LayoutNavbarNew back='/home' title='proyek'
+        menu={<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <HiMenu size={20} color='white' />
+        </ActionIcon>} />
+      <Box p={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>
+          <Grid pt={15}>
+            <Grid.Col span={6}>
+              <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
+                <Text ta={'center'} fw={'bold'} c={'#387529'}>Proyek Selesai</Text>
+                <Flex justify={'center'} align={'center'} h={'100%'}>
+                  <Text fz={40} fw={'bold'} c={'#387529'}>35</Text>
+                </Flex>
+              </Box>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
+                <Text ta={'center'} fw={'bold'} c={'#C5771A'}>Proyek Proses</Text>
+                <Flex justify={'center'} align={'center'} h={'100%'}>
+                  <Text fz={40} fw={'bold'} c={'#C5771A'}>35</Text>
+                </Flex>
+              </Box>
+            </Grid.Col>
+          </Grid>
+          {isList ? (
+            <Box pt={20}>
+              {dataProject.map((v, i) => {
+                return (
+                  <Box key={i}>
+                    <Group justify="space-between" mb={10}>
+                      <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={v.color} />
+                      </Box>
+                    </Group>
+                    <Divider my="sm" />
+                  </Box>
+                );
+              })}
+            </Box>
+          ) : (
+            <Box pt={20}>
+              {dataProject.map((v, i) => {
+                return (
+                  <Box key={i}>
+                    <Card shadow="sm" padding="md" component="a" radius={10}>
+                      <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={v.color}>{v.status}</Badge>
+                          <Avatar.Group>
+                            <Avatar>
+                              <MdAccountCircle size={32} color={WARNA.biruTua} />
+                            </Avatar>
+                            <Avatar>+5</Avatar>
+                          </Avatar.Group>
+                        </Group>
+                      </Box>
+                    </Card>
+                  </Box>
+                );
+              })}
+            </Box>
+          )}
+        </Box>
+      </Box >
+      <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
+        <DrawerProject />
+      </LayoutDrawer>
+    </Box>
+  );
+}
+
diff --git a/src/module/project/index.ts b/src/module/project/index.ts
index 8d44769..5c2cf10 100644
--- a/src/module/project/index.ts
+++ b/src/module/project/index.ts
@@ -1,3 +1,7 @@
+import ViewCreateProject from "./view/view_create_project";
+import ViewFilterProject from "./view/view_filter_project";
 import ViewProject from "./view/view_project";
 
-export {ViewProject}
\ No newline at end of file
+export { ViewProject }
+export { ViewCreateProject }
+export { ViewFilterProject }
diff --git a/src/module/project/view/view_create_project.tsx b/src/module/project/view/view_create_project.tsx
new file mode 100644
index 0000000..5b3c9d7
--- /dev/null
+++ b/src/module/project/view/view_create_project.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function ViewCreateProject() {
+  return (
+    <div>
+      ViewCreateProject
+    </div>
+  );
+}
+
diff --git a/src/module/project/view/view_filter_project.tsx b/src/module/project/view/view_filter_project.tsx
new file mode 100644
index 0000000..05e3384
--- /dev/null
+++ b/src/module/project/view/view_filter_project.tsx
@@ -0,0 +1,73 @@
+'use client'
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Box, Button, Divider, Group, Text } from '@mantine/core';
+import React, { useState } from 'react';
+import { FaCheck } from "react-icons/fa6";
+
+const dataFilter = [
+  {
+    id: 1,
+    name: 'Semua Proyek'
+  },
+  {
+    id: 1,
+    name: 'Proyek Dinas'
+  },
+  {
+    id: 1,
+    name: 'Proyek Lpd'
+  },
+  {
+    id: 1,
+    name: 'Proyek Lembaga 1'
+  },
+  {
+    id: 1,
+    name: 'Proyek Lembaga 2'
+  },
+  {
+    id: 1,
+    name: 'Proyek Lembaga 3'
+  },
+]
+
+
+export default function ProjectFilter() {
+  const [selectedFilter, setSelectedFilter] = useState<string | null>(null);
+
+  const handleFilterClick = (filterName: string) => {
+    setSelectedFilter(filterName);
+  };
+
+  return (
+    <Box>
+      <LayoutNavbarNew back='/project' title='Filter' menu />
+      <Box p={20}>
+        {dataFilter.map((filter) => (
+          <Box key={filter.id}>
+            <Group
+              justify="space-between"
+              align="center"
+              mb={10}
+              onClick={() => handleFilterClick(filter.name)}
+            >
+              <Text fw={selectedFilter === filter.name ? 'bold' : 'normal'}>
+                {filter.name}
+              </Text>
+              {selectedFilter === filter.name && <FaCheck size={25} />}
+            </Group>
+            <Divider my={"sm"} />
+          </Box>
+        ))}
+        <Button
+          fullWidth
+          radius={100}
+          size="lg"
+          color={WARNA.biruTua}
+        >
+          Terapkan
+        </Button>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/module/project/view/view_project.tsx b/src/module/project/view/view_project.tsx
index aa17b79..e947a75 100644
--- a/src/module/project/view/view_project.tsx
+++ b/src/module/project/view/view_project.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
+import NavbarProject from '../components/ui/navbar_project';
 
 export default function ViewProject() {
   return (
     <div>
-      ViewProject
+      <NavbarProject/>
     </div>
   );
 }