style : add calender

src/app/(application)/(detail-division)/calender/create/page.tsx

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

src/app/(application)/(detail-division)/calender/page.tsx

@@ -1,10 +1,9 @@
+import { ViewDivisionCalender } from '@/module/division_new';
 import React from 'react';
 
 function Page() {
   return (
-    <div>
+    <ViewDivisionCalender />
-      Page
-    </div>
   );
 }
 

src/module/_global/layout/layout_navbar_new.tsx

@@ -11,7 +11,7 @@ export const LayoutNavbarNew = ({ back, title, menu }: { back: string, title: st
          style={{
             borderBottomLeftRadius: 20,
             borderBottomRightRadius: 20,
-            zIndex: 100,
+            zIndex: 900,
             boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
          }}
       >
@@ -20,7 +20,6 @@ export const LayoutNavbarNew = ({ back, title, menu }: { back: string, title: st
                <LayoutIconBack back={back} />
             </Grid.Col>
             <Grid.Col span={8}>
-               {/* <Text ta={'center'} fw={'bold'} c={'white'}>GROUP</Text> */}
                <Title c={WARNA.bgWhite} ta={'center'} order={3}>{_.startCase(title)}</Title>
             </Grid.Col>
             <Grid.Col span="auto">

src/module/division_new/_division_fitur/calender/components/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/division_new/_division_fitur/calender/components/date_event_division.tsx

@@ -0,0 +1,104 @@
+import { WARNA } from '@/module/_global';
+import { Box, Divider, Group, Indicator, Text } from '@mantine/core';
+import { DatePicker, DatePickerProps } from '@mantine/dates';
+import React from 'react';
+
+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 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>
+      <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 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 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/division_new/_division_fitur/calender/components/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 = ""} 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/division_new/_division_fitur/calender/components/navbar_create_division_calender.tsx

@@ -0,0 +1,44 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Box, Input, Stack } from '@mantine/core';
+import { DateInput } from '@mantine/dates';
+import React, { useState } from 'react';
+import { BsCalendarDate } from 'react-icons/bs';
+import { PiIdentificationCardLight } from "react-icons/pi";
+
+export default function NavbarCreateDivisionCalender() {
+  const [value, setValue] = useState<Date | null>(null);
+  return (
+    <Box>
+      <LayoutNavbarNew back="/calender" title="tambah kalender" menu />
+      <Box p={20}>
+        <Stack>
+          <Input
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            placeholder="Event Name"
+            size="lg"
+            leftSection={<PiIdentificationCardLight size={30} color={WARNA.biruTua} />}
+          />
+          <DateInput
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            value={value}
+            onChange={setValue}
+            placeholder="Date input"
+            size="lg"
+            leftSection={<BsCalendarDate size={25} color={WARNA.biruTua} />}
+          />
+        </Stack>
+      </Box>
+    </Box>
+  );
+} 

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

src/module/division_new/_division_fitur/calender/view/view_create_division_calender.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import CreateCalenderDivisionCaleder from '../components/create_calender_division_caleder';
+
+export default function ViewCreateDivisionCalender() {
+  return (
+    <CreateCalenderDivisionCaleder />
+  );
+}
+

src/module/division_new/_division_fitur/calender/view/view_division_calender.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import NavbarDivisionCalender from '../components/navbar_division_calender';
+import { Box } from '@mantine/core';
+
+export default function ViewDivisionCalender() {
+  return (
+    <Box>
+      <NavbarDivisionCalender/>
+    </Box>
+  );
+}
+

src/module/division_new/index.ts

@@ -1,3 +1,5 @@
+import ViewCreateDivisionCalender from "./_division_fitur/calender/view/view_create_division_calender";
+import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_calender";
 import ViewDetailDivisionTask from "./_division_fitur/task/view/view_detail_division_task";
 import ViewDivisionTask from "./_division_fitur/task/view/view_division_task";
 import ViewUpdateProgressDivisionTask from "./_division_fitur/task/view/view_update_progress_division_task";
@@ -17,3 +19,5 @@ export { ViewDetailDivision }
 export { ViewDivisionTask }
 export { ViewDetailDivisionTask }
 export { ViewUpdateProgressDivisionTask }
+export { ViewDivisionCalender }
+export { ViewCreateDivisionCalender }