From 54d5cd9155f091a2e86b63a64553034669d56ace Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Tue, 16 Jul 2024 13:34:30 +0800
Subject: [PATCH] style : update division new

---
 .../component/form_create_discussion.tsx      |  32 +++--
 .../components/list_documents_division.tsx    |  89 ++++++++++++
 .../ui/drawer_menu_document_division.tsx      | 117 +++++++++++++++
 .../components/ui/modal_create_folder.tsx     |  11 ++
 .../ui/navbar_document_division.tsx           | 133 ++++++++++++++++++
 .../document/view/view_document_division.tsx  |  11 ++
 .../feature_detail_division.tsx               |   2 +-
 src/module/division_new/index.ts              |   2 +
 8 files changed, 386 insertions(+), 11 deletions(-)
 create mode 100644 src/module/division_new/_division_fitur/document/components/list_documents_division.tsx
 create mode 100644 src/module/division_new/_division_fitur/document/components/ui/drawer_menu_document_division.tsx
 create mode 100644 src/module/division_new/_division_fitur/document/components/ui/modal_create_folder.tsx
 create mode 100644 src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx
 create mode 100644 src/module/division_new/_division_fitur/document/view/view_document_division.tsx

diff --git a/src/module/division_new/_division_fitur/discussion/component/form_create_discussion.tsx b/src/module/division_new/_division_fitur/discussion/component/form_create_discussion.tsx
index b25b407..8451623 100644
--- a/src/module/division_new/_division_fitur/discussion/component/form_create_discussion.tsx
+++ b/src/module/division_new/_division_fitur/discussion/component/form_create_discussion.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
-import { Avatar, Box, Button, Group, Text, Textarea } from "@mantine/core";
+import { Avatar, Box, Button, Center, Grid, Group, Text, Textarea } from "@mantine/core";
 import { useState } from "react";
 import toast from "react-hot-toast";
 
@@ -18,15 +18,27 @@ export default function FormCreateDiscussion() {
    return (
       <Box>
          <Box p={20}>
-            <Group>
-               <Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
-               <Box>
-                  <Textarea
-                     placeholder="Tuliskan apa yang ingin anda diskusikan"
-                     w={"100%"}
-                  />
-               </Box>
-            </Group>
+            <Grid gutter={2}>
+               <Grid.Col span={"auto"}>
+                  <Center>
+                     <Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
+                  </Center>
+               </Grid.Col>
+               <Grid.Col span={10}>
+                  <Box>
+                     <Textarea
+                        placeholder="Tuliskan apa yang ingin anda diskusikan"
+                        w={"100%"}
+                        styles={{
+                           input: {
+                              border: 'none',
+                              backgroundColor: 'transparent',
+                           }
+                        }}
+                     />
+                  </Box>
+               </Grid.Col>
+            </Grid>
             <Box mt="xl">
                <Button
                   color="white"
diff --git a/src/module/division_new/_division_fitur/document/components/list_documents_division.tsx b/src/module/division_new/_division_fitur/document/components/list_documents_division.tsx
new file mode 100644
index 0000000..0f719f5
--- /dev/null
+++ b/src/module/division_new/_division_fitur/document/components/list_documents_division.tsx
@@ -0,0 +1,89 @@
+import { ActionIcon, Box, Checkbox, Divider, Flex, Grid, Group, Text } from '@mantine/core';
+import React from 'react';
+import { FcDocument, FcFolder, FcImageFile } from "react-icons/fc";
+
+const dataDocuments = [
+  {
+    id: 1,
+    name: 'Administrasi',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcFolder size={60} />
+  },
+  {
+    id: 2,
+    name: 'Administrasi',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcFolder size={60} />
+  },
+  {
+    id: 3,
+    name: 'Administrasi',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcFolder size={60} />
+  },
+  {
+    id: 3,
+    name: 'Berkas Kerja',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcDocument size={60} />
+  },
+  {
+    id: 3,
+    name: 'Berkas Kerja',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcDocument size={60} />
+  },
+  {
+    id: 3,
+    name: 'Image Kegiatan',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcImageFile size={60} />
+  },
+  {
+    id: 3,
+    name: 'Image Pelaksanaan',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcImageFile size={60} />
+  },
+]
+
+export default function ListDocumentsDivision() {
+  return (
+    <Box>
+      <Box p={20}>
+        {dataDocuments.map((v, i) => {
+          return (
+            <Box key={i}>
+              <Box mt={10} mb={10}>
+                <Grid align='center'>
+                  <Grid.Col span={10}>
+                    <Group gap={20}>
+                      <Box>
+                        {v.icon}
+                      </Box>
+                      <Flex direction={'column'}>
+                        <Text>{v.name}</Text>
+                        <Text fz={10}>{v.date}</Text>
+                      </Flex>
+                    </Group>
+                  </Grid.Col>
+                  <Grid.Col span={2}>
+                    <Group justify='flex-end'>
+                      <Checkbox
+                        color="teal"
+                        radius="lg"
+                        size="md"
+                      />
+                    </Group>
+                  </Grid.Col>
+                </Grid>
+              </Box>
+              <Divider size="xs" />
+            </Box>
+          )
+        })}
+      </Box>
+    </Box>
+  );
+}
+
diff --git a/src/module/division_new/_division_fitur/document/components/ui/drawer_menu_document_division.tsx b/src/module/division_new/_division_fitur/document/components/ui/drawer_menu_document_division.tsx
new file mode 100644
index 0000000..ec590d1
--- /dev/null
+++ b/src/module/division_new/_division_fitur/document/components/ui/drawer_menu_document_division.tsx
@@ -0,0 +1,117 @@
+"use clent"
+import { LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Button, Divider, Flex, Grid, Modal, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+import { FaFolderClosed, FaRegImage } from 'react-icons/fa6';
+import { HiDocumentText } from 'react-icons/hi2';
+import { IoAddCircle, IoDocumentText } from 'react-icons/io5';
+
+export default function DrawerMenuDocumentDivision() {
+  const [openDrawerDocument, setOpenDrawerDocument] = useState(false)
+  const [openModal, setOpenModal] = useState(false)
+  const router = useRouter()
+
+  function onCreate(val: boolean) {
+    if (val) {
+      toast.success("Sukses! Data tersimpan");
+    }
+    setOpenDrawerDocument(false)
+    setOpenModal(false)
+    router.push('/document')
+  }
+
+  return (
+    <Box>
+      <Stack pt={10}>
+        <SimpleGrid
+          cols={{ base: 2, sm: 3, lg: 3 }}
+          onClick={() => setOpenDrawerDocument(true)}
+        >
+          <Flex justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <IoAddCircle size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box >
+              <Text c={WARNA.biruTua}>Tambah Dokumen</Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </Stack>
+      <LayoutDrawer opened={openDrawerDocument} onClose={() => setOpenDrawerDocument(false)} title={''} size='lg' >
+        <SimpleGrid
+          cols={{ base: 2, sm: 2, lg: 2 }}
+          onClick={() => setOpenDrawerDocument(true)}
+        >
+          <Flex onClick={() => setOpenModal(true)} justify={'center'} align={'center'} direction={'column'} mb={20} >
+            <Box>
+              <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
+                <FaFolderClosed size={40} color={WARNA.biruTua} />
+              </ActionIcon>
+            </Box>
+            <Box mt={10}>
+              <Text c={WARNA.biruTua}>Membuat Folder</Text>
+            </Box>
+          </Flex>
+          <Flex justify={'center'} align={'center'} direction={'column'} mb={20}>
+            <Box>
+              <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
+                <HiDocumentText size={40} color={WARNA.biruTua} />
+              </ActionIcon>
+            </Box>
+            <Box mt={10}>
+              <Text c={WARNA.biruTua}>Upload Dokumen</Text>
+            </Box>
+          </Flex>
+          <Flex justify={'center'} align={'center'} direction={'column'} mb={20} >
+            <Box>
+              <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
+                <FaRegImage size={40} color={WARNA.biruTua} />
+              </ActionIcon>
+            </Box>
+            <Box mt={10}>
+              <Text c={WARNA.biruTua}>Upload Foto</Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </LayoutDrawer>
+
+      <Modal styles={{
+        body: {
+          borderRadius: 20
+        },
+        content: {
+          borderRadius: 20,
+          border: `2px solid ${"#828AFC"}`
+        }
+      }} opened={openModal} onClose={() => setOpenModal(false)} centered withCloseButton={false}>
+        <Box p={20}>
+          <Text ta={"center"} fw={"bold"}>Buat Folder Baru</Text>
+          <Box mt={20} mb={20}>
+            <TextInput
+              styles={{
+                input: {
+                  color: WARNA.biruTua,
+                  borderRadius: '#828AFC',
+                  borderColor: '#828AFC',
+                },
+              }}
+              size="md"
+              radius={10}
+              placeholder="Buat Folder Baru"
+            />
+          </Box>
+          <Grid mt={40}>
+            <Grid.Col span={6}>
+              <Button variant="subtle" fullWidth color='#969494' onClick={() => setOpenModal(false)}>Batalkan</Button>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onCreate(true)}>Membuat</Button>
+            </Grid.Col>
+          </Grid>
+        </Box>
+      </Modal>
+    </Box>
+  );
+}
diff --git a/src/module/division_new/_division_fitur/document/components/ui/modal_create_folder.tsx b/src/module/division_new/_division_fitur/document/components/ui/modal_create_folder.tsx
new file mode 100644
index 0000000..96d1713
--- /dev/null
+++ b/src/module/division_new/_division_fitur/document/components/ui/modal_create_folder.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function ModalCreateFolder() {
+  return (
+    <div>
+      ModalCreateFolder
+    </div>
+  );
+}
+
+export default ModalCreateFolder;
diff --git a/src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx b/src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx
new file mode 100644
index 0000000..14dbe4b
--- /dev/null
+++ b/src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx
@@ -0,0 +1,133 @@
+'use client'
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Checkbox, Divider, Flex, Grid, Group, Text } from '@mantine/core';
+import React, { useState } from 'react';
+import { HiMenu } from 'react-icons/hi';
+import DrawerMenuDocumentDivision from './drawer_menu_document_division';
+import ListDocumentsDivision from '../list_documents_division';
+import { FcDocument, FcFolder, FcImageFile } from 'react-icons/fc';
+
+const dataDocuments = [
+  {
+    id: 1,
+    name: 'Administrasi',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcFolder size={60} />
+  },
+  {
+    id: 2,
+    name: 'Administrasi',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcFolder size={60} />
+  },
+  {
+    id: 3,
+    name: 'Administrasi',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcFolder size={60} />
+  },
+  {
+    id: 3,
+    name: 'Berkas Kerja',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcDocument size={60} />
+  },
+  {
+    id: 3,
+    name: 'Berkas Kerja',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcDocument size={60} />
+  },
+  {
+    id: 3,
+    name: 'Image Kegiatan',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcImageFile size={60} />
+  },
+  {
+    id: 3,
+    name: 'Image Pelaksanaan',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcImageFile size={60} />
+  },
+  {
+    id: 3,
+    name: 'Image Pelaksanaan',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcImageFile size={60} />
+  },
+]
+
+export default function NavbarDocumentDivision() {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleCheckboxChange = () => {
+    setIsChecked(!isChecked);
+  };
+  const [isOpen, setOpen] = useState(false)
+  return (
+    <Box>
+      {isChecked && (
+        <>
+          <Box h={90} w={{ base: "100%", md: "38.2%" }} bg={WARNA.biruTua} pos={'fixed'} top={0} style={{
+            zIndex: 999,
+          }}>
+            zxsdsd
+          </Box>
+          <Box h={70} w={{ base: "100%", md: "38.2%" }} bg={WARNA.biruTua} pos={'fixed'} bottom={0} style={{
+            zIndex: 999,
+          }}>
+            zxsdsd
+          </Box>
+        </>
+      )}
+      <LayoutNavbarNew back='/division' title='Divisi kerohanian'
+        menu={
+          <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+            <HiMenu size={20} color='white' />
+          </ActionIcon>
+        }
+      />
+      <Box>
+        <Box p={20} pb={60}>
+          {dataDocuments.map((v, i) => {
+            return (
+              <Box key={i}>
+                <Box mt={10} mb={10}>
+                  <Grid align='center'>
+                    <Grid.Col span={10}>
+                      <Group gap={20}>
+                        <Box>
+                          {v.icon}
+                        </Box>
+                        <Flex direction={'column'}>
+                          <Text>{v.name}</Text>
+                          <Text fz={10}>{v.date}</Text>
+                        </Flex>
+                      </Group>
+                    </Grid.Col>
+                    <Grid.Col span={2}>
+                      <Group justify='flex-end'>
+                        <Checkbox
+                          color="teal"
+                          radius="lg"
+                          size="md"
+                          checked={isChecked}
+                          onChange={handleCheckboxChange}
+                        />
+                      </Group>
+                    </Grid.Col>
+                  </Grid>
+                </Box>
+                <Divider size="xs" />
+              </Box>
+            )
+          })}
+        </Box>
+      </Box>
+      <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
+        <DrawerMenuDocumentDivision />
+      </LayoutDrawer>
+    </Box>
+  );
+}
diff --git a/src/module/division_new/_division_fitur/document/view/view_document_division.tsx b/src/module/division_new/_division_fitur/document/view/view_document_division.tsx
new file mode 100644
index 0000000..a970bbc
--- /dev/null
+++ b/src/module/division_new/_division_fitur/document/view/view_document_division.tsx
@@ -0,0 +1,11 @@
+import { Box } from '@mantine/core';
+import React from 'react';
+import NavbarDocumentDivision from '../components/ui/navbar_document_division';
+
+export default function ViewDocumentDivision() {
+  return (
+    <Box>
+      <NavbarDocumentDivision/>
+    </Box>
+  );
+}
\ No newline at end of file
diff --git a/src/module/division_new/components/detail_division/feature_detail_division.tsx b/src/module/division_new/components/detail_division/feature_detail_division.tsx
index 34e5153..19e26f2 100644
--- a/src/module/division_new/components/detail_division/feature_detail_division.tsx
+++ b/src/module/division_new/components/detail_division/feature_detail_division.tsx
@@ -52,7 +52,7 @@ export default function FeatureDetailDivision() {
           border: `1px solid ${WARNA.bgHijauMuda}`,
           borderRadius: 10,
           padding: 10
-        }} onClick={() => router.push('/documents')}>
+        }} onClick={() => router.push('/document')}>
           <Grid justify='center' align='center'>
             <Grid.Col span={"auto"}>
                 <ActionIcon variant="filled"
diff --git a/src/module/division_new/index.ts b/src/module/division_new/index.ts
index 74afc75..f043c7f 100644
--- a/src/module/division_new/index.ts
+++ b/src/module/division_new/index.ts
@@ -11,6 +11,7 @@ import ViewCreateDiscussion from "./_division_fitur/discussion/view/view_create_
 import ViewDetailDiscussion from "./_division_fitur/discussion/view/view_detail_discussion";
 import ViewEditDiscussion from "./_division_fitur/discussion/view/view_edit_discussion";
 import ViewListDiscussion from "./_division_fitur/discussion/view/view_list_discussion";
+import ViewDocumentDivision from "./_division_fitur/document/view/view_document_division";
 import ViewCreateTaskDivision from "./_division_fitur/task/view/view_create_division_task";
 import ViewDetailDivisionTask from "./_division_fitur/task/view/view_detail_division_task";
 import ViewDivisionTask from "./_division_fitur/task/view/view_division_task";
@@ -45,4 +46,5 @@ export { ViewListDiscussion }
 export { ViewCreateDiscussion }
 export { ViewDetailDiscussion }
 export { ViewEditDiscussion }
+export { ViewDocumentDivision }