Merge pull request #49 from bipproduction/lukman/15-juli-2024

Lukman/15 juli 2024
2024-07-15 17:42:49 +08:00
parent ce6fc423a4 66b7ac2388
commit 2ce299f1f0
23 changed files with 990 additions and 21 deletions
--- a/src/app/(application)/(detail-division)/calender/create/page.tsx
+++ b/src/app/(application)/(detail-division)/calender/create/page.tsx
@@ -1,9 +1,15 @@
-import { ViewCreateDivisionCalender } from '@/module/division_new';
+import { CreateUserDivisionCalender, UlangiEvent, ViewCreateDivisionCalender } from '@/module/division_new';
 import React from 'react';

-function Page() {
+function Page({ searchParams }: { searchParams: any }) {
+  if (searchParams.page == "ulangi-event")
+    return <UlangiEvent />
+  if (searchParams.page == "user-calender")
+    return <CreateUserDivisionCalender />
+
+  
  return (
-    <ViewCreateDivisionCalender/>
+    <ViewCreateDivisionCalender />
  );
 }

--- a/src/app/(application)/(detail-division)/calender/history/page.tsx
+++ b/src/app/(application)/(detail-division)/calender/history/page.tsx
@@ -0,0 +1,10 @@
+import { ViewHistoryDivisionCalender } from '@/module/division_new';
+import React from 'react';
+
+function Page() {
+  return (
+    <ViewHistoryDivisionCalender />
+  );
+}
+
+export default Page;
--- a/src/app/(application)/(detail-division)/calender/page.tsx
+++ b/src/app/(application)/(detail-division)/calender/page.tsx
@@ -1,7 +1,9 @@
-import { ViewDivisionCalender } from '@/module/division_new';
+import { ViewDetailEventDivision, ViewDivisionCalender } from '@/module/division_new';
 import React from 'react';

-function Page() {
+function Page({ searchParams }: { searchParams: any }) {
+  if (searchParams.page == "detail-event")
+    return <ViewDetailEventDivision />
  return (
    <ViewDivisionCalender />
  );
--- a/src/app/(application)/(detail-division)/calender/update/page.tsx
+++ b/src/app/(application)/(detail-division)/calender/update/page.tsx
@@ -0,0 +1,14 @@
+import { UpdateUlangiEvent, UpdateUserDivisionCalender, ViewUpdateDivisionCalender } from '@/module/division_new';
+import React from 'react';
+
+function Page({ searchParams }: { searchParams: any }) {
+  if (searchParams.page == "update-ulangi-event")
+    return <UpdateUlangiEvent />
+  if (searchParams.page == "update-user-calender")
+    return <UpdateUserDivisionCalender />
+  return (
+    <ViewUpdateDivisionCalender/>
+  );
+}
+
+export default Page;
--- a/src/module/division_new/_division_fitur/calender/components/create_user_division_calender.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/create_user_division_calender.tsx
@@ -0,0 +1,11 @@
+import { Box } from '@mantine/core';
+import React from 'react';
+import NavbarCreateUserCalender from './navbar_create_user_calender';
+
+export default function CreateUserDivisionCalender() {
+  return (
+    <Box>
+      <NavbarCreateUserCalender />
+    </Box>
+  );
+}
--- a/src/module/division_new/_division_fitur/calender/components/date_event_division.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/date_event_division.tsx
@@ -1,6 +1,7 @@
 import { WARNA } from '@/module/_global';
 import { Box, Divider, Group, Indicator, Text } from '@mantine/core';
 import { DatePicker, DatePickerProps } from '@mantine/dates';
+import { useRouter } from 'next/navigation';
 import React from 'react';

 const HariIni = [
@@ -37,6 +38,7 @@ const Besok = [
 ]

 export default function DateEventDivision() {
+  const router = useRouter()
  const dayRenderer: DatePickerProps['renderDay'] = (date) => {
    const day = date.getDate();
    return (
@@ -62,7 +64,7 @@ export default function DateEventDivision() {
          const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
          return (
            <Box key={event.id} mt={10}>
-              <Box bg={bgColor} pl={15} p={10} style={{
+              <Box onClick={() => router.push("/calender?page=detail-event")} bg={bgColor} pl={15} p={10} style={{
                borderRadius: 10
              }} h={113}>
                <Group>
@@ -83,7 +85,7 @@ export default function DateEventDivision() {
          const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
          return (
            <Box key={event.id} mt={10}>
-              <Box bg={bgColor} pl={15} p={10} style={{
+              <Box onClick={() => router.push("/calender?page=detail-event")}  bg={bgColor} pl={15} p={10} style={{
                borderRadius: 10
              }} h={113}>
                <Group>
--- a/src/module/division_new/_division_fitur/calender/components/dawer_division_calender.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/dawer_division_calender.tsx
@@ -19,7 +19,7 @@ export default function DawerDivisionCalender() {
              <Text ta={"center"} c={WARNA.biruTua}>Tambah Kalender</Text>
            </Box>
          </Flex>
-          <Flex onClick={() => window.location.href = ""} justify={'center'} align={'center'} direction={'column'} >
+          <Flex onClick={() => window.location.href = "/calender/history"} justify={'center'} align={'center'} direction={'column'} >
            <Box>
              <AiOutlineFileSearch size={30} color={WARNA.biruTua} />
            </Box>
--- a/src/module/division_new/_division_fitur/calender/components/detail_event_division.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/detail_event_division.tsx
@@ -0,0 +1,146 @@
+'use client'
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { ActionIcon, Avatar, Box, CopyButton, Flex, Group, Stack, Text, Tooltip } from '@mantine/core';
+import React, { useState } from 'react';
+import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
+import { MdEventNote, MdOutlineFormatListBulleted } from "react-icons/md";
+import { LuClock, LuCopy, LuLink } from "react-icons/lu";
+import { FaCheck } from 'react-icons/fa6';
+import { TbCopy } from 'react-icons/tb';
+import { HiMenu } from 'react-icons/hi';
+import DrawerDetailEvent from './drawer_detail_event';
+const dataAnggota = [
+  {
+    id: 1,
+    name: "Iqbal Ramadan",
+    image: "https://i.pravatar.cc/1000?img=5",
+    email: "iqbal.ramadan@gmail.com",
+  },
+  {
+    id: 2,
+    name: "Doni Setiawan",
+    image: "https://i.pravatar.cc/1000?img=10",
+    email: "doni.setiawan@gmail.com",
+  },
+  {
+    id: 3,
+    name: "Rangga Agung",
+    image: "https://i.pravatar.cc/1000?img=51",
+    email: "rangga.agung@gmail.com",
+  },
+  {
+    id: 4,
+    name: "Ramadan Sananta",
+    image: "https://i.pravatar.cc/1000?img=15",
+    email: "ramadan@gmail.com",
+  },
+  {
+    id: 5,
+    name: "Imam Baroni",
+    image: "https://i.pravatar.cc/1000?img=22",
+    email: "imam.baroni@gmail.com",
+  },
+];
+
+export default function DetailEventDivision() {
+  const [openDrawer, setOpenDrawer] = useState(false)
+  return (
+    <Box>
+      <LayoutNavbarNew back="/calender" title="Detail Event"
+        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}>
+        <Box style={{
+          border: `1px solid ${"#D8D8F1"}`,
+          padding: 20,
+          borderRadius: 10
+        }}>
+          <Stack ml={10}>
+            <Group mb={10} gap={30}>
+              <BsCalendar2Event size={25} color={WARNA.biruTua} />
+              <Text>Pembahasan mengenai Darmasaba</Text>
+            </Group>
+            <Group mb={10} gap={30}>
+              <BsCalendarDate size={25} color={WARNA.biruTua} />
+              <Text>Senin, 24 Juni 2024</Text>
+            </Group>
+            <Group mb={10} gap={30}>
+              <LuClock size={25} color={WARNA.biruTua} />
+              <Text>10:00  | 11:00 </Text>
+            </Group>
+            <Group mb={10} gap={30}>
+              <BsCalendarDate size={25} color={WARNA.biruTua} />
+              <Text>Acara 1 Kali</Text>
+            </Group>
+            <Group mb={10} gap={30}>
+              <LuLink size={25} color={WARNA.biruTua} />
+              <Group justify='space-between'>
+                <Text>http://Linkmeet.com</Text>
+                <CopyButton value="http://Linkmeet.com" timeout={2000}>
+                  {({ copied, copy }) => (
+                    <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
+                      <ActionIcon color={copied ? 'teal' : WARNA.biruTua} variant="subtle" onClick={copy}>
+                        {copied ? (
+                          <FaCheck size={20} />
+                        ) : (
+                          <TbCopy size={20} />
+                        )}
+                      </ActionIcon>
+                    </Tooltip>
+                  )}
+                </CopyButton>
+              </Group>
+            </Group>
+            <Group gap={30}>
+              <MdOutlineFormatListBulleted size={25} color={WARNA.biruTua} />
+              <Text>Dimohon agar tepat waktu</Text>
+            </Group>
+          </Stack>
+        </Box>
+        <Box pt={20}>
+          <Box mb={20}>
+            <Box
+              style={{
+                border: `1px solid ${"#C7D6E8"}`,
+                borderRadius: 10,
+              }}
+              px={20}
+              pt={20}
+            >
+              {dataAnggota.map((v, i) => {
+                return (
+                  <Flex
+                    justify={"space-between"}
+                    align={"center"}
+                    mb={20}
+                    key={i}
+                  >
+                    <Group>
+                      <Avatar src={v.image} alt="it's me" size="lg" />
+                      <Box>
+                        <Text c={WARNA.biruTua} fw={"bold"}>
+                          {v.name}
+                        </Text>
+                        <Text c={"#5A687D"} fz={14}>
+                          {v.email}
+                        </Text>
+                      </Box>
+                    </Group>
+                    <Text c={WARNA.biruTua} fw={"bold"}>
+                      Anggota
+                    </Text>
+                  </Flex>
+                );
+              })}
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+      <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
+       <DrawerDetailEvent/>
+      </LayoutDrawer>
+    </Box>
+  );
+}
+
--- a/src/module/division_new/_division_fitur/calender/components/drawer_detail_event.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/drawer_detail_event.tsx
@@ -0,0 +1,51 @@
+"use client"
+import { WARNA } from '@/module/_global';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+import { AiOutlineFileSearch } from 'react-icons/ai';
+import { IoAddCircle } from 'react-icons/io5';
+import { MdDelete, MdEdit } from 'react-icons/md';
+
+export default function DrawerDetailEvent() {
+  const router = useRouter()
+  const [isModal, setModal] = useState(false)
+
+  function onTrue(val: boolean) {
+    if (val) {
+      toast.success("Sukses! Data dihapus");
+    }
+    setModal(false)
+  }
+  return (
+    <Box>
+      <Stack pt={10}>
+        <SimpleGrid
+          cols={{ base: 3, sm: 3, lg: 3 }}
+        >
+          <Flex  onClick={() => setModal(true)} justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <MdDelete size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text ta={"center"} c={WARNA.biruTua}>Hapus</Text>
+            </Box>
+          </Flex>
+          <Flex onClick={() => router.push('/calender/update')}  justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <MdEdit size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Edit</Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </Stack>
+      <LayoutModal opened={isModal} onClose={() => setModal(false)}
+        description="Apakah Anda yakin ingin menghapus data?"
+        onYes={(val) => { onTrue(val) }} />
+    </Box>
+  );
+}
--- a/src/module/division_new/_division_fitur/calender/components/history_division_calender.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/history_division_calender.tsx
@@ -0,0 +1,101 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Box, Center, Flex, Grid, Group, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+
+const history = [
+  {
+    id: 1,
+    tangal: 1,
+    hari: "Sab",
+    data: [
+      {
+        id: 1,
+        judul: "Pembahasan Mengenai Darmasaba",
+        waktu: "10.00 - 12.00",
+        status: "Selesai",
+      },
+      {
+        id: 2,
+        judul: "Pembahasan Mengenai Darmasaba",
+        waktu: "13.00 - 14.00",
+      },
+    ]
+  },
+  {
+    id: 2,
+    tangal: 2,
+    hari: "Min",
+    data: [
+      {
+        id: 1,
+        judul: "Pembahasan Mengenai Darmasaba",
+        waktu: "10.00 - 12.00",
+      },
+      {
+        id: 1,
+        judul: "Pembahasan Mengenai Darmasaba",
+        waktu: "13.00 - 14.00",
+      },
+      {
+        id: 1,
+        judul: "Pembahasan Mengenai Darmasaba",
+        waktu: "15.00 - 16.00",
+      },
+    ]
+  },
+]
+
+export default function HistoryDivisionCalender() {
+  const router = useRouter()
+  return (
+    <Box>
+      <LayoutNavbarNew back="/calender" title="History kalender" menu />
+      <Box p={20}>
+        <TextInput
+          styles={{
+            input: {
+              color: WARNA.biruTua,
+              borderRadius: WARNA.biruTua,
+              borderColor: WARNA.biruTua,
+            },
+          }}
+          size="md"
+          radius={30}
+          leftSection={<HiMagnifyingGlass size={20} />}
+          placeholder="Pencarian"
+        />
+        <Box mt={30}>
+          <Box bg={"#DBE9D8"} style={{
+            borderRadius: 10
+          }}>
+            {history.map((v, i) => {
+              return (
+                <Grid key={i}>
+                  <Grid.Col span={2}>
+                    <Flex justify={"center"} direction={'column'}>
+                      <Text ta={"center"} fz={20} fw={'bold'}>{v.tangal}</Text>
+                      <Text ta={"center"} fz={15}>{v.hari}</Text>
+                    </Flex>
+                  </Grid.Col>
+                  <Grid.Col span={'auto'}>
+                    {v.data.map((value) => {
+                      return (
+                        <Box mb={10} key={value.id} onClick={() => router.push('/calender?page=detail-event')}>
+                          <Text fw={"bold"}>{value.judul}</Text>
+                          <Text>{value.waktu}</Text>
+                        </Box>
+                      )
+                    })}
+                  </Grid.Col>
+                </Grid>
+              )
+            })}
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
--- a/src/module/division_new/_division_fitur/calender/components/list_ulangi_event.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/list_ulangi_event.tsx
@@ -0,0 +1,67 @@
+"use client"
+import { WARNA } from '@/module/_global';
+import { Box, Button, Checkbox } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const dataUlangi = [
+  {
+    id: 1,
+    name: 'Acara 1 Kali'
+  },
+  {
+    id: 2,
+    name: 'Hari Kerja (Sen - Jum)'
+  },
+  {
+    id: 3,
+    name: 'Mingguan'
+  },
+  {
+    id: 4,
+    name: 'Bulanan'
+  },
+  {
+    id: 5,
+    name: 'Tahunan'
+  },
+]
+
+export default function ListUlangiEvent() {
+  const router = useRouter()
+  return (
+    <Box>
+      {dataUlangi.map((v, i) => {
+        return (
+          <Box key={i} mb={20}>
+            <Box style={{
+              border: `1px solid ${"#D6D8F6"}`,
+              borderRadius: 10,
+              padding: 20
+            }}
+            >
+              <Checkbox
+                label={v.name}
+                color="teal"
+                radius="xl"
+              />
+            </Box>
+          </Box>
+        )
+      })}
+      <Box mt={"xl"}>
+        <Button
+          c={"white"}
+          bg={WARNA.biruTua}
+          size="lg"
+          radius={30}
+          fullWidth
+          onClick={() => router.push(``)}
+        >
+          Simpan
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
--- a/src/module/division_new/_division_fitur/calender/components/navbar_create_division_calender.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/navbar_create_division_calender.tsx
@@ -1,28 +1,39 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Box, Input, Stack } from '@mantine/core';
-import { DateInput } from '@mantine/dates';
+import { Box, Button, Group, Input, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { DateInput, TimeInput } from '@mantine/dates';
 import React, { useState } from 'react';
-import { BsCalendarDate } from 'react-icons/bs';
-import { PiIdentificationCardLight } from "react-icons/pi";
+import { IoIosArrowDropright } from 'react-icons/io';
+import { useRouter } from 'next/navigation';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import toast from 'react-hot-toast';

 export default function NavbarCreateDivisionCalender() {
+  const [isModal, setModal] = useState(false)
+
+  function onTrue(val: boolean) {
+    if (val) {
+      toast.success("Sukses! Data tersimpan");
+    }
+    setModal(false)
+  }
  const [value, setValue] = useState<Date | null>(null);
+  const router = useRouter()
  return (
    <Box>
      <LayoutNavbarNew back="/calender" title="tambah kalender" menu />
      <Box p={20}>
        <Stack>
-          <Input
+          <TextInput
            styles={{
              input: {
                border: `1px solid ${"#D6D8F6"}`,
                borderRadius: 10,
              },
            }}
-            placeholder="Event Name"
-            size="lg"
-            leftSection={<PiIdentificationCardLight size={30} color={WARNA.biruTua} />}
+            size="md"
+            placeholder="Event Nama"
+            label="Event Nama"
          />
          <DateInput
            styles={{
@@ -31,14 +42,97 @@ export default function NavbarCreateDivisionCalender() {
                borderRadius: 10,
              },
            }}
+            size="md"
            value={value}
            onChange={setValue}
-            placeholder="Date input"
-            size="lg"
-            leftSection={<BsCalendarDate size={25} color={WARNA.biruTua} />}
+            placeholder="Input Tanggal"
+            label="Tanggal"
          />
+          <SimpleGrid
+            cols={{ base: 2, sm: 2, lg: 2 }}
+          >
+            <TimeInput
+              styles={{
+                input: {
+                  border: `1px solid ${"#D6D8F6"}`,
+                  borderRadius: 10,
+                },
+              }}
+              size="md"
+              label="Waktu Awal"
+            />
+            <TimeInput
+              styles={{
+                input: {
+                  border: `1px solid ${"#D6D8F6"}`,
+                  borderRadius: 10,
+                },
+              }}
+              size="md"
+              label="Waktu Akhir"
+            />
+          </SimpleGrid>
+          <TextInput
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            size="md"
+            placeholder="Link Meet"
+            label="Link Meet"
+          />
+          <Box mt={5} onClick={() => router.push('/calender/create?page=ulangi-event')}>
+            <Group
+              justify="space-between"
+              p={10}
+              style={{
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              }}
+            >
+              <Text>Ulangi Event</Text>
+              <IoIosArrowDropright size={25} />
+            </Group>
+          </Box>
+          <Box mt={5} onClick={() => router.push('/calender/create?page=user-calender')}>
+            <Group
+              justify="space-between"
+              p={10}
+              style={{
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              }}
+            >
+              <Text>Tambah Anggota</Text>
+              <IoIosArrowDropright size={25} />
+            </Group>
+          </Box>
+          <Textarea styles={{
+            input: {
+              border: `1px solid ${"#D6D8F6"}`,
+              borderRadius: 10,
+            },
+          }}
+            size="md" placeholder='Deskripsi' label="Deskripsi" />
+          <Box mt={"xl"}>
+            <Button
+              c={"white"}
+              bg={WARNA.biruTua}
+              size="lg"
+              radius={30}
+              fullWidth
+              onClick={() => setModal(true)}
+            >
+              Simpan
+            </Button>
+          </Box>
        </Stack>
      </Box>
+      <LayoutModal opened={isModal} onClose={() => setModal(false)}
+        description="Apakah Anda yakin ingin menambahkan data?"
+        onYes={(val) => { onTrue(val) }} />
    </Box>
  );
 } 
--- a/src/module/division_new/_division_fitur/calender/components/navbar_create_user_calender.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/navbar_create_user_calender.tsx
@@ -0,0 +1,119 @@
+'use client'
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import { Avatar, Box, Button, Center, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+
+
+const dataUser = [
+  {
+    id: 1,
+    img: "https://i.pravatar.cc/500?img=3",
+    name: "Doni Setiawan",
+  },
+  {
+    id: 2,
+    img: "https://i.pravatar.cc/500?img=10",
+    name: "Ilham Udin",
+  },
+  {
+    id: 3,
+    img: "https://i.pravatar.cc/500?img=11",
+    name: "Didin Anang",
+  },
+  {
+    id: 4,
+    img: "https://i.pravatar.cc/500?img=1",
+    name: "Angga Saputra",
+  },
+  {
+    id: 5,
+    img: "https://i.pravatar.cc/500?img=2",
+    name: "Marcel Widianto",
+  },
+  {
+    id: 6,
+    img: "https://i.pravatar.cc/500?img=7",
+    name: "Bagas Nusantara",
+  },
+];
+
+export default function NavbarCreateUserCalender() {
+  const router = useRouter()
+  const [selectedFiles, setSelectedFiles] = useState<Record<number, boolean>>({});
+
+  const handleFileClick = (index: number) => {
+    setSelectedFiles((prevSelectedFiles) => ({
+      ...prevSelectedFiles,
+      [index]: !prevSelectedFiles[index],
+    }));
+  };
+  return (
+    <Box>
+      <LayoutNavbarNew back="/calender/create" 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"
+          />
+          <Box pt={10}>
+            <SimpleGrid
+              cols={{ base: 2, sm: 2, lg: 2 }}
+              spacing={{ base: 20, sm: "xl" }}
+              verticalSpacing={{ base: "md", sm: "xl" }}
+            >
+              {dataUser.map((v, index) => {
+                const isSelected = selectedFiles[index];
+                return (
+                  <Box key={index} mb={10}>
+                    <Box
+                      bg={isSelected ? WARNA.bgHijauMuda : "white"}
+                      style={{
+                        border: `1px solid ${WARNA.biruTua}`,
+                        borderRadius: 20,
+                      }}
+                      py={10}
+                      onClick={() => handleFileClick(index)}
+                    >
+                      <Center>
+                        <Avatar src={v.img} alt="it's me" size="xl" />
+                      </Center>
+                      <Text mt={20} ta="center">
+                        {v.name}
+                      </Text>
+                    </Box>
+                  </Box>
+                );
+              })}
+            </SimpleGrid>
+          </Box>
+        </Stack>
+        <Box mt="xl">
+          <Button
+            color="white"
+            bg={WARNA.biruTua}
+            size="lg"
+            radius={30}
+            fullWidth
+            onClick={() => router.push("/calender/create")}
+          >
+            Simpan
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
--- a/src/module/division_new/_division_fitur/calender/components/ulangi_event.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/ulangi_event.tsx
@@ -0,0 +1,15 @@
+import { LayoutNavbarNew } from '@/module/_global';
+import { ActionIcon, Box } from '@mantine/core';
+import React from 'react';
+import ListUlangiEvent from './list_ulangi_event';
+
+export default function UlangiEvent() {
+  return (
+    <Box>
+      <LayoutNavbarNew back='/calender/create' title='ulangi event' menu />
+      <Box p={20}>
+        <ListUlangiEvent />
+      </Box>
+    </Box>
+  );
+}
--- a/src/module/division_new/_division_fitur/calender/components/update_calander/update_division_calender.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/update_calander/update_division_calender.tsx
@@ -0,0 +1,139 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Box, Button, Group, Input, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { DateInput, TimeInput } from '@mantine/dates';
+import React, { useState } from 'react';
+import { IoIosArrowDropright } from 'react-icons/io';
+import { useRouter } from 'next/navigation';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import toast from 'react-hot-toast';
+
+export default function UpdateDivisionCalender() {
+  const [isModal, setModal] = useState(false)
+
+  function onTrue(val: boolean) {
+    if (val) {
+      toast.success("Sukses! Data tersimpan");
+    }
+    setModal(false)
+  }
+  const [value, setValue] = useState<Date | null>(null);
+  const router = useRouter()
+  return (
+    <Box>
+      <LayoutNavbarNew back="/calender" title="Edit kalender" menu />
+      <Box p={20}>
+        <Stack>
+          <TextInput
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            size="md"
+            placeholder="Event Nama"
+            label="Event Nama"
+          />
+          <DateInput
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            size="md"
+            value={value}
+            onChange={setValue}
+            placeholder="Input Tanggal"
+            label="Tanggal"
+          />
+          <SimpleGrid
+            cols={{ base: 2, sm: 2, lg: 2 }}
+          >
+            <TimeInput
+              styles={{
+                input: {
+                  border: `1px solid ${"#D6D8F6"}`,
+                  borderRadius: 10,
+                },
+              }}
+              size="md"
+              label="Waktu Awal"
+            />
+            <TimeInput
+              styles={{
+                input: {
+                  border: `1px solid ${"#D6D8F6"}`,
+                  borderRadius: 10,
+                },
+              }}
+              size="md"
+              label="Waktu Akhir"
+            />
+          </SimpleGrid>
+          <TextInput
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            size="md"
+            placeholder="Link Meet"
+            label="Link Meet"
+          />
+          <Box mt={5} onClick={() => router.push('/calender/update?page=update-ulangi-event')}>
+            <Group
+              justify="space-between"
+              p={10}
+              style={{
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              }}
+            >
+              <Text>Ulangi Event</Text>
+              <IoIosArrowDropright size={25} />
+            </Group>
+          </Box>
+          <Box mt={5} onClick={() => router.push('/calender/update?page=update-user-calender')}>
+            <Group
+              justify="space-between"
+              p={10}
+              style={{
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              }}
+            >
+              <Text>Tambah Anggota</Text>
+              <IoIosArrowDropright size={25} />
+            </Group>
+          </Box>
+          <Textarea styles={{
+            input: {
+              border: `1px solid ${"#D6D8F6"}`,
+              borderRadius: 10,
+            },
+          }}
+            size="md" placeholder='Deskripsi' label="Deskripsi" />
+          <Box mt={"xl"}>
+            <Button
+              c={"white"}
+              bg={WARNA.biruTua}
+              size="lg"
+              radius={30}
+              fullWidth
+              onClick={() => setModal(true)}
+            >
+              Simpan
+            </Button>
+          </Box>
+        </Stack>
+      </Box>
+      <LayoutModal opened={isModal} onClose={() => setModal(false)}
+        description="Apakah Anda yakin ingin menambahkan data?"
+        onYes={(val) => { onTrue(val) }} />
+    </Box>
+  );
+}
+
--- a/src/module/division_new/_division_fitur/calender/components/update_calander/update_list_users.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/update_calander/update_list_users.tsx
@@ -0,0 +1,114 @@
+"use client"
+import { WARNA } from '@/module/_global';
+import { Avatar, Box, Button, Center, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+
+const dataUser = [
+  {
+    id: 1,
+    img: "https://i.pravatar.cc/500?img=3",
+    name: "Doni Setiawan",
+  },
+  {
+    id: 2,
+    img: "https://i.pravatar.cc/500?img=10",
+    name: "Ilham Udin",
+  },
+  {
+    id: 3,
+    img: "https://i.pravatar.cc/500?img=11",
+    name: "Didin Anang",
+  },
+  {
+    id: 4,
+    img: "https://i.pravatar.cc/500?img=1",
+    name: "Angga Saputra",
+  },
+  {
+    id: 5,
+    img: "https://i.pravatar.cc/500?img=2",
+    name: "Marcel Widianto",
+  },
+  {
+    id: 6,
+    img: "https://i.pravatar.cc/500?img=7",
+    name: "Bagas Nusantara",
+  },
+];
+
+export default function UpdateListUsers() {
+  const router = useRouter()
+  const [selectedFiles, setSelectedFiles] = useState<Record<number, boolean>>({});
+
+  const handleFileClick = (index: number) => {
+    setSelectedFiles((prevSelectedFiles) => ({
+      ...prevSelectedFiles,
+      [index]: !prevSelectedFiles[index],
+    }));
+  };
+  return (
+    <Box>
+      <Stack>
+        <TextInput
+          styles={{
+            input: {
+              color: WARNA.biruTua,
+              borderRadius: '#A3A3A3',
+              borderColor: '#A3A3A3',
+            },
+          }}
+          size="md"
+          radius={30}
+          leftSection={<HiMagnifyingGlass size={20} />}
+          placeholder="Pencarian"
+        />
+        <Box pt={10}>
+          <SimpleGrid
+            cols={{ base: 2, sm: 2, lg: 2 }}
+            spacing={{ base: 20, sm: "xl" }}
+            verticalSpacing={{ base: "md", sm: "xl" }}
+          >
+            {dataUser.map((v, index) => {
+              const isSelected = selectedFiles[index];
+              return (
+                <Box key={index} mb={10}>
+                  <Box
+                    bg={isSelected ? WARNA.bgHijauMuda : "white"}
+                    style={{
+                      border: `1px solid ${WARNA.biruTua}`,
+                      borderRadius: 20,
+                    }}
+                    py={10}
+                    onClick={() => handleFileClick(index)}
+                  >
+                    <Center>
+                      <Avatar src={v.img} alt="it's me" size="xl" />
+                    </Center>
+                    <Text mt={20} ta="center">
+                      {v.name}
+                    </Text>
+                  </Box>
+                </Box>
+              );
+            })}
+          </SimpleGrid>
+        </Box>
+      </Stack>
+      <Box mt="xl">
+        <Button
+          color="white"
+          bg={WARNA.biruTua}
+          size="lg"
+          radius={30}
+          fullWidth
+          onClick={() => router.push("/calender/update")}
+        >
+          Simpan
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
--- a/src/module/division_new/_division_fitur/calender/components/update_calander/update_ulangi_event.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/update_calander/update_ulangi_event.tsx
@@ -0,0 +1,15 @@
+import { LayoutNavbarNew } from '@/module/_global';
+import { Box } from '@mantine/core';
+import React from 'react';
+import ListUlangiEvent from '../list_ulangi_event';
+
+export default function UpdateUlangiEvent() {
+  return (
+    <Box>
+      <LayoutNavbarNew back='/calender/update' title='ulangi event' menu />
+      <Box p={20}>
+        <ListUlangiEvent />
+      </Box>
+    </Box>
+  );
+}
--- a/src/module/division_new/_division_fitur/calender/components/update_calander/update_user_division_calender.tsx
+++ b/src/module/division_new/_division_fitur/calender/components/update_calander/update_user_division_calender.tsx
@@ -0,0 +1,16 @@
+import { LayoutNavbarNew } from '@/module/_global';
+import { Box } from '@mantine/core';
+import React from 'react';
+import UpdateListUsers from './update_list_users';
+
+export default function UpdateUserDivisionCalender() {
+  return (
+    <Box>
+      <LayoutNavbarNew back="/calender/update" title="Tambah Anggota" menu />
+      <Box p={20}>
+        <UpdateListUsers />
+      </Box>
+    </Box>
+  );
+}
+
--- a/src/module/division_new/_division_fitur/calender/view/view_detail_event_division.tsx
+++ b/src/module/division_new/_division_fitur/calender/view/view_detail_event_division.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import DetailEventDivision from '../components/detail_event_division';
+
+export default function ViewDetailEventDivision() {
+  return (
+    <DetailEventDivision/>
+  );
+}
+
--- a/src/module/division_new/_division_fitur/calender/view/view_history_division_calender.tsx
+++ b/src/module/division_new/_division_fitur/calender/view/view_history_division_calender.tsx
@@ -0,0 +1,12 @@
+import { Box } from '@mantine/core';
+import React from 'react';
+import HistoryDivisionCalender from '../components/history_division_calender';
+
+export default function ViewHistoryDivisionCalender() {
+  return (
+    <Box>
+      <HistoryDivisionCalender />
+    </Box>
+  );
+}
+
--- a/src/module/division_new/_division_fitur/calender/view/view_update_division_calender.tsx
+++ b/src/module/division_new/_division_fitur/calender/view/view_update_division_calender.tsx
@@ -0,0 +1,11 @@
+import { Box } from '@mantine/core';
+import React from 'react';
+import UpdateDivisionCalender from '../components/update_calander/update_division_calender';
+
+export default function ViewUpdateDivisionCalender() {
+  return (
+    <Box>
+      <UpdateDivisionCalender/>
+    </Box>
+  );
+}
--- a/src/module/division_new/components/discussion_report.tsx
+++ b/src/module/division_new/components/discussion_report.tsx
@@ -43,7 +43,7 @@ export default function DiscussionReport() {
                        }} mb={10}>
                            <Group align="center">
                                <GoDiscussionClosed size={25} />
-                                <Box w={{ base: 230, md: 400 }}>
+                                <Box w={{ base: 230, md: 300 }}>
                                    <Text truncate="end" fw={'bold'}>{v.judul}</Text>
                                </Box>
                            </Group>
--- a/src/module/division_new/index.ts
+++ b/src/module/division_new/index.ts
@@ -1,5 +1,12 @@
+import CreateUserDivisionCalender from "./_division_fitur/calender/components/create_user_division_calender";
+import UlangiEvent from "./_division_fitur/calender/components/ulangi_event";
+import UpdateUlangiEvent from "./_division_fitur/calender/components/update_calander/update_ulangi_event";
+import UpdateUserDivisionCalender from "./_division_fitur/calender/components/update_calander/update_user_division_calender";
 import ViewCreateDivisionCalender from "./_division_fitur/calender/view/view_create_division_calender";
+import ViewDetailEventDivision from "./_division_fitur/calender/view/view_detail_event_division";
 import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_calender";
+import ViewHistoryDivisionCalender from "./_division_fitur/calender/view/view_history_division_calender";
+import ViewUpdateDivisionCalender from "./_division_fitur/calender/view/view_update_division_calender";
 import ViewCreateDiscussion from "./_division_fitur/discussion/view/view_create_discussion";
 import ViewDetailDiscussion from "./_division_fitur/discussion/view/view_detail_discussion";
 import ViewEditDiscussion from "./_division_fitur/discussion/view/view_edit_discussion";
@@ -27,7 +34,15 @@ export { ViewUpdateProgressDivisionTask }
 export { ViewDivisionCalender }
 export { ViewCreateDivisionCalender }
 export { ViewCreateTaskDivision }
+export { UlangiEvent }
+export { CreateUserDivisionCalender }
+export { ViewHistoryDivisionCalender }
+export { ViewDetailEventDivision }
+export { ViewUpdateDivisionCalender }
+export { UpdateUserDivisionCalender }
+export { UpdateUlangiEvent }
 export { ViewListDiscussion }
 export { ViewCreateDiscussion }
 export { ViewDetailDiscussion }
-export { ViewEditDiscussion }
+export { ViewEditDiscussion }
+