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

src/module/_global/components/notification_custome.tsx

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

src/module/_global/components/reload_button_top.tsx

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

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 == "" ? 
+        <Avatar
+        size={sizeNoImg}
+        radius={"100"}
+        src={String(bgIcon)}
+      />
+        :
+        <Avatar
+          size={size}
+          radius={"100"}
+          src={img}
+        />
+      }
+    </>
+  );
+}

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 (
-    <Grid>
+    <Box>
-    <Grid.Col span={"auto"}>
+      <Skeleton width={30} height={30} radius={"md"} />
-      <Center>
+      <Grid>
-        <Skeleton width={30} height={30} radius={"md"} />
+        <Grid.Col span={"auto"}>
-      </Center>
+          <Center>
-    </Grid.Col>
+          </Center>
-    <Grid.Col span={10}>
+        </Grid.Col>
-      <Box
+        <Grid.Col span={12}>
-        style={{
+          <Box
-          borderRadius: 10,
+            style={{
-          border: `1px solid ${tema.get().bgTotalKegiatan}`,
+              borderRadius: 10,
-          padding: 10,
+              border: `1px solid ${tema.get().bgTotalKegiatan}`,
-        }}
+              padding: 10,
-      >
+            }}
-        <Group>
+          >
-          <Skeleton width={25} height={25} radius={"md"} />
+            <Group>
-          <Skeleton width={"50%"} height={20} radius={"md"} />
+              <Skeleton width={25} height={25} radius={"md"} />
-        </Group>
+              <Skeleton width={"50%"} height={20} radius={"md"} />
-      </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"} />
             </Group>
           </Box>
           <Box>
-            <Skeleton width={"50%"} height={20} radius={"md"} />
+            <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
-            <Group
+              <Box>
-                bg={"white"}
+                <Skeleton width={"50%"} height={20} radius={"md"} />
-                mt={3}
+                <Group
-              h={45}
+                  bg={"white"}
-              style={{
+                  mt={3}
-                borderRadius: 10,
+                  h={45}
-                border: `1px solid ${tema.get().bgTotalKegiatan}`,
+                  style={{
-              }}
+                    borderRadius: 10,
-            >
+                    border: `1px solid ${tema.get().bgTotalKegiatan}`,
-              <Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
+                  }}
-            </Group>
+                >
+                  <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>
+        </Grid.Col>
-      </Box>
+      </Grid>
-    </Grid.Col>
+    </Box>
-  </Grid>
   );
 }

src/module/_global/index.ts

@@ -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 };
@@ -49,3 +52,6 @@ export { funCopyFile }
 export { MqttLoad }
 export { mtqq_client }
 export { globalNotifPage }
+export { SkeletonAvatar }
+export { ReloadButtonTop }
+export { NotificationCustome }

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 (
     <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>
+        {isMobile ?
-          <Button fullWidth size="lg" radius={'xl'} bg={WARNA.biruTua} onClick={() => onYes(true)}>YA</Button>
+          <>
-        </SimpleGrid>
+            <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>
   );
 }

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<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() {

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 (
       <Box pt={10}>

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 (
       <Box pt={10}>

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: <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 />

src/module/project/ui/list_file_detail_project.tsx

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

src/module/user/member/ui/navbar_detail_member.tsx

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

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 ? <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%"} />
               :