wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : add calender

Browse Source
This commit is contained in:
lukman
2024-07-15 12:32:29 +08:00
parent f6b1b77083
commit 97ceb034bc
11 changed files with 262 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/(application)/(detail-division)/calender/create/page.tsx Normal file
View File

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

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

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

3
src/module/_global/layout/layout_navbar_new.tsx
View File

@@ -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">

11
src/module/division_new/_division_fitur/calender/components/create_calender_division_caleder.tsx Normal file
View File

@@ -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>
);
}

104
src/module/division_new/_division_fitur/calender/components/date_event_division.tsx Normal file
View File

@@ -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>
);
}

35
src/module/division_new/_division_fitur/calender/components/dawer_division_calender.tsx Normal file
View File

@@ -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>
);
}

44
src/module/division_new/_division_fitur/calender/components/navbar_create_division_calender.tsx Normal file
View File

@@ -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>
);
}

29
src/module/division_new/_division_fitur/calender/components/navbar_division_calender.tsx Normal file
View File

@@ -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>
);
}

9
src/module/division_new/_division_fitur/calender/view/view_create_division_calender.tsx Normal file
View File

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

12
src/module/division_new/_division_fitur/calender/view/view_division_calender.tsx Normal file
View File

@@ -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>
);
}

6
src/module/division_new/index.ts
View File

@@ -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";
@@ -16,4 +18,6 @@ export { ViewCreateReport }
export { ViewDetailDivision }
export { ViewDivisionTask }
export { ViewDetailDivisionTask }
export { ViewUpdateProgressDivisionTask }
export { ViewUpdateProgressDivisionTask }
export { ViewDivisionCalender }
export { ViewCreateDivisionCalender }