diff --git a/public/assets/img/avatar.png b/public/assets/img/avatar.png new file mode 100644 index 0000000..70840f0 Binary files /dev/null and b/public/assets/img/avatar.png differ diff --git a/src/module/_global/components/notification_custome.tsx b/src/module/_global/components/notification_custome.tsx new file mode 100644 index 0000000..3a827e7 --- /dev/null +++ b/src/module/_global/components/notification_custome.tsx @@ -0,0 +1,79 @@ +"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'; + +export default function NotificationCustome({ onClose, title, desc, bg, color, onClick, borderColor }: { onClose: () => void, title: string, desc: string, bg: string, color: string, onClick: () => void, borderColor: string }) { + const [opened, setOpened] = useState(false); + + useShallowEffect(() => { + const timer = setTimeout(() => { + setOpened(true); + }, 2000); + return () => clearTimeout(timer); + }, []); + + useShallowEffect(() => { + const timer = setTimeout(() => { + setOpened(false) + }, 6000); + return () => clearTimeout(timer); + }, []); + + function reloadData() { + onClose() + } + return ( + <> +
+ + {(state) => ( +
+ + + + + + + + + {title} + {desc} + + + + + + + + +
+ )} + +
+ + ); +} diff --git a/src/module/_global/components/reload_button_top.tsx b/src/module/_global/components/reload_button_top.tsx new file mode 100644 index 0000000..3aeb1a5 --- /dev/null +++ b/src/module/_global/components/reload_button_top.tsx @@ -0,0 +1,50 @@ +"use client" +import { Button, Center, Transition } from '@mantine/core'; +import { useShallowEffect } from '@mantine/hooks'; +import React, { useState } from 'react'; +import { IoReload } from 'react-icons/io5'; + +export default function ReloadButtonTop({ onReload, title }: { onReload: () => void, title: string }) { + const [opened, setOpened] = useState(false); + + useShallowEffect(() => { + const timer = setTimeout(() => { + setOpened(true); + }, 2000); + return () => clearTimeout(timer); + }, []); + + function reloadData() { + onReload() + setOpened(false) + } + + return ( + <> +
+ + {(state) => ( +
+ +
+ )} + +
+ + ); +} diff --git a/src/module/_global/components/skeleton_avatar.tsx b/src/module/_global/components/skeleton_avatar.tsx new file mode 100644 index 0000000..7d3247c --- /dev/null +++ b/src/module/_global/components/skeleton_avatar.tsx @@ -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 == "" ? + + : + + } + + ); +} diff --git a/src/module/_global/components/skeleton_detail_list_tugas_task.tsx b/src/module/_global/components/skeleton_detail_list_tugas_task.tsx index a6eee3f..a72af80 100644 --- a/src/module/_global/components/skeleton_detail_list_tugas_task.tsx +++ b/src/module/_global/components/skeleton_detail_list_tugas_task.tsx @@ -6,58 +6,60 @@ import { TEMA } from '../bin/val_global'; export default function SkeletonDetailListTugasTask() { const tema = useHookstate(TEMA) return ( - - -
- -
- - - - - - - - - - - - - - + + + + +
+
+ + + + + + - - - - + + + + + + + + + + + + + + - - - - + + + ); } diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts index bcdf19e..81cab87 100644 --- a/src/module/_global/index.ts +++ b/src/module/_global/index.ts @@ -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 } \ No newline at end of file diff --git a/src/module/_global/layout/layout_modal.tsx b/src/module/_global/layout/layout_modal.tsx index d364584..e795a31 100644 --- a/src/module/_global/layout/layout_modal.tsx +++ b/src/module/_global/layout/layout_modal.tsx @@ -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 ( {description} - - - - + > + {isMobile ? + <> + + + + : + <> + + + + + } + ); } diff --git a/src/module/division_new/ui/list_discussion.tsx b/src/module/division_new/ui/list_discussion.tsx index cbf498c..9f7b45c 100644 --- a/src/module/division_new/ui/list_discussion.tsx +++ b/src/module/division_new/ui/list_discussion.tsx @@ -17,7 +17,7 @@ export default function ListDiscussionOnDetailDivision() { const param = useParams<{ id: string }>() const [data, setData] = useState([]) const [loading, setLoading] = useState(true); - const isMobile = useMediaQuery('(max-width: 369px)'); + const isMobile = useMediaQuery('(max-width: 399px)'); const tema = useHookstate(TEMA) async function fetchData() { diff --git a/src/module/division_new/ui/list_document.tsx b/src/module/division_new/ui/list_document.tsx index 1bb51e0..ba48fdd 100644 --- a/src/module/division_new/ui/list_document.tsx +++ b/src/module/division_new/ui/list_document.tsx @@ -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 ( diff --git a/src/module/division_new/ui/list_task.tsx b/src/module/division_new/ui/list_task.tsx index 7ab3fac..43f3b26 100644 --- a/src/module/division_new/ui/list_task.tsx +++ b/src/module/division_new/ui/list_task.tsx @@ -42,7 +42,7 @@ export default function ListTaskOnDetailDivision() { fetchData() }, [param.id]) - const isMobile = useMediaQuery('(max-width: 369px)'); + const isMobile = useMediaQuery('(max-width: 399px)'); return ( diff --git a/src/module/home/ui/view_home.tsx b/src/module/home/ui/view_home.tsx index d94ec00..2d90ef9 100644 --- a/src/module/home/ui/view_home.tsx +++ b/src/module/home/ui/view_home.tsx @@ -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: Pengumuman Upacara bendera Upacara bendera Upacara bendera Upacara bendera, - message: Upacara bendera Upacara bendera Upacara bendera Upacara bendera Upacara bendera, - icon: , - loading: false, - autoClose: 5000, - position: "top-center", - radius: 'lg', - bg: "white", - style: { - border: `1px solid ${tema.get().utama}`, - }, - onClose: () => setIsNotif(false) - }); - } - }, [isNotif]); return ( <> @@ -49,6 +25,23 @@ export default function ViewHome() { + {/* { + '' + } + } + title='UPDATE' + /> */} + {''}} + onClose={() => {''}} + /> diff --git a/src/module/project/ui/list_file_detail_project.tsx b/src/module/project/ui/list_file_detail_project.tsx index da36a83..85c5292 100644 --- a/src/module/project/ui/list_file_detail_project.tsx +++ b/src/module/project/ui/list_file_detail_project.tsx @@ -121,7 +121,9 @@ export default function ListFileDetailProject() { - {item.name + '.' + item.extension} + {item.name + '.' + item.extension} diff --git a/src/module/user/member/ui/navbar_detail_member.tsx b/src/module/user/member/ui/navbar_detail_member.tsx index 8330044..801c804 100644 --- a/src/module/user/member/ui/navbar_detail_member.tsx +++ b/src/module/user/member/ui/navbar_detail_member.tsx @@ -73,7 +73,13 @@ export default function NavbarDetailMember({ id }: IMember) { gap="xs" >
- + {loading ? : + + }
{loading ? <> diff --git a/src/module/user/profile/ui/profile.tsx b/src/module/user/profile/ui/profile.tsx index 1c4ab10..3b6f9ea 100644 --- a/src/module/user/profile/ui/profile.tsx +++ b/src/module/user/profile/ui/profile.tsx @@ -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 ? : + } + {/* */} {loading ? :