From a54cfb861ae043e091ba5e367ee8fa52aa007911 Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Thu, 26 Sep 2024 14:17:11 +0800
Subject: [PATCH] style : update style

---
 .../ui/navbar_create_division_calender.tsx    |  78 ++++++---
 .../calender/ui/update_division_calender.tsx  |  75 ++++++---
 .../document/ui/drawer_cut_documents.tsx      |  12 +-
 .../ui/drawer_menu_document_division.tsx      | 158 ++++++++++--------
 .../document/ui/drawer_share_document.tsx     |  71 ++++----
 .../document/ui/navbar_document_division.tsx  |  35 ++--
 .../project/ui/list_file_detail_project.tsx   |   3 +
 7 files changed, 251 insertions(+), 181 deletions(-)

diff --git a/src/module/calender/ui/navbar_create_division_calender.tsx b/src/module/calender/ui/navbar_create_division_calender.tsx
index 522ecca..911f119 100644
--- a/src/module/calender/ui/navbar_create_division_calender.tsx
+++ b/src/module/calender/ui/navbar_create_division_calender.tsx
@@ -208,7 +208,6 @@ export default function NavbarCreateDivisionCalender() {
             data={[
               { value: 'once', label: 'Acara 1 Kali' },
               { value: 'daily', label: 'Setiap Hari' },
-              // { value: 'weekdays', label: 'Hari Kerja (Sen - Jum)' },
               { value: 'weekly', label: 'Mingguan' },
               { value: 'monthly', label: 'Bulanan' },
               { value: 'yearly', label: 'Tahunan' },
@@ -226,31 +225,60 @@ export default function NavbarCreateDivisionCalender() {
               )
             }
           />
-          <TextInput styles={{
-            input: {
-              border: `1px solid ${"#D6D8F6"}`,
-              borderRadius: 10,
-            },
-          }}
-            type='number'
-            required
-            label="Jumlah pengulangan"
-            size="md"
-            placeholder='Jumlah pengulangan'
-            value={isData.repeatValue}
-            onChange={(event) => {
-              setData({ ...isData, repeatValue: String(event.currentTarget.value) })
-              setTouched({ ...touched, repeatValue: false })
+          {isData.repeatEventTyper == "once" ?
+            <TextInput styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
             }}
-            onBlur={() => setTouched({ ...touched, repeatValue: true })}
-            // TODO :: NANTI DIPERBAIKI
-            error={
-              touched.repeatValue && (
-                isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : "" 
-                // || Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh 0" : ""
-              )
-            }
-          />
+              type='number'
+              required
+              label="Jumlah pengulangan"
+              size="md"
+              disabled
+              placeholder='Jumlah pengulangan'
+              value={isData.repeatValue}
+              onChange={(event) => {
+                setData({ ...isData, repeatValue: String(event.currentTarget.value) })
+                setTouched({ ...touched, repeatValue: false })
+              }}
+              onBlur={() => setTouched({ ...touched, repeatValue: true })}
+              // TODO :: NANTI DIPERBAIKI
+              error={
+                touched.repeatValue && (
+                  isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : ""
+                  // || Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh 0" : ""
+                )
+              }
+            />
+            :
+            <TextInput styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+              type='number'
+              required
+              label="Jumlah pengulangan"
+              size="md"
+              placeholder='Jumlah pengulangan'
+              value={isData.repeatValue}
+              onChange={(event) => {
+                setData({ ...isData, repeatValue: String(event.currentTarget.value) })
+                setTouched({ ...touched, repeatValue: false })
+              }}
+              onBlur={() => setTouched({ ...touched, repeatValue: true })}
+              // TODO :: NANTI DIPERBAIKI
+              error={
+                touched.repeatValue && (
+                  isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : ""
+                  // || Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh 0" : ""
+                )
+              }
+            />
+          }
           <Textarea styles={{
             input: {
               border: `1px solid ${"#D6D8F6"}`,
diff --git a/src/module/calender/ui/update_division_calender.tsx b/src/module/calender/ui/update_division_calender.tsx
index 0fa56bd..5e09979 100644
--- a/src/module/calender/ui/update_division_calender.tsx
+++ b/src/module/calender/ui/update_division_calender.tsx
@@ -254,7 +254,6 @@ export default function UpdateDivisionCalender() {
                 data={[
                   { value: 'once', label: 'Acara 1 Kali' },
                   { value: 'daily', label: 'Setiap Hari' },
-                  // { value: 'weekdays', label: 'Hari Kerja (Sen - Jum)' },
                   { value: 'weekly', label: 'Mingguan' },
                   { value: 'monthly', label: 'Bulanan' },
                   { value: 'yearly', label: 'Tahunan' },
@@ -278,30 +277,58 @@ export default function UpdateDivisionCalender() {
                 }
                 required
               />
-              <TextInput styles={{
-                input: {
-                  border: `1px solid ${"#D6D8F6"}`,
-                  borderRadius: 10,
-                },
-              }}
-                type='number'
-                required
-                label="Jumlah pengulangan"
-                size="md"
-                placeholder='Jumlah pengulangan'
-                defaultValue={isDataCalender?.repeatValue}
-                onChange={(event) => {
-                  setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
-                  setTouched({ ...touched, repeatValue: false })
+              {isDataCalender?.repeatEventTyper == "once" ?
+                <TextInput styles={{
+                  input: {
+                    border: `1px solid ${"#D6D8F6"}`,
+                    borderRadius: 10,
+                  },
                 }}
-                onBlur={() => setTouched({ ...touched, repeatValue: true })}
-                error={
-                  touched.repeatValue && (
-                    isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null 
-                    // || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null
-                  )
-                }
-              />
+                  type='number'
+                  required
+                  label="Jumlah pengulangan"
+                  size="md"
+                  disabled
+                  placeholder='Jumlah pengulangan'
+                  defaultValue={isDataCalender?.repeatValue}
+                  onChange={(event) => {
+                    setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
+                    setTouched({ ...touched, repeatValue: false })
+                  }}
+                  onBlur={() => setTouched({ ...touched, repeatValue: true })}
+                  error={
+                    touched.repeatValue && (
+                      isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null
+                      // || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null
+                    )
+                  }
+                />
+                :
+                <TextInput styles={{
+                  input: {
+                    border: `1px solid ${"#D6D8F6"}`,
+                    borderRadius: 10,
+                  },
+                }}
+                  type='number'
+                  required
+                  label="Jumlah pengulangan"
+                  size="md"
+                  placeholder='Jumlah pengulangan'
+                  defaultValue={isDataCalender?.repeatValue}
+                  onChange={(event) => {
+                    setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
+                    setTouched({ ...touched, repeatValue: false })
+                  }}
+                  onBlur={() => setTouched({ ...touched, repeatValue: true })}
+                  error={
+                    touched.repeatValue && (
+                      isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null
+                      // || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null
+                    )
+                  }
+                />
+              }
               <Textarea styles={{
                 input: {
                   border: `1px solid ${"#D6D8F6"}`,
diff --git a/src/module/document/ui/drawer_cut_documents.tsx b/src/module/document/ui/drawer_cut_documents.tsx
index 6ac47a7..7bd5ac4 100644
--- a/src/module/document/ui/drawer_cut_documents.tsx
+++ b/src/module/document/ui/drawer_cut_documents.tsx
@@ -133,12 +133,12 @@ export default function DrawerCutDocuments({
           </Grid.Col>
         </Grid>
       </Box>
-      <Box p={10} pb={60}>
+      <Box  pb={60}>
         <Box>
           <Breadcrumbs
             separator={<GoChevronRight />}
             separatorMargin="md"
-            mt="xs"
+            mb={10}
           >
             {dataJalur.map((v, i) => {
               return (
@@ -156,9 +156,9 @@ export default function DrawerCutDocuments({
         <ScrollArea
           h={{
             base: "55vh",
-            xl: "58vh",
-            md: "57vh",
-            sm: "58vh",
+            xl: "56vh",
+            md: "56vh",
+            sm: "56vh",
           }}
           type="scroll"
           scrollbarSize={2}
@@ -205,7 +205,7 @@ export default function DrawerCutDocuments({
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                    height: "60vh",
+                    height: "50vh",
                   }}
                 >
                   <Text c="dimmed" ta={"center"} fs={"italic"}>
diff --git a/src/module/document/ui/drawer_menu_document_division.tsx b/src/module/document/ui/drawer_menu_document_division.tsx
index 8157628..beb8563 100644
--- a/src/module/document/ui/drawer_menu_document_division.tsx
+++ b/src/module/document/ui/drawer_menu_document_division.tsx
@@ -1,6 +1,6 @@
 "use clent"
 import { LayoutDrawer, TEMA } from '@/module/_global';
-import { ActionIcon, Box, Button, Divider, Flex, Grid, Modal, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Box, Button, Center, Divider, Flex, Grid, Modal, Progress, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import React, { useRef, useState } from 'react';
 import toast from 'react-hot-toast';
@@ -24,6 +24,7 @@ export default function DrawerMenuDocumentDivision() {
   const openRef = useRef<() => void>(null)
   const [fileForm, setFileForm] = useState<any>()
   const tema = useHookstate(TEMA)
+  const [loading, setLoading] = useState(false)
 
   const [bodyFolder, setBodyFolder] = useState({
     name: '',
@@ -49,101 +50,112 @@ export default function DrawerMenuDocumentDivision() {
 
   async function onUploadFile(data: any) {
     try {
+      setLoading(true)
       const fd = new FormData()
       fd.append(`file`, data)
       fd.append("data", JSON.stringify({
         idPath: (path == undefined || path == '' || path == null) ? 'home' : path,
         idDivision: param.id
       }))
-
+      setOpenModal(false)
+      // setOpenDrawerDocument(false)
       const res = await funUploadFileDocument(fd)
+
       if (!res.success) {
         toast.error(res.message)
       }
+      setLoading(false)
     } catch (error) {
       console.error(error);
       toast.error("Gagal upload file, coba lagi nanti");
+      setLoading(false)
     }
-
     refresh.set(true)
-    setOpenModal(false)
     setOpenDrawerDocument(false)
   }
 
+
   return (
     <Box>
-      <Stack pt={10}>
-        <SimpleGrid
-          cols={{ base: 2, sm: 3, lg: 3 }}
-          onClick={() => setOpenDrawerDocument(true)}
-        >
-          <Flex justify={'center'} align={'center'} direction={'column'} >
-            <Box>
-              <IoAddCircle size={30} color={tema.get().utama} />
-            </Box>
-            <Box >
-              <Text c={tema.get().utama}>Tambah Dokumen</Text>
-            </Box>
-          </Flex>
-        </SimpleGrid>
-      </Stack>
+      {loading ? (
+        <Box >
+          <Progress mt={"10vh"} size="lg" value={100} animated />
+          <Text ta={"center"}>Loading...</Text>
+        </Box>
+      ) :
+        (
+          <Stack pt={10}>
+            <SimpleGrid
+              cols={{ base: 2, sm: 3, lg: 3 }}
+              onClick={() => setOpenDrawerDocument(true)}
+            >
+              <Flex justify={'center'} align={'center'} direction={'column'} >
+                <Box>
+                  <IoAddCircle size={30} color={tema.get().utama} />
+                </Box>
+                <Box >
+                  <Text c={tema.get().utama}>Tambah Dokumen</Text>
+                </Box>
+              </Flex>
+            </SimpleGrid>
+          </Stack>
+        )
+      }
 
       <LayoutDrawer opened={openDrawerDocument} onClose={() => setOpenDrawerDocument(false)} title={''}>
-        <SimpleGrid
-          cols={{ base: 2, sm: 2, lg: 2 }}
-          onClick={() => setOpenDrawerDocument(true)}
-        >
+        {loading ? (
+          <Box >
+            <Progress mt={"10vh"} size="lg" value={100} animated />
+            <Text ta={"center"}>Loading...</Text>
+          </Box>
+        ) :
+          (
+            <SimpleGrid
+              cols={{ base: 2, sm: 2, lg: 2 }}
+              onClick={() => setOpenDrawerDocument(true)}
+            >
+              <Flex onClick={() => setOpenModal(true)} justify={'center'} align={'center'} direction={'column'} mb={20} >
+                <Box>
+                  <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
+                    <FaFolderClosed size={40} color={tema.get().utama} />
+                  </ActionIcon>
+                </Box>
+                <Box mt={10}>
+                  <Text c={tema.get().utama}>Membuat Folder</Text>
+                </Box>
+              </Flex>
+              <Dropzone
+                openRef={openRef}
+                onDrop={async (files) => {
+                  if (!files || _.isEmpty(files))
+                    return toast.error('Tidak ada file yang dipilih')
+                  onUploadFile(files[0])
+                }}
+                activateOnClick={false}
+                maxSize={3 * 1024 ** 2}
+                accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
+                onReject={(files) => {
+                  refresh.set(true)
+                  setOpenModal(false)
+                  setOpenDrawerDocument(false)
+                  toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
+                }}
+              >
+                <Flex justify={'center'} align={'center'} direction={'column'} mb={20} onClick={() => openRef.current?.()}>
+                  <Box>
+                    <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
+                      <HiDocumentText size={40} color={tema.get().utama} />
+                    </ActionIcon>
+                  </Box>
+                  <Box mt={10}>
+                    <Text c={tema.get().utama}>Upload File</Text>
+                  </Box>
+                </Flex>
+              </Dropzone>
 
-          <Flex onClick={() => setOpenModal(true)} justify={'center'} align={'center'} direction={'column'} mb={20} >
-            <Box>
-              <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
-                <FaFolderClosed size={40} color={tema.get().utama} />
-              </ActionIcon>
-            </Box>
-            <Box mt={10}>
-              <Text c={tema.get().utama}>Membuat Folder</Text>
-            </Box>
-          </Flex>
-          <Dropzone
-            openRef={openRef}
-            onDrop={async (files) => {
-              if (!files || _.isEmpty(files))
-                return toast.error('Tidak ada file yang dipilih')
-              onUploadFile(files[0])
-            }}
-            activateOnClick={false}
-            maxSize={3 * 1024 ** 2}
-            accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
-            onReject={(files) => {
-              refresh.set(true)
-              setOpenModal(false)
-              setOpenDrawerDocument(false)
-              toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
-            }}
-          >
-            <Flex justify={'center'} align={'center'} direction={'column'} mb={20} onClick={() => openRef.current?.()}>
-              <Box>
-                <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
-                  <HiDocumentText size={40} color={tema.get().utama} />
-                </ActionIcon>
-              </Box>
-              <Box mt={10}>
-                <Text c={tema.get().utama}>Upload File</Text>
-              </Box>
-            </Flex>
-          </Dropzone>
-
-          {/* <Flex justify={'center'} align={'center'} direction={'column'} mb={20} >
-            <Box>
-              <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
-                <FaRegImage size={40} color={tema.get().utama} />
-              </ActionIcon>
-            </Box>
-            <Box mt={10}>
-              <Text c={tema.get().utama}>Upload Foto</Text>
-            </Box>
-          </Flex> */}
-        </SimpleGrid>
+            </SimpleGrid>
+          )
+        }
       </LayoutDrawer>
 
 
diff --git a/src/module/document/ui/drawer_share_document.tsx b/src/module/document/ui/drawer_share_document.tsx
index 99ab5ce..cd450a2 100644
--- a/src/module/document/ui/drawer_share_document.tsx
+++ b/src/module/document/ui/drawer_share_document.tsx
@@ -17,8 +17,9 @@ import {
   ActionIcon,
   ScrollArea,
   Skeleton,
+  Grid,
 } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
@@ -39,6 +40,7 @@ export default function DrawerShareDocument({
   const refresh = useHookstate(globalRefreshDocument);
   const tema = useHookstate(TEMA);
   const [loading, setLoading] = useState(true);
+  const isMobile2 = useMediaQuery("(max-width: 438px)");
 
   async function onShare() {
     try {
@@ -100,8 +102,8 @@ export default function DrawerShareDocument({
   };
 
   return (
-    <Box pt={10}>
-      <Box mt={10}>
+    <Box>
+      <Box>
         <ScrollArea
           h={{
             base: "58vh",
@@ -154,8 +156,15 @@ export default function DrawerShareDocument({
                     );
                     return (
                       <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
-                        <Flex justify={"space-between"} align={"center"}>
-                          <Group>
+                        <Grid align='center'>
+                          <Grid.Col span={{
+                            base: 1,
+                            xs: 1,
+                            sm: 1,
+                            md: 1,
+                            lg: 1,
+                            xl: 1,
+                          }}>
                             <ActionIcon
                               variant="light"
                               color="gray"
@@ -165,34 +174,30 @@ export default function DrawerShareDocument({
                             >
                               <FaUsers fontSize={40} />
                             </ActionIcon>
-                            <Stack align="flex-start" justify="flex-start">
-                              <Text
-                                style={{
-                                  cursor: "pointer",
-                                  display: "flex",
-                                  alignItems: "center",
-                                }}
-                              >
-                                {v.name}
-                              </Text>
-                            </Stack>
-                          </Group>
-                          <Text
-                            style={{
-                              cursor: "pointer",
-                              display: "flex",
-                              alignItems: "center",
-                              paddingLeft: 20,
-                            }}
-                          >
-                            {isSelected ? (
-                              <FaCheck style={{ marginRight: 10 }} />
-                            ) : (
-                              ""
-                            )}
-                          </Text>
-                        </Flex>
-                        <Divider my={"md"} />
+                          </Grid.Col>
+                          <Grid.Col span={{
+                            base: 11,
+                            xs: 11,
+                            sm: 11,
+                            md: 11,
+                            lg: 11,
+                            xl: 11,
+                          }}>
+                            <Flex justify='space-between' align={"center"}>
+                              <Flex direction={'column'} align="flex-start" justify="flex-start">
+                                <Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
+                              </Flex>
+                              {isSelected ? (
+                                <FaCheck style={{ marginRight: 10 }} />
+                              ) : (
+                                ""
+                              )}
+                            </Flex>
+                          </Grid.Col>
+                        </Grid>
+                        <Box mt={10}>
+                          <Divider my={10} />
+                        </Box>
                       </Box>
                     );
                   })}
diff --git a/src/module/document/ui/navbar_document_division.tsx b/src/module/document/ui/navbar_document_division.tsx
index da1a501..2bbf0e7 100644
--- a/src/module/document/ui/navbar_document_division.tsx
+++ b/src/module/document/ui/navbar_document_division.tsx
@@ -521,28 +521,24 @@ export default function NavbarDocumentDivision() {
             {isMobile2 ? (
               <Breadcrumbs
                 separator={<GoChevronRight />}
-                separatorMargin="md"
-                mt="xs"
+                my="xs"
                 style={{ cursor: "pointer" }}
               >
                 {dataJalur.slice(0, 3).map((v, i) => {
                   return (
-                    <>
-                      <Box w={50}>
-                        <Text
-                          onClick={() => router.push("?path=" + v.id)}
-                          key={i}
-                          style={{
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                            maxWidth: "100%",
-                          }}
-                        >
-                          {v.name}
-                        </Text>
-                      </Box>
-                    </>
+                    <Text
+                      onClick={() => router.push("?path=" + v.id)}
+                      key={i}
+                      style={{
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        maxWidth: "100%",
+                      }}
+                      truncate={"end"}
+                    >
+                      {v.name}
+                    </Text>
                   );
                 })}
                 {dataJalur.length > 3 && (
@@ -574,8 +570,7 @@ export default function NavbarDocumentDivision() {
             ) : (
               <Breadcrumbs
                 separator={<GoChevronRight />}
-                separatorMargin="md"
-                mt="xs"
+                my="xs"
                 style={{ cursor: "pointer" }}
               >
                 {dataJalur.slice(0, 4).map((v, i) => {
diff --git a/src/module/project/ui/list_file_detail_project.tsx b/src/module/project/ui/list_file_detail_project.tsx
index 1f99e32..88ad231 100644
--- a/src/module/project/ui/list_file_detail_project.tsx
+++ b/src/module/project/ui/list_file_detail_project.tsx
@@ -145,6 +145,9 @@ export default function ListFileDetailProject() {
                           {item.extension == "png" && <BsFiletypePng size={30} />}
                           {item.extension == "jpg" && <BsFiletypeJpg size={30} />}
                           {item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
+                          {item.extension == "PNG" && <BsFiletypePng size={30} />}
+                          {item.extension == "JPG" && <BsFiletypeJpg size={30} />}
+                          {item.extension == "JPEG" && <BsFiletypeJpg size={30} />}
                           {item.extension == "heic" && <BsFiletypeHeic size={30} />}
                         </Grid.Col>
                         <Grid.Col