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

style : update style

Browse Source
This commit is contained in:
lukman
2024-09-13 17:15:46 +08:00
parent 5d72c78aba
commit e4175d17f8
7 changed files with 166 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/module/discussion/ui/list_discussion.tsx
View File

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

59
src/module/division_new/ui/feature_detail_division.tsx
View File

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

24
src/module/division_new/ui/list_division.tsx
View File

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

22
src/module/project/ui/list_project.tsx
View File

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

103
src/module/project/ui/tab_project.tsx
View File

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

19
src/module/task/ui/list_division_task.tsx
View File

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

86
src/module/task/ui/tabs_division_task.tsx
View File

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