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

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

@@ -5,7 +5,9 @@ import {
Avatar,
Box,
Button,
Divider,
Flex,
Grid,
Group,
rem,
Select,
@@ -96,12 +98,12 @@ export default function CreateDivision() {
if (isChooseAdmin) return <NavbarAdminDivision data={body} onSuccess={(val) => {
if (val) {
member.set([])
setBody({
...body,
idGroup: "",
name: "",
desc: "",
})
// setBody({
// ...body,
// idGroup: "",
// name: "",
// desc: "",
// })
}
setChooseAdmin(false)
@@ -187,24 +189,32 @@ export default function CreateDivision() {
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
) : member.get().map((v: any, i: any) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mt={20}
key={i}
>
<Group>
<Avatar src={v.img} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
<Box key={i}>
<Grid align='center' mt={10}
>
<Grid.Col span={9}>
<Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Box w={{
base: 140,
xl: 270
}}>
<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>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
Anggota
</Text>
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</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}`,
borderRadius: 10,
padding: 10
}} onClick={() => router.push(param.id + '/task')}>
}} onClick={() => router.push(param.id + '/task?status=0')}>
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<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) =>
<Carousel.Slide key={v.id}>
<UnstyledButton onClick={() => router.push(`/document`)}>
<UnstyledButton onClick={() => router.push(`/division/${param.id}/document`)}>
<Stack gap={0} w={200}>
<Paper withBorder shadow="sm" radius={12} >
<Center p={"md"}>

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

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

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

@@ -1,15 +1,18 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
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 { useRouter } from 'next/navigation';
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 { funGetUserByCookies } from '@/module/auth';
import toast from 'react-hot-toast';
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 }) {
@@ -18,12 +21,13 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
const [selectedFiles, setSelectedFiles] = useState<any>([]);
const [dataMember, setDataMember] = useState<TypeUser>([])
const [loading, setLoading] = useState(true)
const [onClickSearch, setOnClickSearch] = useState(false)
const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != dataMember[index].id))
} 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("")
}, []);
const handleSearchClick = () => {
setOnClickSearch(true);
};
const handleClose = () => {
setOnClickSearch(false);
};
function handleXMember(id: number) {
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != id))
}
return (
<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}>
<Stack>
<TextInput
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}>
<Box pt={100} mb={100}>
{loading ?
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
spacing={{ base: 20, sm: "xl" }}
verticalSpacing={{ base: "md", sm: "xl" }}
>
{Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<Skeleton width={"100%"} height={130} radius={"md"} />
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
))
: dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
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>
))}
</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>