style : update tema

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

View File

@@ -1,4 +1,4 @@
import { LayoutDrawer, WARNA } from "@/module/_global"
import { LayoutDrawer, TEMA, WARNA } from "@/module/_global"
import LayoutModal from "@/module/_global/layout/layout_modal"
import { funGetAllGroup, IDataGroup } from "@/module/group"
import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button, Skeleton } from "@mantine/core"
@@ -18,6 +18,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
const [isModal, setModal] = useState(false)
const refresh = useHookstate(globalRefreshPosition)
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const [data, setData] = useState<any>({
id: id,
name: "",
@@ -129,10 +130,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
onClick={() => setModal(true)}
>
<Box>
<FaToggleOff size={30} color={WARNA.biruTua} />
<FaToggleOff size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>{isActive == false ? "Aktifkan" : "Non Aktifkan"}</Text>
<Text c={tema.get().utama}>{isActive == false ? "Aktifkan" : "Non Aktifkan"}</Text>
</Box>
</Flex>
@@ -141,10 +142,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
onClick={() => setOpenDrawerGroup(true)}
>
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
<FaPencil size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Edit</Text>
<Text c={tema.get().utama} ta='center'>Edit</Text>
</Box>
</Flex>
</SimpleGrid>
@@ -163,9 +164,9 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
label="Jabatan"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
required
@@ -189,7 +190,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
<Box pos={"absolute"} bottom={10} left={0} right={0}>
<Button
c={"white"}
bg={WARNA.biruTua}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth

View File

@@ -1,4 +1,4 @@
import { WARNA, LayoutDrawer, globalRole } from "@/module/_global";
import { WARNA, LayoutDrawer, globalRole, TEMA } from "@/module/_global";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import { Box, Stack, SimpleGrid, Flex, TextInput, Button, Text, Select } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
@@ -20,6 +20,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
const refresh = useHookstate(globalRefreshPosition)
const searchParams = useSearchParams()
const group = searchParams.get('group')
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
name: false,
idGroup: false
@@ -81,20 +82,20 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
>
<Flex justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
<IoAddCircle size={30} color={tema.get().utama} />
</Box>
<Box>
<Text ta={'center'} c={WARNA.biruTua}>Tambah Jabatan</Text>
<Text ta={'center'} c={tema.get().utama}>Tambah Jabatan</Text>
</Box>
</Flex>
{
roleLogin.get() == "supadmin" &&
<Flex justify={'center'} align={'center'} direction={'column'} onClick={() => router.push('/position?page=filter&group=' + group)}>
<Box>
<RiFilter2Line size={30} color={WARNA.biruTua} />
<RiFilter2Line size={30} color={tema.get().utama} />
</Box>
<Box>
<Text ta={'center'} c={WARNA.biruTua}>Filter</Text>
<Text ta={'center'} c={tema.get().utama}>Filter</Text>
</Box>
</Flex>
}
@@ -128,9 +129,9 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
}}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
error={
@@ -146,9 +147,9 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
label="Jabatan"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
my={15}
@@ -174,7 +175,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
<Box pos={"absolute"} bottom={10} left={0} right={0}>
<Button
c={"white"}
bg={WARNA.biruTua}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth

View File

@@ -1,4 +1,4 @@
import { globalRole, LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
import { globalRole, LayoutDrawer, SkeletonSingle, TEMA, WARNA } from "@/module/_global";
import { ActionIcon, Box, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
import React, { useState } from "react";
import { FaUserTie } from "react-icons/fa6";
@@ -28,6 +28,7 @@ export default function ListPositionActive() {
const refresh = useHookstate(globalRefreshPosition)
const roleLogin = useHookstate(globalRole)
const [nameGroup, setNameGroup] = useState('')
const tema = useHookstate(TEMA)
async function getAllPosition() {
try {
@@ -54,9 +55,9 @@ export default function ListPositionActive() {
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
size="md"
@@ -84,7 +85,7 @@ export default function ListPositionActive() {
<Group
align="center"
style={{
border: `1px solid ${"#DCEED8"}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
padding: 10,
borderRadius: 10,
}}
@@ -105,12 +106,12 @@ export default function ListPositionActive() {
<Flex justify={{ base: "center", xl: "flex-start" }}>
<ActionIcon
variant="light"
bg={"#DCEED8"}
bg={tema.get().bgTotalKegiatan}
size={50}
radius={100}
aria-label="icon"
>
<FaUserTie color={WARNA.biruTua} size={25} />
<FaUserTie color={tema.get().utama} size={25} />
</ActionIcon>
</Flex>
</Grid.Col>
@@ -124,7 +125,7 @@ export default function ListPositionActive() {
xl: 400
}}
>
<Text fw={"bold"} c={WARNA.biruTua} lineClamp={1}>
<Text fw={"bold"} c={tema.get().utama} lineClamp={1}>
{v.name}
</Text>
<Text fw={"lighter"} fz={12} lineClamp={1}>

View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA, LayoutDrawer, LayoutNavbarNew, globalRole } from "@/module/_global";
import { WARNA, LayoutDrawer, LayoutNavbarNew, globalRole, TEMA } from "@/module/_global";
import { ActionIcon, Box } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import DrawerListPosition from "./drawer_list_position";
@@ -9,11 +9,12 @@ import { useHookstate } from "@hookstate/core";
export default function NavbarListPosition() {
const [isOpen, setOpen] = useState(false)
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
return (
<>
<LayoutNavbarNew back="/home" title="Jabatan"
menu={(roleLogin.get() != "user") ?
<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' />
</ActionIcon>
: <></>

View File

@@ -4,6 +4,8 @@ import { IoCloseCircleOutline } from "react-icons/io5"
import { IoMdCheckmarkCircleOutline } from "react-icons/io"
import ListPositionActive from './list_position_active';
import { useRouter, useSearchParams } from 'next/navigation';
import { useHookstate } from '@hookstate/core';
import { TEMA } from '@/module/_global';
export default function TabListPosition() {
const iconStyle = { width: rem(20), height: rem(20) };
@@ -11,10 +13,11 @@ export default function TabListPosition() {
const searchParams = useSearchParams()
const status = searchParams.get('active')
const group = searchParams.get("group");
const tema = useHookstate(TEMA)
return (
<Box p={20}>
<Tabs variant="pills" color='#FF9861' radius="xl" defaultValue={(status == "false") ? "false" : "true"}>
<Tabs variant="pills" color={tema.get().bgFiturHome} radius="xl" defaultValue={(status == "false") ? "false" : "true"}>
<Tabs.List
bg={"white"}
style={{