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

style : update style

Browse Source 
Deskripsi:
- update api division
- update layout
- update global
- update auth
- update division
- update home
- update task

No Issue
This commit is contained in:
lukman
2024-09-09 16:35:20 +08:00
parent f18f41292f
commit c6afef08fe
15 changed files with 354 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/api/division/route.ts
View File

@@ -127,7 +127,7 @@ export async function POST(request: Request) {
const dataMember = sent.member.map((v: any) => ({ const dataMember = sent.member.map((v: any) => ({
..._.omit(v, ["idUser", "name"]), ..._.omit(v, ["idUser", "name", "img"]),
idUser: v.idUser, idUser: v.idUser,
idDivision: data.id, idDivision: data.id,
isAdmin: sent.admin.some((i: any) => i == v.idUser) isAdmin: sent.admin.some((i: any) => i == v.idUser)

4
src/app/layout.tsx
View File

@@ -30,12 +30,14 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<ColorSchemeScript /> <ColorSchemeScript />
</head> </head>
<body className={`${LatoFont.className}`} suppressHydrationWarning> <body className={`${LatoFont.className}`} suppressHydrationWarning>
<MantineProvider> <MantineProvider>
<Box bg={'#252A2F'} pos={"fixed"} w={"100%"} h={"100%"} style={{ <Box bg={'#252A2F'} pos={"fixed"} w={"100%"} h={"100%"} style={{
overflowY: "auto" overflowY: "auto",
touchAction: "manipulation"
}}> }}>
<Toaster/> <Toaster/>
<Container mih={'100vh'} p={0} size={rem(550)} bg={WARNA.bgWhite}> <Container mih={'100vh'} p={0} size={rem(550)} bg={WARNA.bgWhite}>

2
src/module/_global/index.ts
View File

@@ -14,6 +14,7 @@ import LayoutLogin from "./layout/layout_login";
import LayoutModalViewFile from "./layout/layout_modal_view_file"; import LayoutModalViewFile from "./layout/layout_modal_view_file";
import LayoutNavbarHome from "./layout/layout_navbar_home"; import LayoutNavbarHome from "./layout/layout_navbar_home";
import LayoutNavbarNew from "./layout/layout_navbar_new"; import LayoutNavbarNew from "./layout/layout_navbar_new";
import NoZoom from "./layout/no_zoom";
import ViewFilter from "./view/view_filter"; import ViewFilter from "./view/view_filter";
export { WARNA }; export { WARNA };
@@ -34,3 +35,4 @@ export { SkeletonDetailListTugasTask }
export { LayoutModalViewFile } export { LayoutModalViewFile }
export { globalRole } export { globalRole }
export { WrapLayout } export { WrapLayout }
export { NoZoom }

67
src/module/_global/layout/layout_modal_view_file.tsx
View File

@@ -1,12 +1,22 @@
'use client' 'use client'
import { Image, Modal } from '@mantine/core'; import { Box, Button, Flex, Image, Modal, rem } from '@mantine/core';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import React, { useState } from 'react'; import React, { useState } from 'react';
const PdfToImage = dynamic(() => import('./../components/pdf_viewer').then((mod) => mod.default), { ssr: false }); const PdfToImage = dynamic(() => import('./../components/pdf_viewer').then((mod) => mod.default), { ssr: false });
export default function LayoutModal({ opened, onClose, extension, fitur, file }: { opened: boolean, onClose: () => void, extension: string, fitur: string, file: string }) { export default function LayoutModal({ opened, onClose, extension, fitur, file }: { opened: boolean, onClose: () => void, extension: string, fitur: string, file: string }) {
const [isValModal, setValModal] = useState(opened) const [isValModal, setValModal] = useState(opened)
const [zoom, setZoom] = useState(1)
const filePdf = '/file/' + fitur + '/' + file const filePdf = '/file/' + fitur + '/' + file
const handleZoomIn = () => {
setZoom(zoom + 0.1)
}
const handleZoomOut = () => {
setZoom(zoom - 0.1)
}
return ( return (
<Modal styles={{ <Modal styles={{
body: { body: {
@@ -16,20 +26,49 @@ export default function LayoutModal({ opened, onClose, extension, fitur, file }:
maxWidth: 550, maxWidth: 550,
} }
}} opened={opened} onClose={onClose} withCloseButton={true} centered closeOnClickOutside={false} fullScreen> }} opened={opened} onClose={onClose} withCloseButton={true} centered closeOnClickOutside={false} fullScreen>
<Box
pos="sticky"
top={70}
right={10}
w={50}
{ style={{
extension === 'pdf' ? <PdfToImage md={filePdf} /> : background: 'white',
<Image zIndex: 999,
radius="md" }}
style={{ >
maxWidth: '100%', <Flex
maxHeight: '100%', direction="column"
}} >
fit="contain" <Button mb={5} variant="outline" onClick={handleZoomIn}>
src={`/api/file/img?cat=${fitur}&file=${file}&jenis=file`} +
alt={file} </Button>
/> <Button variant="outline" onClick={handleZoomOut}>
} -
</Button>
</Flex>
</Box>
<Box pos={"relative"} style={{
transform: `scale(${zoom})`,
transformOrigin: 'center',
maxWidth: rem(550),
}}>
<div style={{ transform: `scale(${zoom})`, transformOrigin: 'center' }}>
{
extension === 'pdf' ? <PdfToImage md={filePdf} /> :
<Image
radius="md"
style={{
maxWidth: '100%',
maxHeight: '100%',
}}
fit="contain"
src={`/api/file/img?cat=${fitur}&file=${file}&jenis=file`}
alt={file}
/>
}
</div>
</Box>
</Modal> </Modal>
); );
} }

10
src/module/_global/layout/no_zoom.tsx Normal file
View File

@@ -0,0 +1,10 @@
// components/NoZoom.js
import Head from 'next/head';
export default function NoZoom() {
return (
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</Head>
);
}

1
src/module/auth/varification/view/view_verification.tsx
View File

@@ -74,6 +74,7 @@ JANGAN BERIKAN KODE RAHASIA ini kepada siapa pun TERMASUK PIHAK DARMASABA. Masuk
<PinInput <PinInput
style={{ justifyContent: "center" }} style={{ justifyContent: "center" }}
placeholder="" placeholder=""
type={"number"}
size="lg" size="lg"
styles={{ styles={{
input: { input: {

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

@@ -5,7 +5,9 @@ import {
Avatar, Avatar,
Box, Box,
Button, Button,
Divider,
Flex, Flex,
Grid,
Group, Group,
rem, rem,
Select, Select,
@@ -96,12 +98,12 @@ export default function CreateDivision() {
if (isChooseAdmin) return <NavbarAdminDivision data={body} onSuccess={(val) => { if (isChooseAdmin) return <NavbarAdminDivision data={body} onSuccess={(val) => {
if (val) { if (val) {
member.set([]) member.set([])
setBody({ // setBody({
...body, // ...body,
idGroup: "", // idGroup: "",
name: "", // name: "",
desc: "", // desc: "",
}) // })
} }
setChooseAdmin(false) setChooseAdmin(false)
@@ -187,24 +189,32 @@ export default function CreateDivision() {
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
) : member.get().map((v: any, i: any) => { ) : member.get().map((v: any, i: any) => {
return ( return (
<Flex <Box key={i}>
justify={"space-between"} <Grid align='center' mt={10}
align={"center"} >
mt={20} <Grid.Col span={9}>
key={i} <Group>
> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Group> <Box w={{
<Avatar src={v.img} alt="it's me" size="lg" /> base: 140,
<Box> xl: 270
<Text c={WARNA.biruTua} fw={"bold"}> }}>
{v.name} <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
Anggota
</Text> </Text>
</Box> </Grid.Col>
</Group> </Grid>
<Text c={WARNA.biruTua} fw={"bold"}> <Box mt={10}>
Anggota <Divider size={"xs"} />
</Text> </Box>
</Flex> </Box>
); );
})} })}
</Box> </Box>

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

@@ -53,7 +53,7 @@ export default function FeatureDetailDivision() {
border: `1px solid ${WARNA.bgHijauMuda}`, border: `1px solid ${WARNA.bgHijauMuda}`,
borderRadius: 10, borderRadius: 10,
padding: 10 padding: 10
}} onClick={() => router.push(param.id + '/task')}> }} onClick={() => router.push(param.id + '/task?status=0')}>
<Grid justify='center' align='center'> <Grid justify='center' align='center'>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<ActionIcon variant="filled" <ActionIcon variant="filled"

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

@@ -66,7 +66,7 @@ export default function ListDocumentOnDetailDivision() {
{ {
data.map((v) => data.map((v) =>
<Carousel.Slide key={v.id}> <Carousel.Slide key={v.id}>
<UnstyledButton onClick={() => router.push(`/document`)}> <UnstyledButton onClick={() => router.push(`/division/${param.id}/document`)}>
<Stack gap={0} w={200}> <Stack gap={0} w={200}>
<Paper withBorder shadow="sm" radius={12} > <Paper withBorder shadow="sm" radius={12} >
<Center p={"md"}> <Center p={"md"}>

75
src/module/division_new/ui/navbar_admin_division.tsx
View File

@@ -1,10 +1,10 @@
"use client" "use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global'; import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Button, Checkbox, Divider, Flex, Group, Stack, Text, TextInput } from '@mantine/core'; import { ActionIcon, Avatar, Box, Button, Checkbox, Divider, Flex, Grid, Group, rem, Stack, Text, TextInput } from '@mantine/core';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { HiMagnifyingGlass } from 'react-icons/hi2'; import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { globalMemberDivision } from '../lib/val_division'; import { globalMemberDivision } from '../lib/val_division';
import { funCreateDivision } from '../lib/api_division'; import { funCreateDivision } from '../lib/api_division';
@@ -26,6 +26,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
if (response.success) { if (response.success) {
toast.success(response.message); toast.success(response.message);
router.push("/division")
onSuccess(true) onSuccess(true)
} else { } else {
toast.error(response.message) toast.error(response.message)
@@ -41,7 +42,10 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
return ( return (
<Box> <Box>
<LayoutNavbarNew title="Pilih Admin Divisi" menu /> <LayoutNavbarNew title="Pilih Admin Divisi" menu state={
<Box>
</Box>
} />
<Box p={20}> <Box p={20}>
<TextInput <TextInput
styles={{ styles={{
@@ -64,39 +68,52 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
) : member.get().map((v: any, i: any) => { ) : member.get().map((v: any, i: any) => {
return ( return (
<Box key={i}> <Box key={i}>
<Flex <Grid align='center' mt={10}
justify={"space-between"}
align={"center"}
> >
<Group> <Grid.Col span={10}>
<Avatar src={v.img} alt="it's me" size="lg" /> <Group>
<Box> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Text c={WARNA.biruTua} fw={"bold"}> <Box w={{
{v.name} base: 200,
</Text> xl: 270
</Box> }}>
</Group> <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
<Checkbox value={v.idUser} /> {v.name}
</Flex> </Text>
<Divider my={20} /> </Box>
</Group>
</Grid.Col>
<Grid.Col span={2}>
<Flex justify={'end'}>
<Checkbox value={v.idUser} />
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box> </Box>
); );
}) })
} }
</Checkbox.Group> </Checkbox.Group>
</Box> </Box>
<Box mt="xl"> </Box>
<Button <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
color="white" maxWidth: rem(550),
bg={WARNA.biruTua} zIndex: 999,
size="lg" backgroundColor: `${WARNA.bgWhite}`,
radius={30} }}>
fullWidth <Button
onClick={() => { onSubmit() }} color="white"
> bg={WARNA.biruTua}
Simpan size="lg"
</Button> radius={30}
</Box> fullWidth
onClick={() => { onSubmit() }}
>
Simpan
</Button>
</Box> </Box>
</Box> </Box>
); );

207
src/module/division_new/ui/navbar_create_users.tsx
View File

@@ -1,15 +1,18 @@
"use client" "use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global'; import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Button, Center, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core'; import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks'; import { 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 { HiMagnifyingGlass } from 'react-icons/hi2'; import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
import { funGetAllmember, TypeUser } from '@/module/user'; import { funGetAllmember, TypeUser } from '@/module/user';
import { funGetUserByCookies } from '@/module/auth'; import { funGetUserByCookies } from '@/module/auth';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { globalMemberDivision } from '../lib/val_division'; import { globalMemberDivision } from '../lib/val_division';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { Carousel } from '@mantine/carousel';
import { FaCheck } from 'react-icons/fa6';
export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, onClose: (val: any) => void }) { export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, onClose: (val: any) => void }) {
@@ -18,12 +21,13 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
const [selectedFiles, setSelectedFiles] = useState<any>([]); const [selectedFiles, setSelectedFiles] = useState<any>([]);
const [dataMember, setDataMember] = useState<TypeUser>([]) const [dataMember, setDataMember] = useState<TypeUser>([])
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [onClickSearch, setOnClickSearch] = useState(false)
const handleFileClick = (index: number) => { const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) { if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != dataMember[index].id)) setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != dataMember[index].id))
} else { } else {
setSelectedFiles([...selectedFiles, { idUser: dataMember[index].id, name: dataMember[index].name }]) setSelectedFiles([...selectedFiles, { idUser: dataMember[index].id, name: dataMember[index].name, img: dataMember[index].img }])
} }
}; };
@@ -59,72 +63,147 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
loadData("") loadData("")
}, []); }, []);
const handleSearchClick = () => {
setOnClickSearch(true);
};
const handleClose = () => {
setOnClickSearch(false);
};
function handleXMember(id: number) {
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != id))
}
return ( return (
<Box> <Box>
<LayoutNavbarNew title="Pilih Anggota" menu /> <LayoutNavbarNew state={
<Box>
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
} title="Pilih Anggota"
menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
<HiMagnifyingGlass size={20} color='white' />
</ActionIcon>} />
{/* SEARCH */}
{onClickSearch
? (
<Box
pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 9999,
backgroundColor: `${WARNA.biruTua}`,
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
}}>
<Grid justify='center' align='center' gutter={'lg'}>
<Grid.Col span={1}>
<ActionIcon onClick={handleClose} variant="subtle" color='white' size="lg" mt={5} radius="lg" aria-label="search">
<IoArrowBackOutline size={30} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={11}>
<TextInput
styles={{
input: {
color: "white",
borderRadius: '#A3A3A3',
borderColor: `${WARNA.biruTua}`,
backgroundColor: `${WARNA.biruTua}`,
},
}}
size="md"
radius={30}
placeholder="Pencarian"
onChange={(e) => loadData(e.target.value)}
/>
</Grid.Col>
</Grid>
</Box>
)
: null
}
{/* Close User */}
<Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 100,
backgroundColor: `${WARNA.bgWhite}`,
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{selectedFiles.map((v: any, i: any) => {
return (
<Carousel.Slide key={i}>
<Box w={{
base: 70,
xl: 70
}}
onClick={() => { handleXMember(v.idUser) }}
>
<Center>
<Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
<Avatar style={{
border: `2px solid ${WARNA.biruTua}`
}} src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
</Indicator>
</Center>
<Text ta={"center"} lineClamp={1}>{v.name}</Text>
</Box>
</Carousel.Slide>
)
})}
</Carousel>
) : (
<Box h={rem(81)}>
<Flex justify={"center"} align={'center'} h={"100%"}>
<Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
</Flex>
</Box>
)}
</Box>
<Box p={20}> <Box p={20}>
<Stack> <Stack>
<TextInput <Box pt={100} mb={100}>
styles={{
input: {
color: WARNA.biruTua,
borderRadius: '#A3A3A3',
borderColor: '#A3A3A3',
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
onChange={(e) => loadData(e.target.value)}
/>
<Box pt={10}>
{loading ? {loading ?
<SimpleGrid Array(6)
cols={{ base: 2, sm: 2, lg: 2 }} .fill(null)
spacing={{ base: 20, sm: "xl" }} .map((_, i) => (
verticalSpacing={{ base: "md", sm: "xl" }} <Box key={i}>
> <SkeletonSingle />
{Array(6) </Box>
.fill(null) ))
.map((_, i) => ( : dataMember.map((v, index) => {
<Box key={i}> const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
<Skeleton width={"100%"} height={130} radius={"md"} /> return (
<Box mb={15} key={index} onClick={() => handleFileClick(index)}>
<Grid align='center'>
<Grid.Col span={{
base: 3,
xl: 2
}}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={{
base: 9,
xl: 10
}}>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box> </Box>
))} </Box>
</SimpleGrid> );
: })
<Box mb={60}>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
spacing={{ base: 20, sm: "xl" }}
verticalSpacing={{ base: "md", sm: "xl" }}
>
{dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box key={index} mb={10}>
<Box
bg={isSelected ? WARNA.bgHijauMuda : "white"}
style={{
border: `1px solid ${WARNA.biruTua}`,
borderRadius: 20,
}}
py={10}
onClick={() => handleFileClick(index)}
>
<Center>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="xl" />
</Center>
<Text mt={20} ta="center">
{v.name}
</Text>
</Box>
</Box>
);
})}
</SimpleGrid>
</Box>
} }
</Box> </Box>
</Stack> </Stack>

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

@@ -28,7 +28,7 @@ export default function Features() {
<Text fz={15} c={WARNA.biruTua}>Divisi</Text> <Text fz={15} c={WARNA.biruTua}>Divisi</Text>
</Center> </Center>
</Box> </Box>
<Box onClick={() => router.push('/project')}> <Box onClick={() => router.push('/project?status=0&group=null')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={68}

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

@@ -33,7 +33,7 @@ export default function ViewDetailFeature() {
<Text fz={15} c={WARNA.biruTua}>Divisi</Text> <Text fz={15} c={WARNA.biruTua}>Divisi</Text>
</Center> </Center>
</Box> </Box>
<Box onClick={() => router.push('/project')}> <Box onClick={() => router.push('/project?status=0&group=null')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={68}

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

@@ -25,22 +25,22 @@ export default function TabProject() {
const dataStatus = [ const dataStatus = [
{ {
id: "0", id: "0",
title: "Semua", title: "Segera",
icon: <RiProgress3Line style={iconStyle} /> icon: <RiProgress3Line style={iconStyle} />
}, },
{ {
id: "1", id: "1",
title: "Segera", title: "Dikerjakan",
icon: <TbClockPause style={iconStyle} /> icon: <TbClockPause style={iconStyle} />
}, },
{ {
id: "2", id: "2",
title: "Dikerjakan", title: "Selesai",
icon: <IoIosCheckmarkCircleOutline style={iconStyle} /> icon: <IoIosCheckmarkCircleOutline style={iconStyle} />
}, },
{ {
id: "3", id: "3",
title: "Selesai", title: "Batal",
icon: <IoCloseCircleOutline style={iconStyle} /> icon: <IoCloseCircleOutline style={iconStyle} />
} }
] ]

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

@@ -1,11 +1,13 @@
'use client' 'use client'
import { Box, rem, Tabs } from "@mantine/core"; import { Box, Button, rem, Tabs } from "@mantine/core";
import { IoIosCheckmarkCircleOutline } from "react-icons/io"; import { IoIosCheckmarkCircleOutline } from "react-icons/io";
import { IoCloseCircleOutline } from "react-icons/io5"; import { IoCloseCircleOutline } from "react-icons/io5";
import { RiProgress3Line } from "react-icons/ri"; import { RiProgress3Line } from "react-icons/ri";
import { TbClockPause } from "react-icons/tb"; import { TbClockPause } from "react-icons/tb";
import ListDivisionTask from "./list_division_task"; import ListDivisionTask from "./list_division_task";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter, useSearchParams } from "next/navigation";
import { Carousel } from "@mantine/carousel";
import { WARNA } from "@/module/_global";
export default function TabsDivisionTask() { export default function TabsDivisionTask() {
const iconStyle = { width: rem(20), height: rem(20) }; const iconStyle = { width: rem(20), height: rem(20) };
@@ -13,9 +15,32 @@ export default function TabsDivisionTask() {
const searchParams = useSearchParams() const searchParams = useSearchParams()
const status = searchParams.get('status') const status = searchParams.get('status')
const dataStatus = [
{
id: "0",
title: "Segera",
icon: <RiProgress3Line style={iconStyle} />
},
{
id: "1",
title: "Dikerjakan",
icon: <TbClockPause style={iconStyle} />
},
{
id: "2",
title: "Selesai",
icon: <IoIosCheckmarkCircleOutline style={iconStyle} />
},
{
id: "3",
title: "Batal",
icon: <IoCloseCircleOutline style={iconStyle} />
}
]
return ( return (
<Box p={20}> <Box p={20}>
<Tabs variant="pills" color='#FF9861' radius="xl" defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}> {/* <Tabs variant="pills" color='#FF9861' radius="xl" defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}>
<Tabs.List grow bg={"white"} style={{ <Tabs.List grow bg={"white"} style={{
border: `1px solid ${"#EDEDED"}`, border: `1px solid ${"#EDEDED"}`,
padding: 5, padding: 5,
@@ -43,7 +68,33 @@ export default function TabsDivisionTask() {
</Tabs.Tab> </Tabs.Tab>
</Tabs.List> </Tabs.List>
<ListDivisionTask /> <ListDivisionTask />
</Tabs> </Tabs> */}
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{dataStatus.map((item, index) => (
<Carousel.Slide key={index}>
<Button
variant="subtle"
color={
status == item.id
? "white"
: WARNA.biruTua
}
onClick={() => { router.push("?status=" + item.id) }}
defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
radius={"xl"}
bg={
status == item.id
? "#FF9861"
: "transparent"
}
>
{item.icon}
<Box ml={10}>{item.title}</Box>
</Button>
</Carousel.Slide>
))}
</Carousel>
<ListDivisionTask />
</Box> </Box>
) )
} }