style : add documets

Deskripsi:
- add copy data
- acut data
- more

No Issue

src/module/division_new/_division_fitur/document/components/ui/drawer_copy_documents.tsx

@@ -0,0 +1,110 @@
+import { WARNA } from '@/module/_global';
+import { Box, Button, Divider, Flex, Grid, Group, Modal, Text, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+import { FcFolder } from 'react-icons/fc';
+const dataDocuments = [
+  {
+    id: 1,
+    name: 'Administrasi',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcFolder size={40} />
+  },
+  {
+    id: 2,
+    name: 'Administrasi',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcFolder size={40} />
+  },
+  {
+    id: 3,
+    name: 'Administrasi',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcFolder size={40} />
+  },
+]
+
+export default function DrawerCopyDocuments() {
+  const [opened, setOpened] = useState(false);
+  function onCreate(val: boolean) {
+    if (val) {
+      toast.success("Sukses! Membuat Folder");
+    }
+    setOpened(false)
+  }
+  return (
+    <Box>
+      <Box h={60} pos={"fixed"} bottom={0} w={{base: "92%", md: "94%"}} style={{
+        zIndex: 999
+      }}>
+        <Grid justify='center'>
+          <Grid.Col span={6}>
+            <Button variant="subtle" fullWidth color={WARNA.biruTua} radius={"xl"} onClick={() => setOpened(true)}>BUAT FOLDER BARU</Button>
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Button variant="filled" fullWidth color={WARNA.biruTua} radius={"xl"}>SALIN</Button>
+          </Grid.Col>
+        </Grid>
+      </Box>
+      <Box p={10} pb={60}>
+        {dataDocuments.map((v, i) => {
+          return (
+            <Box key={i}>
+              <Box mt={10} mb={10}>
+                <Grid align='center'>
+                  <Grid.Col span={12}>
+                    <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>
+              </Box>
+              <Divider size="xs" />
+            </Box>
+          )
+        })}
+      </Box>
+      <Modal styles={{
+        body: {
+          borderRadius: 20
+        },
+        content: {
+          borderRadius: 20,
+          border: `2px solid ${"#828AFC"}`
+        }
+      }} opened={opened} onClose={() => setOpened(false)} centered withCloseButton={false}>
+        <Box p={20}>
+          <Text ta={"center"} fw={"bold"}>Buat Folder</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={() => setOpened(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>
+  );
+}

src/module/division_new/_division_fitur/document/components/ui/drawer_cut_documents.tsx

@@ -0,0 +1,110 @@
+import { WARNA } from '@/module/_global';
+import { Box, Button, Divider, Flex, Grid, Group, Modal, Text, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+import { FcFolder } from 'react-icons/fc';
+const dataDocuments = [
+  {
+    id: 1,
+    name: 'Administrasi',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcFolder size={40} />
+  },
+  {
+    id: 2,
+    name: 'Administrasi',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcFolder size={40} />
+  },
+  {
+    id: 3,
+    name: 'Administrasi',
+    date: '18/06/2024 14.00 PM',
+    icon: <FcFolder size={40} />
+  },
+]
+
+export default function DrawerCutDocuments() {
+  const [opened, setOpened] = useState(false);
+  function onCreate(val: boolean) {
+    if (val) {
+      toast.success("Sukses! Membuat Folder");
+    }
+    setOpened(false)
+  }
+  return (
+    <Box>
+      <Box h={60} pos={"fixed"} bottom={0} w={{base: "92%", md: "94%"}} style={{
+        zIndex: 999
+      }}>
+        <Grid justify='center'>
+          <Grid.Col span={6}>
+            <Button variant="subtle" fullWidth color={WARNA.biruTua} radius={"xl"} onClick={() => setOpened(true)}>BUAT FOLDER BARU</Button>
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Button variant="filled" fullWidth  color={WARNA.biruTua} radius={"xl"}>PIDAH</Button>
+          </Grid.Col>
+        </Grid>
+      </Box>
+      <Box p={10} pb={60}>
+          {dataDocuments.map((v, i) => {
+            return (
+              <Box key={i}>
+                <Box mt={10} mb={10}>
+                  <Grid align='center'>
+                    <Grid.Col span={12}>
+                      <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>
+                </Box>
+                <Divider size="xs" />
+              </Box>
+            )
+          })}
+      </Box>
+      <Modal styles={{
+        body: {
+          borderRadius: 20
+        },
+        content: {
+          borderRadius: 20,
+          border: `2px solid ${"#828AFC"}`
+        }
+      }} opened={opened} onClose={() => setOpened(false)} centered withCloseButton={false}>
+        <Box p={20}>
+          <Text ta={"center"} fw={"bold"}>Buat Folder</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={() => setOpened(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>
+  );
+}

src/module/division_new/_division_fitur/document/components/ui/drawer_more.tsx

@@ -0,0 +1,43 @@
+import { LayoutDrawer, WARNA } from "@/module/_global";
+import { Box, Flex, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import React, { useState } from "react";
+import { LuFolders, LuFolderSymlink } from "react-icons/lu";
+import DrawerCutDocuments from "./drawer_cut_documents";
+import DrawerCopyDocuments from "./drawer_copy_documents";
+
+export default function DrawerMore() {
+  const [isCut, setIsCut] = useState(false)
+  const [isCopy, setIsCopy] = useState(false)
+  return (
+    <Box>
+      <Stack p={10} >
+        <SimpleGrid
+          cols={{ base: 3, sm: 3, lg: 3 }}
+        >
+          <Flex onClick={() => setIsCut(true)} justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <LuFolderSymlink size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Pindah</Text>
+            </Box>
+          </Flex>
+          <Flex onClick={() => setIsCopy(true)} justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <LuFolders size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Salin</Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </Stack>
+      <LayoutDrawer opened={isCut} onClose={() => setIsCut(false)} title={'Pilih Lokasi Pemindahan'} size="lg">
+        <DrawerCutDocuments />
+      </LayoutDrawer>
+      <LayoutDrawer opened={isCopy} onClose={() => setIsCopy(false)} title={'Pilih Lokasi Salin'} size="lg">
+        <DrawerCopyDocuments />
+      </LayoutDrawer>
+    </Box>
+  );
+}

src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
-import { ActionIcon, Box, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Text } from '@mantine/core';
+import { ActionIcon, Box, Button, Checkbox, Divider, Flex, Grid, Group, Modal, Select, SimpleGrid, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { HiMenu } from 'react-icons/hi';
 import DrawerMenuDocumentDivision from './drawer_menu_document_division';
@@ -11,6 +11,9 @@ import { AiOutlineDelete } from 'react-icons/ai';
 import { CgRename } from "react-icons/cg";
 import { LuShare2 } from 'react-icons/lu';
 import { MdOutlineMoreHoriz } from 'react-icons/md';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import toast from 'react-hot-toast';
+import DrawerMore from './drawer_more';
 
 const dataDocuments = [
   {
@@ -76,6 +79,19 @@ export default function NavbarDocumentDivision() {
   const [share, setShare] = useState(false)
   const [more, setMore] = useState(false)
 
+  function onTrue(val: boolean) {
+    if (val) {
+      toast.success("Sukses! Data dihapus");
+    }
+    setIsDelete(false)
+  }
+  function onEdit(val: boolean) {
+    if (val) {
+      toast.success("Sukses! Edit Data");
+    }
+    setRename(false)
+  }
+
   return (
     <Box>
       {isChecked && (
@@ -109,7 +125,7 @@ export default function NavbarDocumentDivision() {
                   <LuShare2 size={20} color='white' />
                   <Text fz={12} c={'white'}>Bagikan</Text>
                 </Flex>
-                <Flex onClick={() => setMore(false)} justify={'center'} align={'center'} direction={'column'}>
+                <Flex onClick={() => setMore(true)} justify={'center'} align={'center'} direction={'column'}>
                   <MdOutlineMoreHoriz size={20} color='white' />
                   <Text fz={12} c={'white'}>Lainnya</Text>
                 </Flex>
@@ -165,6 +181,79 @@ export default function NavbarDocumentDivision() {
       <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
         <DrawerMenuDocumentDivision />
       </LayoutDrawer>
+      <LayoutModal opened={isDelete} onClose={() => setIsDelete(false)}
+        description="Apakah Anda yakin ingin menghapus data?"
+        onYes={(val) => { onTrue(val) }} />
+      <Modal styles={{
+        body: {
+          borderRadius: 20
+        },
+        content: {
+          borderRadius: 20,
+          border: `2px solid ${"#828AFC"}`
+        }
+      }} opened={rename} onClose={() => setRename(false)} centered withCloseButton={false}>
+        <Box p={20}>
+          <Text ta={"center"} fw={"bold"}>Edit Folder</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={() => setRename(false)}>Batalkan</Button>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onEdit(true)}>Edit</Button>
+            </Grid.Col>
+          </Grid>
+        </Box>
+      </Modal>
+      <LayoutDrawer opened={share} title={'Bagikan'} onClose={() => setShare(false)} size='lg'>
+        <Box pt={10}>
+          <Select
+            styles={{
+              input: {
+                color: WARNA.biruTua,
+                borderRadius: WARNA.biruTua,
+                borderColor: WARNA.biruTua,
+              },
+            }}
+            size="lg"
+            radius={10}
+            placeholder="Pilih Divisi"
+          />
+          <Box h={90} pos={"fixed"} bottom={0} w={{ base: "92%", md: "94%" }} style={{
+            zIndex: 999
+          }}>
+            <Box>
+              <Button
+                c={"white"}
+                bg={WARNA.biruTua}
+                size="lg"
+                radius={30}
+                fullWidth
+                onClick={() => ''}
+              >
+                Simpan
+              </Button>
+            </Box>
+          </Box>
+        </Box>
+      </LayoutDrawer>
+      <LayoutDrawer opened={more} title={''} onClose={() => setMore(false)}>
+        <DrawerMore />
+      </LayoutDrawer>
     </Box>
   );
 }