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

Merge pull request #222 from bipproduction/lukman/12-september-2024

Browse Source 
style : tema
This commit is contained in:
Amalia
2024-09-12 13:33:32 +08:00
committed by GitHub
parent 6cd32ceb22 2a56baa611
commit 370b0bec64
11 changed files with 494 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/(application)/color-palette/create/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { CreatePaletteColor } from '@/module/color_palette';
import React from 'react';
function Page() {
return (
<CreatePaletteColor />
);
}
export default Page;

10
src/app/(application)/color-palette/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { ListColorPalette } from '@/module/color_palette';
import React from 'react';
function Page() {
return (
<ListColorPalette />
);
}
export default Page;

10
src/app/(application)/color-palette/update/[id]/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { EditPaletteColor } from '@/module/color_palette';
import React from 'react';
function Page() {
return (
<EditPaletteColor />
);
}
export default Page;

7
src/module/color_palette/index.ts Normal file
View File

@@ -0,0 +1,7 @@
import CreatePaletteColor from "./ui/create_palette_color";
import EditPaletteColor from "./ui/edit_palette_color";
import ListColorPalette from "./ui/list_color_palette";
export { ListColorPalette }
export { CreatePaletteColor }
export { EditPaletteColor }

0
src/module/color_palette/lib/.gitkeep Normal file
View File

115
src/module/color_palette/ui/create_palette_color.tsx Normal file
View File

@@ -0,0 +1,115 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
export default function CreatePaletteColor() {
const [isWarna, setWarna] = useState({
warnaSatu: '',
warnaDua: '',
warnaTiga: '',
warnaEmpat: '',
})
return (
<Box>
<LayoutNavbarNew back='/color-palette' title='Tambah Palet' menu />
<Box p={20}>
<Stack>
<ColorInput
label={'Warna 1'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaSatu: color })
}
/>
<ColorInput
label={'Warna 2'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaDua: color })
}
/>
<ColorInput
label={'Warna 3'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaTiga: color })
}
/>
<ColorInput
label={'Warna 4'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaEmpat: color })
}
/>
</Stack>
<Flex justify={'center'} align={"center"} w={"auto"} gap={10} mt={30}>
<Box>
<Center>
<Box bg={isWarna.warnaSatu} w={50} h={50} style={{
borderRadius: 10
}} />
</Center>
{isWarna.warnaSatu.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaSatu}</Pill>
}
</Box>
<Box>
<Box bg={isWarna.warnaDua} w={50} h={50} style={{
borderRadius: 10
}} />
{isWarna.warnaDua.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaDua}</Pill>
}
</Box>
<Box>
<Box bg={isWarna.warnaTiga} w={50} h={50} style={{
borderRadius: 10
}} />
{isWarna.warnaTiga.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaTiga}</Pill>
}
</Box>
<Box>
<Box bg={isWarna.warnaEmpat} w={50} h={50} style={{
borderRadius: 10
}} />
{isWarna.warnaEmpat.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaEmpat}</Pill>
}
</Box>
</Flex>
</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>
);
}

27
src/module/color_palette/ui/drawer_create_palette.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { WARNA } from '@/module/_global';
import { Box, Flex, SimpleGrid, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
import { IoAddCircle } from 'react-icons/io5';
export default function DrawerCreatePalette() {
const router = useRouter()
return (
<Box>
<SimpleGrid
cols={{ base: 2, sm: 3, lg: 3 }}
>
<Flex justify={'center'} align={'center'} direction={'column'}
onClick={() => router.push('/color-palette/create')}
>
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text ta={'center'} c={WARNA.biruTua}>Tambah Palet</Text>
</Box>
</Flex>
</SimpleGrid>
</Box>
);
}

49
src/module/color_palette/ui/drawer_palet_edit_end_default.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { Box, Flex, SimpleGrid, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { FaPencil } from 'react-icons/fa6';
import { IoAddCircle, IoColorPalette } from 'react-icons/io5';
export default function DrawerPaletEditEndDefault() {
const router = useRouter()
const [isModal, setModal] = useState(false)
function onCLose(val: boolean) {
setModal(false)
}
return (
<Box>
<SimpleGrid
cols={{ base: 2, sm: 3, lg: 3 }}
>
<Flex justify={'center'} align={'center'} direction={'column'}
onClick={() => setModal(true)}
>
<Box>
<IoColorPalette size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text ta={'center'} c={WARNA.biruTua}>Default Warna</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'}
onClick={() => router.push('/color-palette/update/1')}
>
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text ta={'center'} c={WARNA.biruTua}>Edit Palet</Text>
</Box>
</Flex>
</SimpleGrid>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah warna Aplikasi?"
onYes={(val) => { onCLose(val) }} />
</Box>
);
}

116
src/module/color_palette/ui/edit_palette_color.tsx Normal file
View File

@@ -0,0 +1,116 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
export default function EditPaletteColor() {
const [isWarna, setWarna] = useState({
warnaSatu: '',
warnaDua: '',
warnaTiga: '',
warnaEmpat: '',
})
return (
<Box>
<LayoutNavbarNew back='/color-palette' title='Edit Palet' menu />
<Box p={20}>
<Stack>
<ColorInput
label={'Warna 1'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaSatu: color })
}
/>
<ColorInput
label={'Warna 2'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaDua: color })
}
/>
<ColorInput
label={'Warna 3'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaTiga: color })
}
/>
<ColorInput
label={'Warna 4'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
onChangeEnd={
(color) => setWarna({ ...isWarna, warnaEmpat: color })
}
/>
</Stack>
<Flex justify={'center'} align={"center"} w={"auto"} gap={10} mt={30}>
<Box>
<Center>
<Box bg={isWarna.warnaSatu} w={50} h={50} style={{
borderRadius: 10
}} />
</Center>
{isWarna.warnaSatu.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaSatu}</Pill>
}
</Box>
<Box>
<Box bg={isWarna.warnaDua} w={50} h={50} style={{
borderRadius: 10
}} />
{isWarna.warnaDua.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaDua}</Pill>
}
</Box>
<Box>
<Box bg={isWarna.warnaTiga} w={50} h={50} style={{
borderRadius: 10
}} />
{isWarna.warnaTiga.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaTiga}</Pill>
}
</Box>
<Box>
<Box bg={isWarna.warnaEmpat} w={50} h={50} style={{
borderRadius: 10
}} />
{isWarna.warnaEmpat.length == 0 ? "" :
<Pill size="xs" ta={"center"}>{isWarna.warnaEmpat}</Pill>
}
</Box>
</Flex>
</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>
);
}

132
src/module/color_palette/ui/list_color_palette.tsx Normal file
View File

@@ -0,0 +1,132 @@
"use client"
import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
import { ActionIcon, Box, Checkbox, Flex, Group, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { FaCircleCheck } from 'react-icons/fa6';
import { HiMenu } from 'react-icons/hi';
import DrawerCreatePalette from './drawer_create_palette';
import DrawerPaletEditEndDefault from './drawer_palet_edit_end_default';
const paletWarna = [
{
id: 1,
name: 'Palet Bawaan 1',
color: ['#ff69b4', '#33cc33', '#7D8A7DFF', '#0B730BFF']
},
{
id: 2,
name: 'Palet Bawaan 2',
color: ['#EF8A62FF', '#532CC1FF', '#16ACE3FF', '#760B2DFF']
},
{
id: 3,
name: 'Palet Bawaan 3',
color: ['#F8B195FF', '#F67280FF', '#C06C84FF', '#6C5B7BFF']
},
]
const paletTambahan = [
{
id: 1,
name: 'Palet Tambah 1',
color: ['#ABD220FF', '#E409E8FF', '#08A2A4FF', '#C11515FF']
}
]
export default function ListColorPalette() {
const router = useRouter()
const [isOpen, setOpen] = useState(false)
const [isOpenTambahan, setOpenTambahan] = useState(false)
return (
<Box>
<LayoutNavbarNew back='/home' title='Palet Warna' menu={
<ActionIcon onClick={() => { setOpen(true) }} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
} />
<Box p={20}>
{paletWarna.map((v, i) => (
<Box mb={20} key={i}>
<Box style={{
borderWidth: "3px",
borderStyle: "solid",
borderImage: `linear-gradient(to right, ${v.color} ) 1 `,
}} pt={10} pb={10} pl={20} pr={20}
onClick={() => { setOpenTambahan(true) }}
>
<Group justify='space-between' align='center'>
<Text>{v.name}</Text>
<Checkbox
radius="xl"
color="teal"
/>
</Group>
<Box pt={10}>
<Flex gap={10}>
<Box bg={v.color[0]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[1]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[2]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[3]} w={30} h={30} style={{
borderRadius: "100%"
}} />
</Flex>
</Box>
</Box>
</Box>
))}
<Box>
<Text fw={"bold"}>Palet Tambahan</Text>
{paletTambahan.map((v, i) => (
<Box mb={20} key={i}>
<Box style={{
borderWidth: "3px",
borderStyle: "solid",
borderImage: `linear-gradient(to right, ${v.color} ) 1 `,
}} pt={10} pb={10} pl={20} pr={20}
onClick={() => { setOpenTambahan(true) }}
>
<Group justify='space-between' align='center'>
<Text>{v.name}</Text>
<Checkbox
radius="xl"
color="teal"
/>
</Group>
<Box pt={10}>
<Flex gap={10}>
<Box bg={v.color[0]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[1]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[2]} w={30} h={30} style={{
borderRadius: "100%"
}} />
<Box bg={v.color[3]} w={30} h={30} style={{
borderRadius: "100%"
}} />
</Flex>
</Box>
</Box>
</Box>
))}
</Box>
</Box>
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerCreatePalette />
</LayoutDrawer>
<LayoutDrawer opened={isOpenTambahan} title={'Menu'} onClose={() => setOpenTambahan(false)}>
<DrawerPaletEditEndDefault />
</LayoutDrawer>
</Box>
);
}

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

@@ -8,6 +8,7 @@ import { useRouter } from 'next/navigation';
import { FaUserTag, FaUserTie } from 'react-icons/fa6';
import { useHookstate } from '@hookstate/core';
import { useMediaQuery } from '@mantine/hooks';
import { IoColorPalette, IoColorPaletteOutline } from 'react-icons/io5';
export default function ViewDetailFeature() {
const router = useRouter()
@@ -108,6 +109,23 @@ export default function ViewDetailFeature() {
</Center>
</Box>
}
{
roleLogin.get() == "supadmin" &&
<Box onClick={() => router.push('/color-palette')}>
<Center>
<ActionIcon variant="gradient"
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
<IoColorPalette size={isMobile ? 25 : 35} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Center>
<Text fz={15} c={WARNA.biruTua}>Palet Warna</Text>
</Center>
</Box>
}
</SimpleGrid>
</Box>