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

style : update tema

Browse Source 
Deskripsi:
- update global
- update announcement
- update update color palette
- update group
- update home
- update position
- update project
- update member

No Issue
This commit is contained in:
lukman
2024-09-12 17:31:00 +08:00
parent a211e7e4e4
commit cbdaac6319
80 changed files with 870 additions and 568 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/module/_global/bin/type_global.ts Normal file
View File

@@ -0,0 +1,8 @@
export interface IGlobalTema {
utama: string
bgUtama: string
bgIcon: string
bgFiturHome: string
bgFiturDivisi: string
bgTotalKegiatan: string
}

12
src/module/_global/bin/val_global.ts
View File

@@ -1,4 +1,5 @@
import { hookstate } from "@hookstate/core"
import { IGlobalTema } from './type_global';
export const pwd_key_config = "fchgvjknlmdfnbvghhujlaknsdvjbhknlkmsdbdyu567t8y9u30r4587638y9uipkoeghjvuyi89ipkoefmnrjbhtiu4or9ipkoemnjfbhjiuoijdklnjhbviufojkejnshbiuojijknehgruyu"
export const globalRole = hookstate<string>('')
@@ -9,4 +10,13 @@ export const DIR = {
village: "cm0xhb91o0007acbbkx8rk8hj",
user: "cm0x8dbwn0005bp5tgmfcthzw",
}
}
export const TEMA = hookstate<IGlobalTema>({
utama: "#19345E",
bgUtama: "#F4F9FD",
bgIcon: "#384288",
bgFiturHome: "#FCAA4B",
bgFiturDivisi: "#FCAA4B",
bgTotalKegiatan: "#DCEED8"
})

5
src/module/_global/components/skeleton_detail_discussion_comment.tsx
View File

@@ -1,6 +1,9 @@
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Divider, Group, Skeleton } from "@mantine/core";
import { TEMA } from "../bin/val_global";
export default function SkeletonDetailDiscussionComment() {
const tema = useHookstate(TEMA)
return (
<>
<Group justify='space-between'>
@@ -8,7 +11,7 @@ export default function SkeletonDetailDiscussionComment() {
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
bg={tema.get().bgTotalKegiatan}
size={50}
radius={100}
aria-label="icon"

5
src/module/_global/components/skeleton_detail_discussion_member.tsx
View File

@@ -1,7 +1,10 @@
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Flex, Group, Skeleton } from '@mantine/core';
import React from 'react';
import { TEMA } from '../bin/val_global';
export default function SkeletonDetailDiscussionMember() {
const tema = useHookstate(TEMA)
return (
<>
<Flex justify="space-between" align="center" mt={20}>
@@ -9,7 +12,7 @@ export default function SkeletonDetailDiscussionMember() {
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
bg={tema.get().bgTotalKegiatan}
size={50}
radius={100}
aria-label="icon"

9
src/module/_global/components/skeleton_detail_list_tugas_task.tsx
View File

@@ -1,7 +1,10 @@
import { useHookstate } from '@hookstate/core';
import { Box, Center, Grid, Group, SimpleGrid, Skeleton } from '@mantine/core';
import React from 'react';
import { TEMA } from '../bin/val_global';
export default function SkeletonDetailListTugasTask() {
const tema = useHookstate(TEMA)
return (
<Grid>
<Grid.Col span={"auto"}>
@@ -13,7 +16,7 @@ export default function SkeletonDetailListTugasTask() {
<Box
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
padding: 10,
}}
>
@@ -32,7 +35,7 @@ export default function SkeletonDetailListTugasTask() {
h={45}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
@@ -46,7 +49,7 @@ export default function SkeletonDetailListTugasTask() {
h={45}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />

11
src/module/_global/components/skeleton_detail_profile.tsx
View File

@@ -1,14 +1,17 @@
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Group, Skeleton } from '@mantine/core';
import React from 'react';
import { TEMA } from '../bin/val_global';
export default function SkeletonDetailProfile() {
const tema = useHookstate(TEMA)
return (
<Box p={20}>
<Group justify="space-between" grow py={5}>
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
bg={tema.get().bgTotalKegiatan}
size={28}
radius={100}
aria-label="icon"
@@ -27,7 +30,7 @@ export default function SkeletonDetailProfile() {
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
bg={tema.get().bgTotalKegiatan}
size={28}
radius={100}
aria-label="icon"
@@ -46,7 +49,7 @@ export default function SkeletonDetailProfile() {
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
bg={tema.get().bgTotalKegiatan}
size={28}
radius={100}
aria-label="icon"
@@ -65,7 +68,7 @@ export default function SkeletonDetailProfile() {
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
bg={tema.get().bgTotalKegiatan}
size={28}
radius={100}
aria-label="icon"

7
src/module/_global/components/skeleton_single.tsx
View File

@@ -1,13 +1,16 @@
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Group, Skeleton } from '@mantine/core';
import React from 'react';
import { TEMA } from '../bin/val_global';
export default function SkeletonSingle() {
const tema = useHookstate(TEMA)
return (
<Box pt={20}>
<Group
align="center"
style={{
border: `1px solid ${"#DCEED8"}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
padding: 10,
borderRadius: 10,
cursor: "pointer",
@@ -16,7 +19,7 @@ export default function SkeletonSingle() {
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
bg={tema.get().bgTotalKegiatan}
size={50}
radius={100}
aria-label="icon"

3
src/module/_global/index.ts
View File

@@ -1,5 +1,5 @@
import prisma from "./bin/prisma";
import { DIR, globalRole, pwd_key_config } from "./bin/val_global";
import { DIR, globalRole, pwd_key_config, TEMA } from "./bin/val_global";
import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment";
import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member";
import SkeletonDetailListTugasTask from "./components/skeleton_detail_list_tugas_task";
@@ -41,3 +41,4 @@ export { NoZoom }
export { funUploadFile }
export { funDeleteFile }
export { DIR }
export { TEMA }

5
src/module/_global/layout/layout_drawer.tsx
View File

@@ -1,11 +1,14 @@
import { Box, Drawer, Text } from '@mantine/core';
import React from 'react';
import { WARNA } from '../fun/WARNA';
import { useHookstate } from '@hookstate/core';
import { TEMA } from '../bin/val_global';
export default function LayoutDrawer({ opened, onClose, title, children, size }: { children: React.ReactNode, opened: boolean, size?: string, onClose: () => void, title: React.ReactNode }) {
const tema = useHookstate(TEMA)
return (
<Box>
<Drawer opened={opened} title={<Text c={WARNA.biruTua} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={(size == 'lg') ? '80%' : '40%'}
<Drawer opened={opened} title={<Text c={tema.get().utama} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={(size == 'lg') ? '80%' : '40%'}
styles={{
content: {
backgroundColor: "white",

5
src/module/_global/layout/layout_icon_back.tsx
View File

@@ -5,9 +5,12 @@ import React from 'react';
import { HiChevronLeft } from 'react-icons/hi2';
import { WARNA } from '../fun/WARNA';
import _ from 'lodash';
import { useHookstate } from '@hookstate/core';
import { TEMA } from '../bin/val_global';
function LayoutIconBack({ back }: { back?: string }) {
const router = useRouter()
const tema = useHookstate(TEMA)
return (
<Box>
<ActionIcon variant="light" onClick={() => {
@@ -17,7 +20,7 @@ function LayoutIconBack({ back }: { back?: string }) {
return router.back()
}
}} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
}} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>

7
src/module/_global/layout/layout_login.tsx
View File

@@ -1,17 +1,20 @@
import { Image, rem, Stack, Title } from "@mantine/core";
import React from "react";
import { WARNA } from "../fun/WARNA";
import { useHookstate } from "@hookstate/core";
import { TEMA } from "../bin/val_global";
export default function LayoutLogin({
children,
}: {
children: React.ReactNode;
}) {
}) {
const tema = useHookstate(TEMA)
return (
<>
<Stack justify="center" align="center" pt={rem(50)}>
<Image w={102} h={103} src={"/assets/img/logo/logo-1.png"} alt="logo" />
<Title c={WARNA.biruTua} order={4}>
<Title c={tema.get().utama} order={4}>
PERBEKEL DARMASABA
</Title>
</Stack>

13
src/module/_global/layout/layout_modal.tsx
View File

@@ -1,4 +1,4 @@
import { Box, Button, Flex, Group, Modal, Text } from '@mantine/core';
import { Box, Button, Flex, Group, Modal, SimpleGrid, Text } from '@mantine/core';
import React, { useState } from 'react';
import { BsQuestionCircleFill } from 'react-icons/bs';
import { WARNA } from '../fun/WARNA';
@@ -18,11 +18,14 @@ export default function LayoutModal({ opened, onClose, description, onYes }: { o
<Flex justify={"center"} align={"center"} direction={"column"}>
<BsQuestionCircleFill size={100} color="red" />
<Text mt={30} ta={"center"} fw={"bold"} fz={18}>{description}</Text>
<Group mt={30} w={'100%'} justify='center'>
<Button w={"47%"} size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
<Button w={"47%"} size="lg" radius={'xl'} bg={WARNA.biruTua} onClick={() => onYes(true)}>YA</Button>
</Group>
</Flex>
<SimpleGrid
cols={{ base: 1, sm: 2, lg: 2 }}
mt={30}
>
<Button fullWidth size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
<Button fullWidth size="lg" radius={'xl'} bg={WARNA.biruTua} onClick={() => onYes(true)}>YA</Button>
</SimpleGrid>
</Modal>
);
}

6
src/module/_global/layout/layout_navbar_home.tsx
View File

@@ -1,10 +1,14 @@
"use client"
import { Box, Grid, Group } from '@mantine/core';
import React from 'react';
import { WARNA } from '../fun/WARNA';
import { useHookstate } from '@hookstate/core';
import { TEMA } from '../bin/val_global';
export const LayoutNavbarHome = ({ children }: { children: React.ReactNode }) => {
const tema = useHookstate(TEMA)
return (
<Box pt={25} pl={20} pr={20} m={0} pos={'sticky'} top={0} pb={25} bg={WARNA.biruTua}
<Box pt={25} pl={20} pr={20} m={0} pos={'sticky'} top={0} pb={25} bg={tema.get().utama}
style={{
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,

7
src/module/_global/layout/layout_navbar_new.tsx
View File

@@ -4,10 +4,13 @@ import React from 'react';
import { WARNA } from '../fun/WARNA';
import LayoutIconBack from './layout_icon_back';
import _ from 'lodash';
import { useHookstate } from '@hookstate/core';
import { TEMA } from '../bin/val_global';
export const LayoutNavbarNew = ({ back, state, title, menu }: { back?: string, title: string, menu: React.ReactNode, state?: React.ReactNode }) => {
const tema = useHookstate(TEMA)
return (
<Box pt={25} pl={20} pr={20} m={0} pos={'sticky'} top={0} pb={25} bg={WARNA.biruTua}
<Box pt={25} pl={20} pr={20} m={0} pos={'sticky'} top={0} pb={25} bg={tema.get().utama}
style={{
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
@@ -29,7 +32,7 @@ export const LayoutNavbarNew = ({ back, state, title, menu }: { back?: string, t
</Grid.Col>
}
<Grid.Col span={8}>
<Title c={WARNA.bgWhite} ta={'center'} order={5} lineClamp={1}>{_.startCase(title)}</Title>
<Title c={tema.get().bgUtama} ta={'center'} order={5} lineClamp={1}>{_.startCase(title)}</Title>
</Grid.Col>
<Grid.Col span="auto">
<Group justify='flex-end'>

7
src/module/_global/view/view_filter.tsx
View File

@@ -8,6 +8,8 @@ import { useRouter, useSearchParams } from "next/navigation";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import { useShallowEffect } from "@mantine/hooks";
import toast from "react-hot-toast";
import { useHookstate } from "@hookstate/core";
import { TEMA } from "../bin/val_global";
export default function ViewFilter({ linkFilter }: { linkFilter: string }) {
const [selectedFilter, setSelectedFilter] = useState<any>('');
@@ -15,6 +17,7 @@ export default function ViewFilter({ linkFilter }: { linkFilter: string }) {
const [loading, setLoading] = useState(true)
const searchParams = useSearchParams()
const group = searchParams.get('group')
const tema = useHookstate(TEMA)
async function getAllGroupFilter() {
@@ -84,13 +87,13 @@ export default function ViewFilter({ linkFilter }: { linkFilter: string }) {
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
backgroundColor: `${tema.get().bgUtama}`,
}}>
<Button
fullWidth
radius={100}
size="lg"
color={WARNA.biruTua}
color={tema.get().utama}
onClick={() => {
router.push(`/${linkFilter}?group=` + selectedFilter)
}}