style : update information division

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

@@ -134,7 +134,7 @@ export default function NavbarDocumentDivision() {
           </Box>
         </>
       )}
-      <LayoutNavbarNew back='/division' title='Divisi kerohanian'
+      <LayoutNavbarNew back='' 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' />

src/module/division_new/components/create_anggota_division.tsx

@@ -0,0 +1,122 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import { Avatar, Box, Button, Divider, Group, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+import { FaCheck } from 'react-icons/fa6';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+
+const dataUser = [
+  {
+    id: 1,
+    img: "https://i.pravatar.cc/1000?img=3",
+    name: "Doni Setiawan",
+  },
+  {
+    id: 2,
+    img: "https://i.pravatar.cc/1000?img=10",
+    name: "Ilham Udin",
+  },
+  {
+    id: 3,
+    img: "https://i.pravatar.cc/1000?img=11",
+    name: "Didin Anang",
+  },
+  {
+    id: 4,
+    img: "https://i.pravatar.cc/1000?img=21",
+    name: "Angga Saputra",
+  },
+  {
+    id: 5,
+    img: "https://i.pravatar.cc/1000?img=32",
+    name: "Marcel Widianto",
+  },
+  {
+    id: 6,
+    img: "https://i.pravatar.cc/1000?img=37",
+    name: "Bagas Nusantara",
+  },
+];
+
+export default function CreateAnggotaDivision() {
+  const router = useRouter()
+  const [selectedFiles, setSelectedFiles] = useState<Record<number, boolean>>({});
+  const [isOpen, setOpen] = useState(false)
+
+  const handleFileClick = (index: number) => {
+    setSelectedFiles((prevSelectedFiles) => ({
+      ...prevSelectedFiles,
+      [index]: !prevSelectedFiles[index],
+    }));
+  };
+
+  function onTrue(val: boolean) {
+    if (val) {
+       toast.success("Sukses! Data tersimpan");
+    }
+    setOpen(false)
+    router.push("/division/info/1")
+ }
+
+  return (
+    <Box>
+      <LayoutNavbarNew back="/division/info/1" title="tambah anggota"
+        menu
+      />
+      <Box p={20}>
+        <Stack>
+          <TextInput
+            styles={{
+              input: {
+                color: WARNA.biruTua,
+                borderRadius: '#A3A3A3',
+                borderColor: '#A3A3A3',
+              },
+            }}
+            size="md"
+            radius={30}
+            leftSection={<HiMagnifyingGlass size={20} />}
+            placeholder="Pencarian"
+          />
+        </Stack>
+        <Box mt={20}>
+          {dataUser.map((v, index) => {
+            const isSelected = selectedFiles[index];
+            return (
+              <Box my={10} key={index} onClick={() => handleFileClick(index)}>
+                <Group justify='space-between' align='center'>
+                  <Group>
+                    <Avatar src={v.img} alt="it's me" size="lg" />
+                    <Text>{v.name}</Text>
+                  </Group>
+                  {isSelected ? <FaCheck /> : null}
+                </Group>
+                <Box mt={10}>
+                  <Divider size={"xs"} />
+                </Box>
+              </Box>
+            )
+          })}
+        </Box>
+        <Box mt="xl">
+          <Button
+            color="white"
+            bg={WARNA.biruTua}
+            size="lg"
+            radius={30}
+            fullWidth
+            onClick={() => { setOpen(true) }}
+          >
+            Simpan
+          </Button>
+        </Box>
+      </Box>
+      <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
+            description="Apakah Anda yakin ingin menambahkan data?"
+            onYes={(val) => { onTrue(val) }} />
+    </Box>
+  );
+}

src/module/division_new/components/edit_division.tsx

@@ -0,0 +1,61 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import { Box, Button, Select, Stack, Textarea, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+
+
+export default function EditDivision() {
+  const [openModal, setOpenModal] = useState(false)
+  const router = useRouter()
+
+  function onTrue(val: boolean) {
+    if (val) {
+      toast.success("Sukses! Data tersimpan");
+    }
+    setOpenModal(false)
+    router.push('/division/info/1')
+  }
+  return (
+    <Box>
+      <LayoutNavbarNew back="/division/info/1" title="Edit Divisi"
+        menu
+      />
+      <Box p={20}>
+        <Stack>
+          <Select
+            placeholder="Grup"
+            label="Grup"
+            size="md"
+            required
+            radius={40}
+          />
+          <TextInput
+            placeholder="Judul"
+            label="Judul"
+            size="md"
+            required
+            radius={40}
+          />
+          <Textarea placeholder="Deskripsi" label="Deskripsi" size="md" radius={10} />
+          <Box mt="xl">
+            <Button
+              color="white"
+              bg={WARNA.biruTua}
+              size="lg"
+              radius={30}
+              fullWidth
+              onClick={() => { setOpenModal(true) }}
+            >
+              Simpan
+            </Button>
+          </Box>
+        </Stack>
+      </Box>
+      <LayoutModal opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data' onYes={(val) => { onTrue(val) }} />
+    </Box>
+  )
+}
+

src/module/division_new/components/information_division.tsx

@@ -65,50 +65,59 @@ export default function InformationDivision() {
       <Box p={20}>
         <Box>
           <Text fw={"bold"}>Deskripsi Divisi</Text>
-          <Text mt={10} ta={"justify"}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the  standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </Text>
+          <Box p={20} bg={"white"} style={{
+            borderRadius: 10,
+            border: `1px solid ${WARNA.borderBiruMuda}`,
+          }}>
+            <Text ta={"justify"}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the  standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </Text>
+          </Box>
         </Box>
-        <Divider my={"md"} />
         <Box mt={20}>
-          <Box>
-            <Text>20 Anggota</Text>
-          </Box>
-          <Box mt={15}>
-            <Group align='center' onClick={() => router.push('/division/create-anggota/1')}>
-              <Avatar size="lg">
-                <AiOutlineUserAdd size={30} color={WARNA.biruTua} />
-              </Avatar>
-              <Text>Tambah Anggota</Text>
-            </Group>
-          </Box>
-          <Box pt={10}>
-            <Box mb={10}>
-              {dataUser.map((v, i) => {
-                return (
-                  <Box key={i}>
-                    <Flex
-                      justify={"space-between"}
-                      align={"center"}
-                      mt={10}
-                      onClick={() => setDrawer(true)}
-                    >
-                      <Group>
-                        <Avatar src={v.img} alt="it's me" size="lg" />
-                        <Box>
-                          <Text c={WARNA.biruTua} fw={"bold"}>
-                            {v.name}
-                          </Text>
-                        </Box>
-                      </Group>
-                      <Text c={WARNA.biruTua} fw={"bold"}>
-                        {v.role}
-                      </Text>
-                    </Flex>
-                    <Box mt={10}>
-                      <Divider size={"xs"} />
+          <Box p={20} bg={"white"} style={{
+            borderRadius: 10,
+            border: `1px solid ${WARNA.borderBiruMuda}`,
+          }}>
+            <Box>
+              <Text>20 Anggota</Text>
+            </Box>
+            <Box mt={15}>
+              <Group align='center' onClick={() => router.push('/division/create-anggota/1')}>
+                <Avatar size="lg">
+                  <AiOutlineUserAdd size={30} color={WARNA.biruTua} />
+                </Avatar>
+                <Text>Tambah Anggota</Text>
+              </Group>
+            </Box>
+            <Box pt={10}>
+              <Box mb={10}>
+                {dataUser.map((v, i) => {
+                  return (
+                    <Box key={i}>
+                      <Flex
+                        justify={"space-between"}
+                        align={"center"}
+                        mt={10}
+                        onClick={() => setDrawer(true)}
+                      >
+                        <Group>
+                          <Avatar src={v.img} alt="it's me" size="lg" />
+                          <Box>
+                            <Text c={WARNA.biruTua} fw={"bold"}>
+                              {v.name}
+                            </Text>
+                          </Box>
+                        </Group>
+                        <Text c={WARNA.biruTua} fw={"bold"}>
+                          {v.role}
+                        </Text>
+                      </Flex>
+                      <Box mt={10}>
+                        <Divider size={"xs"} />
+                      </Box>
                     </Box>
-                  </Box>
-                );
-              })}
+                  );
+                })}
+              </Box>
             </Box>
           </Box>
         </Box>
@@ -116,13 +125,13 @@ export default function InformationDivision() {
 
       <LayoutDrawer opened={openDrawer} onClose={() => setDrawer(false)} title="">
         <Box>
-          <Group align='center' mb={20}>
+          <Group align='center' mb={20} onClick={() => setDrawer(false)}>
             <ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
               <FaUserTie size={30} color={WARNA.biruTua} />
             </ActionIcon>
             <Text c={WARNA.biruTua}>Jadikan Admin</Text>
           </Group>
-          <Group align='center'>
+          <Group align='center' onClick={() => setDrawer(false)}>
             <ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
               <IoIosCloseCircle size={40} color={WARNA.biruTua} />
             </ActionIcon>

src/module/division_new/view/view_create_anggota_division.tsx

@@ -1,107 +1,11 @@
-"use client"
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Avatar, Box, Button, Divider, Group, Stack, Text, TextInput } from '@mantine/core';
-import { useRouter } from 'next/navigation';
-import React, { useState } from 'react';
-import { FaCheck } from 'react-icons/fa6';
-import { HiMagnifyingGlass } from 'react-icons/hi2';
-
-const dataUser = [
-  {
-    id: 1,
-    img: "https://i.pravatar.cc/1000?img=3",
-    name: "Doni Setiawan",
-  },
-  {
-    id: 2,
-    img: "https://i.pravatar.cc/1000?img=10",
-    name: "Ilham Udin",
-  },
-  {
-    id: 3,
-    img: "https://i.pravatar.cc/1000?img=11",
-    name: "Didin Anang",
-  },
-  {
-    id: 4,
-    img: "https://i.pravatar.cc/1000?img=21",
-    name: "Angga Saputra",
-  },
-  {
-    id: 5,
-    img: "https://i.pravatar.cc/1000?img=32",
-    name: "Marcel Widianto",
-  },
-  {
-    id: 6,
-    img: "https://i.pravatar.cc/1000?img=37",
-    name: "Bagas Nusantara",
-  },
-];
+import { Box } from '@mantine/core';
+import React from 'react';
+import CreateAnggotaDivision from '../components/create_anggota_division';
 
 export default function ViewCreateAnggotaDivision() {
-  const router = useRouter()
-  const [selectedFiles, setSelectedFiles] = useState<Record<number, boolean>>({});
-
-  const handleFileClick = (index: number) => {
-    setSelectedFiles((prevSelectedFiles) => ({
-      ...prevSelectedFiles,
-      [index]: !prevSelectedFiles[index],
-    }));
-  };
   return (
     <Box>
-      <LayoutNavbarNew back="/division/info/1" title="tambah anggota"
-        menu
-      />
-      <Box p={20}>
-        <Stack>
-          <TextInput
-            styles={{
-              input: {
-                color: WARNA.biruTua,
-                borderRadius: '#A3A3A3',
-                borderColor: '#A3A3A3',
-              },
-            }}
-            size="md"
-            radius={30}
-            leftSection={<HiMagnifyingGlass size={20} />}
-            placeholder="Pencarian"
-          />
-        </Stack>
-        <Box mt={20}>
-          {dataUser.map((v, index) => {
-            const isSelected = selectedFiles[index];
-            return (
-              <Box my={10} key={index} onClick={() => handleFileClick(index)}>
-                <Group justify='space-between' align='center'>
-                  <Group>
-                    <Avatar src={v.img} alt="it's me" size="lg" />
-                    <Text>{v.name}</Text>
-                  </Group>
-                  {isSelected ? <FaCheck /> : null}
-                </Group>
-                <Box mt={10}>
-                  <Divider size={"xs"} />
-                </Box>
-              </Box>
-            )
-          })}
-        </Box>
-        <Box mt="xl">
-          <Button
-            color="white"
-            bg={WARNA.biruTua}
-            size="lg"
-            radius={30}
-            fullWidth
-            onClick={() => router.push("/division/info/1")}
-          >
-            Simpan
-          </Button>
-        </Box>
-      </Box>
+      <CreateAnggotaDivision/>
     </Box>
   );
 }

src/module/division_new/view/view_edit_division.tsx

@@ -1,45 +1,13 @@
-"use client"
+
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { Box, Button, Select, Stack, Textarea, TextInput } from '@mantine/core';
 import React from 'react';
+import EditDivision from '../components/edit_division';
 
 export default function ViewEditDivision() {
   return (
     <Box>
-      <LayoutNavbarNew back="/division/info/1" title="Edit Divisi"
-        menu
-      />
-      <Box p={20}>
-        <Stack>
-          <Select
-            placeholder="Grup"
-            label="Grup"
-            size="md"
-            required
-            radius={40}
-          />
-          <TextInput
-            placeholder="Judul"
-            label="Judul"
-            size="md"
-            required
-            radius={40}
-          />
-          <Textarea placeholder="Deskripsi" label="Deskripsi" radius={10} />
-          <Box mt="xl">
-            <Button
-              color="white"
-              bg={WARNA.biruTua}
-              size="lg"
-              radius={30}
-              fullWidth
-              onClick={() => ""}
-            >
-              Simpan
-            </Button>
-          </Box>
-        </Stack>
-      </Box>
+     <EditDivision/>
     </Box>
   );
 }