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

Merge branch 'join' into amalia/18-september-24

Browse Source
This commit is contained in:
Amalia
2024-09-18 16:14:34 +08:00
committed by GitHub
parent 3167b570a7 1ca2106aba
commit 1818bef2bf
14 changed files with 274 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/module/_global/components/notification_custome.tsx Normal file
View File

@@ -0,0 +1,82 @@
"use client"
import { Box, Center, Flex, Grid, rem, Text, Transition } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react';
import { IoCloseOutline, IoNotifications } from 'react-icons/io5';
import { TEMA } from '../bin/val_global';
import { useHookstate } from '@hookstate/core';
export default function NotificationCustome({ onClose, title, desc, onClick }: { onClose: () => void, title: string, desc: string, onClick: () => void, }) {
const [opened, setOpened] = useState(false);
const tema = useHookstate(TEMA)
useShallowEffect(() => {
const timer = setTimeout(() => {
setOpened(true);
}, 2000);
return () => clearTimeout(timer);
}, []);
useShallowEffect(() => {
const timer = setTimeout(() => {
setOpened(false)
}, 6000);
return () => clearTimeout(timer);
}, []);
function reloadData() {
onClose()
}
return (
<>
<Center>
<Transition
mounted={opened}
transition="fade-down"
duration={400}
timingFunction="ease"
>
{(state) => (
<div
style={{
...state,
zIndex: 999,
position: 'fixed',
top: 50,
display: 'flex',
margin: 20,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Box p={rem(15)} w={"100%"} h={rem(85)} style={{
maxWidth: rem(450),
zIndex: 999,
backgroundColor: "#ffffff",
borderRadius: 15,
border: `1px solid ${tema.get().bgTotalKegiatan}`
}} onClick={onClick}>
<Grid>
<Grid.Col span={2}>
<Flex justify={'center'} align={"center"} h={"100%"} >
<IoNotifications color={tema.get().utama} size={30} />
</Flex>
</Grid.Col>
<Grid.Col span={8}>
<Text fw={"bold"} lineClamp={1}>{title}</Text>
<Text lineClamp={1}>{desc}</Text>
</Grid.Col>
<Grid.Col span={2}>
<Flex justify={'center'} align={"center"} h={"100%"} >
<IoCloseOutline onClick={reloadData} size={25} />
</Flex>
</Grid.Col>
</Grid>
</Box>
</div>
)}
</Transition>
</Center>
</>
);
}

55
src/module/_global/components/reload_button_top.tsx Normal file
View File

@@ -0,0 +1,55 @@
"use client"
import { useHookstate } from '@hookstate/core';
import { Button, Center, Transition } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react';
import { IoReload } from 'react-icons/io5';
import { TEMA } from '../bin/val_global';
export default function ReloadButtonTop({ onReload, title }: { onReload: () => void, title: string }) {
const [opened, setOpened] = useState(false);
const tema = useHookstate(TEMA)
useShallowEffect(() => {
const timer = setTimeout(() => {
setOpened(true);
}, 2000);
return () => clearTimeout(timer);
}, []);
function reloadData() {
onReload()
setOpened(false)
}
return (
<>
<Center>
<Transition
mounted={opened}
transition="fade-down"
duration={400}
timingFunction="ease"
>
{(state) => (
<div
style={{
...state,
zIndex: 999,
position: 'absolute',
top: 90,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Button style={{
border: `1px solid ${tema.get().bgTotalKegiatan}`
}} leftSection={<IoReload/>} bg={"white"} c={tema.get().utama} onClick={reloadData} radius={"lg"}>{title}</Button>
</div>
)}
</Transition>
</Center>
</>
);
}

29
src/module/_global/components/skeleton_avatar.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { Avatar } from '@mantine/core';
import React from 'react';
import bgIcon from "../../../../public/assets/img/avatar.png"
interface AvatarType {
img: string
size: string
sizeNoImg: string
}
export default function SkeletonAvatar({ img, size, sizeNoImg }: AvatarType) {
return (
<>
{img == "" ?
<Avatar
size={sizeNoImg}
radius={"100"}
src={String(bgIcon)}
/>
:
<Avatar
size={size}
radius={"100"}
src={img}
/>
}
</>
);
}

100
src/module/_global/components/skeleton_detail_list_tugas_task.tsx
View File

@@ -6,58 +6,60 @@ import { TEMA } from '../bin/val_global';
export default function SkeletonDetailListTugasTask() {
const tema = useHookstate(TEMA)
return (
<Grid>
<Grid.Col span={"auto"}>
<Center>
<Skeleton width={30} height={30} radius={"md"} />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Box
style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
padding: 10,
}}
>
<Group>
<Skeleton width={25} height={25} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
</Group>
</Box>
<Box>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Group
bg={"white"}
mt={3}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
<Box>
<Skeleton width={30} height={30} radius={"md"} />
<Grid>
<Grid.Col span={"auto"}>
<Center>
</Center>
</Grid.Col>
<Grid.Col span={12}>
<Box
style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
padding: 10,
}}
>
<Group>
<Skeleton width={25} height={25} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
</Group>
</Box>
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Group
bg={"white"}
mt={3}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Group
bg={"white"}
mt={3}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
</Group>
</Box>
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Group
bg={"white"}
mt={3}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
</Group>
</Box>
</SimpleGrid>
</Box>
</SimpleGrid>
</Box>
</Grid.Col>
</Grid>
</Grid.Col>
</Grid>
</Box>
);
}

8
src/module/_global/index.ts
View File

@@ -1,6 +1,7 @@
import MqttLoad from "./bin/mqtt_load";
import prisma from "./bin/prisma";
import { DIR, globalNotifPage, globalRole, pwd_key_config, TEMA } from "./bin/val_global";
import SkeletonAvatar from "./components/skeleton_avatar";
import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment";
import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member";
import SkeletonDetailListTugasTask from "./components/skeleton_detail_list_tugas_task";
@@ -19,8 +20,10 @@ import LayoutModalViewFile from "./layout/layout_modal_view_file";
import LayoutNavbarHome from "./layout/layout_navbar_home";
import LayoutNavbarNew from "./layout/layout_navbar_new";
import NoZoom from "./layout/no_zoom";
import ReloadButtonTop from "./components/reload_button_top";
import ViewFilter from "./view/view_filter";
import mtqq_client from "./bin/mqtt_client"
import NotificationCustome from "./components/notification_custome";
export { WARNA };
export { LayoutLogin };
@@ -48,4 +51,7 @@ export { TEMA }
export { funCopyFile }
export { MqttLoad }
export { mtqq_client }
export { globalNotifPage }
export { globalNotifPage }
export { SkeletonAvatar }
export { ReloadButtonTop }
export { NotificationCustome }

25
src/module/_global/layout/layout_modal.tsx
View File

@@ -1,10 +1,11 @@
import { Box, Button, Flex, Group, Modal, SimpleGrid, Text } from '@mantine/core';
import { Button, Flex, Modal, SimpleGrid, Text } from '@mantine/core';
import React, { useState } from 'react';
import { BsQuestionCircleFill } from 'react-icons/bs';
import { WARNA } from '../fun/WARNA';
import { useMediaQuery } from '@mantine/hooks';
export default function LayoutModal({ opened, onClose, description, onYes }: { opened: boolean, onClose: () => void, description: string, onYes: (val: boolean) => void }) {
const [isValModal, setValModal] = useState(opened)
const isMobile = useMediaQuery('(max-width: 768px)');
return (
<Modal styles={{
body: {
@@ -19,13 +20,23 @@ export default function LayoutModal({ opened, onClose, description, onYes }: { o
<BsQuestionCircleFill size={100} color="red" />
<Text mt={30} ta={"center"} fw={"bold"} fz={18}>{description}</Text>
</Flex>
<SimpleGrid
<SimpleGrid
cols={{ base: 1, sm: 2, lg: 2 }}
mt={30}
>
<Button fullWidth size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
<Button fullWidth size="lg" radius={'xl'} bg={WARNA.biruTua} onClick={() => onYes(true)}>YA</Button>
</SimpleGrid>
>
{isMobile ?
<>
<Button fullWidth size="lg" radius={'xl'} bg={'green'} onClick={() => onYes(true)}>YA</Button>
<Button fullWidth size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
</>
:
<>
<Button fullWidth size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
<Button fullWidth size="lg" radius={'xl'} bg={'green'} onClick={() => onYes(true)}>YA</Button>
</>
}
</SimpleGrid>
</Modal>
);
}