From 6c503d01e30a50278999fab49e66204e9b0cf95d Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 11 Jul 2024 15:56:19 +0800
Subject: [PATCH] update : task divisi

Deskripsi:
- list divisi tab
- grid dan list

No Issues
---
 .../(detail-division)/task/[id]/page.tsx      |   7 +
 .../(detail-division)/task/page.tsx           |   5 +-
 .../task/component/drawer_division_task.tsx   |  24 +++
 .../task/component/list_division_task.tsx     | 169 ++++++++++++++++++
 .../task/component/navbar_division_task.tsx   |  24 +++
 .../task/component/tabs_division_task.tsx     |  52 ++++++
 .../task/view/view_division_task.tsx          |  14 ++
 src/module/division_new/index.ts              |   4 +-
 8 files changed, 295 insertions(+), 4 deletions(-)
 create mode 100644 src/app/(application)/(detail-division)/task/[id]/page.tsx
 create mode 100644 src/module/division_new/_division_fitur/task/component/drawer_division_task.tsx
 create mode 100644 src/module/division_new/_division_fitur/task/component/list_division_task.tsx
 create mode 100644 src/module/division_new/_division_fitur/task/component/navbar_division_task.tsx
 create mode 100644 src/module/division_new/_division_fitur/task/component/tabs_division_task.tsx
 create mode 100644 src/module/division_new/_division_fitur/task/view/view_division_task.tsx

diff --git a/src/app/(application)/(detail-division)/task/[id]/page.tsx b/src/app/(application)/(detail-division)/task/[id]/page.tsx
new file mode 100644
index 0000000..61ff79a
--- /dev/null
+++ b/src/app/(application)/(detail-division)/task/[id]/page.tsx
@@ -0,0 +1,7 @@
+function Page() {
+   return (
+      <>Detail task</>
+   )
+}
+
+export default Page
diff --git a/src/app/(application)/(detail-division)/task/page.tsx b/src/app/(application)/(detail-division)/task/page.tsx
index 69da2f2..f37ddba 100644
--- a/src/app/(application)/(detail-division)/task/page.tsx
+++ b/src/app/(application)/(detail-division)/task/page.tsx
@@ -1,10 +1,9 @@
+import { ViewDivisionTask } from '@/module/division_new';
 import React from 'react';
 
 function Page() {
   return (
-    <div>
-      Page
-    </div>
+    <ViewDivisionTask />
   );
 }
 
diff --git a/src/module/division_new/_division_fitur/task/component/drawer_division_task.tsx b/src/module/division_new/_division_fitur/task/component/drawer_division_task.tsx
new file mode 100644
index 0000000..e9037da
--- /dev/null
+++ b/src/module/division_new/_division_fitur/task/component/drawer_division_task.tsx
@@ -0,0 +1,24 @@
+import { WARNA } from "@/module/_global";
+import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
+import { IoAddCircle } from "react-icons/io5";
+
+export default function DrawerDivisionTask() {
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex onClick={() => window.location.href = "/task/create"} justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua}>Tambah Tugas</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/division_new/_division_fitur/task/component/list_division_task.tsx b/src/module/division_new/_division_fitur/task/component/list_division_task.tsx
new file mode 100644
index 0000000..b6b7595
--- /dev/null
+++ b/src/module/division_new/_division_fitur/task/component/list_division_task.tsx
@@ -0,0 +1,169 @@
+import { WARNA } from "@/module/_global";
+import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Text, TextInput, Title } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2";
+import { MdAccountCircle } from "react-icons/md";
+
+
+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({ status }: { status: string }) {
+   const [isList, setIsList] = useState(false)
+   const router = useRouter()
+
+   const handleList = () => {
+      setIsList(!isList)
+   }
+
+   return (
+      <Box py={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(`/task/${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={v.color} />
+                              </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(`/task/${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}>
+                                 <Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
+                                    <Progress.Section value={(status == 'segera') ? 0 : (status == 'dikerjakan') ? 42 : (status == 'selesai') ? 100 : 0} color="yellow" striped >
+                                       <Progress.Label>{(status == 'segera') ? 0 : (status == 'dikerjakan') ? 42 : (status == 'selesai') ? 100 : 0}%</Progress.Label>
+                                    </Progress.Section>
+                                 </Progress.Root>
+                                 <Text my={10}>{v.description}</Text>
+                                 <Group align='center' pt={10} justify='space-between'>
+                                    <Badge color={'dark'}>{status}</Badge>
+                                    <Avatar.Group>
+                                       <Avatar>
+                                          <MdAccountCircle size={32} color={WARNA.biruTua} />
+                                       </Avatar>
+                                       <Avatar>+5</Avatar>
+                                    </Avatar.Group>
+                                 </Group>
+                              </Box>
+                           </Card>
+                        </Box>
+                     );
+                  })}
+               </Box>
+            )}
+         </Box>
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/division_new/_division_fitur/task/component/navbar_division_task.tsx b/src/module/division_new/_division_fitur/task/component/navbar_division_task.tsx
new file mode 100644
index 0000000..1892491
--- /dev/null
+++ b/src/module/division_new/_division_fitur/task/component/navbar_division_task.tsx
@@ -0,0 +1,24 @@
+'use client'
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { ActionIcon } from "@mantine/core";
+import { useState } from "react";
+import { HiMenu } from "react-icons/hi";
+import DrawerDivisionTask from "./drawer_division_task";
+
+export default function NavbarDivisionTask() {
+   const [openDrawer, setOpenDrawer] = useState(false)
+   return (
+      <>
+         <LayoutNavbarNew back="" title="Divisi - Tugas"
+            menu={
+               <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                  <HiMenu size={20} color='white' />
+               </ActionIcon>
+            }
+         />
+         <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
+            <DrawerDivisionTask />
+         </LayoutDrawer>
+      </>
+   )
+}
\ No newline at end of file
diff --git a/src/module/division_new/_division_fitur/task/component/tabs_division_task.tsx b/src/module/division_new/_division_fitur/task/component/tabs_division_task.tsx
new file mode 100644
index 0000000..8502272
--- /dev/null
+++ b/src/module/division_new/_division_fitur/task/component/tabs_division_task.tsx
@@ -0,0 +1,52 @@
+'use client'
+import { Box, rem, Tabs } from "@mantine/core";
+import { IoIosCheckmarkCircleOutline } from "react-icons/io";
+import { IoCloseCircleOutline } from "react-icons/io5";
+import { RiProgress3Line } from "react-icons/ri";
+import { TbClockPause } from "react-icons/tb";
+import ListDivisionTask from "./list_division_task";
+
+export default function TabsDivisionTask() {
+   const iconStyle = { width: rem(20), height: rem(20) };
+
+   return (
+      <Box p={20}>
+         <Tabs variant="pills" color='#FF9861' radius="xl" defaultValue="segera">
+            <Tabs.List bg={"white"} style={{
+               border: `1px solid ${"#EDEDED"}`,
+               padding: 5,
+               borderRadius: 100
+            }}>
+               <Tabs.Tab value="segera" leftSection={<TbClockPause style={iconStyle} />}>
+                  Segera
+               </Tabs.Tab>
+               <Tabs.Tab value="dikerjakan" leftSection={<RiProgress3Line style={iconStyle} />}>
+                  Dikerjakan
+               </Tabs.Tab>
+               <Tabs.Tab value="selesai" leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}>
+                  Selesai
+               </Tabs.Tab>
+               <Tabs.Tab value="batal" leftSection={<IoCloseCircleOutline style={iconStyle} />}>
+                  Batal
+               </Tabs.Tab>
+            </Tabs.List>
+
+            <Tabs.Panel value="segera">
+               <ListDivisionTask status="segera" />
+            </Tabs.Panel>
+
+            <Tabs.Panel value="dikerjakan">
+               <ListDivisionTask status="dikerjakan" />
+            </Tabs.Panel>
+
+            <Tabs.Panel value="selesai">
+               <ListDivisionTask status="selesai" />
+            </Tabs.Panel>
+
+            <Tabs.Panel value="batal">
+               <ListDivisionTask status="batal" />
+            </Tabs.Panel>
+         </Tabs>
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/division_new/_division_fitur/task/view/view_division_task.tsx b/src/module/division_new/_division_fitur/task/view/view_division_task.tsx
new file mode 100644
index 0000000..436ffbe
--- /dev/null
+++ b/src/module/division_new/_division_fitur/task/view/view_division_task.tsx
@@ -0,0 +1,14 @@
+'use client'
+import NavbarDivisionTask from "../component/navbar_division_task";
+import TabsDivisionTask from "../component/tabs_division_task";
+
+export default function ViewDivisionTask() {
+
+
+   return (
+      <div>
+         <NavbarDivisionTask />
+         <TabsDivisionTask />
+      </div>
+   );
+}
\ No newline at end of file
diff --git a/src/module/division_new/index.ts b/src/module/division_new/index.ts
index 36178f2..a187653 100644
--- a/src/module/division_new/index.ts
+++ b/src/module/division_new/index.ts
@@ -1,3 +1,4 @@
+import ViewDivisionTask from "./_division_fitur/task/view/view_division_task";
 import CreateAdminDivision from "./components/create_admin_division";
 import CreateUsers from "./components/create_users";
 import ViewCreateDivision from "./view/view_create_division";
@@ -10,4 +11,5 @@ export { ViewCreateDivision }
 export { CreateUsers }
 export { CreateAdminDivision }
 export { ViewCreateReport }
-export { ViewDetailDivision }
\ No newline at end of file
+export { ViewDetailDivision }
+export { ViewDivisionTask }
\ No newline at end of file