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

style: update mobile

Browse Source 
Deskripsi:
- update calender
- update division
- document
- update home
- update project
- update task

No Issue
This commit is contained in:
lukman
2024-09-11 16:44:57 +08:00
parent 57c245a880
commit 0f0acf5e67
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 React, { useState } from 'react';
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 moment from 'moment';
import _ from 'lodash';
@@ -21,6 +21,7 @@ export default function DateEventDivision() {
const [isDate, setDate] = useSetState<any>(moment().format('YYYY-MM-DD'))
const [isMonth, setMonth] = useState<any>(moment().month() + 1)
const [loading, setLoading] = useState(true)
const isMobile = useMediaQuery('(max-width: 369px)');
const getData = async (tgl: any) => {
try {
@@ -137,21 +138,21 @@ export default function DateEventDivision() {
<Group>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
<Flex direction={'column'}>
<Text>{event.timeStart} - {event.timeEnd}</Text>
<Text fz={isMobile ? 14 : 16}>{event.timeStart} - {event.timeEnd}</Text>
<Box w={{
base: 280,
base: isMobile ? 220 : 280,
xl: 430
}}>
<Text fw={"bold"} lineClamp={1}>
{_.startCase(event.title)}
<Text fw={"bold"} lineClamp={1}>
{_.startCase(event.title)}
</Text>
</Box>
<Box w={{
base: 280,
base: isMobile ? 230 : 280,
xl: 420
}}>
<Text lineClamp={1}>
Dibuat oleh : {event.user_name}
<Text lineClamp={1}>
Dibuat oleh : {event.user_name}
</Text>
</Box>
</Flex>

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

@@ -16,7 +16,7 @@ import {
Textarea,
TextInput,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import { IoIosArrowDropright } from "react-icons/io";
@@ -34,6 +34,7 @@ export default function CreateDivision() {
const [isChooseAnggota, setChooseAnggota] = useState(false)
const [isChooseAdmin, setChooseAdmin] = useState(false)
const member = useHookstate(globalMemberDivision)
const isMobile = useMediaQuery('(max-width: 369px)');
const [body, setBody] = useState<any>({
idGroup: "",
name: "",
@@ -194,19 +195,19 @@ export default function CreateDivision() {
>
<Grid.Col span={9}>
<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={{
base: 140,
base: isMobile ? 130 : 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<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
</Text>
</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} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Tambah Divisi</Text>
<Text c={WARNA.biruTua} ta={"center"}>Tambah Divisi</Text>
</Box>
</Flex>
{

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

@@ -1,7 +1,7 @@
"use client"
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 { useShallowEffect } from '@mantine/hooks';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
@@ -30,6 +30,7 @@ export default function InformationDivision() {
const [isOpenModal, setOpenModal] = useState(false)
const roleLogin = useHookstate(globalRole)
const [isAdmin, setAdmin] = useState(false)
const isMobile = useMediaQuery('(max-width: 369px)');
async function getOneData() {
try {
@@ -176,10 +177,10 @@ export default function InformationDivision() {
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
<Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
<Avatar size="lg">
<AiOutlineUserAdd size={30} color={WARNA.biruTua} />
<Avatar size={isMobile ? 'md' : 'lg'}>
<AiOutlineUserAdd size={isMobile ? 25 : 30} color={WARNA.biruTua} />
</Avatar>
<Text>Tambah Anggota</Text>
<Text fz={isMobile ? 14 : 16}>Tambah Anggota</Text>
</Group>
: <></>
}
@@ -207,19 +208,19 @@ export default function InformationDivision() {
>
<Grid.Col span={9}>
<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={{
base: 140,
base: isMobile ? 130 : 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<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'}
</Text>
</Grid.Col>

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

@@ -1,7 +1,7 @@
"use client"
import { WARNA } from "@/module/_global";
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 { useState } from "react";
import toast from "react-hot-toast";
@@ -16,6 +16,7 @@ export default function ListDiscussionOnDetailDivision() {
const param = useParams<{ id: string }>()
const [data, setData] = useState<IDataDiscussionOnDetailDivision[]>([])
const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery('(max-width: 369px)');
async function fetchData() {
try {
@@ -86,8 +87,11 @@ export default function ListDiscussionOnDetailDivision() {
>
<Group>
<GoDiscussionClosed size={25} />
<Box w={{ base: 230, md: 400 }}>
<Text fw={"bold"} truncate="end">
<Box w={{
base: isMobile ? 180 : 230,
md: 400
}}>
<Text fw={"bold"} truncate="end" fz={isMobile ? 14 : 16}>
{v.desc}
</Text>
</Box>
@@ -100,7 +104,7 @@ export default function ListDiscussionOnDetailDivision() {
<Group gap={5} align="center">
<CiUser size={18} />
<Box w={{
base: 125,
base: isMobile ? 110 : 125,
xl: 300
}}>
<Text fz={13} lineClamp={1}>
@@ -115,7 +119,7 @@ export default function ListDiscussionOnDetailDivision() {
}}>
<Group gap={5} align="center" justify="flex-end">
<CiClock2 size={18} />
<Text fz={13}>{v.date}</Text>
<Text fz={isMobile ? 11 : 13}>{v.date}</Text>
</Group>
</Grid.Col>
</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 DrawerMore from './drawer_more';
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 { IDataDocument, IJalurItem } from '../lib/type_document';
import { useHookstate } from '@hookstate/core';
@@ -46,6 +46,7 @@ export default function NavbarDocumentDivision() {
const [selectedFiles, setSelectedFiles] = useState<any>([])
const [selectAll, setSelectAll] = useState(false)
const [dariSelectAll, setDariSelectAll] = useState(false)
const isMobile = useMediaQuery('(max-width: 369px)');
const [bodyRename, setBodyRename] = useState({
id: '',
name: '',
@@ -349,20 +350,20 @@ export default function NavbarDocumentDivision() {
<Indicator offset={15} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaShare />} size={25}>
{
(v.category == "FOLDER") ?
<FcFolder size={50} /> :
<FcFolder size={isMobile ? 40 : 50} /> :
(v.extension == "pdf" || v.extension == "csv") ?
<FcDocument size={50} /> :
<FcImageFile size={50} />
<FcDocument size={isMobile ? 40 : 50} /> :
<FcImageFile size={isMobile ? 40 : 50} />
}
</Indicator>
:
<>
{
(v.category == "FOLDER") ?
<FcFolder size={50} /> :
<FcFolder size={isMobile ? 40 : 50} /> :
(v.extension == "pdf" || v.extension == "csv") ?
<FcDocument size={50} /> :
<FcImageFile size={50} />
<FcDocument size={isMobile ? 40 : 50} /> :
<FcImageFile size={isMobile ? 40 : 50} />
}
</>
@@ -386,7 +387,7 @@ export default function NavbarDocumentDivision() {
}}
>
<Box w={{
base: 230,
base: isMobile ? 200 : 230,
xl: 380,
md: 380,
sm: 380,

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

@@ -1,12 +1,14 @@
'use client'
import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Grid, SimpleGrid, Text } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import React from 'react';
import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2 } from "react-icons/hi2";
export default function Features() {
const router = useRouter()
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<>
<Box pt={10}>
@@ -17,57 +19,57 @@ export default function Features() {
<Box onClick={() => router.push('/division')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniUserGroup size={35} color={WARNA.biruTua} />
<HiMiniUserGroup size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Divisi</Text>
<Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Divisi</Text>
</Center>
</Box>
<Box onClick={() => router.push('/project?status=0&group=null')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
<HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Kegiatan</Text>
<Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Kegiatan</Text>
</Center>
</Box>
<Box onClick={() => router.push('/announcement')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMegaphone size={35} color={WARNA.biruTua} />
<HiMegaphone size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
<Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Pengumuman</Text>
</Center>
</Box>
<Box onClick={() => router.push('/home?cat=fitur')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiSquares2X2 size={35} color={WARNA.biruTua} />
<HiSquares2X2 size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Semua</Text>
<Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Semua</Text>
</Center>
</Box>
</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 { funGetHome } from "../lib/api_home";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
@@ -16,6 +16,7 @@ export default function ListDiscussion() {
const router = useRouter()
const [isData, setData] = useState<IDataHomeDiskusi[]>([])
const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery('(max-width: 369px)');
const fetchData = async () => {
try {
@@ -79,8 +80,11 @@ export default function ListDiscussion() {
}} onClick={() => router.push(`/division/${v.idDivision}/discussion/${v.id}`)}>
<Group>
<GoDiscussionClosed size={25} />
<Box w={{ base: 230, md: 400 }}>
<Text fw={"bold"} truncate="end">
<Box w={{
base: isMobile ? 180 : 230,
md: 400
}}>
<Text fw={"bold"} truncate="end" fz={isMobile ? 14 : 16} >
{v.desc}
</Text>
</Box>
@@ -93,7 +97,7 @@ export default function ListDiscussion() {
<Group gap={5} align="center">
<CiUser size={18} />
<Box w={{
base: 125,
base: isMobile ? 110 : 125,
xl: 300
}}>
<Text fz={13} lineClamp={1}>
@@ -108,7 +112,7 @@ export default function ListDiscussion() {
}}>
<Group gap={5} align="center" justify="flex-end">
<CiClock2 size={18} />
<Text fz={13}>{v.date}</Text>
<Text fz={isMobile ? 11 : 13}>{v.date}</Text>
</Group>
</Grid.Col>
</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 { funGetHome } from "../lib/api_home"
import toast from "react-hot-toast"
import { useShallowEffect } from "@mantine/hooks"
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"
import _ from "lodash"
@@ -14,6 +14,7 @@ export default function ListEventHome() {
const router = useRouter()
const [isData, setData] = useState<IDataHomeEvent[]>([])
const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery('(max-width: 369px)');
const fetchData = async () => {
try {
@@ -74,9 +75,9 @@ export default function ListEventHome() {
<Group>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
<Flex direction={'column'}>
<Text>{event.timeStart} - {event.timeEnd}</Text>
<Text fz={isMobile ? 14 : 16}>{event.timeStart} - {event.timeEnd}</Text>
<Box w={{
base: 260,
base: isMobile ? 220 : 260,
xl: 430
}}>
<Text fw={"bold"} lineClamp={1}>
@@ -84,7 +85,7 @@ export default function ListEventHome() {
</Text>
</Box>
<Box w={{
base: 260,
base: isMobile ? 230 : 260,
xl: 420
}}>
<Text lineClamp={1}>

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

@@ -1,6 +1,7 @@
"use client"
import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Grid, Group, Spoiler, Text } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import React from 'react';
import { FaBell } from 'react-icons/fa6';
@@ -65,6 +66,7 @@ const dataNotification = [
export default function ListNotification() {
const router = useRouter()
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<Box>
{dataNotification.map((v, i) => {
@@ -81,11 +83,11 @@ export default function ListNotification() {
</ActionIcon>
<Box
w={{
base: 240,
base: isMobile ? 200 : 240,
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>
</Group>
<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 { FaUserTag, FaUserTie } from 'react-icons/fa6';
import { useHookstate } from '@hookstate/core';
import { useMediaQuery } from '@mantine/hooks';
export default function ViewDetailFeature() {
const router = useRouter()
const roleLogin = useHookstate(globalRole)
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<>
<LayoutNavbarNew back='/home' title='Fitur' menu={<></>} />
@@ -22,11 +24,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/division')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniUserGroup size={35} color={WARNA.biruTua} />
<HiMiniUserGroup size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
@@ -36,11 +38,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/project?status=0&group=null')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
<HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
@@ -50,11 +52,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/announcement')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<HiMegaphone size={35} color={WARNA.biruTua} />
<HiMegaphone size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
@@ -64,11 +66,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/member')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<PiUsersFourFill size={35} color={WARNA.biruTua} />
<PiUsersFourFill size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
@@ -78,11 +80,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/position')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<FaUserTie size={35} color={WARNA.biruTua} />
<FaUserTie size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
@@ -94,11 +96,11 @@ export default function ViewDetailFeature() {
<Box onClick={() => router.push('/group')}>
<Center>
<ActionIcon variant="gradient"
size={68}
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<FaUserTag size={35} color={WARNA.biruTua} />
<FaUserTag size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</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");
}
}
const isMobile = useMediaQuery('(max-width: 369px)');
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<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 LayoutModal from "@/module/_global/layout/layout_modal";
import { funCreateTask } from "../lib/api_task";
import { useMediaQuery } from "@mantine/hooks";
export default function CreateTask() {
const router = useRouter()
@@ -37,6 +38,7 @@ export default function CreateTask() {
const [listFile, setListFile] = useState<IListFileTask[]>([])
const [indexDelFile, setIndexDelFile] = useState<number>(0)
const [indexDelTask, setIndexDelTask] = useState<number>(0)
const isMobile = useMediaQuery('(max-width: 369px)');
const [title, setTitle] = useState("")
const [touched, setTouched] = useState({
title: false,
@@ -235,19 +237,19 @@ export default function CreateTask() {
>
<Grid.Col span={9}>
<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={{
base: 140,
base: isMobile ? 130 : 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<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
</Text>
</Grid.Col>

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

@@ -1,7 +1,7 @@
'use client'
import { globalRole, LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
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 { useState } from "react";
import toast from "react-hot-toast";
@@ -24,6 +24,7 @@ export default function ListAnggotaDetailTask() {
const router = useRouter()
const roleLogin = useHookstate(globalRole)
const adminLogin = useHookstate(globalIsAdminDivision)
const isMobile = useMediaQuery('(max-width: 369px)');
async function getOneData() {
try {
@@ -104,20 +105,20 @@ export default function ListAnggotaDetailTask() {
>
<Grid.Col span={9}>
<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={{
base: 140,
base: isMobile ? 130 : 140,
xl: 270
}}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text>
<Text c={"#5A687D"} fz={14} lineClamp={1}>{v.email}</Text>
<Text lineClamp={1} fz={isMobile ? 14 : 16}>{v.name}</Text>
<Text c={"#5A687D"} lineClamp={1} fz={isMobile ? 10 : 14}>{v.email}</Text>
</Flex>
</Box>
</Group>
</Grid.Col>
<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
</Text>
</Grid.Col>

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

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

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

@@ -7,7 +7,7 @@ export default function DrawerDivisionTask() {
<Box>
<Stack pt={10}>
<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'} >
<Box>