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-26 14:17:11 +08:00
parent cbda027816
commit a54cfb861a
7 changed files with 251 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/module/calender/ui/navbar_create_division_calender.tsx
View File

@@ -208,7 +208,6 @@ export default function NavbarCreateDivisionCalender() {
data={[ data={[
{ value: 'once', label: 'Acara 1 Kali' }, { value: 'once', label: 'Acara 1 Kali' },
{ value: 'daily', label: 'Setiap Hari' }, { value: 'daily', label: 'Setiap Hari' },
// { value: 'weekdays', label: 'Hari Kerja (Sen - Jum)' },
{ value: 'weekly', label: 'Mingguan' }, { value: 'weekly', label: 'Mingguan' },
{ value: 'monthly', label: 'Bulanan' }, { value: 'monthly', label: 'Bulanan' },
{ value: 'yearly', label: 'Tahunan' }, { value: 'yearly', label: 'Tahunan' },
@@ -226,31 +225,60 @@ export default function NavbarCreateDivisionCalender() {
) )
} }
/> />
<TextInput styles={{ {isData.repeatEventTyper == "once" ?
input: { <TextInput styles={{
border: `1px solid ${"#D6D8F6"}`, input: {
borderRadius: 10, border: `1px solid ${"#D6D8F6"}`,
}, borderRadius: 10,
}} },
type='number'
required
label="Jumlah pengulangan"
size="md"
placeholder='Jumlah pengulangan'
value={isData.repeatValue}
onChange={(event) => {
setData({ ...isData, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
}} }}
onBlur={() => setTouched({ ...touched, repeatValue: true })} type='number'
// TODO :: NANTI DIPERBAIKI required
error={ label="Jumlah pengulangan"
touched.repeatValue && ( size="md"
isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : "" disabled
// || Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh 0" : "" placeholder='Jumlah pengulangan'
) value={isData.repeatValue}
} onChange={(event) => {
/> setData({ ...isData, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
}}
onBlur={() => setTouched({ ...touched, repeatValue: true })}
// TODO :: NANTI DIPERBAIKI
error={
touched.repeatValue && (
isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : ""
// || Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh 0" : ""
)
}
/>
:
<TextInput styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
type='number'
required
label="Jumlah pengulangan"
size="md"
placeholder='Jumlah pengulangan'
value={isData.repeatValue}
onChange={(event) => {
setData({ ...isData, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
}}
onBlur={() => setTouched({ ...touched, repeatValue: true })}
// TODO :: NANTI DIPERBAIKI
error={
touched.repeatValue && (
isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : ""
// || Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh 0" : ""
)
}
/>
}
<Textarea styles={{ <Textarea styles={{
input: { input: {
border: `1px solid ${"#D6D8F6"}`, border: `1px solid ${"#D6D8F6"}`,

75
src/module/calender/ui/update_division_calender.tsx
View File

@@ -254,7 +254,6 @@ export default function UpdateDivisionCalender() {
data={[ data={[
{ value: 'once', label: 'Acara 1 Kali' }, { value: 'once', label: 'Acara 1 Kali' },
{ value: 'daily', label: 'Setiap Hari' }, { value: 'daily', label: 'Setiap Hari' },
// { value: 'weekdays', label: 'Hari Kerja (Sen - Jum)' },
{ value: 'weekly', label: 'Mingguan' }, { value: 'weekly', label: 'Mingguan' },
{ value: 'monthly', label: 'Bulanan' }, { value: 'monthly', label: 'Bulanan' },
{ value: 'yearly', label: 'Tahunan' }, { value: 'yearly', label: 'Tahunan' },
@@ -278,30 +277,58 @@ export default function UpdateDivisionCalender() {
} }
required required
/> />
<TextInput styles={{ {isDataCalender?.repeatEventTyper == "once" ?
input: { <TextInput styles={{
border: `1px solid ${"#D6D8F6"}`, input: {
borderRadius: 10, border: `1px solid ${"#D6D8F6"}`,
}, borderRadius: 10,
}} },
type='number'
required
label="Jumlah pengulangan"
size="md"
placeholder='Jumlah pengulangan'
defaultValue={isDataCalender?.repeatValue}
onChange={(event) => {
setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
}} }}
onBlur={() => setTouched({ ...touched, repeatValue: true })} type='number'
error={ required
touched.repeatValue && ( label="Jumlah pengulangan"
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null size="md"
// || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null disabled
) placeholder='Jumlah pengulangan'
} defaultValue={isDataCalender?.repeatValue}
/> onChange={(event) => {
setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
}}
onBlur={() => setTouched({ ...touched, repeatValue: true })}
error={
touched.repeatValue && (
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null
// || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null
)
}
/>
:
<TextInput styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
type='number'
required
label="Jumlah pengulangan"
size="md"
placeholder='Jumlah pengulangan'
defaultValue={isDataCalender?.repeatValue}
onChange={(event) => {
setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
}}
onBlur={() => setTouched({ ...touched, repeatValue: true })}
error={
touched.repeatValue && (
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null
// || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null
)
}
/>
}
<Textarea styles={{ <Textarea styles={{
input: { input: {
border: `1px solid ${"#D6D8F6"}`, border: `1px solid ${"#D6D8F6"}`,

12
src/module/document/ui/drawer_cut_documents.tsx
View File

@@ -133,12 +133,12 @@ export default function DrawerCutDocuments({
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Box> </Box>
<Box p={10} pb={60}> <Box pb={60}>
<Box> <Box>
<Breadcrumbs <Breadcrumbs
separator={<GoChevronRight />} separator={<GoChevronRight />}
separatorMargin="md" separatorMargin="md"
mt="xs" mb={10}
> >
{dataJalur.map((v, i) => { {dataJalur.map((v, i) => {
return ( return (
@@ -156,9 +156,9 @@ export default function DrawerCutDocuments({
<ScrollArea <ScrollArea
h={{ h={{
base: "55vh", base: "55vh",
xl: "58vh", xl: "56vh",
md: "57vh", md: "56vh",
sm: "58vh", sm: "56vh",
}} }}
type="scroll" type="scroll"
scrollbarSize={2} scrollbarSize={2}
@@ -205,7 +205,7 @@ export default function DrawerCutDocuments({
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
height: "60vh", height: "50vh",
}} }}
> >
<Text c="dimmed" ta={"center"} fs={"italic"}> <Text c="dimmed" ta={"center"} fs={"italic"}>

158
src/module/document/ui/drawer_menu_document_division.tsx
View File

@@ -1,6 +1,6 @@
"use clent" "use clent"
import { LayoutDrawer, TEMA } from '@/module/_global'; import { LayoutDrawer, TEMA } from '@/module/_global';
import { ActionIcon, Box, Button, Divider, Flex, Grid, Modal, SimpleGrid, Stack, Text, TextInput } from '@mantine/core'; import { ActionIcon, Box, Button, Center, Divider, Flex, Grid, Modal, Progress, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { useParams, useRouter, useSearchParams } from 'next/navigation'; import { useParams, useRouter, useSearchParams } from 'next/navigation';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
@@ -24,6 +24,7 @@ export default function DrawerMenuDocumentDivision() {
const openRef = useRef<() => void>(null) const openRef = useRef<() => void>(null)
const [fileForm, setFileForm] = useState<any>() const [fileForm, setFileForm] = useState<any>()
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [loading, setLoading] = useState(false)
const [bodyFolder, setBodyFolder] = useState({ const [bodyFolder, setBodyFolder] = useState({
name: '', name: '',
@@ -49,101 +50,112 @@ export default function DrawerMenuDocumentDivision() {
async function onUploadFile(data: any) { async function onUploadFile(data: any) {
try { try {
setLoading(true)
const fd = new FormData() const fd = new FormData()
fd.append(`file`, data) fd.append(`file`, data)
fd.append("data", JSON.stringify({ fd.append("data", JSON.stringify({
idPath: (path == undefined || path == '' || path == null) ? 'home' : path, idPath: (path == undefined || path == '' || path == null) ? 'home' : path,
idDivision: param.id idDivision: param.id
})) }))
setOpenModal(false)
// setOpenDrawerDocument(false)
const res = await funUploadFileDocument(fd) const res = await funUploadFileDocument(fd)
if (!res.success) { if (!res.success) {
toast.error(res.message) toast.error(res.message)
} }
setLoading(false)
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal upload file, coba lagi nanti"); toast.error("Gagal upload file, coba lagi nanti");
setLoading(false)
} }
refresh.set(true) refresh.set(true)
setOpenModal(false)
setOpenDrawerDocument(false) setOpenDrawerDocument(false)
} }
return ( return (
<Box> <Box>
<Stack pt={10}> {loading ? (
<SimpleGrid <Box >
cols={{ base: 2, sm: 3, lg: 3 }} <Progress mt={"10vh"} size="lg" value={100} animated />
onClick={() => setOpenDrawerDocument(true)} <Text ta={"center"}>Loading...</Text>
> </Box>
<Flex justify={'center'} align={'center'} direction={'column'} > ) :
<Box> (
<IoAddCircle size={30} color={tema.get().utama} /> <Stack pt={10}>
</Box> <SimpleGrid
<Box > cols={{ base: 2, sm: 3, lg: 3 }}
<Text c={tema.get().utama}>Tambah Dokumen</Text> onClick={() => setOpenDrawerDocument(true)}
</Box> >
</Flex> <Flex justify={'center'} align={'center'} direction={'column'} >
</SimpleGrid> <Box>
</Stack> <IoAddCircle size={30} color={tema.get().utama} />
</Box>
<Box >
<Text c={tema.get().utama}>Tambah Dokumen</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
)
}
<LayoutDrawer opened={openDrawerDocument} onClose={() => setOpenDrawerDocument(false)} title={''}> <LayoutDrawer opened={openDrawerDocument} onClose={() => setOpenDrawerDocument(false)} title={''}>
<SimpleGrid {loading ? (
cols={{ base: 2, sm: 2, lg: 2 }} <Box >
onClick={() => setOpenDrawerDocument(true)} <Progress mt={"10vh"} size="lg" value={100} animated />
> <Text ta={"center"}>Loading...</Text>
</Box>
) :
(
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
onClick={() => setOpenDrawerDocument(true)}
>
<Flex onClick={() => setOpenModal(true)} justify={'center'} align={'center'} direction={'column'} mb={20} >
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<FaFolderClosed size={40} color={tema.get().utama} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={tema.get().utama}>Membuat Folder</Text>
</Box>
</Flex>
<Dropzone
openRef={openRef}
onDrop={async (files) => {
if (!files || _.isEmpty(files))
return toast.error('Tidak ada file yang dipilih')
onUploadFile(files[0])
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
onReject={(files) => {
refresh.set(true)
setOpenModal(false)
setOpenDrawerDocument(false)
toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
}}
>
<Flex justify={'center'} align={'center'} direction={'column'} mb={20} onClick={() => openRef.current?.()}>
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<HiDocumentText size={40} color={tema.get().utama} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={tema.get().utama}>Upload File</Text>
</Box>
</Flex>
</Dropzone>
<Flex onClick={() => setOpenModal(true)} justify={'center'} align={'center'} direction={'column'} mb={20} > </SimpleGrid>
<Box> )
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings"> }
<FaFolderClosed size={40} color={tema.get().utama} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={tema.get().utama}>Membuat Folder</Text>
</Box>
</Flex>
<Dropzone
openRef={openRef}
onDrop={async (files) => {
if (!files || _.isEmpty(files))
return toast.error('Tidak ada file yang dipilih')
onUploadFile(files[0])
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
onReject={(files) => {
refresh.set(true)
setOpenModal(false)
setOpenDrawerDocument(false)
toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
}}
>
<Flex justify={'center'} align={'center'} direction={'column'} mb={20} onClick={() => openRef.current?.()}>
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<HiDocumentText size={40} color={tema.get().utama} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={tema.get().utama}>Upload File</Text>
</Box>
</Flex>
</Dropzone>
{/* <Flex justify={'center'} align={'center'} direction={'column'} mb={20} >
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<FaRegImage size={40} color={tema.get().utama} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={tema.get().utama}>Upload Foto</Text>
</Box>
</Flex> */}
</SimpleGrid>
</LayoutDrawer> </LayoutDrawer>

71
src/module/document/ui/drawer_share_document.tsx
View File

@@ -17,8 +17,9 @@ import {
ActionIcon, ActionIcon,
ScrollArea, ScrollArea,
Skeleton, Skeleton,
Grid,
} from "@mantine/core"; } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
@@ -39,6 +40,7 @@ export default function DrawerShareDocument({
const refresh = useHookstate(globalRefreshDocument); const refresh = useHookstate(globalRefreshDocument);
const tema = useHookstate(TEMA); const tema = useHookstate(TEMA);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function onShare() { async function onShare() {
try { try {
@@ -100,8 +102,8 @@ export default function DrawerShareDocument({
}; };
return ( return (
<Box pt={10}> <Box>
<Box mt={10}> <Box>
<ScrollArea <ScrollArea
h={{ h={{
base: "58vh", base: "58vh",
@@ -154,8 +156,15 @@ export default function DrawerShareDocument({
); );
return ( return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}> <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}> <Grid align='center'>
<Group> <Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1,
}}>
<ActionIcon <ActionIcon
variant="light" variant="light"
color="gray" color="gray"
@@ -165,34 +174,30 @@ export default function DrawerShareDocument({
> >
<FaUsers fontSize={40} /> <FaUsers fontSize={40} />
</ActionIcon> </ActionIcon>
<Stack align="flex-start" justify="flex-start"> </Grid.Col>
<Text <Grid.Col span={{
style={{ base: 11,
cursor: "pointer", xs: 11,
display: "flex", sm: 11,
alignItems: "center", md: 11,
}} lg: 11,
> xl: 11,
{v.name} }}>
</Text> <Flex justify='space-between' align={"center"}>
</Stack> <Flex direction={'column'} align="flex-start" justify="flex-start">
</Group> <Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
<Text </Flex>
style={{ {isSelected ? (
cursor: "pointer", <FaCheck style={{ marginRight: 10 }} />
display: "flex", ) : (
alignItems: "center", ""
paddingLeft: 20, )}
}} </Flex>
> </Grid.Col>
{isSelected ? ( </Grid>
<FaCheck style={{ marginRight: 10 }} /> <Box mt={10}>
) : ( <Divider my={10} />
"" </Box>
)}
</Text>
</Flex>
<Divider my={"md"} />
</Box> </Box>
); );
})} })}

35
src/module/document/ui/navbar_document_division.tsx
View File

@@ -521,28 +521,24 @@ export default function NavbarDocumentDivision() {
{isMobile2 ? ( {isMobile2 ? (
<Breadcrumbs <Breadcrumbs
separator={<GoChevronRight />} separator={<GoChevronRight />}
separatorMargin="md" my="xs"
mt="xs"
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
> >
{dataJalur.slice(0, 3).map((v, i) => { {dataJalur.slice(0, 3).map((v, i) => {
return ( return (
<> <Text
<Box w={50}> onClick={() => router.push("?path=" + v.id)}
<Text key={i}
onClick={() => router.push("?path=" + v.id)} style={{
key={i} overflow: "hidden",
style={{ textOverflow: "ellipsis",
overflow: "hidden", whiteSpace: "nowrap",
textOverflow: "ellipsis", maxWidth: "100%",
whiteSpace: "nowrap", }}
maxWidth: "100%", truncate={"end"}
}} >
> {v.name}
{v.name} </Text>
</Text>
</Box>
</>
); );
})} })}
{dataJalur.length > 3 && ( {dataJalur.length > 3 && (
@@ -574,8 +570,7 @@ export default function NavbarDocumentDivision() {
) : ( ) : (
<Breadcrumbs <Breadcrumbs
separator={<GoChevronRight />} separator={<GoChevronRight />}
separatorMargin="md" my="xs"
mt="xs"
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
> >
{dataJalur.slice(0, 4).map((v, i) => { {dataJalur.slice(0, 4).map((v, i) => {

3
src/module/project/ui/list_file_detail_project.tsx
View File

@@ -145,6 +145,9 @@ export default function ListFileDetailProject() {
{item.extension == "png" && <BsFiletypePng size={30} />} {item.extension == "png" && <BsFiletypePng size={30} />}
{item.extension == "jpg" && <BsFiletypeJpg size={30} />} {item.extension == "jpg" && <BsFiletypeJpg size={30} />}
{item.extension == "jpeg" && <BsFiletypeJpg size={30} />} {item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
{item.extension == "PNG" && <BsFiletypePng size={30} />}
{item.extension == "JPG" && <BsFiletypeJpg size={30} />}
{item.extension == "JPEG" && <BsFiletypeJpg size={30} />}
{item.extension == "heic" && <BsFiletypeHeic size={30} />} {item.extension == "heic" && <BsFiletypeHeic size={30} />}
</Grid.Col> </Grid.Col>
<Grid.Col <Grid.Col