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

57
src/module/user/member/ui/create_member.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { globalRole, WARNA } from "@/module/_global";
import { globalRole, TEMA, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import { Avatar, Box, Button, Indicator, rem, Select, Stack, Text, TextInput } from "@mantine/core";
@@ -27,6 +27,7 @@ export default function CreateMember() {
const [img, setIMG] = useState<any | null>()
const [imgForm, setImgForm] = useState<any>()
const openRef = useRef<() => void>(null)
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
nik: false,
name: false,
@@ -171,7 +172,7 @@ export default function CreateMember() {
}}
>
</Dropzone>
<Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
<Indicator offset={20} withBorder inline color={tema.get().bgIcon} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
<Avatar
size="150"
radius={"100"}
@@ -190,9 +191,9 @@ export default function CreateMember() {
radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={
@@ -225,9 +226,9 @@ export default function CreateMember() {
radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={
@@ -264,9 +265,9 @@ export default function CreateMember() {
radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={
@@ -302,9 +303,9 @@ export default function CreateMember() {
w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(event: any) => {
@@ -329,9 +330,9 @@ export default function CreateMember() {
w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(event: any) => {
@@ -359,9 +360,9 @@ export default function CreateMember() {
w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(event: any) => {
@@ -391,9 +392,9 @@ export default function CreateMember() {
w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(event: any) => {
@@ -422,9 +423,9 @@ export default function CreateMember() {
radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={[
@@ -450,11 +451,11 @@ export default function CreateMember() {
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
backgroundColor: `${tema.get().bgUtama}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
bg={tema.get().utama}
size="md"
radius={30}
fullWidth

33
src/module/user/member/ui/drawer_detail_member.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { WARNA } from "@/module/_global";
import { TEMA, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
@@ -9,6 +9,7 @@ import toast from "react-hot-toast";
import { FaPencil, FaToggleOff } from "react-icons/fa6";
import { ImUserCheck } from "react-icons/im";
import { funEditStatusMember } from "../lib/api_member";
import { useHookstate } from "@hookstate/core";
export default function DrawerDetailMember({
onDeleted,
@@ -21,20 +22,22 @@ export default function DrawerDetailMember({
}) {
const router = useRouter();
const [isModal, setModal] = useState(false);
const tema = useHookstate(TEMA)
async function nonActive(val: boolean) {
try {
const res = await funEditStatusMember(id, {
isActive: status,
});
if (res.success) {
toast.success(res.message);
onDeleted(true);
} else {
onDeleted(false);
if (val) {
const res = await funEditStatusMember(id, {
isActive: true,
});
if (res.success) {
toast.success(res.message);
router.push("/member?active=true");
onDeleted(true);
} else {
onDeleted(false);
}
}
router.push("/member?active=true");
setModal(false);
} catch (error) {
console.error(error);
@@ -57,10 +60,10 @@ export default function DrawerDetailMember({
}}
>
<Box>
<FaToggleOff size={30} color={WARNA.biruTua} />
<FaToggleOff size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta="center">
<Text c={tema.get().utama} ta="center">
{" "}
{status === false ? "Aktifkan" : "Non Aktifkan"}
</Text>
@@ -77,10 +80,10 @@ export default function DrawerDetailMember({
}}
>
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
<FaPencil size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta="center">
<Text c={tema.get().utama} ta="center">
Edit
</Text>
</Box>

11
src/module/user/member/ui/drawer_list_member.tsx
View File

@@ -1,4 +1,4 @@
import { globalRole, WARNA } from '@/module/_global';
import { globalRole, TEMA, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
import { useRouter, useSearchParams } from 'next/navigation';
@@ -11,6 +11,7 @@ export default function DrawerListMember() {
const roleLogin = useHookstate(globalRole)
const searchParams = useSearchParams()
const group = searchParams.get('group')
const tema = useHookstate(TEMA)
return (
<Box>
@@ -27,10 +28,10 @@ export default function DrawerListMember() {
}}
>
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
<IoAddCircle size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Tambah Anggota</Text>
<Text c={tema.get().utama} ta='center'>Tambah Anggota</Text>
</Box>
</Flex>
{
@@ -42,10 +43,10 @@ export default function DrawerListMember() {
}}
>
<Box>
<RiFilter2Line size={30} color={WARNA.biruTua} />
<RiFilter2Line size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Filter</Text>
<Text c={tema.get().utama} ta='center'>Filter</Text>
</Box>
</Flex>
}

57
src/module/user/member/ui/edit_member.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { globalRole, WARNA } from "@/module/_global";
import { globalRole, TEMA, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import { funGetAllPosition } from "@/module/position/lib/api_position";
@@ -29,6 +29,7 @@ export default function EditMember({ id }: { id: string }) {
const [img, setIMG] = useState<any | null>()
const [loading, setLoading] = useState(true)
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
nik: false,
name: false,
@@ -172,7 +173,7 @@ export default function EditMember({ id }: { id: string }) {
{loading ?
<Skeleton height={150} width={150} radius={"100"} />
:
<Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
<Indicator offset={20} withBorder inline color={tema.get().bgIcon} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
<Avatar
size="150"
radius={"100"}
@@ -197,9 +198,9 @@ export default function EditMember({ id }: { id: string }) {
placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={
@@ -226,9 +227,9 @@ export default function EditMember({ id }: { id: string }) {
placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={
@@ -255,9 +256,9 @@ export default function EditMember({ id }: { id: string }) {
placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={
@@ -284,9 +285,9 @@ export default function EditMember({ id }: { id: string }) {
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
@@ -306,9 +307,9 @@ export default function EditMember({ id }: { id: string }) {
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
@@ -327,9 +328,9 @@ export default function EditMember({ id }: { id: string }) {
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
@@ -349,9 +350,9 @@ export default function EditMember({ id }: { id: string }) {
size="md" type="number" radius={30} withAsterisk label="Nomor Telepon" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
placeholder="8xxx xxxx xxxx"
@@ -373,9 +374,9 @@ export default function EditMember({ id }: { id: string }) {
placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={
@@ -408,14 +409,14 @@ export default function EditMember({ id }: { id: string }) {
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
backgroundColor: `${tema.get().bgUtama}`,
}}>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
bg={tema.get().utama}
size="md"
radius={30}
fullWidth

6
src/module/user/member/ui/list_member.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { WARNA } from "@/module/_global";
import { TEMA, WARNA } from "@/module/_global";
import { Box, rem, Tabs, TextInput } from "@mantine/core";
import React from "react";
import { HiMagnifyingGlass, HiMiniUser } from "react-icons/hi2";
@@ -7,6 +7,7 @@ import { IoMdCheckmarkCircleOutline } from "react-icons/io";
import { IoCloseCircleOutline } from "react-icons/io5";
import TabListMember from "./tab_list_member";
import { useRouter, useSearchParams } from "next/navigation";
import { useHookstate } from "@hookstate/core";
export default function ListMember() {
const iconStyle = { width: rem(20), height: rem(20) };
@@ -14,12 +15,13 @@ export default function ListMember() {
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"
color={tema.get().bgFiturHome}
radius="xl"
defaultValue={status == "false" ? "false" : "true"}
>

5
src/module/user/member/ui/navbar_detail_member.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile, globalRole } from "@/module/_global";
import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile, globalRole, TEMA } from "@/module/_global";
import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton, Grid } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import DrawerDetailMember from "./drawer_detail_member";
@@ -24,6 +24,7 @@ export default function NavbarDetailMember({ id }: IMember) {
const [loading, setLoading] = useState(true)
const [isEdit, setEdit] = useState(false)
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
useShallowEffect(() => {
featchGetOne()
@@ -61,7 +62,7 @@ export default function NavbarDetailMember({ id }: IMember) {
<LayoutIconBack />
{
(roleLogin.get() != "user") && isEdit &&
<ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
<ActionIcon onClick={() => setOpen(true)} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Info">
<HiMenu size={20} color='white' />
</ActionIcon>
}

5
src/module/user/member/ui/navbar_list_member.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
import { ActionIcon } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import DrawerListMember from "./drawer_list_member";
@@ -9,12 +9,13 @@ import { useHookstate } from "@hookstate/core";
export default function NavbarListMember() {
const [isOpenDrawer, setOpenDrawer] = useState(false)
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
return (
<>
<LayoutNavbarNew back="/home" title="Anggota"
menu={(roleLogin.get() != "user") ?
<ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
: <></>

11
src/module/user/member/ui/tab_list_member.tsx
View File

@@ -1,5 +1,5 @@
import { globalRole, SkeletonSingle, WARNA } from "@/module/_global"
import { globalRole, SkeletonSingle, TEMA, WARNA } from "@/module/_global"
import { Box, Text, TextInput, Divider, Avatar, Grid } from "@mantine/core"
import { useShallowEffect } from "@mantine/hooks"
import { useRouter, useSearchParams } from "next/navigation"
@@ -23,6 +23,7 @@ export default function TabListMember() {
const status = searchParams.get('active')
const roleLogin = useHookstate(globalRole)
const [nameGroup, setNameGroup] = useState('')
const tema = useHookstate(TEMA)
async function getAllUser() {
@@ -53,9 +54,9 @@ export default function TabListMember() {
<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"
@@ -95,7 +96,7 @@ export default function TabListMember() {
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} size={50} alt="image" />
</Grid.Col>
<Grid.Col span={9}>
<Text fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{_.startCase(v.name)}</Text>
<Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{_.startCase(v.name)}</Text>
<Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
</Grid.Col>
</Grid>

6
src/module/user/profile/ui/profile.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, WARNA } from "@/module/_global";
import { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA, WARNA } from "@/module/_global";
import { ActionIcon, Avatar, Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
import { RiIdCardFill } from "react-icons/ri";
import { FaSquarePhone } from "react-icons/fa6";
@@ -13,6 +13,7 @@ import { funGetProfileByCookies } from "../lib/api_profile";
import { useShallowEffect } from "@mantine/hooks";
import { IProfileById } from "../lib/type_profile";
import { useRouter } from "next/navigation";
import { useHookstate } from "@hookstate/core";
export default function Profile() {
const [openModal, setOpenModal] = useState(false);
@@ -20,6 +21,7 @@ export default function Profile() {
const router = useRouter()
const [loading, setLoading] = useState(true)
const [img, setIMG] = useState<any | null>()
const tema = useHookstate(TEMA)
async function getData() {
try {
@@ -61,7 +63,7 @@ export default function Profile() {
<LayoutNavbarHome >
<Group justify="space-between">
<LayoutIconBack back="/home" />
<ActionIcon onClick={() => { setOpenModal(true) }} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
<ActionIcon onClick={() => { setOpenModal(true) }} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Info">
<LuLogOut size={20} color='white' />
</ActionIcon>
</Group>