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 ( + + + + window.location.href = "/project/create"} justify={'center'} align={'center'} direction={'column'} > + + + + + Tambah Proyek + + + window.location.href = "/project/filter"} justify={'center'} align={'center'} direction={'column'} > + + + + + Filter + + + + + + ); +} 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 ( + + setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> + + } /> + + + + } + placeholder="Pencarian" + /> + + + + {isList ? ( + + ) : ( + + )} + + + + + + Total Proyek + + 35 + + + + + + Proyek Selesai + + 35 + + + + + + Proyek Proses + + 35 + + + + + {isList ? ( + + {dataProject.map((v, i) => { + return ( + + + +
+ + + +
+ {v.title} + + + + + + + + ); + })} + + ) : ( + + {dataProject.map((v, i) => { + return ( + + + + + + {v.title} + + + + + {v.description} + + {v.status} + + + + + +5 + + + + + + ); + })} + + )} + + + setOpenDrawer(false)}> + + + + ); +} + 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 ( +
+ ViewCreateProject +
+ ); +} + 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(null); + + const handleFilterClick = (filterName: string) => { + setSelectedFilter(filterName); + }; + + return ( + + + + {dataFilter.map((filter) => ( + + handleFilterClick(filter.name)} + > + + {filter.name} + + {selectedFilter === filter.name && } + + + + ))} + + + + ); +} 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 (
- ViewProject +
); }