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) => ({
..._.omit(v, ["idUser", "name"]),
..._.omit(v, ["idUser", "name", "img"]),
idUser: v.idUser,
idDivision: data.id,
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 (
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<ColorSchemeScript />
</head>
<body className={`${LatoFont.className}`} suppressHydrationWarning>
<MantineProvider>
<Box bg={'#252A2F'} pos={"fixed"} w={"100%"} h={"100%"} style={{
overflowY: "auto"
overflowY: "auto",
touchAction: "manipulation"
}}>
<Toaster/>
<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 LayoutNavbarHome from "./layout/layout_navbar_home";
import LayoutNavbarNew from "./layout/layout_navbar_new";
import NoZoom from "./layout/no_zoom";
import ViewFilter from "./view/view_filter";
export { WARNA };
@@ -34,3 +35,4 @@ export { SkeletonDetailListTugasTask }
export { LayoutModalViewFile }
export { globalRole }
export { WrapLayout }
export { NoZoom }

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

@@ -1,12 +1,22 @@
'use client'
import { Image, Modal } from '@mantine/core';
import { Box, Button, Flex, Image, Modal, rem } from '@mantine/core';
import dynamic from 'next/dynamic';
import React, { useState } from 'react';
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 }) {
const [isValModal, setValModal] = useState(opened)
const [zoom, setZoom] = useState(1)
const filePdf = '/file/' + fitur + '/' + file
const handleZoomIn = () => {
setZoom(zoom + 0.1)
}
const handleZoomOut = () => {
setZoom(zoom - 0.1)
}
return (
<Modal styles={{
body: {
@@ -16,20 +26,49 @@ export default function LayoutModal({ opened, onClose, extension, fitur, file }:
maxWidth: 550,
}
}} opened={opened} onClose={onClose} withCloseButton={true} centered closeOnClickOutside={false} fullScreen>
<Box
pos="sticky"
top={70}
right={10}
w={50}
{
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}
/>
}
style={{
background: 'white',
zIndex: 999,
}}
>
<Flex
direction="column"
>
<Button mb={5} variant="outline" onClick={handleZoomIn}>
+
</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>
);
}

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
style={{ justifyContent: "center" }}
placeholder=""
type={"number"}
size="lg"
styles={{
input: {

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>

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>
</Center>
</Box>
<Box onClick={() => router.push('/project')}>
<Box onClick={() => router.push('/project?status=0&group=null')}>
<Center>
<ActionIcon variant="gradient"
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>
</Center>
</Box>
<Box onClick={() => router.push('/project')}>
<Box onClick={() => router.push('/project?status=0&group=null')}>
<Center>
<ActionIcon variant="gradient"
size={68}

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

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

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

@@ -1,11 +1,13 @@
'use client'
import { Box, rem, Tabs } from "@mantine/core";
import { Box, Button, rem, Tabs } from "@mantine/core";
import { IoIosCheckmarkCircleOutline } from "react-icons/io";
import { IoCloseCircleOutline } from "react-icons/io5";
import { RiProgress3Line } from "react-icons/ri";
import { TbClockPause } from "react-icons/tb";
import ListDivisionTask from "./list_division_task";
import { useRouter, useSearchParams } from "next/navigation";
import { Carousel } from "@mantine/carousel";
import { WARNA } from "@/module/_global";
export default function TabsDivisionTask() {
const iconStyle = { width: rem(20), height: rem(20) };
@@ -13,9 +15,32 @@ export default function TabsDivisionTask() {
const searchParams = useSearchParams()
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 (
<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={{
border: `1px solid ${"#EDEDED"}`,
padding: 5,
@@ -43,7 +68,33 @@ export default function TabsDivisionTask() {
</Tabs.Tab>
</Tabs.List>
<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>
)
}