style : update style

src/app/api/announcement/route.ts

@@ -89,7 +89,7 @@ export async function GET(request: Request) {
 
         const allData = announcements.map((v: any) => ({
             ..._.omit(v, ["createdAt"]),
-            createdAt: moment(v.createdAt).format("LL")
+            createdAt: moment(v.createdAt).format("ll")
         }))
 
         return NextResponse.json({ success: true, message: "Berhasil mendapatkan pengumuman", data: allData, }, { status: 200 });

src/app/layout.tsx

@@ -13,6 +13,7 @@ import { Toaster } from 'react-hot-toast';
 import '@mantine/dates/styles.css';
 import '@mantine/notifications/styles.css';
 import { Notifications } from '@mantine/notifications'
+import LayoutBackground from "@/module/_global/layout/layout_background";
 
 export const metadata = {
   title: "SISTEM DESA MANDIRI",
@@ -42,9 +43,9 @@ export default function RootLayout({
             overflowY: "auto",
           }}>
             <Toaster/>
-            <Container mih={'100vh'} p={0} size={rem(550)} bg={WARNA.bgWhite}>
+            <LayoutBackground>
               {children}
-            </Container>
+            </LayoutBackground>
           </Box>
         </MantineProvider>
       </body>

src/module/_global/bin/type_global.ts

@@ -3,6 +3,6 @@ export interface IGlobalTema {
     bgUtama: string
     bgIcon: string
     bgFiturHome: string
-    bgFiturDivisi: string
+    bgFiturDivision: string
     bgTotalKegiatan: string
 }

src/module/_global/bin/val_global.ts

@@ -17,6 +17,6 @@ export const TEMA = hookstate<IGlobalTema>({
    bgUtama: "#F4F9FD",
    bgIcon: "#384288",
    bgFiturHome: "#FCAA4B",
-   bgFiturDivisi: "#FCAA4B",
+   bgFiturDivision: "#FCAA4B",
    bgTotalKegiatan: "#DCEED8"
 })

src/module/_global/fun/WARNA.ts

@@ -1,9 +1,9 @@
 export const WARNA = {
     bgWhite: "#F4F9FD",
-    // biruTua: "#19345E",
+    biruTua: "#19345E",
-    biruTua: "#508D4E",
+    // biruTua: "#508D4E",
-    // bgIcon: "#384288",
+    bgIcon: "#384288",
-    bgIcon: "#3C8754",
+    // bgIcon: "#3C8754",
     borderOrange: "#FCAA4B",
     bgHijauMuda: "#DCEED8",
     borderBiruMuda: "#9EBDED"

src/module/_global/layout/layout_background.tsx

@@ -0,0 +1,14 @@
+"use client"
+import { useHookstate } from '@hookstate/core';
+import { Container, rem } from '@mantine/core';
+import React from 'react';
+import { TEMA } from '../bin/val_global';
+
+export default function LayoutBackground({ children }: { children: React.ReactNode }) {
+  const tema = useHookstate(TEMA)
+  return (
+    <Container mih={'100vh'} p={0} size={rem(550)} bg={tema.get().bgUtama}>
+      {children}
+    </Container>
+  );
+}

src/module/announcement/ui/detail_announcement.tsx

@@ -57,24 +57,21 @@ export default function DetailAnnouncement({ id }: { id: string }) {
                         <Skeleton height={18} width={150} />
                      </Box>
                   </Group>
-                  <Grid gutter={'md'}>
+                  <Group>
-                     <Grid.Col span={1}>
+                     <ActionIcon
-                        <ActionIcon
+                        variant="light"
-                           variant="light"
+                        bg={"#DCEED8"}
-                           bg={"#DCEED8"}
+                        size={30}
-                           size={30}
+                        radius={100}
-                           radius={100}
+                        aria-label="icon"
-                           aria-label="icon"
+                     >
-                        >
+                        <Skeleton height={25} width={40} />
-                           <Skeleton height={25} width={40} />
+                     </ActionIcon>
-                        </ActionIcon>
+                     <Box>
-                     </Grid.Col>
+                        <Skeleton height={18} width={150} />
-                     <Grid.Col span={11}>
+                     </Box>
-                        <Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                  </Group>
-                           <Skeleton mt={5} ml={5} height={18} width={150} />
+
-                        </Spoiler>
-                     </Grid.Col>
-                  </Grid>
                </Stack>
                :
                <Stack>

src/module/announcement/ui/drawer_announcement.tsx

@@ -14,7 +14,7 @@ export default function DrawerAnnouncement() {
       <Box>
          <Stack pt={10}>
             <SimpleGrid
-               cols={{ base: 3, sm: 3, lg: 3 }}
+               cols={{ base: 2, sm: 3, lg: 3 }}
             >
                <Flex justify={'center'} align={'center'} direction={'column'}
                   style={{

src/module/calender/ui/navbar_create_division_calender.tsx

@@ -13,6 +13,7 @@ import { globalCalender, globalUlangiEvent } from '../lib/val_calender';
 import { IFormMemberCalender, IFormUlangiEvent } from '../lib/type_calender';
 import { funCreateCalender } from '../lib/api_calender';
 import CreateUserCalender from './create_user_calender';
+import { useMediaQuery } from '@mantine/hooks';
 
 export default function NavbarCreateDivisionCalender() {
   const [value, setValue] = useState<Date | null>(null);
@@ -23,6 +24,7 @@ export default function NavbarCreateDivisionCalender() {
   const [openMember, setOpenMember] = useState(false)
   const param = useParams<{ id: string, detail: string }>()
   const tema = useHookstate(TEMA)
+  const isMobile = useMediaQuery('(max-width: 369px)');
   const [touched, setTouched] = useState({
     title: false,
     dateStart: false,
@@ -301,19 +303,19 @@ export default function NavbarCreateDivisionCalender() {
                             >
                               <Grid.Col span={9}>
                                 <Group>
-                                  <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
+                                  <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
                                   <Box w={{
-                                    base: 140,
+                                    base: isMobile ? 130 : 140,
                                     xl: 270
                                   }}>
-                                    <Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
+                                    <Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16} >
                                       {v.name}
                                     </Text>
                                   </Box>
                                 </Group>
                               </Grid.Col>
                               <Grid.Col span={3}>
-                                <Text c={tema.get().utama} fw={"bold"} ta={'end'}>
+                                <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
                                   Anggota
                                 </Text>
                               </Grid.Col>

src/module/color_palette/ui/drawer_palet_edit_end_default.tsx

@@ -49,7 +49,7 @@ export default function DrawerPaletEditEndDefault({ id, idVillage }: { id: strin
 
   return (
     <Box>
-      <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
+      <SimpleGrid cols={{ base: 2, sm: 3, lg: 3 }}>
         <Flex justify={'center'} align={'center'} direction={'column'}
           onClick={() => setModal(true)}
         >

src/module/color_palette/ui/edit_palette_color.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
-import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { IEditTheme } from '../lib/type_theme';
 import toast from 'react-hot-toast';
@@ -15,6 +15,7 @@ export default function EditPaletteColor() {
   const router = useRouter()
   const [isModal, setModal] = useState(false)
   const param = useParams<{ id: string }>()
+  const [loading, setLoading] = useState(true)
   const [touched, setTouched] = useState({
     name: false,
     utama: false,
@@ -38,15 +39,19 @@ export default function EditPaletteColor() {
 
   async function getOneData() {
     try {
+      setLoading(true)
       const res = await funGetThemeById(param.id)
       if (res.success) {
         setWarna(res.data)
       } else {
         toast.error(res.message);
       }
+      setLoading(false)
     } catch (error) {
       console.error(error)
       toast.error("Gagal menambahkan tema, coba lagi nanti");
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -75,141 +80,154 @@ export default function EditPaletteColor() {
     <Box>
       <LayoutNavbarNew back='/color-palette' title='Edit Tema' menu />
       <Box p={20}>
-        <Stack>
+        {loading ?
-          <TextInput
+          <Stack>
-            label={'Judul Tema'}
+            {Array(7)
-            placeholder='Judul Tema'
+              .fill(null)
-            required
+              .map((_, i) => (
-            size="md"
+                <Box key={i}>
-            radius="md"
+                  <Skeleton width={"30%"} height={20} mb={10} radius={"md"} />
-            value={isWarna.name}
+                  <Skeleton width={"100%"} height={40} radius={"md"} />
-            onChange={
+                </Box>
-              (e) => {
+              ))}
-                setWarna({ ...isWarna, name: e.target.value })
+          </Stack>
-                setTouched({ ...touched, name: true })
+          :
+          <Stack>
+            <TextInput
+              label={'Judul Tema'}
+              placeholder='Judul Tema'
+              required
+              size="md"
+              radius="md"
+              value={isWarna.name}
+              onChange={
+                (e) => {
+                  setWarna({ ...isWarna, name: e.target.value })
+                  setTouched({ ...touched, name: true })
+                }
               }
-            }
+              error={
-            error={
+                touched.name && (
-              touched.name && (
+                  isWarna.name == "" ? "Judul Tema Tidak Boleh Kosong" : null
-                isWarna.name == "" ? "Judul Tema Tidak Boleh Kosong" : null
+                )
-              )
-            }
-          />
-          <ColorInput
-            label={'Warna Utama'}
-            placeholder='Pilih Warna'
-            required
-            size="md"
-            radius="md"
-            value={isWarna.utama}
-            onChangeEnd={
-              (color) => {
-                setWarna({ ...isWarna, utama: color })
-                setTouched({ ...touched, utama: true })
               }
-            }
+            />
-            error={
+            <ColorInput
-              touched.utama && (
+              label={'Warna Utama'}
-                isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null
+              placeholder='Pilih Warna'
-              )
+              required
-            }
+              size="md"
-          />
+              radius="md"
-          <ColorInput
+              value={isWarna.utama}
-            label={'Background Utama'}
+              onChangeEnd={
-            placeholder='Pilih Warna'
+                (color) => {
-            required
+                  setWarna({ ...isWarna, utama: color })
-            size="md"
+                  setTouched({ ...touched, utama: true })
-            radius="md"
+                }
-            value={isWarna.bgUtama}
-            onChangeEnd={
-              (color) => {
-                setWarna({ ...isWarna, bgUtama: color })
-                setTouched({ ...touched, bgUtama: true })
               }
-            }
+              error={
-            error={
+                touched.utama && (
-              touched.bgUtama && (
+                  isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null
-                isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null
+                )
-              )
-            }
-          />
-          <ColorInput
-            label={'Background Icon'}
-            placeholder='Pilih Warna'
-            required
-            size="md"
-            radius="md"
-            value={isWarna.bgIcon}
-            onChangeEnd={
-              (color) => {
-                setWarna({ ...isWarna, bgIcon: color })
-                setTouched({ ...touched, bgIcon: true })
               }
-            }
+            />
-            error={
+            <ColorInput
-              touched.bgIcon && (
+              label={'Background Utama'}
-                isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null
+              placeholder='Pilih Warna'
-              )
+              required
-            }
+              size="md"
-          />
+              radius="md"
-          <ColorInput
+              value={isWarna.bgUtama}
-            label={'Background Fitur Home'}
+              onChangeEnd={
-            placeholder='Pilih Warna'
+                (color) => {
-            required
+                  setWarna({ ...isWarna, bgUtama: color })
-            size="md"
+                  setTouched({ ...touched, bgUtama: true })
-            radius="md"
+                }
-            value={isWarna.bgFiturHome}
-            onChangeEnd={
-              (color) => {
-                setWarna({ ...isWarna, bgFiturHome: color })
-                setTouched({ ...touched, bgFiturHome: true })
               }
-            }
+              error={
-            error={
+                touched.bgUtama && (
-              touched.bgFiturHome && (
+                  isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null
-                isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" : null
+                )
-              )
-            }
-          />
-          <ColorInput
-            label={'Background Fitur Divisi'}
-            placeholder='Pilih Warna'
-            required
-            size="md"
-            radius="md"
-            value={isWarna.bgFiturDivision}
-            onChangeEnd={
-              (color) => {
-                setWarna({ ...isWarna, bgFiturDivision: color })
-                setTouched({ ...touched, bgFiturDivision: true })
               }
-            }
+            />
-            error={
+            <ColorInput
-              touched.bgFiturDivision && (
+              label={'Background Icon'}
-                isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" : null
+              placeholder='Pilih Warna'
-              )
+              required
-            }
+              size="md"
-          />
+              radius="md"
-          <ColorInput
+              value={isWarna.bgIcon}
-            label={'Background Total Kegiatan'}
+              onChangeEnd={
-            placeholder='Pilih Warna'
+                (color) => {
-            required
+                  setWarna({ ...isWarna, bgIcon: color })
-            size="md"
+                  setTouched({ ...touched, bgIcon: true })
-            radius="md"
+                }
-            value={isWarna.bgTotalKegiatan}
-            onChangeEnd={
-              (color) => {
-                setWarna({ ...isWarna, bgTotalKegiatan: color })
-                setTouched({ ...touched, bgTotalKegiatan: true })
               }
-            }
+              error={
-            error={
+                touched.bgIcon && (
-              touched.bgTotalKegiatan && (
+                  isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null
-                isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : null
+                )
-              )
+              }
-            }
+            />
-          />
+            <ColorInput
-        </Stack>
+              label={'Background Fitur Home'}
+              placeholder='Pilih Warna'
+              required
+              size="md"
+              radius="md"
+              value={isWarna.bgFiturHome}
+              onChangeEnd={
+                (color) => {
+                  setWarna({ ...isWarna, bgFiturHome: color })
+                  setTouched({ ...touched, bgFiturHome: true })
+                }
+              }
+              error={
+                touched.bgFiturHome && (
+                  isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" : null
+                )
+              }
+            />
+            <ColorInput
+              label={'Background Fitur Divisi'}
+              placeholder='Pilih Warna'
+              required
+              size="md"
+              radius="md"
+              value={isWarna.bgFiturDivision}
+              onChangeEnd={
+                (color) => {
+                  setWarna({ ...isWarna, bgFiturDivision: color })
+                  setTouched({ ...touched, bgFiturDivision: true })
+                }
+              }
+              error={
+                touched.bgFiturDivision && (
+                  isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" : null
+                )
+              }
+            />
+            <ColorInput
+              label={'Background Total Kegiatan'}
+              placeholder='Pilih Warna'
+              required
+              size="md"
+              radius="md"
+              value={isWarna.bgTotalKegiatan}
+              onChangeEnd={
+                (color) => {
+                  setWarna({ ...isWarna, bgTotalKegiatan: color })
+                  setTouched({ ...touched, bgTotalKegiatan: true })
+                }
+              }
+              error={
+                touched.bgTotalKegiatan && (
+                  isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : null
+                )
+              }
+            />
+          </Stack>
+        }
         <Flex justify={'center'} align={"center"} w={"auto"} gap={10} mt={20} mb={100}>
           <SimpleGrid
             cols={{ base: 3, sm: 3, lg: 6 }}
@@ -286,18 +304,22 @@ export default function EditPaletteColor() {
         zIndex: 999,
         backgroundColor: `${tema.get().bgUtama}`,
       }}>
-        <Button
+        {loading ?
-          color="white"
+          <Skeleton height={50} radius={30} />
-          bg={tema.get().utama}
+          :
-          size="lg"
+          <Button
-          radius={30}
+            color="white"
-          fullWidth
+            bg={tema.get().utama}
-          onClick={() => {
+            size="lg"
-            setModal(true)
+            radius={30}
-          }}
+            fullWidth
-        >
+            onClick={() => {
-          Simpan
+              setModal(true)
-        </Button>
+            }}
+          >
+            Simpan
+          </Button>
+        }
       </Box>
 
 

src/module/color_palette/ui/list_color_palette.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
-import { ActionIcon, Box, Checkbox, Flex, Group, Text } from '@mantine/core';
+import { ActionIcon, Box, Checkbox, Flex, Group, Skeleton, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { FaCircleCheck } from 'react-icons/fa6';
@@ -24,18 +24,23 @@ export default function ListColorPalette() {
   const [isChooseName, setChooseName] = useState('')
   const [isChooseVillage, setChooseVillage] = useState('')
   const refresh = useHookstate(globalRefreshTheme)
+  const [loading, setLoading] = useState(true)
 
   async function loadData() {
     try {
+      setLoading(true)
       const res = await funGetAllTheme()
       if (res.success) {
         setData(res.data)
       } else {
         toast.error(res.message)
       }
+      setLoading(false)
     } catch (error) {
       console.error(error)
       toast.error("Gagal mendapatkan data tema, coba lagi nanti")
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -52,56 +57,68 @@ export default function ListColorPalette() {
           <HiMenu size={20} color='white' />
         </ActionIcon>
       } />
-      <Box p={20}>
+      {loading ?
-        {isData.map((v, i) => (
+        Array(6)
-          <Box mb={20} key={i}>
+          .fill(null)
-            <Box style={{
+          .map((_, i) => (
-              borderRadius: 10,
+            <Box key={i} pl={20} pr={20} pt={20}>
-              border: `1px solid ${"#D6D8F6"}`,
+              <Box>
-            }} pt={10} pb={10} pl={20} pr={20}
+                <Skeleton width={"100%"} height={90} radius={10} />
-              onClick={() => {
-                setChooseId(v.id)
-                setChooseName(v.name)
-                setChooseVillage(v.idVillage)
-                setOpenTambahan(true)
-              }}
-            >
-              <Group justify='space-between' align='center'>
-                <Text>{v.name}</Text>
-                {v.isUse ? <FaCircleCheck size={20} /> : <></>}
-              </Group>
-              <Box pt={10}>
-                <Flex gap={10}>
-                  <Box bg={v.utama} w={30} h={30} style={{
-                    borderRadius: "100%",
-                    border: "1px solid grey"
-                  }} />
-                  <Box bg={v.bgUtama} w={30} h={30} style={{
-                    borderRadius: "100%",
-                    border: "1px solid grey"
-                  }} />
-                  <Box bg={v.bgIcon} w={30} h={30} style={{
-                    borderRadius: "100%",
-                    border: "1px solid grey"
-                  }} />
-                  <Box bg={v.bgFiturHome} w={30} h={30} style={{
-                    borderRadius: "100%",
-                    border: "1px solid grey"
-                  }} />
-                  <Box bg={v.bgFiturDivision} w={30} h={30} style={{
-                    borderRadius: "100%",
-                    border: "1px solid grey"
-                  }} />
-                  <Box bg={v.bgTotalKegiatan} w={30} h={30} style={{
-                    borderRadius: "100%",
-                    border: "1px solid grey"
-                  }} />
-                </Flex>
               </Box>
             </Box>
-          </Box>
+          ))
-        ))}
+        :
-      </Box>
+        <Box p={20}>
+          {isData.map((v, i) => (
+            <Box mb={20} key={i}>
+              <Box style={{
+                borderRadius: 10,
+                border: `1px solid ${"#D6D8F6"}`,
+              }} pt={10} pb={10} pl={20} pr={20}
+                onClick={() => {
+                  setChooseId(v.id)
+                  setChooseName(v.name)
+                  setChooseVillage(v.idVillage)
+                  setOpenTambahan(true)
+                }}
+              >
+                <Group justify='space-between' align='center'>
+                  <Text>{v.name}</Text>
+                  {v.isUse ? <FaCircleCheck size={20} /> : <></>}
+                </Group>
+                <Box pt={10}>
+                  <Flex gap={10}>
+                    <Box bg={v.utama} w={30} h={30} style={{
+                      borderRadius: "100%",
+                      border: "1px solid grey"
+                    }} />
+                    <Box bg={v.bgUtama} w={30} h={30} style={{
+                      borderRadius: "100%",
+                      border: "1px solid grey"
+                    }} />
+                    <Box bg={v.bgIcon} w={30} h={30} style={{
+                      borderRadius: "100%",
+                      border: "1px solid grey"
+                    }} />
+                    <Box bg={v.bgFiturHome} w={30} h={30} style={{
+                      borderRadius: "100%",
+                      border: "1px solid grey"
+                    }} />
+                    <Box bg={v.bgFiturDivision} w={30} h={30} style={{
+                      borderRadius: "100%",
+                      border: "1px solid grey"
+                    }} />
+                    <Box bg={v.bgTotalKegiatan} w={30} h={30} style={{
+                      borderRadius: "100%",
+                      border: "1px solid grey"
+                    }} />
+                  </Flex>
+                </Box>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      }
       <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
         <DrawerCreatePalette />
       </LayoutDrawer>

src/module/division_new/ui/list_division.tsx

@@ -94,7 +94,7 @@ export default function ListDivision() {
               onChange={(val) => { searchDivision(val.target.value) }}
             />
           </Grid.Col>
-          <Grid.Col span={'auto'}>
+          <Grid.Col span={2}>
             <Flex justify={'center'}>
               {isList ? (
                 <HiOutlineListBullet size={35} color={tema.get().utama} onClick={handleList} />

src/module/division_new/ui/list_document.tsx

@@ -4,7 +4,7 @@ import { Carousel } from "@mantine/carousel";
 import { Box, Image, Text, Center, Paper, Stack, UnstyledButton, Skeleton, Group } from "@mantine/core";
 import * as ICON from '../lib/file_icon'
 import { useParams, useRouter } from "next/navigation";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import toast from "react-hot-toast";
 import { funGetDetailDivisionById } from "../lib/api_division";
 import { IDataKalenderOnDetailDivision } from "../lib/type_division";
@@ -41,6 +41,7 @@ export default function ListDocumentOnDetailDivision() {
    useShallowEffect(() => {
       fetchData()
    }, [param.id])
+   const isMobile = useMediaQuery('(max-width: 369px)');
 
    return (
       <Box pt={10}>
@@ -69,14 +70,14 @@ export default function ListDocumentOnDetailDivision() {
                data.map((v) =>
                   <Carousel.Slide key={v.id}>
                      <UnstyledButton onClick={() => router.push(`/division/${param.id}/document`)}>
-                        <Stack gap={0} w={200}>
+                        <Stack gap={0} w={isMobile ? 100 : 170}>
                            <Paper withBorder shadow="sm" radius={12} >
                               <Center p={"md"}>
-                                 <Image w={"75"} src={(v.extension == "pdf") ? iconContainer(ICON.PDF) : iconContainer(ICON.IMAGE)} alt="image" />
+                                 <Image w={isMobile ? 50 : 75} src={(v.extension == "pdf") ? iconContainer(ICON.PDF) : iconContainer(ICON.IMAGE)} alt="image" />
                               </Center>
                            </Paper>
                            <Box>
-                              <Text c={"dimmed"}ta={"center"} lineClamp={1}>{v.name + '.' + v.extension}</Text>
+                              <Text c={"dimmed"}ta={"center"} lineClamp={1} fz={isMobile? 14 : 16}>{v.name + '.' + v.extension}</Text>
                            </Box>
                         </Stack>
                      </UnstyledButton>

src/module/division_new/ui/list_task.tsx

@@ -2,7 +2,7 @@
 import { TEMA } from "@/module/_global";
 import { Carousel } from "@mantine/carousel";
 import { Avatar, Box, Group, Skeleton, Stack, Text } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
 import toast from "react-hot-toast";
 import { CiClock2 } from "react-icons/ci";
@@ -42,6 +42,8 @@ export default function ListTaskOnDetailDivision() {
       fetchData()
    }, [param.id])
 
+   const isMobile = useMediaQuery('(max-width: 369px)');
+
    return (
       <Box pt={10}>
          <Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Tugas Hari Ini</Text>
@@ -52,8 +54,8 @@ export default function ListTaskOnDetailDivision() {
                      .fill(null)
                      .map((_, i) => (
                         <Stack align="stretch" justify="center" key={i}>
-                           <Skeleton height={80} radius="md" m={0} />
+                           <Skeleton height={80} radius="md" m={0} w={isMobile ? "80%" : "90%"} />
-                           <Skeleton height={10} radius="md" m={0} />
+                           <Skeleton height={10} radius="md" m={0} w={isMobile ? "80%" : "90%"}/>
                         </Stack>
                      ))
                   :
@@ -67,7 +69,10 @@ export default function ListTaskOnDetailDivision() {
          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
             {data.map((v, i) =>
                <Carousel.Slide key={v.id}>
-                  <Box p={20} w={{ base: 300, md: 400 }} onClick={() => router.push(`/task/${v.id}`)} bg={tema.get().utama} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
+                  <Box p={20} w={{
+                     base: isMobile ? 230 : 300,
+                     md: 400
+                  }} onClick={() => router.push(`/task/${v.id}`)} bg={tema.get().utama} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
                      <Text fw={'bold'} c={tema.get().bgUtama} lineClamp={1}>{_.startCase(v.title)}</Text>
                      <Group justify="space-between" mt={20}>
                         <Group gap={5} align="center" c={"#CFCDCD"}>

src/module/document/ui/drawer_share_document.tsx

@@ -1,7 +1,7 @@
 import { TEMA } from "@/module/_global";
 import { funGetListDivisionByIdDivision, IDataDivison } from "@/module/division_new";
 import { IDataMemberTaskDivision } from "@/module/task/lib/type_task";
-import { Box, Select, Button, Avatar, Divider, Flex, Group, Stack, Text, ActionIcon } from "@mantine/core";
+import { Box, Select, Button, Avatar, Divider, Flex, Group, Stack, Text, ActionIcon, ScrollArea } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
 import { useState } from "react";
@@ -12,13 +12,13 @@ import { funShareDocument } from "../lib/api_document";
 import { useHookstate } from "@hookstate/core";
 import { globalRefreshDocument } from "../lib/val_document";
 
-export default function DrawerShareDocument({ data }: { data: IShareDivision[]}) {
+export default function DrawerShareDocument({ data }: { data: IShareDivision[] }) {
    const [selectedFiles, setSelectedFiles] = useState<any>([])
    const [isData, setData] = useState<IDataDivison[]>([])
    const param = useParams<{ id: string }>()
    const refresh = useHookstate(globalRefreshDocument)
    const tema = useHookstate(TEMA)
-   
+
 
 
    async function onShare() {
@@ -72,6 +72,12 @@ export default function DrawerShareDocument({ data }: { data: IShareDivision[]})
    return (
       <Box pt={10}>
          <Box mt={10}>
+         <ScrollArea
+            h={{
+               base: "58vh", xl: "58vh", md: "57vh",
+               sm: "58vh",
+            }} type="scroll" scrollbarSize={2} scrollHideDelay={0} scrollbars="y"
+         >
             {isData.map((v, i) => {
                const isSelected = selectedFiles.some((i: any) => i?.id == v.id);
                return (
@@ -106,8 +112,9 @@ export default function DrawerShareDocument({ data }: { data: IShareDivision[]})
                   </Box>
                );
             })}
+         </ScrollArea>
          </Box>
-         <Box h={90} pos={"fixed"} bottom={0} w={{ base: "92%", md: "94%" }} style={{
+         <Box h={60} pos={"fixed"} bottom={0} w={{ base: "92%", md: "94%" }} style={{
             zIndex: 999
          }}>
             <Box>

src/module/document/ui/navbar_document_division.tsx

@@ -436,9 +436,9 @@ export default function NavbarDocumentDivision() {
                           </Box>
                         </Flex>
                         <Checkbox
-                          color="teal"
+                          color={tema.get().utama}
                           radius="lg"
-                          size="md"
+                          size={isMobile ? "sm" : "md"}
                           checked={isSelected}
                           onChange={() => handleCheckboxChange(i)}
                         />

src/module/group/ui/drawer_group.tsx

@@ -47,7 +47,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
     <Box>
       <Stack pt={10}>
         <SimpleGrid
-          cols={{ base: 3, sm: 3, lg: 3 }}
+          cols={{ base: 2, sm: 3, lg: 3 }}
           onClick={() => setOpenDrawerGroup(true)}
         >
           <Flex justify={"center"} align={"center"} direction={"column"}>

src/module/home/ui/list_divisi.tsx

@@ -8,7 +8,7 @@ import { useState } from "react";
 import { IDataHomeDivision } from "../lib/type_home";
 import { funGetHome } from "../lib/api_home";
 import toast from "react-hot-toast";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useHookstate } from "@hookstate/core";
 
 export default function ListDivisi() {
@@ -41,6 +41,7 @@ export default function ListDivisi() {
    useShallowEffect(() => {
       fetchData();
    }, []);
+   const isMobile = useMediaQuery('(max-width: 369px)');
 
 
    return (
@@ -61,18 +62,21 @@ export default function ListDivisi() {
                   <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
                      {isData.map((v) =>
                         <Carousel.Slide key={v.id}>
-                           <Box w={{ base: 300, md: 400 }}>
+                           <Box w={{
+                             base: isMobile ? 230 : 300,
+                              md: 400
+                           }}>
                               <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
                                  <Card.Section>
-                                    <Box h={120} bg={tema.get().bgFiturHome}>
+                                    <Box h={isMobile ? 100 : 120} bg={tema.get().bgFiturHome}>
                                        <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
-                                          <Title order={3} c={tema.get().utama} ta={"center"} lineClamp={2}>{v.name}</Title>
+                                          <Title order={isMobile ? 4 : 3} c={tema.get().utama} ta={"center"} lineClamp={2}>{v.name}</Title>
                                        </Flex>
                                     </Box>
                                  </Card.Section>
-                                 <Box pt={10} mih={150}>
+                                 <Box pt={10} mih={isMobile ? 100 : 150}>
-                                    <Text fw={'bold'} fz={18}>KEGIATAN</Text>
+                                    <Text fw={'bold'} fz={isMobile ? 15 : 18}>KEGIATAN</Text>
-                                    <Text fw={'bolder'} ta={'center'} fz={70}>{v.jumlah}</Text>
+                                    <Text fw={'bolder'} ta={'center'} fz={isMobile ? 50 : 70}>{v.jumlah}</Text>
                                  </Box>
                               </Card>
                            </Box>

src/module/home/ui/list_project.tsx

@@ -2,7 +2,7 @@
 import { TEMA, WARNA } from "@/module/_global";
 import { Carousel } from "@mantine/carousel";
 import { Box, Card, Flex, Title, Text, Progress, Stack, Skeleton } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
@@ -41,6 +41,8 @@ export default function ListProjects() {
    useShallowEffect(() => {
       fetchData();
    }, []);
+   
+   const isMobile = useMediaQuery('(max-width: 369px)');
 
    return (
       <>
@@ -60,22 +62,25 @@ export default function ListProjects() {
                   <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
                      {isData.map((v) =>
                         <Carousel.Slide key={v.id}>
-                           <Box w={{ base: 300, md: 400 }}>
+                           <Box w={{
+                              base: isMobile ? 230 : 300,
+                              md: 400
+                           }}>
                               <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
                                  <Card.Section>
-                                    <Box h={120} bg={tema.get().utama}>
+                                    <Box h={isMobile ? 100 : 120} bg={tema.get().utama}>
                                        <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
-                                          <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
+                                          <Title order={isMobile ? 4 : 3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
                                        </Flex>
                                     </Box>
                                  </Card.Section>
-                                 <Stack h={150} align="stretch" justify="center">
+                                 <Stack h={isMobile ? 100 : 150} align="stretch" justify="center">
                                     <Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
                                        <Progress.Section value={v.progress} color="yellow" striped >
                                           <Progress.Label>{v.progress}%</Progress.Label>
                                        </Progress.Section>
                                     </Progress.Root>
-                                    <Text c={tema.get().utama}>{v.createdAt}</Text>
+                                    <Text c={tema.get().utama} fz={isMobile ? 14 : 16}>{v.createdAt}</Text>
                                  </Stack>
                               </Card>
                            </Box>

src/module/task/ui/detail_progress_task.tsx

@@ -74,7 +74,7 @@ export default function ProgressDetailTask() {
                         aria-label="Gradient action icon"
                         radius={100}
                         // gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
-                        bg={tema.get().bgFiturDivisi}
+                        bg={tema.get().bgFiturDivision}
                      >
                         <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={tema.get().utama} />
                      </ActionIcon>
@@ -87,7 +87,7 @@ export default function ProgressDetailTask() {
                               border: `1px solid ${"#BDBDBD"}`,
                            }}
                            w={"100%"}
-                           color={tema.get().bgFiturDivisi}
+                           color={tema.get().bgFiturDivision}
                            radius="md"
                            size={isMobile ? "lg" : "xl"}
                            value={valProgress}

src/module/task/ui/list_division_task.tsx

@@ -117,12 +117,7 @@ export default function ListDivisionTask() {
                                           size={50}
                                           aria-label="Gradient action icon"
                                           radius={100}
-                                          // gradient={{
+                                          bg={tema.get().bgFiturDivision}
-                                          //    from: '#DFDA7C',
-                                          //    to: '#F2AF46',
-                                          //    deg: 174
-                                          // }}
-                                          bg={tema.get().bgFiturDivisi}
                                        >
                                           <HiMiniPresentationChartBar size={25} color={tema.get().utama} />
                                        </ActionIcon>

src/module/task/ui/tabs_division_task.tsx

@@ -67,8 +67,8 @@ export default function TabsDivisionTask() {
                   key={index}
               bg={
                  status == item.id
-                    ? tema.get().bgFiturDivisi
+                    ? tema.get().bgFiturDivision
-                    : (status == null && item.id == "0") ? tema.get().bgFiturDivisi : "transparent"
+                    : (status == null && item.id == "0") ? tema.get().bgFiturDivision : "transparent"
               }
               leftSection={item.icon}
            >

src/module/user/member/ui/drawer_detail_member.tsx

@@ -28,7 +28,7 @@ export default function DrawerDetailMember({
     try {
       if (val) {
         const res = await funEditStatusMember(id, {
-          isActive: true,
+          isActive: status ? true : false,
         });
         if (res.success) {
           toast.success(res.message);

src/module/user/member/ui/drawer_list_member.tsx

@@ -17,7 +17,7 @@ export default function DrawerListMember() {
       <Box>
          <Stack pt={10}>
             <SimpleGrid
-               cols={{ base: 3, sm: 3, lg: 3 }}
+               cols={{ base: 2, sm: 3, lg: 3 }}
             >
                <Flex justify={'center'} align={'center'} direction={'column'}
                   style={{

src/module/user/member/ui/edit_member.tsx

@@ -173,7 +173,7 @@ export default function EditMember({ id }: { id: string }) {
             {loading ?
                <Skeleton height={150} width={150} radius={"100"} />
                :
-               <Indicator offset={20} withBorder inline color={tema.get().bgIcon} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
+               <Indicator offset={20} withBorder inline color={tema.get().bgFiturHome} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
                   <Avatar
                      size="150"
                      radius={"100"}

src/module/user/profile/ui/edit_profile.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, TEMA } from "@/module/_global";
 import { Avatar, Box, Button, Flex, Indicator, Modal, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core";
 import toast from "react-hot-toast";
 import LayoutModal from "@/module/_global/layout/layout_modal";
@@ -11,6 +11,7 @@ import { FaCamera, FaShare } from "react-icons/fa6";
 import { Dropzone } from "@mantine/dropzone";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
+import { useHookstate } from "@hookstate/core";
 
 export default function EditProfile() {
   const [isValModal, setValModal] = useState(false)
@@ -20,6 +21,7 @@ export default function EditProfile() {
   const [imgForm, setImgForm] = useState<any>()
   const router = useRouter()
   const [loading, setLoading] = useState(true)
+  const tema = useHookstate(TEMA)
 
   const [touched, setTouched] = useState({
     nik: false,
@@ -90,6 +92,7 @@ export default function EditProfile() {
         gap="xs"
         pt={30}
         px={20}
+        pb={100}
       >
         <Dropzone
           openRef={openRef}
@@ -112,7 +115,7 @@ export default function EditProfile() {
         {loading ?
           <Skeleton height={150} width={150} radius={"100"} />
           :
-          <Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
+          <Indicator offset={20} withBorder inline color={tema.get().bgFiturHome} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
             <Avatar
               size="150"
               radius={"100"}
@@ -134,9 +137,9 @@ export default function EditProfile() {
               size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
               styles={{
                 input: {
-                  color: WARNA.biruTua,
+                  color: tema.get().utama,
-                  borderRadius: WARNA.biruTua,
+                  borderRadius: tema.get().utama,
-                  borderColor: WARNA.biruTua,
+                  borderColor: tema.get().utama,
                 },
               }}
               onChange={(e) => {
@@ -156,9 +159,9 @@ export default function EditProfile() {
               size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
               styles={{
                 input: {
-                  color: WARNA.biruTua,
+                  color: tema.get().utama,
-                  borderRadius: WARNA.biruTua,
+                  borderRadius: tema.get().utama,
-                  borderColor: WARNA.biruTua,
+                  borderColor: tema.get().utama,
                 },
               }}
               onChange={(e) => {
@@ -177,9 +180,9 @@ export default function EditProfile() {
               size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
               styles={{
                 input: {
-                  color: WARNA.biruTua,
+                  color: tema.get().utama,
-                  borderRadius: WARNA.biruTua,
+                  borderRadius: tema.get().utama,
-                  borderColor: WARNA.biruTua,
+                  borderColor: tema.get().utama,
                 },
               }}
               onChange={(e) => {
@@ -199,9 +202,9 @@ export default function EditProfile() {
               size="md" type="number" radius={30} placeholder="8xx xxxx xxxx" withAsterisk label="Nomor Telepon" w={"100%"}
               styles={{
                 input: {
-                  color: WARNA.biruTua,
+                  color: tema.get().utama,
-                  borderRadius: WARNA.biruTua,
+                  borderRadius: tema.get().utama,
-                  borderColor: WARNA.biruTua,
+                  borderColor: tema.get().utama,
                 },
               }}
               leftSection={<Text>+62</Text>}
@@ -221,9 +224,9 @@ export default function EditProfile() {
               placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
               styles={{
                 input: {
-                  color: WARNA.biruTua,
+                  color: tema.get().utama,
-                  borderRadius: WARNA.biruTua,
+                  borderRadius: tema.get().utama,
-                  borderColor: WARNA.biruTua,
+                  borderColor: tema.get().utama,
                 },
               }}
               data={
@@ -256,14 +259,14 @@ export default function EditProfile() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         {loading ?
           <Skeleton height={50} radius={30} />
           :
           <Button
             c={"white"}
-            bg={WARNA.biruTua}
+            bg={tema.get().utama}
             size="md"
             radius={30}
             fullWidth