From 240e5cd74a6193bc5713cb0dc6b61660a3205677 Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Wed, 4 Sep 2024 11:25:24 +0800
Subject: [PATCH] style : update style

Deskripsi:
- update division
- update documents
- update layout

No Issue
---
 src/module/_global/layout/layout_drawer.tsx   |  2 +-
 src/module/division_new/ui/list_document.tsx  |  6 +-
 src/module/division_new/ui/list_task.tsx      | 15 ++---
 .../document/ui/navbar_document_division.tsx  | 55 +++++++++++++------
 4 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/src/module/_global/layout/layout_drawer.tsx b/src/module/_global/layout/layout_drawer.tsx
index 2ec201d..20052b4 100644
--- a/src/module/_global/layout/layout_drawer.tsx
+++ b/src/module/_global/layout/layout_drawer.tsx
@@ -5,7 +5,7 @@ import { WARNA } from '../fun/WARNA';
 export default function LayoutDrawer({ opened, onClose, title, children, size }: { children: React.ReactNode, opened: boolean, size?: string, onClose: () => void, title: React.ReactNode }) {
   return (
     <Box>
-      <Drawer opened={opened} title={<Text c={WARNA.biruTua} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={(size == 'lg') ? '80%' : '35%'}
+      <Drawer opened={opened} title={<Text c={WARNA.biruTua} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={(size == 'lg') ? '80%' : '40%'}
         styles={{
           content: {
             backgroundColor: "white",
diff --git a/src/module/division_new/ui/list_document.tsx b/src/module/division_new/ui/list_document.tsx
index 647dbdd..055fbbb 100644
--- a/src/module/division_new/ui/list_document.tsx
+++ b/src/module/division_new/ui/list_document.tsx
@@ -67,14 +67,14 @@ export default function ListDocumentOnDetailDivision() {
                data.map((v) =>
                   <Carousel.Slide key={v.id}>
                      <UnstyledButton onClick={() => router.push(`/document`)}>
-                        <Stack gap={0}>
+                        <Stack gap={0} w={200}>
                            <Paper withBorder shadow="sm" radius={12} >
                               <Center p={"md"}>
                                  <Image w={"75"} src={(v.extension == "pdf") ? iconContainer(ICON.PDF) : iconContainer(ICON.IMAGE)} alt="image" />
                               </Center>
                            </Paper>
-                           <Box p={"sm"}>
-                              <Text c={"dimmed"} truncate="end" ta={"center"}>{v.name + '.' + v.extension}</Text>
+                           <Box>
+                              <Text c={"dimmed"}ta={"center"} lineClamp={1}>{v.name + '.' + v.extension}</Text>
                            </Box>
                         </Stack>
                      </UnstyledButton>
diff --git a/src/module/division_new/ui/list_task.tsx b/src/module/division_new/ui/list_task.tsx
index b85e699..01d2105 100644
--- a/src/module/division_new/ui/list_task.tsx
+++ b/src/module/division_new/ui/list_task.tsx
@@ -9,6 +9,7 @@ import { CiClock2 } from "react-icons/ci";
 import { funGetDetailDivisionById } from "../lib/api_division";
 import { useState } from "react";
 import { IDataTaskOnDetailDivision } from "../lib/type_division";
+import _ from "lodash";
 
 
 export default function ListTaskOnDetailDivision() {
@@ -65,20 +66,12 @@ export default function ListTaskOnDetailDivision() {
             {data.map((v, i) =>
                <Carousel.Slide key={v.id}>
                   <Box p={20} w={{ base: 300, md: 400 }} onClick={() => router.push(`/task/${v.id}`)} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
-                     <Text fw={'bold'} c={WARNA.bgWhite} truncate="end">{v.title}</Text>
-                     <Group justify="space-between" mt={20} c={'#aeaeae'}>
-                        <Group gap={5} align="center">
+                     <Text fw={'bold'} c={WARNA.bgWhite} lineClamp={1}>{_.startCase(v.title)}</Text>
+                     <Group justify="space-between" mt={20}>
+                        <Group gap={5} align="center" c={"#CFCDCD"}>
                            <CiClock2 size={18} />
                            <Text fz={13}>{v.dateStart}</Text>
                         </Group >
-                        <Group gap={5} align="center">
-                           {/* <Avatar.Group>
-                              <Avatar>
-                                 <MdAccountCircle size={32} color={WARNA.biruTua} />
-                              </Avatar>
-                              <Avatar>+{v.jumlah}</Avatar>
-                           </Avatar.Group> */}
-                        </Group>
                      </Group>
                   </Box>
                </Carousel.Slide>
diff --git a/src/module/document/ui/navbar_document_division.tsx b/src/module/document/ui/navbar_document_division.tsx
index fee9b2e..0a067d5 100644
--- a/src/module/document/ui/navbar_document_division.tsx
+++ b/src/module/document/ui/navbar_document_division.tsx
@@ -308,7 +308,7 @@ export default function NavbarDocumentDivision() {
         }
       />
       <Box>
-        <Box p={20} pb={60}>
+        <Box p={20} pb={100}>
           <Box>
             <Breadcrumbs separator={<GoChevronRight />} separatorMargin="md" mt="xs" style={{ cursor: 'pointer' }}>
               {
@@ -327,12 +327,14 @@ export default function NavbarDocumentDivision() {
             return (
               <Box key={i}>
                 <Box mt={10} mb={10}>
-                  <Grid align='center' >
-                    <Grid.Col span={10}
+                  <Grid align='center'
+
+                  >
+                    <Grid.Col span={2}
                       onClick={() => {
                         if (v.category == "FOLDER" && selectedFiles.length == 0 && !dariSelectAll) {
                           router.push('?path=' + v.id)
-                        } else if(v.category == "FILE" && selectedFiles.length == 0 && !dariSelectAll){
+                        } else if (v.category == "FILE" && selectedFiles.length == 0 && !dariSelectAll) {
                           setExtension(v.extension)
                           setIdData(v.id)
                           setOpenModalView(true)
@@ -340,41 +342,60 @@ export default function NavbarDocumentDivision() {
 
                       }}
                     >
-                      <Group gap={20}>
+                      <Group>
                         <Box>
                           {
                             (v.share) ?
                               <Indicator offset={15} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaShare />} size={25}>
                                 {
                                   (v.category == "FOLDER") ?
-                                    <FcFolder size={60} /> :
+                                    <FcFolder size={50} /> :
                                     (v.extension == "pdf" || v.extension == "csv") ?
-                                      <FcDocument size={60} /> :
-                                      <FcImageFile size={60} />
+                                      <FcDocument size={50} /> :
+                                      <FcImageFile size={50} />
                                 }
                               </Indicator>
                               :
                               <>
                                 {
                                   (v.category == "FOLDER") ?
-                                    <FcFolder size={60} /> :
+                                    <FcFolder size={50} /> :
                                     (v.extension == "pdf" || v.extension == "csv") ?
-                                      <FcDocument size={60} /> :
-                                      <FcImageFile size={60} />
+                                      <FcDocument size={50} /> :
+                                      <FcImageFile size={50} />
                                 }
                               </>
 
                           }
 
                         </Box>
-                        <Flex direction={'column'}>
-                          <Text>{(v.category == "FOLDER") ? v.name : v.name + '.' + v.extension}</Text>
-                          <Text fz={10}>{v.updatedAt}</Text>
-                        </Flex>
                       </Group>
                     </Grid.Col>
-                    <Grid.Col span={2}>
-                      <Group justify='flex-end'>
+                    <Grid.Col span={10}>
+                      <Group justify='space-between' align='center'>
+                        <Flex direction={'column'}
+                          onClick={() => {
+                            if (v.category == "FOLDER" && selectedFiles.length == 0 && !dariSelectAll) {
+                              router.push('?path=' + v.id)
+                            } else if (v.category == "FILE" && selectedFiles.length == 0 && !dariSelectAll) {
+                              setExtension(v.extension)
+                              setIdData(v.id)
+                              setOpenModalView(true)
+                            }
+
+                          }}
+                        >
+                          <Box w={{
+                            base: 230,
+                            xl: 380,
+                            md: 380,
+                            sm: 380,
+                            xs: 380
+                          }}>
+                            <Text lineClamp={1}>{(v.category == "FOLDER") ? v.name : v.name + '.' + v.extension}</Text>
+                            <Text fz={10}>{v.updatedAt}</Text>
+                          </Box>
+                        </Flex>
                         <Checkbox
                           color="teal"
                           radius="lg"