From 75c5a0039d7a96a9da3f9a048167de74fce33129 Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Mon, 30 Sep 2024 11:29:33 +0800
Subject: [PATCH] style : update style

---
 .../calender/ui/detail_event_division.tsx     | 17 ++++-----
 .../division_new/ui/information_division.tsx  |  9 ++---
 .../ui/list_anggota_detail_project.tsx        | 34 +++++++++---------
 .../task/ui/detail_list_anggota_task.tsx      | 36 +++++++++----------
 4 files changed, 47 insertions(+), 49 deletions(-)

diff --git a/src/module/calender/ui/detail_event_division.tsx b/src/module/calender/ui/detail_event_division.tsx
index 249dcf1..8115cbc 100644
--- a/src/module/calender/ui/detail_event_division.tsx
+++ b/src/module/calender/ui/detail_event_division.tsx
@@ -320,7 +320,7 @@ export default function DetailEventDivision() {
                     <Box
                       key={i}
                     >
-                      <SkeletonList/>
+                      <SkeletonList />
                     </Box>
                   ))}
               </Box>
@@ -365,7 +365,7 @@ export default function DetailEventDivision() {
                                       lg: 1,
                                       xl: 1,
                                     }}>
-                                      <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
+                                      <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
                                     </Grid.Col>
                                     <Grid.Col span={{
                                       base: 11,
@@ -375,14 +375,11 @@ export default function DetailEventDivision() {
                                       lg: 11,
                                       xl: 11,
                                     }}>
-                                      <Flex justify='space-between' align={"center"}>
-                                        <Flex direction={'column'} align="flex-start" justify="flex-start">
-                                          <Text lineClamp={1} pl={isMobile ? 35 : 40}>{v.name}</Text>
-                                          <Text c={"#5A687D"} fz={14} lineClamp={1} pl={isMobile ? 35 : 40}>
-                                            {v.email}
-                                          </Text>
-                                        </Flex>
-                                      </Flex>
+                                      <Text lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 15 : 16}>{v.name}</Text>
+                                      <Text c={"#5A687D"} truncate="end" fz={isMobile ? 12 : 14} pl={isMobile2 ? 40 : 30}
+                                        style={{
+                                          overflowWrap: "break-word"
+                                        }}>{v.email}</Text>
                                     </Grid.Col>
                                   </Grid>
                                   <Box mt={10}>
diff --git a/src/module/division_new/ui/information_division.tsx b/src/module/division_new/ui/information_division.tsx
index 5f014cf..9c8119e 100644
--- a/src/module/division_new/ui/information_division.tsx
+++ b/src/module/division_new/ui/information_division.tsx
@@ -31,6 +31,7 @@ export default function InformationDivision() {
   const roleLogin = useHookstate(globalRole)
   const [isAdmin, setAdmin] = useState(false)
   const isMobile = useMediaQuery('(max-width: 455px)');
+  const isMobile2 = useMediaQuery("(max-width: 438px)");
   const tema = useHookstate(TEMA)
 
   async function getOneData() {
@@ -164,8 +165,8 @@ export default function InformationDivision() {
 
                 ((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
                   <Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
-                    <Avatar size={isMobile ? 'md' : 'lg'}>
-                      <AiOutlineUserAdd size={isMobile ? 25 : 30} color={tema.get().utama} />
+                    <Avatar size={'lg'}>
+                      <AiOutlineUserAdd size={30} color={tema.get().utama} />
                     </Avatar>
                     <Text fz={isMobile ? 14 : 16}>Tambah Anggota</Text>
                   </Group>
@@ -194,10 +195,10 @@ export default function InformationDivision() {
                           }}
                         >
                           <Grid.Col span={1}>
-                              <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
+                              <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
                           </Grid.Col>
                           <Grid.Col span={8}>
-                                <Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile ? 25 : 30} fz={isMobile ? 14 : 16}>
+                                <Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16}>
                                   {v.name}
                                 </Text>
                           </Grid.Col>
diff --git a/src/module/project/ui/list_anggota_detail_project.tsx b/src/module/project/ui/list_anggota_detail_project.tsx
index a02ab60..ed459c4 100644
--- a/src/module/project/ui/list_anggota_detail_project.tsx
+++ b/src/module/project/ui/list_anggota_detail_project.tsx
@@ -1,6 +1,6 @@
 'use client'
-import { globalRole, LayoutDrawer, SkeletonSingle, TEMA } from '@/module/_global';
-import { Avatar, Box, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { globalRole, LayoutDrawer, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
+import { Avatar, Box, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
 import React, { useState } from 'react';
 import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
 import toast from 'react-hot-toast';
@@ -24,6 +24,7 @@ export default function ListAnggotaDetailProject() {
   const roleLogin = useHookstate(globalRole)
   const tema = useHookstate(TEMA)
   const [reason, setReason] = useState("")
+  const isMobile2 = useMediaQuery("(max-width: 438px)");
 
   async function getOneDataCancel() {
     try {
@@ -83,7 +84,7 @@ export default function ListAnggotaDetailProject() {
       toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
     }
   }
-const isMobile = useMediaQuery('(max-width: 369px)');  
+  const isMobile = useMediaQuery('(max-width: 369px)');
 
   return (
     <Box pt={20}>
@@ -107,7 +108,7 @@ const isMobile = useMediaQuery('(max-width: 369px)');
                   .fill(null)
                   .map((_, i) => (
                     <Box key={i}>
-                      <SkeletonSingle />
+                      <SkeletonList />
                     </Box>
                   ))
                 :
@@ -123,19 +124,15 @@ const isMobile = useMediaQuery('(max-width: 369px)');
                               : setOpenDrawer(false)
                           }}
                         >
-                          <Grid.Col span={9}>
-                            <Group>
-                              <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
-                              <Box w={{
-                                base: isMobile ? 130 : 140,
-                                xl: 270
-                              }}>
-                                <Flex direction={'column'} align="flex-start" justify="flex-start">
-                                  <Text lineClamp={1} fz={isMobile ? 14 : 16}>{v.name}</Text>
-                                  <Text c={"#5A687D"} fz={isMobile ? 10 : 14} lineClamp={1}>{v.email}</Text>
-                                </Flex>
-                              </Box>
-                            </Group>
+                          <Grid.Col span={1}>
+                            <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
+                          </Grid.Col>
+                          <Grid.Col span={8}>
+                              <Text lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 15 : 16}>{v.name}</Text>
+                              <Text c={"#5A687D"} truncate="end" fz={isMobile ? 12 : 14} pl={isMobile2 ? 40 : 30}
+                                style={{
+                                  overflowWrap: "break-word"
+                                }}>{v.email}</Text>
                           </Grid.Col>
                           <Grid.Col span={3}>
                             <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
@@ -143,6 +140,9 @@ const isMobile = useMediaQuery('(max-width: 369px)');
                             </Text>
                           </Grid.Col>
                         </Grid>
+                        <Box mt={10}>
+                          <Divider my={10} />
+                        </Box>
                       </Box>
                     );
                   })}
diff --git a/src/module/task/ui/detail_list_anggota_task.tsx b/src/module/task/ui/detail_list_anggota_task.tsx
index 71c1357..2751d75 100644
--- a/src/module/task/ui/detail_list_anggota_task.tsx
+++ b/src/module/task/ui/detail_list_anggota_task.tsx
@@ -1,6 +1,6 @@
 'use client'
-import { globalRole, LayoutDrawer, SkeletonSingle, TEMA } from "@/module/_global";
-import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid } from "@mantine/core";
+import { globalRole, LayoutDrawer, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
+import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid, Divider } from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
@@ -25,6 +25,7 @@ export default function ListAnggotaDetailTask() {
    const roleLogin = useHookstate(globalRole)
    const adminLogin = useHookstate(globalIsAdminDivision)
    const isMobile = useMediaQuery('(max-width: 369px)');
+   const isMobile2 = useMediaQuery("(max-width: 438px)");
    const tema = useHookstate(TEMA)
    const [reason, setReason] = useState("")
 
@@ -109,7 +110,7 @@ export default function ListAnggotaDetailTask() {
                            .fill(null)
                            .map((_, i) => (
                               <Box key={i}>
-                                 <SkeletonSingle />
+                                 <SkeletonList />
                               </Box>
                            ))
                         :
@@ -121,23 +122,19 @@ export default function ListAnggotaDetailTask() {
                                        onClick={() => {
                                           setDataChoose({ id: v.idUser, name: v.name })
                                           reason == null ?
-                                          setOpenDrawer(true)
-                                          : setOpenDrawer(false)
+                                             setOpenDrawer(true)
+                                             : setOpenDrawer(false)
                                        }}
                                     >
-                                       <Grid.Col span={9}>
-                                          <Group>
-                                             <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
-                                             <Box w={{
-                                                base: isMobile ? 130 : 140,
-                                                xl: 270
-                                             }}>
-                                                <Flex direction={'column'} align="flex-start" justify="flex-start">
-                                                   <Text lineClamp={1} fz={isMobile ? 14 : 16}>{v.name}</Text>
-                                                   <Text c={"#5A687D"} lineClamp={1} fz={isMobile ? 10 : 14}>{v.email}</Text>
-                                                </Flex>
-                                             </Box>
-                                          </Group>
+                                       <Grid.Col span={1}>
+                                          <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
+                                       </Grid.Col>
+                                       <Grid.Col span={8}>
+                                          <Text lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 15 : 16}>{v.name}</Text>
+                                          <Text c={"#5A687D"} truncate="end" fz={isMobile ? 12 : 14} pl={isMobile2 ? 40 : 30}
+                                             style={{
+                                                overflowWrap: "break-word"
+                                             }}>{v.email}</Text>
                                        </Grid.Col>
                                        <Grid.Col span={3}>
                                           <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
@@ -145,6 +142,9 @@ export default function ListAnggotaDetailTask() {
                                           </Text>
                                        </Grid.Col>
                                     </Grid>
+                                    <Box mt={10}>
+                                       <Divider my={10} />
+                                    </Box>
                                  </Box>
                               );
                            })}