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

23
src/module/announcement/ui/create_announcement.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Avatar, Box, Button, Flex, Group, rem, Stack, Text, Textarea, TextInput } from "@mantine/core";
@@ -21,6 +21,7 @@ export default function CreateAnnouncement() {
const memberValue = memberGroup.get() as GroupData[]
const [selectedFiles, setSelectedFiles] = useState<any>([])
const router = useRouter()
const tema = useHookstate(TEMA)
const [isChooseMember, setIsChooseMember] = useState(false)
@@ -86,9 +87,9 @@ export default function CreateAnnouncement() {
size="md" type="text" radius={10} placeholder="Judul Pengumuman" withAsterisk label="Judul" 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,
},
}}
value={isData.title}
@@ -112,9 +113,9 @@ export default function CreateAnnouncement() {
placeholder="Deskripsi Pengumuman"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
value={isData.desc}
@@ -131,7 +132,7 @@ export default function CreateAnnouncement() {
/>
<Box pt={10}>
<Group justify="space-between" style={{
border: `1px solid ${WARNA.biruTua}`,
border: `1px solid ${tema.get().utama}`,
padding: 10,
borderRadius: 10
}}
@@ -144,7 +145,7 @@ export default function CreateAnnouncement() {
</Group>
</Box>
<Box pt={20} mb={60}>
<Text c={WARNA.biruTua} mb={10}>Divisi Terpilih</Text>
<Text c={tema.get().utama} mb={10}>Divisi Terpilih</Text>
{(memberGroup.length === 0) ? (
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
) : memberGroup.get().map((v: any, i: any) => {
@@ -166,11 +167,11 @@ export default function CreateAnnouncement() {
<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="lg"
radius={30}
fullWidth

29
src/module/announcement/ui/create_users_announcement.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
import { funGetGroupDivision } from '@/module/group/lib/api_group';
import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
@@ -23,6 +23,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
const [isData, setIsData] = useState<GroupData[]>([])
const memberGroup = useHookstate(globalMemberAnnouncement)
const [loading, setLoading] = useState(false)
const tema = useHookstate(TEMA)
const handleCheck = (groupId: string, divisionId: string) => {
const newChecked = { ...checked };
@@ -126,17 +127,17 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
Pilih Semua
</Text>
</Group>
{loading ?
{loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<Skeleton mt={20} h={20}/>
<Skeleton mt={20} h={20} ml={20}/>
<Skeleton mt={20} h={20} ml={20}/>
<Skeleton mt={20} h={20} ml={20}/>
</Box>
))
.fill(null)
.map((_, i) => (
<Box key={i}>
<Skeleton mt={20} h={20} />
<Skeleton mt={20} h={20} ml={20} />
<Skeleton mt={20} h={20} ml={20} />
<Skeleton mt={20} h={20} ml={20} />
</Box>
))
:
isData.map((item) => (
<Stack mb={30} key={item.id}>
@@ -163,7 +164,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
<Box key={division.id}>
<Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
<Box w={{
base: isMobile ? 230 : 280,
base: isMobile ? 230 : 280,
xl: 430
}}>
<Text truncate="end" pl={20}>
@@ -194,11 +195,11 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
backgroundColor: `${tema.get().bgUtama}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
bg={tema.get().utama}
size="lg"
radius={30}

8
src/module/announcement/ui/drawer_announcement.tsx
View File

@@ -1,4 +1,5 @@
import { WARNA } from '@/module/_global';
import { TEMA, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
@@ -7,6 +8,7 @@ import { RiFilter2Line } from "react-icons/ri";
export default function DrawerAnnouncement() {
const router = useRouter()
const tema = useHookstate(TEMA)
return (
<Box>
@@ -23,10 +25,10 @@ export default function DrawerAnnouncement() {
}}
>
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
<IoAddCircle size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Tambah Pengumuman</Text>
<Text c={tema.get().utama} ta='center'>Tambah Pengumuman</Text>
</Box>
</Flex>
</SimpleGrid>

12
src/module/announcement/ui/drawer_detail_announcement.tsx
View File

@@ -1,4 +1,4 @@
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 { useParams, useRouter } from 'next/navigation';
@@ -6,11 +6,13 @@ import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { FaPencil, FaTrash } from 'react-icons/fa6';
import { funDeleteAnnouncement } from '../lib/api_announcement';
import { useHookstate } from '@hookstate/core';
export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (val: boolean) => void }) {
const router = useRouter()
const [isOpen, setOpen] = useState(false)
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
async function onTrue(val: boolean) {
if (val) {
@@ -36,10 +38,10 @@ export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (va
>
<Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => setOpen(true)}>
<Box>
<FaTrash size={30} color={WARNA.biruTua} />
<FaTrash size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Hapus</Text>
<Text c={tema.get().utama} ta='center'>Hapus</Text>
</Box>
</Flex>
@@ -47,10 +49,10 @@ export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (va
router.push('edit/' + param.id)
}} style={{ cursor: 'pointer' }}>
<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>

21
src/module/announcement/ui/edit_announcement.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Button, Flex, Group, List, rem, Skeleton, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
@@ -20,6 +20,7 @@ export default function EditAnnouncement() {
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const router = useRouter()
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
title: false,
desc: false
@@ -132,9 +133,9 @@ export default function EditAnnouncement() {
size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" 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,
},
}}
value={body.title}
@@ -158,9 +159,9 @@ export default function EditAnnouncement() {
placeholder="Deskripsi Pengumuman"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
value={body.desc}
@@ -178,7 +179,7 @@ export default function EditAnnouncement() {
/>
<Box pt={10} w={"100%"}>
<Group justify="space-between" style={{
border: `1px solid ${WARNA.biruTua}`,
border: `1px solid ${tema.get().utama}`,
maxWidth: rem(550),
padding: 10,
borderRadius: 10
@@ -238,14 +239,14 @@ export default function EditAnnouncement() {
<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={40} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth

7
src/module/announcement/ui/edit_choose_member.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
import { funGetGroupDivision } from '@/module/group/lib/api_group';
import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
@@ -23,6 +23,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
const [isData, setIsData] = useState<GroupData[]>([])
const memberGroup = useHookstate(globalMemberEditAnnouncement)
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const handleCheck = (groupId: string, divisionId: string) => {
const newChecked = { ...checked };
@@ -195,14 +196,14 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
<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
color="white"
bg={WARNA.biruTua}
bg={tema.get().utama}
size="lg"
radius={30}

24
src/module/announcement/ui/list_announcement.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { SkeletonSingle, WARNA } from '@/module/_global';
import { SkeletonSingle, TEMA, WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Stack, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
import { TfiAnnouncement } from "react-icons/tfi";
@@ -10,6 +10,7 @@ import { IListDataAnnouncement } from '../lib/type_announcement';
import { funGetAllAnnouncement } from '../lib/api_announcement';
import toast from 'react-hot-toast';
import { funGetAllGroup, IDataGroup } from '@/module/group';
import { useHookstate } from '@hookstate/core';
export default function ListAnnouncement() {
@@ -17,6 +18,7 @@ export default function ListAnnouncement() {
const [searchQuery, setSearchQuery] = useState('')
const router = useRouter()
const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA)
const fetchData = async () => {
try {
@@ -46,9 +48,9 @@ export default function ListAnnouncement() {
<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"
@@ -77,31 +79,31 @@ export default function ListAnnouncement() {
<Grid>
<Grid.Col span={2}>
<Center>
<ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
<TfiAnnouncement color={WARNA.biruTua} size={25} />
<ActionIcon variant="light" bg={tema.get().bgFiturHome} size={50} radius={100} aria-label="icon">
<TfiAnnouncement color={tema.get().utama} size={25} />
</ActionIcon>
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Grid onClick={() => {
router.push(`/announcement/${v.id}`)
}} mb={10}>
}} mb={10}>
<Grid.Col span={{
base: 7,
xl: 8
}}>
<Text fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{v.title}</Text>
<Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.title}</Text>
</Grid.Col>
<Grid.Col span={{
base: 5,
xl: 4
}}>
<Text ta={"end"} fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.createdAt}</Text>
<Text ta={"end"} fw={'lighter'} c={tema.get().utama} fz={13}>{v.createdAt}</Text>
</Grid.Col>
</Grid>
{/* <Text c={WARNA.biruTua} lineClamp={2}>{v.desc}</Text> */}
{/* <Text c={tema.get().utama} lineClamp={2}>{v.desc}</Text> */}
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text c={WARNA.biruTua} onClick={() => {
<Text c={tema.get().utama} onClick={() => {
router.push(`/announcement/${v.id}`)
}} >{v.desc}</Text>
</Spoiler>

5
src/module/announcement/ui/navbar_announcement.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 React, { useState } from 'react';
import { HiMenu } from "react-icons/hi";
@@ -9,13 +9,14 @@ import { useHookstate } from '@hookstate/core';
export default function NavbarAnnouncement() {
const [isOpen, setOpen] = useState(false)
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
return (
<>
<LayoutNavbarNew back='/home' title='pengumuman'
menu={
(roleLogin.get() != "user" && roleLogin.get() != "coadmin") ?
<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>
: <></>

5
src/module/announcement/ui/navbar_detail_announcement.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, Box } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import DrawerDetailAnnouncement from "./drawer_detail_announcement";
@@ -11,12 +11,13 @@ export default function NavbarDetailAnnouncement() {
const [isOpenDrawer, setOpenDrawer] = useState(false)
const router = useRouter()
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
return (
<Box>
<LayoutNavbarNew back="/announcement/" title="Pengumuman"
menu={
(roleLogin.get() != "user" && roleLogin.get() != "coadmin") ?
<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>
: <></>