style : update style

Deskripsi:
- update calender
- update task

No Issue

src/module/calender/ui/drawer_detail_event.tsx

@@ -41,13 +41,17 @@ export default function DrawerDetailEvent({ idCalendar }: { idCalendar: string }
       <Stack pt={10}>
         <SimpleGrid
           cols={{ base: 3, sm: 3, lg: 3 }}
+          style={{
+            alignContent: 'flex-start',
+            alignItems: 'flex-start',
+          }}
         >
-          <Flex onClick={() => setModal(true)} justify={'center'} align={'center'} direction={'column'} >
+          <Flex onClick={() => router.push(`/division/${param.id}/calender/${param.detail}/add-member`)} justify={'center'} align={'center'} direction={'column'} >
             <Box>
-              <MdDelete size={30} color={tema.get().utama} />
+              <FaUsers size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text ta={"center"} c={tema.get().utama}>Hapus Acara</Text>
+              <Text c={tema.get().utama} ta={"center"}>Tambah Anggota</Text>
             </Box>
           </Flex>
           <Flex onClick={() => router.push(`/division/${param.id}/calender/update/${idCalendar}`)} justify={'center'} align={'center'} direction={'column'} >
@@ -58,12 +62,12 @@ export default function DrawerDetailEvent({ idCalendar }: { idCalendar: string }
               <Text c={tema.get().utama}>Edit Acara</Text>
             </Box>
           </Flex>
-          <Flex onClick={() => router.push(`/division/${param.id}/calender/${param.detail}/add-member`)} justify={'center'} align={'center'} direction={'column'} >
+          <Flex onClick={() => setModal(true)} justify={'center'} align={'center'} direction={'column'} >
             <Box>
-              <FaUsers size={30} color={tema.get().utama} />
+              <MdDelete size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text c={tema.get().utama} ta={"center"}>Tambah Anggota</Text>
+              <Text ta={"center"} c={tema.get().utama}>Hapus Acara</Text>
             </Box>
           </Flex>
         </SimpleGrid>

src/module/calender/ui/history_division_calender.tsx

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
 import { IDataCalender, IHistoryCalender } from '../lib/type_calender';
 import { funGetAllCalender, funGetHostory } from '../lib/api_calender';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import moment from 'moment';
 import "moment/locale/id";
 import _ from 'lodash';
@@ -33,10 +33,12 @@ export default function HistoryDivisionCalender() {
       setLoading(false)
     }
   }
-
   useShallowEffect(() => {
     getData()
   }, [searchQuery])
+
+  const isMobile = useMediaQuery('(max-width: 450px)'); 
+
   return (
     <Box>
       <LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Riwayat acara" menu />
@@ -93,14 +95,33 @@ export default function HistoryDivisionCalender() {
               :
               isData.map((v, i) => {
                 return (
-                  <Grid key={i} align='center'>
-                    <Grid.Col span={3}>
+                  <Grid key={i} 
+                  style={{
+                    alignContent: 'flex-start',
+                    alignItems: 'flex-start',
+                  }}
+                  >
+                    <Grid.Col span={{
+                      base: isMobile ? 4 : 3,
+                      sm: 3,
+                      xs:3,
+                      md: 3,
+                      lg: 3,
+                      xl: 3
+                    }}>
                       <Flex justify={"center"} direction={'column'}>
                         <Text ta={"center"} fz={20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text>
                         <Text ta={"center"} fz={15}>{moment(v.dateStart).format('dddd')}</Text>
                       </Flex>
                     </Grid.Col>
-                    <Grid.Col span={9}>
+                    <Grid.Col span={{
+                      base: isMobile ? 8 : 9,
+                      md: 9,
+                      lg: 9,
+                      xl: 9,
+                      sm: 9,
+                      xs:9
+                    }}>
                       {v.data.map((d, x) => {
                         return (
                           <Box mb={9} key={x}

src/module/task/ui/detail_list_tugas_task.tsx

@@ -175,9 +175,15 @@ export default function ListTugasDetailTask() {
             <Box>
                <Stack pt={10}>
                   <SimpleGrid
-                     cols={{ base: 3, sm: 3, lg: 3 }}
+                     cols={{ base: 2, sm: 3, lg: 3 }}
+                     style={{
+                        alignContent: 'flex-start',
+                        alignItems: 'flex-start',
+                      }}
                   >
-                     <Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} >
+                     <Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'}
+                     pb={20}
+                     >
                         <Box>
                            <AiOutlineFileDone size={30} color={tema.get().utama} />
                         </Box>

src/module/task/ui/navbar_detail_division_task.tsx

@@ -63,6 +63,10 @@ export default function NavbarDetailDivisionTask() {
                <Stack pt={10}>
                   <SimpleGrid
                      cols={{ base: 3, sm: 3, lg: 3 }}
+                     style={{
+                        alignContent: 'flex-start',
+                        alignItems: 'flex-start',
+                      }}
                   >
                      <Flex justify={'center'} align={'center'} direction={'column'}
                         style={{
@@ -71,6 +75,7 @@ export default function NavbarDetailDivisionTask() {
                         onClick={() => {
                            router.push(param.detail + '/add-task')
                         }}
+                        pb={20}
                      >
                         <Box>
                            <IoAddCircle size={30} color={tema.get().utama} />