feat : calender

Deskripsi:
- update api calender
- update ui calender

No Issue

src/module/calender/index.ts

@@ -1,3 +1,9 @@
+import CreateCalenderDivisionCaleder from "./ui/create_calender_division_caleder";
+import DetailEventDivision from "./ui/detail_event_division";
+import NavbarCreateDivisionCalender from "./ui/navbar_create_division_calender";
 import NavbarDivisionCalender from "./ui/navbar_division_calender";
 
-export { NavbarDivisionCalender }
+export { NavbarDivisionCalender }
+export { NavbarCreateDivisionCalender }
+export { CreateCalenderDivisionCaleder }
+export { DetailEventDivision }

src/module/calender/lib/api_calender.ts

@@ -1,4 +1,10 @@
 export const funGetAllCalender = async (path?: string) => {
     const response = await fetch(`/api/calender${(path) ? path : ''}`, { next: { tags: ['calender'] } });
     return await response.json().catch(() => null);
+}
+
+
+export const funGetOneCalender = async (path: string) => {
+    const response = await fetch(`/api/calender/${path}`);
+    return await response.json().catch(() => null);
 }

src/module/calender/lib/type_calender.ts

@@ -3,8 +3,28 @@ export interface IDataCalender {
     title: string
     desc: string
     status: number
+    timeStart: string
+    timeEnd: string
     dateStart: string
     dateEnd: string
     createdAt: string
     user_name: string
+}
+
+export interface IDataDetailByIdCalender {
+    id: string
+    title: string
+    desc: string
+    timeStart: string
+    dateStart: string
+    timeEnd: string
+    createdAt: string
+    linkMeet: string
+    repeatEventTyper: string
+}
+export interface IDataDetailByIdMember {
+    id: string
+    idUser: string
+    name: string
+    email: string
 }

src/module/calender/ui/create_calender_division_caleder.tsx

@@ -0,0 +1,11 @@
+import { Box } from '@mantine/core';
+import React from 'react';
+import NavbarCreateDivisionCalender from './navbar_create_division_calender';
+
+export default function CreateCalenderDivisionCaleder() {
+    return (
+        <Box>
+            <NavbarCreateDivisionCalender />
+        </Box>
+    );
+}

src/module/calender/ui/date_event_division.tsx

@@ -7,43 +7,11 @@ import { funGetAllCalender } from '../lib/api_calender';
 import { useShallowEffect } from '@mantine/hooks';
 import { IDataCalender } from '../lib/type_calender';
 
-const HariIni = [
-  {
-    id: 1,
-    title: 'Pembahasan Mengenai Darmasaba',
-    jamAwal: "10.00",
-    jamAkhir: "11.00",
-    dibuat: "Jhon"
-  },
-  {
-    id: 2,
-    title: 'Pembahasan Mengenai Darmasaba',
-    jamAwal: "11.00",
-    jamAkhir: "12.00",
-    dibuat: "Jhon"
-  },
-]
-const Besok = [
-  {
-    id: 1,
-    title: 'Pembahasan Mengenai Darmasaba',
-    jamAwal: "10.00",
-    jamAkhir: "11.00",
-    dibuat: "Jhon"
-  },
-  {
-    id: 2,
-    title: 'Pembahasan Mengenai Darmasaba',
-    jamAwal: "11.00",
-    jamAkhir: "12.00",
-    dibuat: "Jhon"
-  },
-]
 
 export default function DateEventDivision() {
   const[isData, setData] = useState<IDataCalender[]>([])
   const router = useRouter()
-  const param = useParams<{ id: string }>()
+  const param = useParams<{ id: string, detail: string }>()
 
   const getData = async () => {
     try {
@@ -69,7 +37,6 @@ export default function DateEventDivision() {
   };
   return (
     <Box>
-      <pre>{JSON.stringify(isData, null, 1)}</pre>
       <Group
         justify="center"
         bg={"white"}
@@ -80,41 +47,20 @@ export default function DateEventDivision() {
       </Group>
       <Box>
         <Text mb={10} mt={20}  fw={"bold"}>Hari Ini</Text>
-        {HariIni.map((event, index) => {
+        {isData.map((event, index) => {
           const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
           const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
           return (
             <Box key={event.id} mt={10}>
-              <Box onClick={() => router.push("/calender?page=detail-event")} bg={bgColor} pl={15} p={10} style={{
+              <Box onClick={() => router.push(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
                 borderRadius: 10
               }} h={113}>
                 <Group>
                   <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
                   <Box>
-                    <Text>{event.jamAwal} - {event.jamAkhir}</Text>
+                    <Text>{event.timeStart} - {event.timeEnd}</Text>
                     <Text fw={"bold"}>{event.title}</Text>
-                    <Text>Dibuat oleh : {event.dibuat}</Text>
-                  </Box>
-                </Group>
-              </Box>
-            </Box>
-          )
-        })}
-        <Text mb={10} mt={20}  fw={"bold"}>16 Juli 2024</Text>
-        {Besok.map((event, index) => {
-          const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
-          const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
-          return (
-            <Box key={event.id} mt={10}>
-              <Box onClick={() => router.push("/calender?page=detail-event")}  bg={bgColor} pl={15} p={10} style={{
-                borderRadius: 10
-              }} h={113}>
-                <Group>
-                  <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
-                  <Box>
-                    <Text>{event.jamAwal} - {event.jamAkhir}</Text>
-                    <Text fw={"bold"}>{event.title}</Text>
-                    <Text>Dibuat oleh : {event.dibuat}</Text>
+                    <Text>Dibuat oleh : {event.user_name}</Text>
                   </Box>
                 </Group>
               </Box>

src/module/calender/ui/dawer_division_calender.tsx

@@ -1,17 +1,19 @@
 import { WARNA } from '@/module/_global';
 import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
+import { useParams } from 'next/navigation';
 import React from 'react';
 import { AiOutlineFileSearch } from 'react-icons/ai';
 import { IoAddCircle } from 'react-icons/io5';
 
 export default function DawerDivisionCalender() {
+  const param = useParams<{ id: string }>()
   return (
     <Box>
       <Stack pt={10}>
         <SimpleGrid
           cols={{ base: 2, sm: 3, lg: 3 }}
         >
-          <Flex onClick={() => window.location.href = "/calender/create"} justify={'center'} align={'center'} direction={'column'} >
+          <Flex onClick={() => window.location.href = `/division/${param.id}/calender/create`} justify={'center'} align={'center'} direction={'column'} >
             <Box>
               <IoAddCircle size={30} color={WARNA.biruTua} />
             </Box>
@@ -19,7 +21,7 @@ export default function DawerDivisionCalender() {
               <Text ta={"center"} c={WARNA.biruTua}>Tambah Kalender</Text>
             </Box>
           </Flex>
-          <Flex onClick={() => window.location.href = "/calender/history"} justify={'center'} align={'center'} direction={'column'} >
+          <Flex onClick={() => window.location.href = `/division/${param.id}/calender/history`} justify={'center'} align={'center'} direction={'column'} >
             <Box>
               <AiOutlineFileSearch size={30} color={WARNA.biruTua} />
             </Box>

src/module/calender/ui/detail_event_division.tsx

@@ -0,0 +1,181 @@
+'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';
+import { useParams } from 'next/navigation';
+import { funGetOneCalender } from '../lib/api_calender';
+import { useShallowEffect } from '@mantine/hooks';
+import moment from "moment";
+import "moment/locale/id";
+import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
+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)
+  const param = useParams<{ id: string, detail: string }>()
+  const [isDataCalender, setDataCalender] = useState<IDataDetailByIdCalender>()
+  const [isDataAnggota, setDataAnggota] = useState<IDataDetailByIdMember[]>([])
+  const [isLengthMember, setLengthMember] = useState()
+
+
+  const getData = async () => {
+    try {
+      const response = await funGetOneCalender(param.detail)
+      setDataCalender(response.data.calender)
+      setDataAnggota(response.data.member)
+      setLengthMember(response.data.total)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  useShallowEffect(() => {
+    getData()
+  }, [])
+
+  return (
+    <Box>
+      <LayoutNavbarNew back="" 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>{isDataCalender?.title}</Text>
+            </Group>
+            <Group mb={10} gap={30}>
+              <BsCalendarDate size={25} color={WARNA.biruTua} />
+              <Text>{moment(isDataCalender?.dateStart).format('LL')}</Text>
+            </Group>
+            <Group mb={10} gap={30}>
+              <LuClock size={25} color={WARNA.biruTua} />
+              <Text>{moment(isDataCalender?.timeStart).format('LT')}  | {moment(isDataCalender?.timeEnd).format('LT')} </Text>
+            </Group>
+            <Group mb={10} gap={30}>
+              <BsCalendarDate size={25} color={WARNA.biruTua} />
+              <Text>
+                {isDataCalender?.repeatEventTyper.toString() === '1' ? 'Acara 1 Kali' :
+                  isDataCalender?.repeatEventTyper.toString() === '2' ? 'Hari Kerja (senin - jumat)' :
+                    isDataCalender?.repeatEventTyper.toString() === '3' ? 'Minggu' :
+                      isDataCalender?.repeatEventTyper.toString() === '4' ? 'Bulanan' :
+                        isDataCalender?.repeatEventTyper.toString() === '5' ? 'Tahunan' :
+                          ''}
+              </Text>
+            </Group>
+            <Group mb={10} gap={30}>
+              <LuLink size={25} color={WARNA.biruTua} />
+              <Group justify='space-between'>
+                <Text>{isDataCalender?.linkMeet}</Text>
+                <CopyButton value={String(isDataCalender?.linkMeet)} 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>{isDataCalender?.desc}</Text>
+            </Group>
+          </Stack>
+        </Box>
+        <Box pt={20}>
+          <Group justify='space-between'>
+            <Text fw={"bold"}>Total Anggota</Text>
+            <Text>{isLengthMember} Anggota</Text>
+          </Group>
+          <Box mb={20}>
+            <Box
+              style={{
+                border: `1px solid ${"#C7D6E8"}`,
+                borderRadius: 10,
+              }}
+              px={20}
+              pt={20}
+            >
+              {isDataAnggota.map((v, i) => {
+                return (
+                  <Flex
+                    justify={"space-between"}
+                    align={"center"}
+                    mb={20}
+                    key={i}
+                  >
+                    <Group>
+                      <Avatar src={""} 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>
+                  </Flex>
+                );
+              })}
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+      <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
+        <DrawerDetailEvent />
+      </LayoutDrawer>
+    </Box>
+  );
+}
+

src/module/calender/ui/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>
+  );
+}

src/module/calender/ui/navbar_create_division_calender.tsx

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