Merge pull request #243 from bipproduction/lukman/20-september-2024

style : update style

src/module/document/ui/drawer_cut_documents.tsx

@@ -1,130 +1,194 @@
-import { TEMA } from '@/module/_global';
+import { TEMA } from "@/module/_global";
-import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, ScrollArea, Text, TextInput } from '@mantine/core';
+import {
-import React, { useState } from 'react';
+  Box,
-import toast from 'react-hot-toast';
+  Breadcrumbs,
-import { FcFolder } from 'react-icons/fc';
+  Button,
-import { funCreateFolder, funGetAllDocument, funMoveDocument } from '../lib/api_document';
+  Divider,
-import { useParams } from 'next/navigation';
+  Flex,
-import { IDataDocument, IFormDetailMoreItem, IJalurItem } from '../lib/type_document';
+  Grid,
-import { useShallowEffect } from '@mantine/hooks';
+  Group,
-import { MdFolder } from 'react-icons/md';
+  Modal,
-import router from 'next/router';
+  ScrollArea,
-import { GoChevronRight } from 'react-icons/go';
+  Skeleton,
-import { useHookstate } from '@hookstate/core';
+  Text,
+  TextInput,
+} from "@mantine/core";
+import React, { useState } from "react";
+import toast from "react-hot-toast";
+import { FcFolder } from "react-icons/fc";
+import {
+  funCreateFolder,
+  funGetAllDocument,
+  funMoveDocument,
+} from "../lib/api_document";
+import { useParams } from "next/navigation";
+import {
+  IDataDocument,
+  IFormDetailMoreItem,
+  IJalurItem,
+} from "../lib/type_document";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
+import { MdFolder } from "react-icons/md";
+import router from "next/router";
+import { GoChevronRight } from "react-icons/go";
+import { useHookstate } from "@hookstate/core";
 
-
+export default function DrawerCutDocuments({
-export default function DrawerCutDocuments({ category, onChoosePath, data }: { category: string, data: IFormDetailMoreItem[], onChoosePath: (val: string) => void }) {
+  category,
+  onChoosePath,
+  data,
+}: {
+  category: string;
+  data: IFormDetailMoreItem[];
+  onChoosePath: (val: string) => void;
+}) {
   const [opened, setOpened] = useState(false);
-  const param = useParams<{ id: string }>()
+  const param = useParams<{ id: string }>();
-  const [path, setPath] = useState('home')
+  const [path, setPath] = useState("home");
-  const [dataDocument, setDataDocument] = useState<IDataDocument[]>([])
+  const [dataDocument, setDataDocument] = useState<IDataDocument[]>([]);
-  const [dataJalur, setDataJalur] = useState<IJalurItem[]>([])
+  const [dataJalur, setDataJalur] = useState<IJalurItem[]>([]);
-  const [valName, setValName] = useState('')
+  const [valName, setValName] = useState("");
-  const tema = useHookstate(TEMA)
+  const tema = useHookstate(TEMA);
-
+  const [loading, setLoading] = useState(true);
+  const isMobile = useMediaQuery("(max-width: 369px)");
 
   async function onCreateFolder() {
     try {
       const res = await funCreateFolder({
         name: valName,
         path: path,
-        idDivision: param.id
+        idDivision: param.id,
-      })
+      });
       if (res.success) {
-        getOneData()
+        getOneData();
       } else {
-        toast.error(res.message)
+        toast.error(res.message);
       }
     } catch (error) {
       console.error(error);
       toast.error("Gagal membuat folder baru, coba lagi nanti");
     }
 
-    setOpened(false)
+    setOpened(false);
   }
 
   async function getOneData() {
     try {
-      const respon = await funGetAllDocument("?division=" + param.id + "&path=" + path + "&category=folder");
+      setLoading(true);
+      const respon = await funGetAllDocument(
+        "?division=" + param.id + "&path=" + path + "&category=folder"
+      );
       if (respon.success) {
         setDataDocument(respon.data);
         setDataJalur(respon.jalur);
       } else {
         toast.error(respon.message);
       }
-
+      setLoading(false);
     } catch (error) {
       console.error(error);
       toast.error("Gagal mendapatkan item, coba lagi nanti");
+    } finally {
+      setLoading(false);
     }
   }
 
   useShallowEffect(() => {
-    getOneData()
+    getOneData();
-  }, [param.id, path])
+  }, [param.id, path]);
 
   return (
     <Box>
-      <Box h={60} pos={"fixed"} bottom={0} w={{ base: "92%", md: "94%" }} style={{
+      <Box
-        zIndex: 999
+        h={60}
-      }}>
+        pos={"fixed"}
-        <Grid justify='center'>
+        bottom={0}
+        w={{ base: "92%", md: "94%" }}
+        style={{
+          zIndex: 999,
+        }}
+      >
+        <Grid justify="center">
           <Grid.Col span={6}>
-            <Button variant="subtle" fullWidth color={tema.get().utama} radius={"xl"} onClick={() => setOpened(true)}>BUAT FOLDER BARU</Button>
+            <Button
+              variant="subtle"
+              fullWidth
+              color={tema.get().utama}
+              radius={"xl"}
+              onClick={() => setOpened(true)}
+            >
+              BUAT FOLDER BARU
+            </Button>
           </Grid.Col>
           <Grid.Col span={6}>
-            <Button variant="filled" fullWidth color={tema.get().utama} radius={"xl"} onClick={() => onChoosePath(path)}>
+            <Button
-              {
+              variant="filled"
-                (category == "move") ?
+              fullWidth
-                  "PINDAH" : "SALIN"
+              color={tema.get().utama}
-              }
+              radius={"xl"}
-
+              onClick={() => onChoosePath(path)}
+            >
+              {category == "move" ? "PINDAH" : "SALIN"}
             </Button>
           </Grid.Col>
         </Grid>
       </Box>
       <Box p={10} pb={60}>
         <Box>
-          <Breadcrumbs separator={<GoChevronRight />} separatorMargin="md" mt="xs">
+          <Breadcrumbs
-            {
+            separator={<GoChevronRight />}
-              dataJalur.map((v, i) => {
+            separatorMargin="md"
+            mt="xs"
+          >
+            {dataJalur.map((v, i) => {
               return (
-                  <Text onClick={() => setPath(v.id)} key={i} style={{ cursor: 'pointer' }}>
+                <Text
+                  onClick={() => setPath(v.id)}
+                  key={i}
+                  style={{ cursor: "pointer" }}
+                >
                   {v.name}
                 </Text>
-                )
+              );
-              })
+            })}
-            }
           </Breadcrumbs>
         </Box>
-        <ScrollArea h={{
+        <ScrollArea
-          base: "55vh", xl: "58vh", md: "57vh",
+          h={{
+            base: "55vh",
+            xl: "58vh",
+            md: "57vh",
             sm: "58vh",
-        }} type="scroll" scrollbarSize={2} scrollHideDelay={0} scrollbars="y">
+          }}
-        {dataDocument.map((v, i) => {
+          type="scroll"
-          const found = data.some((i: any) => i.id == v.id)
+          scrollbarSize={2}
-          return (
+          scrollHideDelay={0}
+          scrollbars="y"
+        >
+          {loading ? (
+            <Group align="center">
+              <Skeleton height={15} width={100} />
+              <Skeleton height={15} width={100} />
+            </Group>
+          ) : null}
+          {loading ? (
+            Array(6)
+              .fill(null)
+              .map((_, i) => (
                 <Box key={i}>
-              <Box mt={10} mb={10} onClick={() => {
+                  <Box mt={20} mb={20}>
-                if (!found) {
+                    <Grid align="center">
-                  setPath(v.id)
+                      <Grid.Col span={2}>
-                }
+                        <Skeleton
-              }}>
+                          height={isMobile ? 40 : 50}
-                <Grid align='center'>
+                          width={isMobile ? 40 : 50}
-                  <Grid.Col span={12}>
+                        />
-                    <Group gap={20}>
+                      </Grid.Col>
-                      <Box>
+                      <Grid.Col span={10}>
-                        {
+                        <Group justify="space-between" align="center">
-                          (found) ?
+                          <Flex direction={"column"}>
-                            <MdFolder size={60} color='grey' /> :
+                            <Skeleton height={15} width={200} />
-                            <FcFolder size={60} />
+                            <Skeleton mt={5} height={10} width={200} />
-                        }
-                      </Box>
-                      <Flex direction={'column'}>
-                        <Text>{(v.category == "FOLDER") ? v.name : v.name + '.' + v.extension}</Text>
-                        {
-                          (found) && <Text c={'dimmed'} fz={13} fs={'italic'}>Tidak bisa memilih folder ini</Text>
-                        }
                           </Flex>
                         </Group>
                       </Grid.Col>
@@ -132,31 +196,100 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
                   </Box>
                   <Divider size="xs" />
                 </Box>
-          )
+              ))
+          ) : (
+            <Box>
+              {dataDocument.length == 0 ? (
+                <Box
+                  style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    height: "60vh",
+                  }}
+                >
+                  <Text c="dimmed" ta={"center"} fs={"italic"}>
+                    Tidak ada Dokumen
+                  </Text>
+                </Box>
+              ) : (
+                <Box>
+                  {dataDocument.map((v, i) => {
+                    const found = data.some((i: any) => i.id == v.id);
+                    return (
+                      <Box key={i}>
+                        <Box
+                          mt={10}
+                          mb={10}
+                          onClick={() => {
+                            if (!found) {
+                              setPath(v.id);
+                            }
+                          }}
+                        >
+                          <Grid align="center">
+                            <Grid.Col span={12}>
+                              <Group gap={20}>
+                                <Box>
+                                  {found ? (
+                                    <MdFolder size={60} color="grey" />
+                                  ) : (
+                                    <FcFolder size={60} />
+                                  )}
+                                </Box>
+                                <Flex direction={"column"}>
+                                  <Text>
+                                    {v.category == "FOLDER"
+                                      ? v.name
+                                      : v.name + "." + v.extension}
+                                  </Text>
+                                  {found && (
+                                    <Text c={"dimmed"} fz={13} fs={"italic"}>
+                                      Tidak bisa memilih folder ini
+                                    </Text>
+                                  )}
+                                </Flex>
+                              </Group>
+                            </Grid.Col>
+                          </Grid>
+                        </Box>
+                        <Divider size="xs" />
+                      </Box>
+                    );
                   })}
+                </Box>
+              )}
+            </Box>
+          )}
         </ScrollArea>
       </Box>
 
-
+      <Modal
-
+        styles={{
-      <Modal styles={{
           body: {
-          borderRadius: 20
+            borderRadius: 20,
           },
           content: {
             borderRadius: 20,
-          border: `2px solid ${"#828AFC"}`
+            border: `2px solid ${"#828AFC"}`,
-        }
+          },
-      }} opened={opened} onClose={() => setOpened(false)} centered withCloseButton={false}>
+        }}
+        opened={opened}
+        onClose={() => setOpened(false)}
+        centered
+        withCloseButton={false}
+      >
         <Box p={20}>
-          <Text ta={"center"} fw={"bold"}>Buat Folder</Text>
+          <Text ta={"center"} fw={"bold"}>
+            Buat Folder
+          </Text>
           <Box mt={20} mb={20}>
             <TextInput
               styles={{
                 input: {
                   color: tema.get().utama,
-                  borderRadius: '#828AFC',
+                  borderRadius: "#828AFC",
-                  borderColor: '#828AFC',
+                  borderColor: "#828AFC",
                 },
               }}
               size="md"
@@ -168,10 +301,24 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
           </Box>
           <Grid mt={40}>
             <Grid.Col span={6}>
-              <Button variant="subtle" fullWidth color='#969494' onClick={() => setOpened(false)}>Batalkan</Button>
+              <Button
+                variant="subtle"
+                fullWidth
+                color="#969494"
+                onClick={() => setOpened(false)}
+              >
+                Batalkan
+              </Button>
             </Grid.Col>
             <Grid.Col span={6}>
-              <Button variant="subtle" fullWidth color={tema.get().utama} onClick={() => onCreateFolder()}>Membuat</Button>
+              <Button
+                variant="subtle"
+                fullWidth
+                color={tema.get().utama}
+                onClick={() => onCreateFolder()}
+              >
+                Membuat
+              </Button>
             </Grid.Col>
           </Grid>
         </Box>

src/module/document/ui/drawer_share_document.tsx

@@ -1,7 +1,23 @@
 import { TEMA } from "@/module/_global";
-import { funGetListDivisionByIdDivision, IDataDivison } from "@/module/division_new";
+import {
+  funGetListDivisionByIdDivision,
+  IDataDivison,
+} from "@/module/division_new";
 import { IDataMemberTaskDivision } from "@/module/task/lib/type_task";
-import { Box, Select, Button, Avatar, Divider, Flex, Group, Stack, Text, ActionIcon, ScrollArea } from "@mantine/core";
+import {
+  Box,
+  Select,
+  Button,
+  Avatar,
+  Divider,
+  Flex,
+  Group,
+  Stack,
+  Text,
+  ActionIcon,
+  ScrollArea,
+  Skeleton,
+} from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
 import { useState } from "react";
@@ -12,60 +28,74 @@ import { funShareDocument } from "../lib/api_document";
 import { useHookstate } from "@hookstate/core";
 import { globalRefreshDocument } from "../lib/val_document";
 
-export default function DrawerShareDocument({ data }: { data: IShareDivision[] }) {
+export default function DrawerShareDocument({
-   const [selectedFiles, setSelectedFiles] = useState<any>([])
+  data,
-   const [isData, setData] = useState<IDataDivison[]>([])
+}: {
-   const param = useParams<{ id: string }>()
+  data: IShareDivision[];
-   const refresh = useHookstate(globalRefreshDocument)
+}) {
-   const tema = useHookstate(TEMA)
+  const [selectedFiles, setSelectedFiles] = useState<any>([]);
-
+  const [isData, setData] = useState<IDataDivison[]>([]);
-
+  const param = useParams<{ id: string }>();
+  const refresh = useHookstate(globalRefreshDocument);
+  const tema = useHookstate(TEMA);
+  const [loading, setLoading] = useState(true);
 
   async function onShare() {
     try {
       if (selectedFiles.length == 0) {
-            return toast.error('Pilih divisi terlebih dahulu')
+        return toast.error("Pilih divisi terlebih dahulu");
       }
 
-
+      const respon = await funShareDocument({
-         const respon = await funShareDocument({ dataDivision: selectedFiles, dataItem: data })
+        dataDivision: selectedFiles,
+        dataItem: data,
+      });
       if (respon.success) {
-            toast.success(respon.message)
+        toast.success(respon.message);
-            refresh.set(true)
+        refresh.set(true);
       } else {
-            toast.error(respon.message)
+        toast.error(respon.message);
       }
     } catch (error) {
-         console.error(error)
+      console.error(error);
       toast.error("Gagal membagikan item, coba lagi nanti");
     }
   }
 
   async function getData() {
     try {
-         const response = await funGetListDivisionByIdDivision('?division=' + param.id)
+      setLoading(true);
+      const response = await funGetListDivisionByIdDivision(
+        "?division=" + param.id
+      );
       if (response.success) {
-            setData(response.data.filter((i: any) => i.id != param.id))
+        setData(response.data.filter((i: any) => i.id != param.id));
       } else {
         toast.error(response.message);
       }
-
+      setLoading(false);
     } catch (error) {
       toast.error("Gagal mendapatkan divisi, coba lagi nanti");
       console.error(error);
+    } finally {
+      setLoading(false);
     }
   }
 
-
   useShallowEffect(() => {
-      getData()
+    getData();
   }, []);
 
   const handleFileClick = (index: number) => {
     if (selectedFiles.some((i: any) => i.id == isData[index].id)) {
-         setSelectedFiles(selectedFiles.filter((i: any) => i.id != isData[index].id))
+      setSelectedFiles(
+        selectedFiles.filter((i: any) => i.id != isData[index].id)
+      );
     } else {
-         setSelectedFiles([...selectedFiles, { id: isData[index].id, name: isData[index].name }])
+      setSelectedFiles([
+        ...selectedFiles,
+        { id: isData[index].id, name: isData[index].name },
+      ]);
     }
   };
 
@@ -74,49 +104,113 @@ export default function DrawerShareDocument({ data }: { data: IShareDivision[] }
       <Box mt={10}>
         <ScrollArea
           h={{
-               base: "58vh", xl: "58vh", md: "57vh",
+            base: "58vh",
+            xl: "58vh",
+            md: "57vh",
             sm: "58vh",
-            }} type="scroll" scrollbarSize={2} scrollHideDelay={0} scrollbars="y"
+          }}
+          type="scroll"
+          scrollbarSize={2}
+          scrollHideDelay={0}
+          scrollbars="y"
         >
-            {isData.map((v, i) => {
+          {loading ? (
-               const isSelected = selectedFiles.some((i: any) => i?.id == v.id);
+            Array(6)
-               return (
+              .fill(null)
-                  <Box mb={15} key={i} onClick={() => handleFileClick(i)} >
+              .map((_, i) => (
+                <Box mb={15} key={i}>
                   <Flex justify={"space-between"} align={"center"}>
                     <Group>
-                           <ActionIcon variant="light" color="gray" radius="xl" size={42} p={10}>
+                      <Skeleton circle height={42} width={42} />
+                      <Stack align="flex-start" justify="flex-start">
+                        <Skeleton height={20} width={150} />
+                      </Stack>
+                    </Group>
+                    <Skeleton height={20} width={20} />
+                  </Flex>
+                  <Divider my={"md"} />
+                </Box>
+              ))
+          ) : (
+            <Box>
+              {isData.length == 0 ? (
+                <Box
+                  style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    height: "30vh",
+                  }}
+                >
+                  <Text c="dimmed" ta={"center"} fs={"italic"}>
+                    Tidak ada Divisi
+                  </Text>
+                </Box>
+              ) : (
+                <Box>
+                  {isData.map((v, i) => {
+                    const isSelected = selectedFiles.some(
+                      (i: any) => i?.id == v.id
+                    );
+                    return (
+                      <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
+                        <Flex justify={"space-between"} align={"center"}>
+                          <Group>
+                            <ActionIcon
+                              variant="light"
+                              color="gray"
+                              radius="xl"
+                              size={42}
+                              p={10}
+                            >
                               <FaUsers fontSize={40} />
                             </ActionIcon>
                             <Stack align="flex-start" justify="flex-start">
-                              <Text style={{
+                              <Text
-                                 cursor: 'pointer',
+                                style={{
-                                 display: 'flex',
+                                  cursor: "pointer",
-                                 alignItems: 'center',
+                                  display: "flex",
-                              }}>
+                                  alignItems: "center",
+                                }}
+                              >
                                 {v.name}
                               </Text>
                             </Stack>
                           </Group>
                           <Text
                             style={{
-                              cursor: 'pointer',
+                              cursor: "pointer",
-                              display: 'flex',
+                              display: "flex",
-                              alignItems: 'center',
+                              alignItems: "center",
                               paddingLeft: 20,
                             }}
                           >
-                           {isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                            {isSelected ? (
+                              <FaCheck style={{ marginRight: 10 }} />
+                            ) : (
+                              ""
+                            )}
                           </Text>
                         </Flex>
                         <Divider my={"md"} />
                       </Box>
                     );
                   })}
+                </Box>
+              )}
+            </Box>
+          )}
         </ScrollArea>
       </Box>
-         <Box h={60} pos={"fixed"} bottom={0} w={{ base: "92%", md: "94%" }} style={{
+      <Box
-            zIndex: 999
+        h={60}
-         }}>
+        pos={"fixed"}
+        bottom={0}
+        w={{ base: "92%", md: "94%" }}
+        style={{
+          zIndex: 999,
+        }}
+      >
         <Box>
           <Button
             c={"white"}
@@ -131,5 +225,5 @@ export default function DrawerShareDocument({ data }: { data: IShareDivision[] }
         </Box>
       </Box>
     </Box>
-   )
+  );
 }

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

@@ -116,7 +116,7 @@ export default function TabListMember() {
                      :
                      dataMember.map((v, i) => {
                         return (
-                           <Box key={i}>
+                           <Box key={i} pt={20}>
                               <Box onClick={() => {
                                  router.push(`/member/${v.id}`)
                               }}>