feat : update calender

src/module/calender/index.ts

@@ -0,0 +1,3 @@
+import NavbarDivisionCalender from "./ui/navbar_division_calender";
+
+export { NavbarDivisionCalender }

src/module/calender/lib/api_calender.ts

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

src/module/calender/lib/type_calender.ts

@@ -0,0 +1,10 @@
+export interface IDataCalender {
+    id: string
+    title: string
+    desc: string
+    status: number
+    dateStart: string
+    dateEnd: string
+    createdAt: string
+    user_name: string
+}

src/module/calender/ui/date_event_division.tsx

@@ -0,0 +1,127 @@
+import { WARNA } from '@/module/_global';
+import { Box, Divider, Group, Indicator, Text } from '@mantine/core';
+import { DatePicker, DatePickerProps } from '@mantine/dates';
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+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 getData = async () => {
+    try {
+      const response = await funGetAllCalender('?division=' + param.id)
+      setData(response.data)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  useShallowEffect(() => {
+    getData()
+  }, [])
+
+
+  const dayRenderer: DatePickerProps['renderDay'] = (date) => {
+    const day = date.getDate();
+    return (
+      <Indicator size={6} color="red" offset={-5} disabled={day !== 16}>
+        <div>{day}</div>
+      </Indicator>
+    );
+  };
+  return (
+    <Box>
+      <pre>{JSON.stringify(isData, null, 1)}</pre>
+      <Group
+        justify="center"
+        bg={"white"}
+        py={20}
+        style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+      >
+        <DatePicker size='md' defaultValue={new Date()} renderDay={dayRenderer} />
+      </Group>
+      <Box>
+        <Text mb={10} mt={20}  fw={"bold"}>Hari Ini</Text>
+        {HariIni.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>
+                  </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>
+                  </Box>
+                </Group>
+              </Box>
+            </Box>
+          )
+        })}
+      </Box>
+    </Box>
+  );
+}

src/module/calender/ui/dawer_division_calender.tsx

@@ -0,0 +1,35 @@
+import { WARNA } from '@/module/_global';
+import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
+import React from 'react';
+import { AiOutlineFileSearch } from 'react-icons/ai';
+import { IoAddCircle } from 'react-icons/io5';
+
+export default function DawerDivisionCalender() {
+  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'} >
+            <Box>
+              <IoAddCircle size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text ta={"center"} c={WARNA.biruTua}>Tambah Kalender</Text>
+            </Box>
+          </Flex>
+          <Flex onClick={() => window.location.href = "/calender/history"} justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <AiOutlineFileSearch size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Riwayat</Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+

src/module/calender/ui/navbar_division_calender.tsx

@@ -0,0 +1,29 @@
+'use client'
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { ActionIcon, Box } from '@mantine/core';
+import React, { useState } from 'react';
+import { HiMenu } from 'react-icons/hi';
+import DawerDivisionCalender from './dawer_division_calender';
+import DateEventDivision from './date_event_division';
+
+export default function NavbarDivisionCalender() {
+  const [openDrawer, setOpenDrawer] = useState(false)
+  return (
+    <div>
+      <LayoutNavbarNew back="" title="Divisi - kalender"
+        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}>
+        <DateEventDivision />
+      </Box>
+      <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
+        <DawerDivisionCalender />
+      </LayoutDrawer>
+    </div>
+  );
+}
+