Merge pull request #59 from bipproduction/lukman/18-juli-2024

style : update division

src/app/(application)/division/create-anggota/[id]/page.tsx

@@ -0,0 +1,10 @@
+import { ViewCreateAnggotaDivision } from "@/module/division_new";
+
+
+function Page() {
+   return (
+      <ViewCreateAnggotaDivision/>
+   )
+}
+
+export default Page;

src/app/(application)/division/edit-anggota/[id]/page.tsx

@@ -1,9 +0,0 @@
-import { ViewEditAnggotaDivision } from "@/module/division_new";
-
-function Page() {
-   return (
-      <ViewEditAnggotaDivision/>
-   )
-}
-
-export default Page;

src/module/division_new/components/information_division.tsx

@@ -1,25 +1,135 @@
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+"use client"
-import { Box, Text, Title } from '@mantine/core';
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
-import React from 'react';
+import { ActionIcon, Avatar, Box, Button, Divider, Flex, Group, Modal, SimpleGrid, Text, Title } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { AiOutlineUserAdd } from 'react-icons/ai';
+import { FaUserTie } from 'react-icons/fa6';
+import { HiUserAdd } from 'react-icons/hi';
+import { IoIosCloseCircle } from 'react-icons/io';
+import { LuClipboardEdit } from 'react-icons/lu';
+import { MdAccountCircle } from 'react-icons/md';
+
+const dataUser = [
+  {
+    id: 1,
+    img: "https://i.pravatar.cc/1000?img=3",
+    name: "Doni Setiawan",
+    role: "Admin"
+  },
+  {
+    id: 2,
+    img: "https://i.pravatar.cc/1000?img=10",
+    name: "Ilham Udin",
+    role: "Anggota"
+  },
+  {
+    id: 3,
+    img: "https://i.pravatar.cc/1000?img=11",
+    name: "Didin Anang",
+    role: "Anggota"
+  },
+  {
+    id: 4,
+    img: "https://i.pravatar.cc/1000?img=21",
+    name: "Angga Saputra",
+    role: "Anggota"
+  },
+  {
+    id: 5,
+    img: "https://i.pravatar.cc/1000?img=32",
+    name: "Marcel Widianto",
+    role: "Anggota"
+  },
+  {
+    id: 6,
+    img: "https://i.pravatar.cc/1000?img=37",
+    name: "Bagas Nusantara",
+    role: "Anggota"
+  },
+];
 
 export default function InformationDivision() {
+  const router = useRouter()
+  const [openDrawer, setDrawer] = useState(false)
   return (
     <Box>
-      <LayoutNavbarNew back="/division/1" title=""
+      <LayoutNavbarNew back="/division/1" title="divisi kerohanian"
-        menu
+        menu={
+          <ActionIcon variant="light" onClick={() => {
+            router.push('/division/edit/1')
+          }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+            <LuClipboardEdit size={20} color='white' />
+          </ActionIcon>}
       />
       <Box p={20}>
-        <Title order={3} fw={"bold"} ta={"center"}>DIVISI KEROHANIAN</Title>
+        <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>
+        <Divider my={"md"} />
         <Box mt={20}>
-          <Text fw={"bold"}>Deskripsi</Text>
+          <Box>
-          <Box p={20} style={{
+            <Text>20 Anggota</Text>
-            border: `1px solid ${WARNA.borderBiruMuda}`,
+          </Box>
-            borderRadius: 10
+          <Box mt={15}>
-          }}>
+            <Group align='center' onClick={() => router.push('/division/create-anggota/1')}>
-            <Text>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>
+              <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>
+
+      <LayoutDrawer opened={openDrawer} onClose={() => setDrawer(false)} title="">
+        <Box>
+          <Group align='center' mb={20}>
+            <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'>
+            <ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
+              <IoIosCloseCircle size={40} color={WARNA.biruTua} />
+            </ActionIcon>
+            <Text c={WARNA.biruTua}>Keluarkan dari Group</Text>
+          </Group>
+        </Box>
+      </LayoutDrawer>
     </Box>
   );
 }

src/module/division_new/components/report_division_id.tsx

@@ -0,0 +1,80 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Box, Stack } from '@mantine/core';
+import { DateInput } from '@mantine/dates';
+import React, { useState } from 'react';
+import EchartPaiReport from './echart_pai_report';
+import EchartBarReport from './echart_bar_report';
+import EventReport from './event_report';
+import DiscussionReport from './discussion_report';
+
+export default function ReportDivisionId() {
+  const [value, setValue] = useState<Date | null>(null);
+  return (
+    <Box>
+      <LayoutNavbarNew back="/division/1" title="Report Divisi" menu />
+      <Box p={20}>
+        <Stack>
+          <DateInput
+            value={value}
+            onChange={setValue}
+            radius={10}
+            size="md"
+            required
+            label="Date input"
+            placeholder="Date input"
+          />
+          <Box pt={10}>
+            <Box
+              bg={"white"}
+              style={{
+                border: `1px solid ${WARNA.borderBiruMuda}`,
+                borderRadius: 10,
+                padding: 10,
+              }}
+            >
+              <EchartPaiReport />
+            </Box>
+          </Box>
+          <Box pt={10}>
+            <Box
+              bg={"white"}
+              style={{
+                border: `1px solid ${WARNA.borderBiruMuda}`,
+                borderRadius: 10,
+                padding: 10,
+              }}
+            >
+              <EchartBarReport />
+            </Box>
+          </Box>
+          <Box pt={10}>
+            <Box
+              bg={"white"}
+              style={{
+                border: `1px solid ${WARNA.borderBiruMuda}`,
+                borderRadius: 10,
+                padding: 10,
+              }}
+            >
+              <EventReport />
+            </Box>
+          </Box>
+          <Box pt={10}>
+            <Box
+              bg={"white"}
+              style={{
+                border: `1px solid ${WARNA.borderBiruMuda}`,
+                borderRadius: 10,
+                padding: 10,
+              }}
+            >
+              <DiscussionReport />
+            </Box>
+          </Box>
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
+

src/module/division_new/components/ui/drawer_detail_division.tsx

@@ -12,7 +12,7 @@ export default function DrawerDetailDivision() {
       <Box>
          <Stack pt={10}>
             <SimpleGrid
-               cols={{ base: 3, sm: 3, lg: 3 }}
+               cols={{ base: 2, sm: 2, lg: 3 }}
             >
                <Flex onClick={() => router.push('/division/info/1')} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
@@ -22,26 +22,6 @@ export default function DrawerDetailDivision() {
                      <Text c={WARNA.biruTua}>Informasi Divisi</Text>
                   </Box>
                </Flex>
-               <Flex onClick={() => {
-                  router.push('/division/edit/1')
-               }} justify={'center'} align={'center'} direction={'column'} >
-                  <Box>
-                     <FaPencil size={30} color={WARNA.biruTua} />
-                  </Box>
-                  <Box>
-                     <Text c={WARNA.biruTua}>Edit Divisi</Text>
-                  </Box>
-               </Flex>
-               <Flex onClick={() => {
-                  router.push('/division/edit-anggota/1')
-               }} justify={'center'} align={'center'} direction={'column'} >
-                  <Box>
-                     <TbReportAnalytics size={30} color={WARNA.biruTua} />
-                  </Box>
-                  <Box>
-                     <Text c={WARNA.biruTua}>Edit Anggota</Text>
-                  </Box>
-               </Flex>
                <Flex onClick={() => {
                   router.push('/division/report/1')
                }} justify={'center'} align={'center'} direction={'column'} >

src/module/division_new/index.ts

@@ -18,40 +18,40 @@ import ViewDivisionTask from "./_division_fitur/task/view/view_division_task";
 import ViewUpdateProgressDivisionTask from "./_division_fitur/task/view/view_update_progress_division_task";
 import CreateAdminDivision from "./components/create_admin_division";
 import CreateUsers from "./components/create_users";
+import ViewCreateAnggotaDivision from "./view/view_create_anggota_division";
 import ViewCreateDivision from "./view/view_create_division";
 import ViewCreateReport from "./view/view_create_report";
 import ViewDetailDivision from "./view/view_detail_division";
 import ViewDivision from "./view/view_division";
-import ViewEditAnggotaDivision from "./view/view_edit_anggota_division";
 import ViewEditDivision from "./view/view_edit_division";
 import ViewInformationDivision from "./view/view_Information_division";
 import ViewReportDivision from "./view/view_report_division";
 
-export { ViewDivision }
+export { ViewDivision };
-export { ViewCreateDivision }
+export { ViewCreateDivision };
-export { CreateUsers }
+export { CreateUsers };
-export { CreateAdminDivision }
+export { CreateAdminDivision };
-export { ViewCreateReport }
+export { ViewCreateReport };
-export { ViewDetailDivision }
+export { ViewDetailDivision };
-export { ViewDivisionTask }
+export { ViewDivisionTask };
-export { ViewDetailDivisionTask }
+export { ViewDetailDivisionTask };
-export { ViewUpdateProgressDivisionTask }
+export { ViewUpdateProgressDivisionTask };
-export { ViewDivisionCalender }
+export { ViewDivisionCalender };
-export { ViewCreateDivisionCalender }
+export { ViewCreateDivisionCalender };
-export { ViewCreateTaskDivision }
+export { ViewCreateTaskDivision };
-export { UlangiEvent }
+export { UlangiEvent };
-export { CreateUserDivisionCalender }
+export { CreateUserDivisionCalender };
-export { ViewHistoryDivisionCalender }
+export { ViewHistoryDivisionCalender };
-export { ViewDetailEventDivision }
+export { ViewDetailEventDivision };
-export { ViewUpdateDivisionCalender }
+export { ViewUpdateDivisionCalender };
-export { UpdateUserDivisionCalender }
+export { UpdateUserDivisionCalender };
-export { UpdateUlangiEvent }
+export { UpdateUlangiEvent };
-export { ViewListDiscussion }
+export { ViewListDiscussion };
-export { ViewCreateDiscussion }
+export { ViewCreateDiscussion };
-export { ViewDetailDiscussion }
+export { ViewDetailDiscussion };
-export { ViewEditDiscussion }
+export { ViewEditDiscussion };
-export { ViewDocumentDivision }
+export { ViewDocumentDivision };
-export { ViewReportDivision }
+export { ViewReportDivision };
-export { ViewInformationDivision }
+export { ViewInformationDivision };
-export { ViewEditDivision }
+export { ViewEditDivision };
-export { ViewEditAnggotaDivision }
+export { ViewCreateAnggotaDivision };

src/module/division_new/view/view_create_anggota_division.tsx

@@ -0,0 +1,108 @@
+"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",
+  },
+];
+
+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>
+    </Box>
+  );
+}
+

src/module/division_new/view/view_edit_anggota_division.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-
-export default function ViewEditAnggotaDivision() {
-  return (
-    <div>
-      ViewEditAnggotaDivision
-    </div>
-  );
-}
-

src/module/division_new/view/view_edit_division.tsx

@@ -1,10 +1,46 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Box, Button, Select, Stack, Textarea, TextInput } from '@mantine/core';
 import React from 'react';
 
 export default function ViewEditDivision() {
   return (
-    <div>
+    <Box>
-      ViewEditDivision
+      <LayoutNavbarNew back="/division/info/1" title="Edit Divisi"
-    </div>
+        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>
+    </Box>
   );
 }
 

src/module/division_new/view/view_report_division.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
+import ReportDivisionId from '../components/report_division_id';
 
 export default function ViewReportDivision() {
   return (
-    <div>
+    <ReportDivisionId/>
-      ViewReportDivision
-    </div>
   );
 }