style : update style

src/module/discussion/ui/list_discussion.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { TEMA} from "@/module/_global";
+import { TEMA } from "@/module/_global";
 import { Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
@@ -106,15 +106,30 @@ export default function ListDiscussion({ id }: { id: string }) {
                         <Grid align="center" mt={20} onClick={() => {
                            router.push(`/division/${param.id}/discussion/${v.id}`)
                         }}>
-                           <Grid.Col span={2}>
+                           <Grid.Col span={{
+                              sm: 2,
+                              lg: 2,
+                              xl: 2,
+                              md: 2,
+                              xs: 1,
+                              base: 2
+                           }}>
                               <Avatar alt="it's me" src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} size="lg" />
                            </Grid.Col>
-                           <Grid.Col span={6}>
+                           <Grid.Col span={{
+                              sm: 6,
+                              lg: 6,
+                              xl: 6,
+                              md: 6,
+                              xs: 7,
+                              base: 6
+                           }}>
                               <Box pl={{
                                  sm: 0,
                                  lg: 0,
                                  xl: 0,
                                  md: 0,
+                                 xs: 40,
                                  base: 10
                               }}>
                                  <Text c={tema.get().utama} fw={"bold"} lineClamp={1}>

src/module/division_new/ui/feature_detail_division.tsx

@@ -40,7 +40,7 @@ export default function FeatureDetailDivision() {
     fetchData()
   }, [param.id])
   const isMobile = useMediaQuery('(max-width: 399px)');
-  const isMobile2 = useMediaQuery('(max-width: 369px)');
+  const isMobile2 = useMediaQuery('(max-width: 411px)');
 
   return (
     <Box pt={10}>
@@ -58,7 +58,12 @@ export default function FeatureDetailDivision() {
           padding: 10
         }} onClick={() => router.push(param.id + '/task?status=0')}>
           <Grid justify='center' align='center'>
-            <Grid.Col span={"auto"}>
+            <Grid.Col span={{
+              base: isMobile2 ? 4 : 3.5,
+              xs: 3,
+              sm: 3,
+              md: 3,
+            }}>
               <ActionIcon variant="filled"
                 size={isMobile2 ? "lg" : "xl"}
                 aria-label="Gradient action icon"
@@ -68,7 +73,13 @@ export default function FeatureDetailDivision() {
                 <LuClipboardEdit size={isMobile2 ? 20 : 25} color={tema.get().utama} />
               </ActionIcon>
             </Grid.Col>
-            <Grid.Col span={{ base: 7, md: 9 }}>
+            <Grid.Col
+              span={{
+                base: isMobile2 ? 8 : 7.5,
+                xs: 9,
+                md: 9,
+                sm: 9,
+              }}>
               <Text fz={15} c={tema.get().utama} fw={"bold"}>Tugas</Text>
               <Group justify='space-between' align='center'>
                 <Text fz={10} c={"gray"}>{feature?.tugas} Tugas</Text>
@@ -83,7 +94,12 @@ export default function FeatureDetailDivision() {
           padding: 10
         }} onClick={() => router.push(param.id + '/document')}>
           <Grid justify='center' align='center'>
-            <Grid.Col span={"auto"}>
+            <Grid.Col span={{
+              base: isMobile2 ? 4 : 3.5,
+              xs: 3,
+              sm: 3,
+              md: 3,
+            }}>
               <ActionIcon variant="filled"
                 size={isMobile2 ? "lg" : "xl"}
                 aria-label="Gradient action icon"
@@ -93,7 +109,12 @@ export default function FeatureDetailDivision() {
                 <BsFileEarmarkText size={isMobile2 ? 20 : 25} color={tema.get().utama} />
               </ActionIcon>
             </Grid.Col>
-            <Grid.Col span={{ base: 7, md: 9 }}>
+            <Grid.Col span={{
+              base: isMobile2 ? 8 : 7.5,
+              xs: 9,
+              md: 9,
+              sm: 9,
+            }}>
               <Text fz={15} c={tema.get().utama} fw={"bold"}>Dokumen</Text>
               <Group justify='space-between' align='center'>
                 <Text fz={10} c={"gray"}>{feature?.dokumen} File</Text>
@@ -108,7 +129,12 @@ export default function FeatureDetailDivision() {
           padding: 10
         }} onClick={() => router.push(param.id + '/discussion')}>
           <Grid justify='center' align='center'>
-            <Grid.Col span={"auto"}>
+            <Grid.Col span={{
+              base: isMobile2 ? 4 : 3.5,
+              xs: 3,
+              sm: 3,
+              md: 3,
+            }}>
               <ActionIcon variant="filled"
                 size={isMobile2 ? "lg" : "xl"}
                 aria-label="Gradient action icon"
@@ -118,7 +144,12 @@ export default function FeatureDetailDivision() {
                 <GoCommentDiscussion size={isMobile2 ? 20 : 25} color={tema.get().utama} />
               </ActionIcon>
             </Grid.Col>
-            <Grid.Col span={{ base: 7, md: 9 }}>
+            <Grid.Col span={{
+              base: isMobile2 ? 8 : 7.5,
+              xs: 9,
+              md: 9,
+              sm: 9,
+            }}>
               <Text fz={15} c={tema.get().utama} fw={"bold"}>Diskusi</Text>
               <Group justify='space-between' align='center'>
                 <Text fz={10} c={"gray"}>{feature?.diskusi} Diskusi</Text>
@@ -133,7 +164,12 @@ export default function FeatureDetailDivision() {
           padding: 10
         }} onClick={() => router.push(param.id + '/calender')}>
           <Grid justify='center' align='center'>
-            <Grid.Col span={"auto"}>
+            <Grid.Col span={{
+              base: isMobile2 ? 4 : 3.5,
+              xs: 3,
+              sm: 3,
+              md: 3,
+            }}>
               <ActionIcon variant="filled"
                 size={isMobile2 ? "lg" : "xl"}
                 aria-label="Gradient action icon"
@@ -143,7 +179,12 @@ export default function FeatureDetailDivision() {
                 <IoCalendarOutline size={isMobile2 ? 20 : 25} color={tema.get().utama} />
               </ActionIcon>
             </Grid.Col>
-            <Grid.Col span={{ base: 7, md: 9 }}>
+            <Grid.Col span={{
+              base: isMobile2 ? 8 : 7.5,
+              xs: 9,
+              md: 9,
+              sm: 9,
+            }}>
               <Text fz={15} c={tema.get().utama} fw={"bold"}>Kalender</Text>
               <Group justify='space-between' align='center'>
                 <Text fz={10} c={"gray"}>{feature?.kalender} Acara</Text>

src/module/division_new/ui/list_division.tsx

@@ -7,7 +7,7 @@ import { HiMenu } from 'react-icons/hi';
 import { HiMagnifyingGlass, HiMiniUserGroup, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
 import { MdAccountCircle } from 'react-icons/md';
 import DrawerDivision from './drawer_division';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { IDataDivison } from '../lib/type_division';
 import { funGetAllDivision } from '../lib/api_division';
 import toast from 'react-hot-toast';
@@ -27,6 +27,8 @@ export default function ListDivision() {
   const roleLogin = useHookstate(globalRole)
   const tema = useHookstate(TEMA)
 
+  const paddingLift = useMediaQuery('(max-width: 505px)')
+
 
   const handleList = () => {
     setIsList(!isList)
@@ -131,12 +133,16 @@ export default function ListDivision() {
               data?.map((v: any, i: any) => {
                 return (
                   <Box key={i}>
-                    <Grid align='center'>
+                    <Grid align='center' onClick={() => router.push(`/division/${v.id}`)}>
                       <Grid.Col span={{
-                        base: 2,
+                        base: 1,
+                        xs: 1,
+                        sm: 1,
+                        md: 1,
+                        lg: 1,
                         xl: 1
                       }}>
-                        <Group onClick={() => router.push(`/division/${v.id}`)}>
+                        <Group >
                           <Center>
                             <ActionIcon
                               variant="gradient"
@@ -156,15 +162,19 @@ export default function ListDivision() {
                         </Group>
                       </Grid.Col>
                       <Grid.Col span={{
-                        base: 10,
+                        base: 11,
-                        xl: 11
+                        xs: 11,
+                        sm: 11,
+                        md: 11,
+                        lg: 11,
+                        xl: 11,
                       }}>
                         <Box>
                           <Box w={{
                             base: 280,
                             xl: 430
                           }}>
-                            <Text truncate="end" pl={20}>
+                            <Text truncate="end" pl={paddingLift ? 30 : 20}>
                               {v.name}
                             </Text>
                           </Box>

src/module/project/ui/list_project.tsx

@@ -55,6 +55,8 @@ export default function ListProject() {
   }
   const isMobile = useMediaQuery('(max-width: 369px)');
 
+  const paddingLift = useMediaQuery('(max-width: 505px)')
+
   return (
     <Box mt={20}>
       <Grid justify='center' align='center'>
@@ -104,12 +106,16 @@ export default function ListProject() {
             {isData.map((v, i) => {
               return (
                 <Box key={i}>
-                  <Grid align='center'>
+                  <Grid align='center' onClick={() => router.push(`/project/${v.id}`)}>
                     <Grid.Col span={{
-                      base: 2,
+                      base: 1,
+                      xs: 1,
+                      sm: 1,
+                      md: 1,
+                      lg: 1,
                       xl: 1
                     }}>
-                      <Group onClick={() => router.push(`/project/${v.id}`)}>
+                      <Group >
                         <Center>
                           <ActionIcon
                             variant="gradient"
@@ -129,8 +135,12 @@ export default function ListProject() {
                       </Group>
                     </Grid.Col>
                     <Grid.Col span={{
-                      base: 10,
+                      base: 11,
-                      xl: 11
+                      xs: 11,
+                      sm: 11,
+                      md: 11,
+                      lg: 11,
+                      xl: 11,
                     }}>
                       <Group justify='space-between' align='center'>
                         <Box>
@@ -138,7 +148,7 @@ export default function ListProject() {
                             base: isMobile ? 200 : 230,
                             xl: 430
                           }}>
-                            <Text truncate="end" pl={20}>
+                            <Text truncate="end" pl={paddingLift ? 30 : 20}>
                               {v.title}
                             </Text>
                           </Box>

src/module/project/ui/tab_project.tsx

@@ -57,9 +57,18 @@ export default function TabProject() {
         } />
 
       <Box p={20}>
-        <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+        <Box
-          {dataStatus.map((item, index) => (
+          style={{
-            <Carousel.Slide key={index}>
+            display: "flex",
+            gap: "20px",
+            position: "relative",
+            overflowX: "scroll",
+            scrollbarWidth: "none",
+            maxWidth: "550px"
+          }}
+        >
+          <Flex gap={"md"} justify={"space-between"}>
+            {dataStatus.map((item, index) => (
               <Button
                 variant="subtle"
                 color={
@@ -67,6 +76,7 @@ export default function TabProject() {
                     ? "white"
                     : tema.get().utama
                 }
+                key={index}
                 onClick={() => { router.push("?status=" + item.id + "&group=" + group) }}
                 defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
                 radius={"xl"}
@@ -75,91 +85,14 @@ export default function TabProject() {
                     ? tema.get().utama
                     : "transparent"
                 }
+                leftSection={item.icon}
               >
-                {item.icon}
+                {item.title}
-                <Box ml={10}>{item.title}</Box>
               </Button>
-            </Carousel.Slide>
+            ))}
-          ))}
+          </Flex>
-        </Carousel>
+        </Box>
-        {/* <Flex justify={"center"} gap={'sm'} align={'center'} mt={10}>
-          {dataStatus.map((v, i) => (
-            <Box key={i}>
-              <Box w={6} h={6} bg={
-                status == v.id
-                  ? tema.get().utama
-                  : "#B0AEAE"
-              } style={{
-                borderRadius: 100
-              }} />
-            </Box>
-          ))}
-        </Flex> */}
         <ListProject />
-        {/* <Tabs variant="pills" radius="md" defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}>
-          <SimpleGrid
-            cols={{ base: 2, sm: 2, lg: 4 }}
-          >
-            <Tabs.Tab value="0"
-              leftSection={<TbClockPause style={iconStyle} />}
-              onClick={() => { router.push("?status=0&group=" + group) }}
-              color={tema.get().utama}
-            >
-              Segera
-            </Tabs.Tab>
-            <Tabs.Tab value="1"
-              leftSection={<RiProgress3Line style={iconStyle} />}
-              onClick={() => { router.push("?status=1&group=" + group) }}
-              color={tema.get().utama}
-            >
-              Dikerjakan
-            </Tabs.Tab>
-            <Tabs.Tab value="2"
-              leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}
-              onClick={() => { router.push("?status=2&group=" + group) }}
-              color={tema.get().utama}>
-              Selesai
-            </Tabs.Tab>
-            <Tabs.Tab value="3"
-              leftSection={<IoCloseCircleOutline style={iconStyle} />}
-              onClick={() => { router.push("?status=3&group=" + group) }}
-              color={tema.get().utama}>
-              Batal
-            </Tabs.Tab>
-          </SimpleGrid>
-          <ListProject />
-        </Tabs> */}
-        {/* <Tabs variant="pills" radius="xl" defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}>
-          <Tabs.List grow justify='center'>
-            <Tabs.Tab value="0" w={"23%"}
-              leftSection={<TbClockPause style={iconStyle} />}
-              onClick={() => { router.push("?status=0&group=" + group) }}
-              color={tema.get().utama}
-            >
-              Segera
-            </Tabs.Tab>
-            <Tabs.Tab value="1" w={"28%"}
-              leftSection={<RiProgress3Line style={iconStyle} />}
-              onClick={() => { router.push("?status=1&group=" + group) }}
-              color={tema.get().utama}
-            >
-              Dikerjakan
-            </Tabs.Tab>
-            <Tabs.Tab value="2" w={"23%"}
-              leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}
-              onClick={() => { router.push("?status=2&group=" + group) }}
-              color={tema.get().utama}>
-              Selesai
-            </Tabs.Tab>
-            <Tabs.Tab value="3" w={"20%"}
-              leftSection={<IoCloseCircleOutline style={iconStyle} />}
-              onClick={() => { router.push("?status=3&group=" + group) }}
-              color={tema.get().utama}>
-              Batal
-            </Tabs.Tab>
-          </Tabs.List>
-          <ListProject />
-        </Tabs> */}
 
       </Box>
 

src/module/task/ui/list_division_task.tsx

@@ -7,7 +7,7 @@ import { MdAccountCircle } from "react-icons/md";
 import { IDataTask } from "../lib/type_task";
 import { funGetAllTask } from "../lib/api_task";
 import toast from "react-hot-toast";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { useHookstate } from "@hookstate/core";
 
@@ -21,6 +21,7 @@ export default function ListDivisionTask() {
    const [searchQuery, setSearchQuery] = useState('')
    const [loading, setLoading] = useState(true);
    const tema = useHookstate(TEMA)
+   const paddingLift = useMediaQuery('(max-width: 505px)')
 
    const handleList = () => {
       setIsList(!isList)
@@ -102,7 +103,11 @@ export default function ListDivisionTask() {
                         <Box key={i}>
                            <Grid align='center'>
                               <Grid.Col span={{
-                                 base: 2,
+                                 base: 1,
+                                 xs: 1,
+                                 sm: 1,
+                                 md: 1,
+                                 lg: 1,
                                  xl: 1
                               }}>
                                  <Group onClick={() => router.push(`task/${v.id}`)}>
@@ -125,15 +130,19 @@ export default function ListDivisionTask() {
                                  </Group>
                               </Grid.Col>
                               <Grid.Col span={{
-                                 base: 10,
+                                 base: 11,
-                                 xl: 11
+                                 xs: 11,
+                                 sm: 11,
+                                 md: 11,
+                                 lg: 11,
+                                 xl: 11,
                               }}>
                                  <Box>
                                     <Box w={{
                                        base: 280,
                                        xl: 430
                                     }}>
-                                       <Text truncate="end" pl={20}>
+                                       <Text truncate="end" pl={paddingLift ? 30 : 20}>
                                           {v.title}
                                        </Text>
                                     </Box>

src/module/task/ui/tabs_division_task.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, rem, Tabs } from "@mantine/core";
+import { Box, Button, Flex, rem, Tabs } from "@mantine/core";
 import { IoIosCheckmarkCircleOutline } from "react-icons/io";
 import { IoCloseCircleOutline } from "react-icons/io5";
 import { RiProgress3Line } from "react-icons/ri";
@@ -42,60 +42,40 @@ export default function TabsDivisionTask() {
 
    return (
       <Box p={20}>
-         {/* <Tabs variant="pills" color='#FF9861' radius="xl" defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}>
+         <Box
-            <Tabs.List grow bg={"white"} style={{
+          style={{
-               border: `1px solid ${"#EDEDED"}`,
+            display: "flex",
-               padding: 5,
+            gap: "20px",
-               borderRadius: 100
+            position: "relative",
-            }}>
+            overflowX: "scroll",
-               <Tabs.Tab value="0" w={"23%"}
+            scrollbarWidth: "none",
-                  leftSection={<TbClockPause style={iconStyle} />}
+            maxWidth: "550px"
-                  onClick={() => { router.push("?status=0") }}>
+          }}
-                  Segera
+        >
-               </Tabs.Tab>
+          <Flex gap={"md"} justify={"space-between"}>
-               <Tabs.Tab value="1" w={"28%"}
-                  leftSection={<RiProgress3Line style={iconStyle} />}
-                  onClick={() => { router.push("?status=1") }}>
-                  Dikerjakan
-               </Tabs.Tab>
-               <Tabs.Tab value="2" w={"23%"}
-                  leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}
-                  onClick={() => { router.push("?status=2") }}>
-                  Selesai
-               </Tabs.Tab>
-               <Tabs.Tab value="3" w={"20%"}
-                  leftSection={<IoCloseCircleOutline style={iconStyle} />}
-                  onClick={() => { router.push("?status=3") }}>
-                  Batal
-               </Tabs.Tab>
-            </Tabs.List>
-            <ListDivisionTask />
-         </Tabs> */}
-         <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
             {dataStatus.map((item, index) => (
-               <Carousel.Slide key={index}>
+              <Button
-                  <Button
+              variant="subtle"
-                     variant="subtle"
+              color={
-                     color={
+                 status == item.id
-                        status == item.id
+                    ? "white"
-                           ? "white"
+                    : (status == null && item.id == "0") ? "white" : tema.get().utama
-                           : (status == null && item.id == "0") ? "white" : tema.get().utama
+              }
-                     }
+              onClick={() => { router.push("?status=" + item.id) }}
-                     onClick={() => { router.push("?status=" + item.id) }}
+              defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
-                     defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
+              radius={"xl"}
-                     radius={"xl"}
+              bg={
-                     bg={
+                 status == item.id
-                        status == item.id
+                    ? tema.get().bgFiturDivisi
-                           ? tema.get().bgFiturDivisi
+                    : (status == null && item.id == "0") ? tema.get().bgFiturDivisi : "transparent"
-                           : (status == null && item.id == "0") ? tema.get().bgFiturDivisi : "transparent"
+              }
-                     }
+              leftSection={item.icon}
-                  >
+           >
-                     {item.icon}
+                {item.title}
-                     <Box ml={10}>{item.title}</Box>
+              </Button>
-                  </Button>
-               </Carousel.Slide>
             ))}
-         </Carousel>
+          </Flex>
+        </Box>
          <ListDivisionTask />
       </Box>
    )