wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #220 from bipproduction/lukman/11-september-2024

Browse Source 
style: update mobile
This commit is contained in:
Amalia
2024-09-11 16:47:19 +08:00
committed by GitHub
parent 57c245a880 0f0acf5e67
commit d4a3ae2225
16 changed files with 110 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/module/calender/ui/date_event_division.tsx
View File

@@ -4,7 +4,7 @@ import { DatePicker, DatePickerProps } from '@mantine/dates';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { funGetAllCalender, funGetIndicatorCalender } from '../lib/api_calender'; import { funGetAllCalender, funGetIndicatorCalender } from '../lib/api_calender';
import { useSetState, useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useSetState, useShallowEffect } from '@mantine/hooks';
import { IDataCalender } from '../lib/type_calender'; import { IDataCalender } from '../lib/type_calender';
import moment from 'moment'; import moment from 'moment';
import _ from 'lodash'; import _ from 'lodash';
@@ -21,6 +21,7 @@ export default function DateEventDivision() {
const [isDate, setDate] = useSetState<any>(moment().format('YYYY-MM-DD')) const [isDate, setDate] = useSetState<any>(moment().format('YYYY-MM-DD'))
const [isMonth, setMonth] = useState<any>(moment().month() + 1) const [isMonth, setMonth] = useState<any>(moment().month() + 1)
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const isMobile = useMediaQuery('(max-width: 369px)');
const getData = async (tgl: any) => { const getData = async (tgl: any) => {
try { try {
@@ -137,21 +138,21 @@ export default function DateEventDivision() {
<Group> <Group>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} /> <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
<Flex direction={'column'}> <Flex direction={'column'}>
<Text>{event.timeStart} - {event.timeEnd}</Text> <Text fz={isMobile ? 14 : 16}>{event.timeStart} - {event.timeEnd}</Text>
<Box w={{ <Box w={{
base: 280, base: isMobile ? 220 : 280,
xl: 430 xl: 430
}}> }}>
<Text fw={"bold"} lineClamp={1}> <Text fw={"bold"} lineClamp={1}>
{_.startCase(event.title)} {_.startCase(event.title)}
</Text> </Text>
</Box> </Box>
<Box w={{ <Box w={{
base: 280, base: isMobile ? 230 : 280,
xl: 420 xl: 420
}}> }}>
<Text lineClamp={1}> <Text lineClamp={1}>
Dibuat oleh : {event.user_name} Dibuat oleh : {event.user_name}
</Text> </Text>
</Box> </Box>
</Flex> </Flex>

11
src/module/division_new/ui/create_division.tsx
View File

@@ -16,7 +16,7 @@ import {
Textarea, Textarea,
TextInput, TextInput,
} from "@mantine/core"; } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import React, { useState } from "react"; import React, { useState } from "react";
import { IoIosArrowDropright } from "react-icons/io"; import { IoIosArrowDropright } from "react-icons/io";
@@ -34,6 +34,7 @@ export default function CreateDivision() {
const [isChooseAnggota, setChooseAnggota] = useState(false) const [isChooseAnggota, setChooseAnggota] = useState(false)
const [isChooseAdmin, setChooseAdmin] = useState(false) const [isChooseAdmin, setChooseAdmin] = useState(false)
const member = useHookstate(globalMemberDivision) const member = useHookstate(globalMemberDivision)
const isMobile = useMediaQuery('(max-width: 369px)');
const [body, setBody] = useState<any>({ const [body, setBody] = useState<any>({
idGroup: "", idGroup: "",
name: "", name: "",
@@ -194,19 +195,19 @@ export default function CreateDivision() {
> >
<Grid.Col span={9}> <Grid.Col span={9}>
<Group> <Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{ <Box w={{
base: 140, base: isMobile ? 130 : 140,
xl: 270 xl: 270
}}> }}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}> <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name} {v.name}
</Text> </Text>
</Box> </Box>
</Group> </Group>
</Grid.Col> </Grid.Col>
<Grid.Col span={3}> <Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}> <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
Anggota Anggota
</Text> </Text>
</Grid.Col> </Grid.Col>

2
src/module/division_new/ui/drawer_division.tsx
View File

@@ -25,7 +25,7 @@ export default function DrawerDivision() {
<IoAddCircle size={30} color={WARNA.biruTua} /> <IoAddCircle size={30} color={WARNA.biruTua} />
</Box> </Box>
<Box> <Box>
<Text c={WARNA.biruTua}>Tambah Divisi</Text> <Text c={WARNA.biruTua} ta={"center"}>Tambah Divisi</Text>
</Box> </Box>
</Flex> </Flex>
{ {

17
src/module/division_new/ui/information_division.tsx
View File

@@ -1,7 +1,7 @@
"use client" "use client"
import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global'; import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Button, Divider, Flex, Grid, Group, Skeleton, Stack, Text } from '@mantine/core'; import { ActionIcon, Avatar, Box, Button, Divider, Flex, Grid, 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 { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react'; import React, { useState } from 'react';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
@@ -30,6 +30,7 @@ export default function InformationDivision() {
const [isOpenModal, setOpenModal] = useState(false) const [isOpenModal, setOpenModal] = useState(false)
const roleLogin = useHookstate(globalRole) const roleLogin = useHookstate(globalRole)
const [isAdmin, setAdmin] = useState(false) const [isAdmin, setAdmin] = useState(false)
const isMobile = useMediaQuery('(max-width: 369px)');
async function getOneData() { async function getOneData() {
try { try {
@@ -176,10 +177,10 @@ export default function InformationDivision() {
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ? ((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
<Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}> <Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
<Avatar size="lg"> <Avatar size={isMobile ? 'md' : 'lg'}>
<AiOutlineUserAdd size={30} color={WARNA.biruTua} /> <AiOutlineUserAdd size={isMobile ? 25 : 30} color={WARNA.biruTua} />
</Avatar> </Avatar>
<Text>Tambah Anggota</Text> <Text fz={isMobile ? 14 : 16}>Tambah Anggota</Text>
</Group> </Group>
: <></> : <></>
} }
@@ -207,19 +208,19 @@ export default function InformationDivision() {
> >
<Grid.Col span={9}> <Grid.Col span={9}>
<Group> <Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{ <Box w={{
base: 140, base: isMobile ? 130 : 140,
xl: 270 xl: 270
}}> }}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}> <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name} {v.name}
</Text> </Text>
</Box> </Box>
</Group> </Group>
</Grid.Col> </Grid.Col>
<Grid.Col span={3}> <Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}> <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
{(v.isAdmin) ? 'Admin' : 'Anggota'} {(v.isAdmin) ? 'Admin' : 'Anggota'}
</Text> </Text>
</Grid.Col> </Grid.Col>

14
src/module/division_new/ui/list_discussion.tsx
View File

@@ -1,7 +1,7 @@
"use client" "use client"
import { WARNA } from "@/module/_global"; import { WARNA } from "@/module/_global";
import { Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core"; import { Box, Grid, 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 { useParams, useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
@@ -16,6 +16,7 @@ export default function ListDiscussionOnDetailDivision() {
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>()
const [data, setData] = useState<IDataDiscussionOnDetailDivision[]>([]) const [data, setData] = useState<IDataDiscussionOnDetailDivision[]>([])
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery('(max-width: 369px)');
async function fetchData() { async function fetchData() {
try { try {
@@ -86,8 +87,11 @@ export default function ListDiscussionOnDetailDivision() {
> >
<Group> <Group>
<GoDiscussionClosed size={25} /> <GoDiscussionClosed size={25} />
<Box w={{ base: 230, md: 400 }}> <Box w={{
<Text fw={"bold"} truncate="end"> base: isMobile ? 180 : 230,
md: 400
}}>
<Text fw={"bold"} truncate="end" fz={isMobile ? 14 : 16}>
{v.desc} {v.desc}
</Text> </Text>
</Box> </Box>
@@ -100,7 +104,7 @@ export default function ListDiscussionOnDetailDivision() {
<Group gap={5} align="center"> <Group gap={5} align="center">
<CiUser size={18} /> <CiUser size={18} />
<Box w={{ <Box w={{
base: 125, base: isMobile ? 110 : 125,
xl: 300 xl: 300
}}> }}>
<Text fz={13} lineClamp={1}> <Text fz={13} lineClamp={1}>
@@ -115,7 +119,7 @@ export default function ListDiscussionOnDetailDivision() {
}}> }}>
<Group gap={5} align="center" justify="flex-end"> <Group gap={5} align="center" justify="flex-end">
<CiClock2 size={18} /> <CiClock2 size={18} />
<Text fz={13}>{v.date}</Text> <Text fz={isMobile ? 11 : 13}>{v.date}</Text>
</Group> </Group>
</Grid.Col> </Grid.Col>
</Grid> </Grid>

17
src/module/document/ui/navbar_document_division.tsx
View File

@@ -15,7 +15,7 @@ import { useParams, useRouter, useSearchParams } from 'next/navigation';
import DrawerMenuDocumentDivision from './drawer_menu_document_division'; import DrawerMenuDocumentDivision from './drawer_menu_document_division';
import DrawerMore from './drawer_more'; import DrawerMore from './drawer_more';
import { funGetDivisionById } from '@/module/division_new'; import { funGetDivisionById } from '@/module/division_new';
import { useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { funDeleteDocument, funGetAllDocument, funRenameDocument } from '../lib/api_document'; import { funDeleteDocument, funGetAllDocument, funRenameDocument } from '../lib/api_document';
import { IDataDocument, IJalurItem } from '../lib/type_document'; import { IDataDocument, IJalurItem } from '../lib/type_document';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
@@ -46,6 +46,7 @@ export default function NavbarDocumentDivision() {
const [selectedFiles, setSelectedFiles] = useState<any>([]) const [selectedFiles, setSelectedFiles] = useState<any>([])
const [selectAll, setSelectAll] = useState(false) const [selectAll, setSelectAll] = useState(false)
const [dariSelectAll, setDariSelectAll] = useState(false) const [dariSelectAll, setDariSelectAll] = useState(false)
const isMobile = useMediaQuery('(max-width: 369px)');
const [bodyRename, setBodyRename] = useState({ const [bodyRename, setBodyRename] = useState({
id: '', id: '',
name: '', name: '',
@@ -349,20 +350,20 @@ export default function NavbarDocumentDivision() {
<Indicator offset={15} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaShare />} size={25}> <Indicator offset={15} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaShare />} size={25}>
{ {
(v.category == "FOLDER") ? (v.category == "FOLDER") ?
<FcFolder size={50} /> : <FcFolder size={isMobile ? 40 : 50} /> :
(v.extension == "pdf" || v.extension == "csv") ? (v.extension == "pdf" || v.extension == "csv") ?
<FcDocument size={50} /> : <FcDocument size={isMobile ? 40 : 50} /> :
<FcImageFile size={50} /> <FcImageFile size={isMobile ? 40 : 50} />
} }
</Indicator> </Indicator>
: :
<> <>
{ {
(v.category == "FOLDER") ? (v.category == "FOLDER") ?
<FcFolder size={50} /> : <FcFolder size={isMobile ? 40 : 50} /> :
(v.extension == "pdf" || v.extension == "csv") ? (v.extension == "pdf" || v.extension == "csv") ?
<FcDocument size={50} /> : <FcDocument size={isMobile ? 40 : 50} /> :
<FcImageFile size={50} /> <FcImageFile size={isMobile ? 40 : 50} />
} }
</> </>
@@ -386,7 +387,7 @@ export default function NavbarDocumentDivision() {
}} }}
> >
<Box w={{ <Box w={{
base: 230, base: isMobile ? 200 : 230,
xl: 380, xl: 380,
md: 380, md: 380,
sm: 380, sm: 380,

26
src/module/home/ui/features.tsx
View File

@@ -1,12 +1,14 @@
'use client' 'use client'
import { WARNA } from '@/module/_global'; import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Grid, SimpleGrid, Text } from '@mantine/core'; import { ActionIcon, Box, Center, Grid, SimpleGrid, Text } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import React from 'react'; import React from 'react';
import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2 } from "react-icons/hi2"; import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2 } from "react-icons/hi2";
export default function Features() { export default function Features() {
const router = useRouter() const router = useRouter()
const isMobile = useMediaQuery('(max-width: 369px)');
return ( return (
<> <>
<Box pt={10}> <Box pt={10}>
@@ -17,57 +19,57 @@ export default function Features() {
<Box onClick={() => router.push('/division')}> <Box onClick={() => router.push('/division')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={isMobile ? 50 : 68}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}> gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniUserGroup size={35} color={WARNA.biruTua} /> <HiMiniUserGroup size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
<Text fz={15} c={WARNA.biruTua}>Divisi</Text> <Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Divisi</Text>
</Center> </Center>
</Box> </Box>
<Box onClick={() => router.push('/project?status=0&group=null')}> <Box onClick={() => router.push('/project?status=0&group=null')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={isMobile ? 50 : 68}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}> gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniPresentationChartBar size={35} color={WARNA.biruTua} /> <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
<Text fz={15} c={WARNA.biruTua}>Kegiatan</Text> <Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Kegiatan</Text>
</Center> </Center>
</Box> </Box>
<Box onClick={() => router.push('/announcement')}> <Box onClick={() => router.push('/announcement')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={isMobile ? 50 : 68}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}> gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMegaphone size={35} color={WARNA.biruTua} /> <HiMegaphone size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
<Text fz={15} c={WARNA.biruTua}>Pengumuman</Text> <Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Pengumuman</Text>
</Center> </Center>
</Box> </Box>
<Box onClick={() => router.push('/home?cat=fitur')}> <Box onClick={() => router.push('/home?cat=fitur')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={isMobile ? 50 : 68}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}> gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiSquares2X2 size={35} color={WARNA.biruTua} /> <HiSquares2X2 size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
<Text fz={15} c={WARNA.biruTua}>Semua</Text> <Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Semua</Text>
</Center> </Center>
</Box> </Box>
</SimpleGrid> </SimpleGrid>

14
src/module/home/ui/list_discussion.tsx
View File

@@ -8,7 +8,7 @@ import { useState } from "react";
import { IDataHomeDiskusi } from "../lib/type_home"; import { IDataHomeDiskusi } from "../lib/type_home";
import { funGetHome } from "../lib/api_home"; import { funGetHome } from "../lib/api_home";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import _ from "lodash"; import _ from "lodash";
@@ -16,6 +16,7 @@ export default function ListDiscussion() {
const router = useRouter() const router = useRouter()
const [isData, setData] = useState<IDataHomeDiskusi[]>([]) const [isData, setData] = useState<IDataHomeDiskusi[]>([])
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery('(max-width: 369px)');
const fetchData = async () => { const fetchData = async () => {
try { try {
@@ -79,8 +80,11 @@ export default function ListDiscussion() {
}} onClick={() => router.push(`/division/${v.idDivision}/discussion/${v.id}`)}> }} onClick={() => router.push(`/division/${v.idDivision}/discussion/${v.id}`)}>
<Group> <Group>
<GoDiscussionClosed size={25} /> <GoDiscussionClosed size={25} />
<Box w={{ base: 230, md: 400 }}> <Box w={{
<Text fw={"bold"} truncate="end"> base: isMobile ? 180 : 230,
md: 400
}}>
<Text fw={"bold"} truncate="end" fz={isMobile ? 14 : 16} >
{v.desc} {v.desc}
</Text> </Text>
</Box> </Box>
@@ -93,7 +97,7 @@ export default function ListDiscussion() {
<Group gap={5} align="center"> <Group gap={5} align="center">
<CiUser size={18} /> <CiUser size={18} />
<Box w={{ <Box w={{
base: 125, base: isMobile ? 110 : 125,
xl: 300 xl: 300
}}> }}>
<Text fz={13} lineClamp={1}> <Text fz={13} lineClamp={1}>
@@ -108,7 +112,7 @@ export default function ListDiscussion() {
}}> }}>
<Group gap={5} align="center" justify="flex-end"> <Group gap={5} align="center" justify="flex-end">
<CiClock2 size={18} /> <CiClock2 size={18} />
<Text fz={13}>{v.date}</Text> <Text fz={isMobile ? 11 : 13}>{v.date}</Text>
</Group> </Group>
</Grid.Col> </Grid.Col>
</Grid> </Grid>

9
src/module/home/ui/list_event.tsx
View File

@@ -6,7 +6,7 @@ import { useState } from "react"
import { IDataHomeEvent } from "../lib/type_home" import { IDataHomeEvent } from "../lib/type_home"
import { funGetHome } from "../lib/api_home" import { funGetHome } from "../lib/api_home"
import toast from "react-hot-toast" import toast from "react-hot-toast"
import { useShallowEffect } from "@mantine/hooks" import { useMediaQuery, useShallowEffect } from "@mantine/hooks"
import _ from "lodash" import _ from "lodash"
@@ -14,6 +14,7 @@ export default function ListEventHome() {
const router = useRouter() const router = useRouter()
const [isData, setData] = useState<IDataHomeEvent[]>([]) const [isData, setData] = useState<IDataHomeEvent[]>([])
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery('(max-width: 369px)');
const fetchData = async () => { const fetchData = async () => {
try { try {
@@ -74,9 +75,9 @@ export default function ListEventHome() {
<Group> <Group>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} /> <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
<Flex direction={'column'}> <Flex direction={'column'}>
<Text>{event.timeStart} - {event.timeEnd}</Text> <Text fz={isMobile ? 14 : 16}>{event.timeStart} - {event.timeEnd}</Text>
<Box w={{ <Box w={{
base: 260, base: isMobile ? 220 : 260,
xl: 430 xl: 430
}}> }}>
<Text fw={"bold"} lineClamp={1}> <Text fw={"bold"} lineClamp={1}>
@@ -84,7 +85,7 @@ export default function ListEventHome() {
</Text> </Text>
</Box> </Box>
<Box w={{ <Box w={{
base: 260, base: isMobile ? 230 : 260,
xl: 420 xl: 420
}}> }}>
<Text lineClamp={1}> <Text lineClamp={1}>

6
src/module/home/ui/list_notification.tsx
View File

@@ -1,6 +1,7 @@
"use client" "use client"
import { WARNA } from '@/module/_global'; import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Grid, Group, Spoiler, Text } from '@mantine/core'; import { ActionIcon, Box, Center, Grid, Group, Spoiler, Text } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import React from 'react'; import React from 'react';
import { FaBell } from 'react-icons/fa6'; import { FaBell } from 'react-icons/fa6';
@@ -65,6 +66,7 @@ const dataNotification = [
export default function ListNotification() { export default function ListNotification() {
const router = useRouter() const router = useRouter()
const isMobile = useMediaQuery('(max-width: 369px)');
return ( return (
<Box> <Box>
{dataNotification.map((v, i) => { {dataNotification.map((v, i) => {
@@ -81,11 +83,11 @@ export default function ListNotification() {
</ActionIcon> </ActionIcon>
<Box <Box
w={{ w={{
base: 240, base: isMobile ? 200 : 240,
xl: 380 xl: 380
}} }}
> >
<Text fw={'bold'} fz={18} lineClamp={1}>{v.title}</Text> <Text fw={'bold'} fz={isMobile ? 16 : 18} lineClamp={1}>{v.title}</Text>
</Box> </Box>
</Group> </Group>
<Spoiler maxHeight={60} showLabel="Lebih banyak" hideLabel="Lebih sedikit"> <Spoiler maxHeight={60} showLabel="Lebih banyak" hideLabel="Lebih sedikit">

26
src/module/home/ui/view_detail_feature.tsx
View File

@@ -7,10 +7,12 @@ import { PiUsersFourFill } from "react-icons/pi";
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { FaUserTag, FaUserTie } from 'react-icons/fa6'; import { FaUserTag, FaUserTie } from 'react-icons/fa6';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import { useMediaQuery } from '@mantine/hooks';
export default function ViewDetailFeature() { export default function ViewDetailFeature() {
const router = useRouter() const router = useRouter()
const roleLogin = useHookstate(globalRole) const roleLogin = useHookstate(globalRole)
const isMobile = useMediaQuery('(max-width: 369px)');
return ( return (
<> <>
<LayoutNavbarNew back='/home' title='Fitur' menu={<></>} /> <LayoutNavbarNew back='/home' title='Fitur' menu={<></>} />
@@ -22,11 +24,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/division')}> <Box onClick={() => router.push('/division')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={isMobile ? 50 : 68}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}> gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniUserGroup size={35} color={WARNA.biruTua} /> <HiMiniUserGroup size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
@@ -36,11 +38,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/project?status=0&group=null')}> <Box onClick={() => router.push('/project?status=0&group=null')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={isMobile ? 50 : 68}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}> gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniPresentationChartBar size={35} color={WARNA.biruTua} /> <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
@@ -50,11 +52,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/announcement')}> <Box onClick={() => router.push('/announcement')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={isMobile ? 50 : 68}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}> gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMegaphone size={35} color={WARNA.biruTua} /> <HiMegaphone size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
@@ -64,11 +66,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/member')}> <Box onClick={() => router.push('/member')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={isMobile ? 50 : 68}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}> gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<PiUsersFourFill size={35} color={WARNA.biruTua} /> <PiUsersFourFill size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
@@ -78,11 +80,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/position')}> <Box onClick={() => router.push('/position')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={isMobile ? 50 : 68}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}> gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<FaUserTie size={35} color={WARNA.biruTua} /> <FaUserTie size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
@@ -94,11 +96,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/group')}> <Box onClick={() => router.push('/group')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={isMobile ? 50 : 68}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}> gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<FaUserTag size={35} color={WARNA.biruTua} /> <FaUserTag size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>

2
src/module/project/ui/list_anggota_detail_project.tsx
View File

@@ -62,7 +62,7 @@ export default function ListAnggotaDetailProject() {
toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti"); toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
} }
} }
const isMobile = useMediaQuery('(max-width: 369px)'); const isMobile = useMediaQuery('(max-width: 369px)');
return ( return (
<Box pt={20}> <Box pt={20}>

10
src/module/task/ui/create_task.tsx
View File

@@ -18,6 +18,7 @@ import _ from "lodash";
import { FaTrash } from "react-icons/fa6"; import { FaTrash } from "react-icons/fa6";
import LayoutModal from "@/module/_global/layout/layout_modal"; import LayoutModal from "@/module/_global/layout/layout_modal";
import { funCreateTask } from "../lib/api_task"; import { funCreateTask } from "../lib/api_task";
import { useMediaQuery } from "@mantine/hooks";
export default function CreateTask() { export default function CreateTask() {
const router = useRouter() const router = useRouter()
@@ -37,6 +38,7 @@ export default function CreateTask() {
const [listFile, setListFile] = useState<IListFileTask[]>([]) const [listFile, setListFile] = useState<IListFileTask[]>([])
const [indexDelFile, setIndexDelFile] = useState<number>(0) const [indexDelFile, setIndexDelFile] = useState<number>(0)
const [indexDelTask, setIndexDelTask] = useState<number>(0) const [indexDelTask, setIndexDelTask] = useState<number>(0)
const isMobile = useMediaQuery('(max-width: 369px)');
const [title, setTitle] = useState("") const [title, setTitle] = useState("")
const [touched, setTouched] = useState({ const [touched, setTouched] = useState({
title: false, title: false,
@@ -235,19 +237,19 @@ export default function CreateTask() {
> >
<Grid.Col span={9}> <Grid.Col span={9}>
<Group> <Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{ <Box w={{
base: 140, base: isMobile ? 130 : 140,
xl: 270 xl: 270
}}> }}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}> <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name} {v.name}
</Text> </Text>
</Box> </Box>
</Group> </Group>
</Grid.Col> </Grid.Col>
<Grid.Col span={3}> <Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}> <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
Anggota Anggota
</Text> </Text>
</Grid.Col> </Grid.Col>

13
src/module/task/ui/detail_list_anggota_task.tsx
View File

@@ -1,7 +1,7 @@
'use client' 'use client'
import { globalRole, LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global"; import { globalRole, LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid } from "@mantine/core"; import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
@@ -24,6 +24,7 @@ export default function ListAnggotaDetailTask() {
const router = useRouter() const router = useRouter()
const roleLogin = useHookstate(globalRole) const roleLogin = useHookstate(globalRole)
const adminLogin = useHookstate(globalIsAdminDivision) const adminLogin = useHookstate(globalIsAdminDivision)
const isMobile = useMediaQuery('(max-width: 369px)');
async function getOneData() { async function getOneData() {
try { try {
@@ -104,20 +105,20 @@ export default function ListAnggotaDetailTask() {
> >
<Grid.Col span={9}> <Grid.Col span={9}>
<Group> <Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{ <Box w={{
base: 140, base: isMobile ? 130 : 140,
xl: 270 xl: 270
}}> }}>
<Flex direction={'column'} align="flex-start" justify="flex-start"> <Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text> <Text lineClamp={1} fz={isMobile ? 14 : 16}>{v.name}</Text>
<Text c={"#5A687D"} fz={14} lineClamp={1}>{v.email}</Text> <Text c={"#5A687D"} lineClamp={1} fz={isMobile ? 10 : 14}>{v.email}</Text>
</Flex> </Flex>
</Box> </Box>
</Group> </Group>
</Grid.Col> </Grid.Col>
<Grid.Col span={3}> <Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}> <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
Anggota Anggota
</Text> </Text>
</Grid.Col> </Grid.Col>

11
src/module/task/ui/detail_progress_task.tsx
View File

@@ -1,7 +1,7 @@
'use client' 'use client'
import { WARNA } from "@/module/_global"; import { WARNA } from "@/module/_global";
import { Box, Grid, ActionIcon, Progress, Text, Skeleton } from "@mantine/core"; import { Box, Grid, ActionIcon, Progress, Text, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { HiMiniPresentationChartBar } from "react-icons/hi2"; import { HiMiniPresentationChartBar } from "react-icons/hi2";
@@ -16,6 +16,7 @@ export default function ProgressDetailTask() {
const param = useParams<{ id: string, detail: string }>() const param = useParams<{ id: string, detail: string }>()
const refresh = useHookstate(globalRefreshTask) const refresh = useHookstate(globalRefreshTask)
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const isMobile = useMediaQuery('(max-width: 369px)');
async function getOneData() { async function getOneData() {
try { try {
@@ -68,17 +69,17 @@ export default function ProgressDetailTask() {
<Grid.Col span={3}> <Grid.Col span={3}>
<ActionIcon <ActionIcon
variant="gradient" variant="gradient"
size={68} size={isMobile ? 50 : 68}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }} gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
> >
<HiMiniPresentationChartBar size={35} color={WARNA.biruTua} /> <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={9}> <Grid.Col span={9}>
<Box> <Box>
<Text>Kemajuan Kegiatan {valProgress}%</Text> <Text fz={isMobile ? 14 : 16}>Kemajuan Kegiatan {valProgress}%</Text>
<Progress <Progress
style={{ style={{
border: `1px solid ${"#BDBDBD"}`, border: `1px solid ${"#BDBDBD"}`,
@@ -86,7 +87,7 @@ export default function ProgressDetailTask() {
w={"100%"} w={"100%"}
color="#FCAA4B" color="#FCAA4B"
radius="md" radius="md"
size="xl" size={isMobile ? "lg" : "xl"}
value={valProgress} value={valProgress}
/> />
</Box> </Box>

2
src/module/task/ui/drawer_division_task.tsx
View File

@@ -7,7 +7,7 @@ export default function DrawerDivisionTask() {
<Box> <Box>
<Stack pt={10}> <Stack pt={10}>
<SimpleGrid <SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }} cols={{ base: 2, sm: 3, lg: 3 }}
> >
<Flex onClick={() => window.location.href = "task/create"} justify={'center'} align={'center'} direction={'column'} > <Flex onClick={() => window.location.href = "task/create"} justify={'center'} align={'center'} direction={'column'} >
<Box> <Box>