From 07369e5db9dd2fbb3d408ab4317eddee51710676 Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Tue, 20 Aug 2024 17:36:09 +0800
Subject: [PATCH] style : update position project

---
 src/app/api/calender/indicator/route.ts       |  28 +++
 .../calender/ui/date_event_division.tsx       |  47 ++---
 src/module/project/lib/api_project.ts         |   0
 src/module/project/lib/type_project.ts        |   0
 src/module/project/ui/.gitkeep                |   0
 src/module/project/ui/list_project.tsx        | 160 ++++++++++++++++++
 src/module/project/ui/menu_drawer_project.tsx |  35 ++++
 src/module/project/ui/tab_project.tsx         |  99 +++++++++++
 tsconfig.json                                 |   2 +-
 9 files changed, 349 insertions(+), 22 deletions(-)
 create mode 100644 src/app/api/calender/indicator/route.ts
 create mode 100644 src/module/project/lib/api_project.ts
 create mode 100644 src/module/project/lib/type_project.ts
 create mode 100644 src/module/project/ui/.gitkeep
 create mode 100644 src/module/project/ui/list_project.tsx
 create mode 100644 src/module/project/ui/menu_drawer_project.tsx
 create mode 100644 src/module/project/ui/tab_project.tsx

diff --git a/src/app/api/calender/indicator/route.ts b/src/app/api/calender/indicator/route.ts
new file mode 100644
index 0000000..5ca5850
--- /dev/null
+++ b/src/app/api/calender/indicator/route.ts
@@ -0,0 +1,28 @@
+import { funGetUserByCookies } from "@/module/auth";
+import { NextResponse } from "next/server";
+
+
+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 id = searchParams.get("id");
+
+        return NextResponse.json({ success: true, data: null }, { status: 200 });
+    } catch (error) {
+        return NextResponse.json({ success: false, message: "" }, { status: 401 });
+    }
+}
+
+
+
+
+
+
+
+
diff --git a/src/module/calender/ui/date_event_division.tsx b/src/module/calender/ui/date_event_division.tsx
index fb0cab5..ea708fb 100644
--- a/src/module/calender/ui/date_event_division.tsx
+++ b/src/module/calender/ui/date_event_division.tsx
@@ -26,7 +26,6 @@ export default function DateEventDivision() {
 
   function change(val: Date) {
     const a: any = moment(new Date(val)).format('YYYY-MM-DD')
-    console.log(val, a)
     setDate(a)
     getData(a)
   }
@@ -58,27 +57,33 @@ export default function DateEventDivision() {
         />
       </Group>
       <Box>
-        <Text mb={10} mt={20} fw={"bold"}>Hari Ini</Text>
-        {isData.map((event, index) => {
-          const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
-          const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
-          return (
-            <Box key={event.id} mt={10}>
-              <Box onClick={() => router.push(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
-                borderRadius: 10
-              }} h={113}>
-                <Group>
-                  <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
-                  <Box>
-                    <Text>{event.timeStart} - {event.timeEnd}</Text>
-                    <Text fw={"bold"}>{event.title}</Text>
-                    <Text>Dibuat oleh : {event.user_name}</Text>
-                  </Box>
-                </Group>
+        <Text mb={10} mt={20} fw={"bold"}>
+          Event
+        </Text>
+        {isData.length > 0 ? (
+          isData.map((event, index) => {
+            const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
+            const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
+            return (
+              <Box key={event.id} mt={10}>
+                <Box onClick={() => router.push(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
+                  borderRadius: 10
+                }} h={113}>
+                  <Group>
+                    <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
+                    <Box>
+                      <Text>{event.timeStart} - {event.timeEnd}</Text>
+                      <Text fw={"bold"}>{event.title}</Text>
+                      <Text>Dibuat oleh : {event.user_name}</Text>
+                    </Box>
+                  </Group>
+                </Box>
               </Box>
-            </Box>
-          )
-        })}
+            )
+          })
+        ) : (
+          <Text c={WARNA.biruTua}>Tidak ada event</Text>
+        )}
       </Box>
     </Box>
   );
diff --git a/src/module/project/lib/api_project.ts b/src/module/project/lib/api_project.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/module/project/lib/type_project.ts b/src/module/project/lib/type_project.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/module/project/ui/.gitkeep b/src/module/project/ui/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/module/project/ui/list_project.tsx b/src/module/project/ui/list_project.tsx
new file mode 100644
index 0000000..4ab513a
--- /dev/null
+++ b/src/module/project/ui/list_project.tsx
@@ -0,0 +1,160 @@
+"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 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';
+
+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 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>
+          )}
+        </Box>
+      </Box >
+  );
+}
+
+
+
diff --git a/src/module/project/ui/menu_drawer_project.tsx b/src/module/project/ui/menu_drawer_project.tsx
new file mode 100644
index 0000000..c15b672
--- /dev/null
+++ b/src/module/project/ui/menu_drawer_project.tsx
@@ -0,0 +1,35 @@
+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 MenuDrawerProject() {
+  return (
+    <Box>
+      <Stack pt={10}>
+        <SimpleGrid
+          cols={{ base: 2, sm: 2, 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?cat=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/ui/tab_project.tsx b/src/module/project/ui/tab_project.tsx
new file mode 100644
index 0000000..04f2f34
--- /dev/null
+++ b/src/module/project/ui/tab_project.tsx
@@ -0,0 +1,99 @@
+"use client"
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, rem, Tabs, Text, TextInput, Title } from '@mantine/core';
+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 { TbClockPause } from 'react-icons/tb';
+import { IoIosCheckmarkCircleOutline } from 'react-icons/io';
+import { IoCloseCircleOutline } from 'react-icons/io5';
+import ListProject from './list_project';
+import MenuDrawerProject from './menu_drawer_project';
+
+export default function TabProject() {
+  const [openDrawer, setOpenDrawer] = useState(false)
+
+  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'
+        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}>
+        <Tabs variant="pills" radius="xl" defaultValue="segera">
+          <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.List>
+
+          <Tabs.Panel value="segera">
+            <ListProject/>
+          </Tabs.Panel>
+
+          <Tabs.Panel value="selesai">
+            <ListProject/>
+          </Tabs.Panel>
+
+          <Tabs.Panel value="batal">
+            <ListProject/>
+          </Tabs.Panel>
+        </Tabs>
+      </Box>
+
+      <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
+        <MenuDrawerProject/>
+      </LayoutDrawer>
+    </Box>
+  );
+}
diff --git a/tsconfig.json b/tsconfig.json
index 41cf299..fd40f63 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,6 +21,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/api/.gitkeep"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/api/.gitkeep", "src/module/project/ui/.gitkeep"],
   "exclude": ["node_modules"]
 }