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

Merge pull request #233 from bipproduction/lukman/18-september-2024

Browse Source 
Lukman/18 september 2024
This commit is contained in:
Amalia
2024-09-18 16:04:26 +08:00
committed by GitHub
parent 6868085bb1 08d4504a5b
commit 1ca2106aba
14 changed files with 273 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/img/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

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

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

@@ -1,5 +1,6 @@
import prisma from "./bin/prisma";
import { DIR, 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";
@@ -18,7 +19,9 @@ 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 NotificationCustome from "./components/notification_custome";
export { WARNA };
export { LayoutLogin };
@@ -44,3 +47,6 @@ export { funDeleteFile }
export { DIR }
export { TEMA }
export { funCopyFile }
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>
);
}

2
src/module/division_new/ui/list_discussion.tsx
View File

@@ -17,7 +17,7 @@ export default function ListDiscussionOnDetailDivision() {
const param = useParams<{ id: string }>()
const [data, setData] = useState<IDataDiscussionOnDetailDivision[]>([])
const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery('(max-width: 369px)');
const isMobile = useMediaQuery('(max-width: 399px)');
const tema = useHookstate(TEMA)
async function fetchData() {

2
src/module/division_new/ui/list_document.tsx
View File

@@ -41,7 +41,7 @@ export default function ListDocumentOnDetailDivision() {
useShallowEffect(() => {
fetchData()
}, [param.id])
const isMobile = useMediaQuery('(max-width: 369px)');
const isMobile = useMediaQuery('(max-width: 399px)');
return (
<Box pt={10}>

2
src/module/division_new/ui/list_task.tsx
View File

@@ -42,7 +42,7 @@ export default function ListTaskOnDetailDivision() {
fetchData()
}, [param.id])
const isMobile = useMediaQuery('(max-width: 369px)');
const isMobile = useMediaQuery('(max-width: 399px)');
return (
<Box pt={10}>

40
src/module/home/ui/view_home.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarHome, TEMA, WARNA } from '@/module/_global';
import { LayoutNavbarHome, NotificationCustome, ReloadButtonTop, TEMA, WARNA } from '@/module/_global';
import { Box, Group, Notification, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import Carosole from './carosole';
@@ -11,36 +11,12 @@ import ListDiscussion from './list_discussion';
import ListEventHome from './list_event';
import ChartProgressHome from './chart_progress_tugas';
import ChartDocumentHome from './chart_document';
import { useShallowEffect } from '@mantine/hooks';
import { notifications, Notifications } from '@mantine/notifications';
import { IoNotifications } from 'react-icons/io5';
import { ImCheckboxUnchecked } from 'react-icons/im';
import { useHookstate } from '@hookstate/core';
export default function ViewHome() {
const [isNotif, setIsNotif] = useState(true);
const tema = useHookstate(TEMA)
useShallowEffect(() => {
if (isNotif) {
notifications.show({
color: tema.get().utama,
title: <Text lineClamp={1}>Pengumuman Upacara bendera Upacara bendera Upacara bendera Upacara bendera</Text>,
message: <Text lineClamp={1}>Upacara bendera Upacara bendera Upacara bendera Upacara bendera Upacara bendera</Text>,
icon: <IoNotifications/>,
loading: false,
autoClose: 5000,
position: "top-center",
radius: 'lg',
bg: "white",
style: {
border: `1px solid ${tema.get().utama}`,
},
onClose: () => setIsNotif(false)
});
}
}, [isNotif]);
return (
<>
<LayoutNavbarHome>
@@ -49,6 +25,20 @@ export default function ViewHome() {
<IconNavbar />
</Group>
</LayoutNavbarHome>
<ReloadButtonTop
onReload={
() => {
''
}
}
title='UPDATE'
/>
{/* <NotificationCustome
title='Pengumuman'
desc='Pengumuman Upacara bendera Upacara bendera Upacara bendera Upacara bendera Upacara bendera'
onClick={() => {''}}
onClose={() => {''}}
/> */}
<Box p={20}>
<Stack >
<Carosole />

4
src/module/project/ui/list_file_detail_project.tsx
View File

@@ -121,7 +121,9 @@ export default function ListFileDetailProject() {
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Text>{item.name + '.' + item.extension}</Text>
<Text style={{
overflowWrap: "break-word"
}}>{item.name + '.' + item.extension}</Text>
</Grid.Col>
</Grid>
<Group>

8
src/module/user/member/ui/navbar_detail_member.tsx
View File

@@ -73,7 +73,13 @@ export default function NavbarDetailMember({ id }: IMember) {
gap="xs"
>
<Center>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${dataOne?.img}`} alt="it's me" size="xl" />
{loading ? <Skeleton height={100} radius={"100"} width={100} /> :
<Avatar
size="100"
radius={"100"}
src={`https://wibu-storage.wibudev.com/api/files/${dataOne?.img}`}
/>
}
</Center>
{loading ?
<>

5
src/module/user/profile/ui/profile.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA, WARNA } from "@/module/_global";
import { LayoutIconBack, LayoutNavbarHome, SkeletonAvatar, SkeletonDetailProfile, TEMA, WARNA } from "@/module/_global";
import { ActionIcon, Avatar, Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
import { RiIdCardFill } from "react-icons/ri";
import { FaSquarePhone } from "react-icons/fa6";
@@ -72,11 +72,14 @@ export default function Profile() {
justify="center"
gap="xs"
>
{loading ? <Skeleton height={100} radius={"100"} width={100} /> :
<Avatar
size="100"
radius={"100"}
src={img}
/>
}
{/* <SkeletonAvatar size="100" sizeNoImg="100" img={img} /> */}
{loading ?
<Skeleton height={62} mt={10} width={"40%"} />
: