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

Merge pull request #229 from bipproduction/lukman/13-september-2024

Browse Source 
style : tema document
This commit is contained in:
Amalia
2024-09-13 13:56:17 +08:00
committed by GitHub
parent 4173daf316 568b49242c
commit 5d72c78aba
5 changed files with 37 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { WARNA } from '@/module/_global'; import { TEMA } from '@/module/_global';
import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, ScrollArea, Text, TextInput } from '@mantine/core'; import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, ScrollArea, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
@@ -10,6 +10,7 @@ import { useShallowEffect } from '@mantine/hooks';
import { MdFolder } from 'react-icons/md'; import { MdFolder } from 'react-icons/md';
import router from 'next/router'; import router from 'next/router';
import { GoChevronRight } from 'react-icons/go'; import { GoChevronRight } from 'react-icons/go';
import { useHookstate } from '@hookstate/core';
export default function DrawerCutDocuments({ category, onChoosePath, data }: { category: string, data: IFormDetailMoreItem[], onChoosePath: (val: string) => void }) { export default function DrawerCutDocuments({ category, onChoosePath, data }: { category: string, data: IFormDetailMoreItem[], onChoosePath: (val: string) => void }) {
@@ -19,6 +20,7 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
const [dataDocument, setDataDocument] = useState<IDataDocument[]>([]) const [dataDocument, setDataDocument] = useState<IDataDocument[]>([])
const [dataJalur, setDataJalur] = useState<IJalurItem[]>([]) const [dataJalur, setDataJalur] = useState<IJalurItem[]>([])
const [valName, setValName] = useState('') const [valName, setValName] = useState('')
const tema = useHookstate(TEMA)
async function onCreateFolder() { async function onCreateFolder() {
@@ -68,10 +70,10 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
}}> }}>
<Grid justify='center'> <Grid justify='center'>
<Grid.Col span={6}> <Grid.Col span={6}>
<Button variant="subtle" fullWidth color={WARNA.biruTua} radius={"xl"} onClick={() => setOpened(true)}>BUAT FOLDER BARU</Button> <Button variant="subtle" fullWidth color={tema.get().utama} radius={"xl"} onClick={() => setOpened(true)}>BUAT FOLDER BARU</Button>
</Grid.Col> </Grid.Col>
<Grid.Col span={6}> <Grid.Col span={6}>
<Button variant="filled" fullWidth color={WARNA.biruTua} radius={"xl"} onClick={() => onChoosePath(path)}> <Button variant="filled" fullWidth color={tema.get().utama} radius={"xl"} onClick={() => onChoosePath(path)}>
{ {
(category == "move") ? (category == "move") ?
"PINDAH" : "SALIN" "PINDAH" : "SALIN"
@@ -152,7 +154,7 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
<TextInput <TextInput
styles={{ styles={{
input: { input: {
color: WARNA.biruTua, color: tema.get().utama,
borderRadius: '#828AFC', borderRadius: '#828AFC',
borderColor: '#828AFC', borderColor: '#828AFC',
}, },
@@ -169,7 +171,7 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
<Button variant="subtle" fullWidth color='#969494' onClick={() => setOpened(false)}>Batalkan</Button> <Button variant="subtle" fullWidth color='#969494' onClick={() => setOpened(false)}>Batalkan</Button>
</Grid.Col> </Grid.Col>
<Grid.Col span={6}> <Grid.Col span={6}>
<Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={() => onCreateFolder()}>Membuat</Button> <Button variant="subtle" fullWidth color={tema.get().utama} onClick={() => onCreateFolder()}>Membuat</Button>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Box> </Box>

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

@@ -1,5 +1,5 @@
"use clent" "use clent"
import { LayoutDrawer, WARNA } 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, Divider, Flex, Grid, Modal, 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';
@@ -23,6 +23,7 @@ export default function DrawerMenuDocumentDivision() {
const refresh = useHookstate(globalRefreshDocument) const refresh = useHookstate(globalRefreshDocument)
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 [bodyFolder, setBodyFolder] = useState({ const [bodyFolder, setBodyFolder] = useState({
name: '', name: '',
@@ -78,10 +79,10 @@ export default function DrawerMenuDocumentDivision() {
> >
<Flex justify={'center'} align={'center'} direction={'column'} > <Flex justify={'center'} align={'center'} direction={'column'} >
<Box> <Box>
<IoAddCircle size={30} color={WARNA.biruTua} /> <IoAddCircle size={30} color={tema.get().utama} />
</Box> </Box>
<Box > <Box >
<Text c={WARNA.biruTua}>Tambah Dokumen</Text> <Text c={tema.get().utama}>Tambah Dokumen</Text>
</Box> </Box>
</Flex> </Flex>
</SimpleGrid> </SimpleGrid>
@@ -96,11 +97,11 @@ export default function DrawerMenuDocumentDivision() {
<Flex onClick={() => setOpenModal(true)} justify={'center'} align={'center'} direction={'column'} mb={20} > <Flex onClick={() => setOpenModal(true)} justify={'center'} align={'center'} direction={'column'} mb={20} >
<Box> <Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings"> <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<FaFolderClosed size={40} color={WARNA.biruTua} /> <FaFolderClosed size={40} color={tema.get().utama} />
</ActionIcon> </ActionIcon>
</Box> </Box>
<Box mt={10}> <Box mt={10}>
<Text c={WARNA.biruTua}>Membuat Folder</Text> <Text c={tema.get().utama}>Membuat Folder</Text>
</Box> </Box>
</Flex> </Flex>
<Dropzone <Dropzone
@@ -123,11 +124,11 @@ export default function DrawerMenuDocumentDivision() {
<Flex justify={'center'} align={'center'} direction={'column'} mb={20} onClick={() => openRef.current?.()}> <Flex justify={'center'} align={'center'} direction={'column'} mb={20} onClick={() => openRef.current?.()}>
<Box> <Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings"> <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<HiDocumentText size={40} color={WARNA.biruTua} /> <HiDocumentText size={40} color={tema.get().utama} />
</ActionIcon> </ActionIcon>
</Box> </Box>
<Box mt={10}> <Box mt={10}>
<Text c={WARNA.biruTua}>Upload File</Text> <Text c={tema.get().utama}>Upload File</Text>
</Box> </Box>
</Flex> </Flex>
</Dropzone> </Dropzone>
@@ -135,11 +136,11 @@ export default function DrawerMenuDocumentDivision() {
{/* <Flex justify={'center'} align={'center'} direction={'column'} mb={20} > {/* <Flex justify={'center'} align={'center'} direction={'column'} mb={20} >
<Box> <Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings"> <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<FaRegImage size={40} color={WARNA.biruTua} /> <FaRegImage size={40} color={tema.get().utama} />
</ActionIcon> </ActionIcon>
</Box> </Box>
<Box mt={10}> <Box mt={10}>
<Text c={WARNA.biruTua}>Upload Foto</Text> <Text c={tema.get().utama}>Upload Foto</Text>
</Box> </Box>
</Flex> */} </Flex> */}
</SimpleGrid> </SimpleGrid>
@@ -162,7 +163,7 @@ export default function DrawerMenuDocumentDivision() {
<TextInput <TextInput
styles={{ styles={{
input: { input: {
color: WARNA.biruTua, color: tema.get().utama,
borderRadius: '#828AFC', borderRadius: '#828AFC',
borderColor: '#828AFC', borderColor: '#828AFC',
}, },
@@ -179,7 +180,7 @@ export default function DrawerMenuDocumentDivision() {
<Button variant="subtle" fullWidth color='#969494' onClick={() => setOpenModal(false)}>Batalkan</Button> <Button variant="subtle" fullWidth color='#969494' onClick={() => setOpenModal(false)}>Batalkan</Button>
</Grid.Col> </Grid.Col>
<Grid.Col span={6}> <Grid.Col span={6}>
<Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={() => onCreateFolder()}>Membuat</Button> <Button variant="subtle" fullWidth color={tema.get().utama} onClick={() => onCreateFolder()}>Membuat</Button>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Box> </Box>

11
src/module/document/ui/drawer_more.tsx
View File

@@ -1,4 +1,4 @@
import { LayoutDrawer, WARNA } from "@/module/_global"; import { LayoutDrawer, TEMA } from "@/module/_global";
import { Box, Flex, Group, SimpleGrid, Stack, Text } from "@mantine/core"; import { Box, Flex, Group, SimpleGrid, Stack, Text } from "@mantine/core";
import React, { useState } from "react"; import React, { useState } from "react";
import { LuFolders, LuFolderSymlink } from "react-icons/lu"; import { LuFolders, LuFolderSymlink } from "react-icons/lu";
@@ -17,6 +17,7 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
const refresh = useHookstate(globalRefreshDocument) const refresh = useHookstate(globalRefreshDocument)
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>()
const [forbidCopy, setForbidCopy] = useState(true) const [forbidCopy, setForbidCopy] = useState(true)
const tema = useHookstate(TEMA)
async function onMoveItem(path: string) { async function onMoveItem(path: string) {
@@ -72,20 +73,20 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
> >
<Flex onClick={() => setIsCut(true)} justify={'center'} align={'center'} direction={'column'} > <Flex onClick={() => setIsCut(true)} justify={'center'} align={'center'} direction={'column'} >
<Box> <Box>
<LuFolderSymlink size={30} color={WARNA.biruTua} /> <LuFolderSymlink size={30} color={tema.get().utama} />
</Box> </Box>
<Box> <Box>
<Text c={WARNA.biruTua}>Pindah</Text> <Text c={tema.get().utama}>Pindah</Text>
</Box> </Box>
</Flex> </Flex>
{ {
(!forbidCopy) && (!forbidCopy) &&
<Flex onClick={() => setIsCopy(true)} justify={'center'} align={'center'} direction={'column'} > <Flex onClick={() => setIsCopy(true)} justify={'center'} align={'center'} direction={'column'} >
<Box> <Box>
<LuFolders size={30} color={WARNA.biruTua} /> <LuFolders size={30} color={tema.get().utama} />
</Box> </Box>
<Box> <Box>
<Text c={WARNA.biruTua}>Salin</Text> <Text c={tema.get().utama}>Salin</Text>
</Box> </Box>
</Flex> </Flex>
} }

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

@@ -1,4 +1,4 @@
import { WARNA } from "@/module/_global"; import { TEMA } from "@/module/_global";
import { funGetListDivisionByIdDivision, IDataDivison } from "@/module/division_new"; import { funGetListDivisionByIdDivision, IDataDivison } from "@/module/division_new";
import { IDataMemberTaskDivision } from "@/module/task/lib/type_task"; import { IDataMemberTaskDivision } from "@/module/task/lib/type_task";
import { Box, Select, Button, Avatar, Divider, Flex, Group, Stack, Text, ActionIcon } from "@mantine/core"; import { Box, Select, Button, Avatar, Divider, Flex, Group, Stack, Text, ActionIcon } from "@mantine/core";
@@ -17,6 +17,7 @@ export default function DrawerShareDocument({ data }: { data: IShareDivision[]})
const [isData, setData] = useState<IDataDivison[]>([]) const [isData, setData] = useState<IDataDivison[]>([])
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>()
const refresh = useHookstate(globalRefreshDocument) const refresh = useHookstate(globalRefreshDocument)
const tema = useHookstate(TEMA)
@@ -112,7 +113,7 @@ export default function DrawerShareDocument({ data }: { data: IShareDivision[]})
<Box> <Box>
<Button <Button
c={"white"} c={"white"}
bg={WARNA.biruTua} bg={tema.get().utama}
size="lg" size="lg"
radius={30} radius={30}
fullWidth fullWidth

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

@@ -1,5 +1,5 @@
'use client' 'use client'
import { LayoutDrawer, LayoutModalViewFile, LayoutNavbarNew, WARNA } from '@/module/_global'; import { LayoutDrawer, LayoutModalViewFile, LayoutNavbarNew, TEMA } from '@/module/_global';
import { ActionIcon, Anchor, Box, Breadcrumbs, Button, Checkbox, Divider, Flex, Grid, Group, Indicator, Modal, rem, Select, SimpleGrid, Text, TextInput } from '@mantine/core'; import { ActionIcon, Anchor, Box, Breadcrumbs, Button, Checkbox, Divider, Flex, Grid, Group, Indicator, Modal, rem, Select, SimpleGrid, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { HiMenu } from 'react-icons/hi'; import { HiMenu } from 'react-icons/hi';
@@ -47,7 +47,8 @@ export default function NavbarDocumentDivision() {
const [selectedFiles, setSelectedFiles] = useState<any>([]) const [selectedFiles, setSelectedFiles] = useState<any>([])
const [selectAll, setSelectAll] = useState(false) const [selectAll, setSelectAll] = useState(false)
const [dariSelectAll, setDariSelectAll] = useState(false) const [dariSelectAll, setDariSelectAll] = useState(false)
const isMobile = useMediaQuery('(max-width: 369px)'); const isMobile = useMediaQuery('(max-width: 369px)')
const tema = useHookstate(TEMA)
const [bodyRename, setBodyRename] = useState({ const [bodyRename, setBodyRename] = useState({
id: '', id: '',
name: '', name: '',
@@ -252,7 +253,7 @@ export default function NavbarDocumentDivision() {
<Box> <Box>
{(selectedFiles.length > 0 || dariSelectAll) && ( {(selectedFiles.length > 0 || dariSelectAll) && (
<> <>
<Box h={90} bg={WARNA.biruTua} pos={'fixed'} top={0} w={"100%"} style={{ <Box h={90} bg={tema.get().utama} pos={'fixed'} top={0} w={"100%"} style={{
maxWidth: rem(550), maxWidth: rem(550),
zIndex: 999, zIndex: 999,
}}> }}>
@@ -271,7 +272,7 @@ export default function NavbarDocumentDivision() {
</ActionIcon> </ActionIcon>
</Flex> </Flex>
</Box> </Box>
<Box h={70} bg={WARNA.biruTua} pos={'fixed'} bottom={0} w={"100%"} style={{ <Box h={70} bg={tema.get().utama} pos={'fixed'} bottom={0} w={"100%"} style={{
maxWidth: rem(550), maxWidth: rem(550),
zIndex: 999, zIndex: 999,
}}> }}>
@@ -340,7 +341,7 @@ export default function NavbarDocumentDivision() {
<LayoutNavbarNew back={`/division/${param.id}/`} title={name} <LayoutNavbarNew back={`/division/${param.id}/`} title={name}
menu={ menu={
<ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> <ActionIcon onClick={() => setOpen(true)} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' /> <HiMenu size={20} color='white' />
</ActionIcon> </ActionIcon>
} }
@@ -384,7 +385,7 @@ export default function NavbarDocumentDivision() {
<Box> <Box>
{ {
(v.share) ? (v.share) ?
<Indicator offset={15} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaShare />} size={25}> <Indicator offset={15} withBorder inline color={tema.get().bgIcon} position="bottom-end" label={<FaShare />} size={25}>
{ {
(v.category == "FOLDER") ? (v.category == "FOLDER") ?
<FcFolder size={isMobile ? 40 : 50} /> : <FcFolder size={isMobile ? 40 : 50} /> :
@@ -486,7 +487,7 @@ export default function NavbarDocumentDivision() {
<TextInput <TextInput
styles={{ styles={{
input: { input: {
color: WARNA.biruTua, color: tema.get().utama,
borderRadius: '#828AFC', borderRadius: '#828AFC',
borderColor: '#828AFC', borderColor: '#828AFC',
}, },
@@ -503,7 +504,7 @@ export default function NavbarDocumentDivision() {
<Button variant="subtle" fullWidth color='#969494' onClick={() => setRename(false)}>Batalkan</Button> <Button variant="subtle" fullWidth color='#969494' onClick={() => setRename(false)}>Batalkan</Button>
</Grid.Col> </Grid.Col>
<Grid.Col span={6}> <Grid.Col span={6}>
<Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onRenameSubmit()}>Simpan</Button> <Button variant="subtle" fullWidth color={tema.get().utama} onClick={(val) => onRenameSubmit()}>Simpan</Button>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Box> </Box>