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

10
src/module/project/ui/add_detail_task_project.tsx
View File

@@ -4,10 +4,11 @@ import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funCreateDetailProject } from '../lib/api_project';
import { Box, Button, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
import { DatePicker } from '@mantine/dates';
import moment from 'moment';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
export default function AddDetailTaskProject() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -15,6 +16,7 @@ export default function AddDetailTaskProject() {
const [name, setName] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
name: false,
});
@@ -66,7 +68,7 @@ export default function AddDetailTaskProject() {
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
c={tema.get().utama}
/>
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
@@ -122,11 +124,11 @@ export default function AddDetailTaskProject() {
<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

15
src/module/project/ui/add_file_detail_project.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutDrawer, LayoutNavbarNew } from "@/module/_global";
import {
Box,
Button,
@@ -21,6 +21,8 @@ import { FaTrash } from "react-icons/fa6";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { IListFileTaskProject } from "../lib/type_project";
import { funAddFileProject, funCekNamFileUploadProject } from "../lib/api_project";
import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
export default function AddFileDetailProject() {
@@ -31,6 +33,7 @@ export default function AddFileDetailProject() {
const param = useParams<{ id: string }>()
const [indexDelFile, setIndexDelFile] = useState<number>(0)
const [openDrawerFile, setOpenDrawerFile] = useState(false)
const tema = useHookstate(TEMA)
const openRef = useRef<() => void>(null)
function deleteFile(index: number) {
@@ -119,7 +122,7 @@ export default function AddFileDetailProject() {
{
listFile.length > 0 &&
<Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>File</Text>
<Text fw={'bold'} c={tema.get().utama}>File</Text>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
@@ -144,11 +147,11 @@ export default function AddFileDetailProject() {
<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}
fullWidth
onClick={() => {
@@ -171,10 +174,10 @@ export default function AddFileDetailProject() {
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
<Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteFile(indexDelFile)}>
<Box>
<FaTrash size={30} color={WARNA.biruTua} />
<FaTrash size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Hapus File</Text>
<Text c={tema.get().utama} ta='center'>Hapus File</Text>
</Box>
</Flex>
</SimpleGrid>

22
src/module/project/ui/add_member_detail_project.tsx
View File

@@ -6,12 +6,13 @@ import toast from 'react-hot-toast';
import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { LayoutNavbarNew, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
import { FaCheck } from 'react-icons/fa6';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { Carousel } from '@mantine/carousel';
import { useHookstate } from '@hookstate/core';
export default function AddMemberDetailProject() {
const router = useRouter()
@@ -24,6 +25,7 @@ export default function AddMemberDetailProject() {
const [openModal, setOpenModal] = useState(false)
const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA)
async function getData() {
@@ -124,7 +126,7 @@ export default function AddMemberDetailProject() {
<LayoutNavbarNew
back=""
title="Pilih Anggota"
menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
<HiMagnifyingGlass size={20} color='white' />
</ActionIcon>}
/>
@@ -135,7 +137,7 @@ export default function AddMemberDetailProject() {
pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 9999,
backgroundColor: `${WARNA.biruTua}`,
backgroundColor: `${tema.get().utama}`,
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
}}>
@@ -151,8 +153,8 @@ export default function AddMemberDetailProject() {
input: {
color: "white",
borderRadius: '#A3A3A3',
borderColor: `${WARNA.biruTua}`,
backgroundColor: `${WARNA.biruTua}`,
borderColor: `${tema.get().utama}`,
backgroundColor: `${tema.get().utama}`,
},
}}
size="md"
@@ -170,7 +172,7 @@ export default function AddMemberDetailProject() {
<Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 100,
backgroundColor: `${WARNA.bgWhite}`,
backgroundColor: `${tema.get().bgUtama}`,
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
@@ -187,7 +189,7 @@ export default function AddMemberDetailProject() {
<Center>
<Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
<Avatar style={{
border: `2px solid ${WARNA.biruTua}`
border: `2px solid ${tema.get().utama}`
}} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Indicator>
</Center>
@@ -208,7 +210,7 @@ export default function AddMemberDetailProject() {
<Box p={20}>
<Group justify="space-between" mt={100} onClick={handleSelectAll}>
<Text c={WARNA.biruTua} fw={"bold"}>
<Text c={tema.get().utama} fw={"bold"}>
Pilih Semua Anggota
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
@@ -260,14 +262,14 @@ export default function AddMemberDetailProject() {
<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="lg"
radius={30}
fullWidth

8
src/module/project/ui/cancel_project.tsx
View File

@@ -4,14 +4,16 @@ import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funCancelProject } from '../lib/api_project';
import { Box, Button, rem, Stack, Textarea } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA} from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
export default function CancelProject() {
const router = useRouter()
const [alasan, setAlasan] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
reason: false,
});
@@ -67,11 +69,11 @@ export default function CancelProject() {
<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

12
src/module/project/ui/create_date_end_task.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import {
ActionIcon,
Avatar,
@@ -21,12 +21,14 @@ import toast from "react-hot-toast";
import moment from "moment";
import { IFormDateProject } from "../lib/type_project";
import { HiChevronLeft } from "react-icons/hi2";
import { useHookstate } from "@hookstate/core";
export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: boolean) => void, onSet: (val: IFormDateProject) => void }) {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
const [title, setTitle] = useState("")
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
title: false
});
@@ -52,7 +54,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
<Box>
<LayoutNavbarNew state={
<Box>
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
@@ -70,7 +72,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
c={tema.get().utama}
/>
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
@@ -126,11 +128,11 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
<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

27
src/module/project/ui/create_project.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { Avatar, Box, Button, Center, Divider, Flex, Grid, Group, rem, Select, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { useRouter, useSearchParams } from "next/navigation";
import React, { useRef, useState } from "react";
@@ -41,6 +41,7 @@ export default function CreateProject() {
const [indexDelTask, setIndexDelTask] = useState<number>(0)
const roleLogin = useHookstate(globalRole)
const isMobile = useMediaQuery('(max-width: 369px)');
const tema = useHookstate(TEMA)
const [body, setBody] = useState<any>({
idGroup: "",
@@ -235,7 +236,7 @@ export default function CreateProject() {
{
dataTask.length > 0 &&
<Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text>
<Text fw={'bold'} c={tema.get().utama}>Tanggal & Tugas</Text>
{
dataTask.map((v, i) => {
return (
@@ -254,7 +255,7 @@ export default function CreateProject() {
{
listFile.length > 0 &&
<Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>File</Text>
<Text fw={'bold'} c={tema.get().utama}>File</Text>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
@@ -280,8 +281,8 @@ export default function CreateProject() {
member.length > 0 &&
<Box pt={30}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
<Text c={tema.get().utama}>Anggota Terpilih</Text>
<Text c={tema.get().utama}>Total {member.length} Anggota</Text>
</Group>
<Box pt={10}>
<Box mb={20}>
@@ -305,14 +306,14 @@ export default function CreateProject() {
base: isMobile ? 130 : 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
Anggota
</Text>
</Grid.Col>
@@ -334,11 +335,11 @@ export default function CreateProject() {
<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}
fullWidth
@@ -448,10 +449,10 @@ export default function CreateProject() {
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
<Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteFile(indexDelFile)}>
<Box>
<FaTrash size={30} color={WARNA.biruTua} />
<FaTrash size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Hapus File</Text>
<Text c={tema.get().utama} ta='center'>Hapus File</Text>
</Box>
</Flex>
</SimpleGrid>
@@ -469,10 +470,10 @@ export default function CreateProject() {
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
<Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteTask(indexDelTask)}>
<Box>
<FaTrash size={30} color={WARNA.biruTua} />
<FaTrash size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Hapus Tugas</Text>
<Text c={tema.get().utama} ta='center'>Hapus Tugas</Text>
</Box>
</Flex>
</SimpleGrid>

21
src/module/project/ui/create_users_project.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
@@ -23,6 +23,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
const [loading, setLoading] = useState(true)
const [openTugas, setOpenTugas] = useState(false)
const [onClickSearch, setOnClickSearch] = useState(false)
const tema = useHookstate(TEMA)
const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -80,12 +81,12 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
<Box>
<LayoutNavbarNew state={
<Box>
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
} title="Pilih Anggota"
menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
<HiMagnifyingGlass size={20} color='white' />
</ActionIcon>}
/>
@@ -96,7 +97,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 9999,
backgroundColor: `${WARNA.biruTua}`,
backgroundColor: `${tema.get().utama}`,
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
}}>
@@ -112,8 +113,8 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
input: {
color: "white",
borderRadius: '#A3A3A3',
borderColor: `${WARNA.biruTua}`,
backgroundColor: `${WARNA.biruTua}`,
borderColor: `${tema.get().utama}`,
backgroundColor: `${tema.get().utama}`,
},
}}
size="md"
@@ -131,7 +132,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
<Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 100,
backgroundColor: `${WARNA.bgWhite}`,
backgroundColor: `${tema.get().bgUtama}`,
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
@@ -148,7 +149,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
<Center>
<Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
<Avatar style={{
border: `2px solid ${WARNA.biruTua}`
border: `2px solid ${tema.get().utama}`
}} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Indicator>
</Center>
@@ -214,11 +215,11 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
<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}
fullWidth

10
src/module/project/ui/edit_detail_task_project.tsx
View File

@@ -6,9 +6,10 @@ import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
import moment from 'moment';
import { useShallowEffect } from '@mantine/hooks';
import { Box, Button, Group, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { DatePicker } from '@mantine/dates';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
export default function EditDetailTaskProject() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -16,6 +17,7 @@ export default function EditDetailTaskProject() {
const param = useParams<{ id: string }>()
const [openModal, setOpenModal] = useState(false)
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
title: false,
});
@@ -88,7 +90,7 @@ export default function EditDetailTaskProject() {
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
c={tema.get().utama}
/>
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
@@ -157,14 +159,14 @@ export default function EditDetailTaskProject() {
<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="lg"
radius={30}
fullWidth

8
src/module/project/ui/edit_task_project.tsx
View File

@@ -5,8 +5,9 @@ import toast from 'react-hot-toast';
import { funEditProject, funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
import { Box, Button, Input, rem, Skeleton, Stack, TextInput } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA} from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
export default function EditTaskProject() {
const router = useRouter()
@@ -14,6 +15,7 @@ export default function EditTaskProject() {
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
name: false,
});
@@ -99,14 +101,14 @@ export default function EditTaskProject() {
<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="lg"
radius={30}
fullWidth

17
src/module/project/ui/list_anggota_detail_project.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { globalRole, LayoutDrawer, SkeletonSingle, WARNA } from '@/module/_global';
import { globalRole, LayoutDrawer, SkeletonSingle, TEMA } from '@/module/_global';
import { Avatar, Box, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
@@ -22,6 +22,7 @@ export default function ListAnggotaDetailProject() {
const [dataChoose, setDataChoose] = useState({ id: '', name: '' })
const router = useRouter()
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
async function getOneData() {
try {
@@ -67,8 +68,8 @@ const isMobile = useMediaQuery('(max-width: 369px)');
return (
<Box pt={20}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {isData.length} Anggota</Text>
<Text c={tema.get().utama}>Anggota Terpilih</Text>
<Text c={tema.get().utama}>Total {isData.length} Anggota</Text>
</Group>
<Box pt={10}>
<Box mb={20}>
@@ -115,7 +116,7 @@ const isMobile = useMediaQuery('(max-width: 369px)');
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
Anggota
</Text>
</Grid.Col>
@@ -135,10 +136,10 @@ const isMobile = useMediaQuery('(max-width: 369px)');
>
<Flex onClick={() => { router.push('/member/' + dataChoose.id) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaUser size={30} color={WARNA.biruTua} />
<FaUser size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Lihat profil</Text>
<Text c={tema.get().utama}>Lihat profil</Text>
</Box>
</Flex>
@@ -146,10 +147,10 @@ const isMobile = useMediaQuery('(max-width: 369px)');
(roleLogin.get() != "user" && roleLogin.get() != "coadmin") &&
<Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoIosCloseCircle size={30} color={WARNA.biruTua} />
<IoIosCloseCircle size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Keluarkan anggota</Text>
<Text c={tema.get().utama}>Keluarkan anggota</Text>
</Box>
</Flex>
}

14
src/module/project/ui/list_file_detail_project.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, LayoutModalViewFile, WARNA } from '@/module/_global';
import { LayoutDrawer, LayoutModalViewFile, TEMA } from '@/module/_global';
import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
@@ -10,6 +10,7 @@ import { IDataFileProject } from '../lib/type_project';
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { FaTrash } from 'react-icons/fa6';
import { useHookstate } from '@hookstate/core';
export default function ListFileDetailProject() {
const [isData, setData] = useState<IDataFileProject[]>([])
@@ -22,6 +23,7 @@ export default function ListFileDetailProject() {
const [isOpenModal, setOpenModal] = useState(false)
const [isOpenModalView, setOpenModalView] = useState(false)
const [isExtension, setExtension] = useState('')
const tema = useHookstate(TEMA)
async function getOneData() {
try {
@@ -68,7 +70,7 @@ export default function ListFileDetailProject() {
return (
<>
<Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>File</Text>
<Text fw={'bold'} c={tema.get().utama}>File</Text>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
@@ -140,19 +142,19 @@ export default function ListFileDetailProject() {
>
<Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsFileTextFill size={30} color={WARNA.biruTua} />
<BsFileTextFill size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Lihat file</Text>
<Text c={tema.get().utama}>Lihat file</Text>
</Box>
</Flex>
<Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaTrash size={30} color={WARNA.biruTua} />
<FaTrash size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Hapus file</Text>
<Text c={tema.get().utama}>Hapus file</Text>
</Box>
</Flex>
</SimpleGrid>

32
src/module/project/ui/list_project.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { globalRole, WARNA } from '@/module/_global';
import { globalRole, TEMA, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
import { useRouter, useSearchParams } from 'next/navigation';
import React, { useState } from 'react';
@@ -24,6 +24,7 @@ export default function ListProject() {
const [searchQuery, setSearchQuery] = useState('')
const roleLogin = useHookstate(globalRole)
const [nameGroup, setNameGroup] = useState('')
const tema = useHookstate(TEMA)
const fetchData = async () => {
try {
@@ -61,7 +62,7 @@ export default function ListProject() {
<TextInput
styles={{
input: {
color: WARNA.biruTua,
color: tema.get().utama,
borderRadius: '#A3A3A3',
borderColor: '#A3A3A3',
},
@@ -77,9 +78,9 @@ export default function ListProject() {
<Grid.Col span={'auto'}>
<Flex justify={'center'}>
{isList ? (
<HiOutlineListBullet size={35} color={WARNA.biruTua} onClick={handleList} />
<HiOutlineListBullet size={35} color={tema.get().utama} onClick={handleList} />
) : (
<HiSquares2X2 size={35} color={WARNA.biruTua} onClick={handleList} />
<HiSquares2X2 size={35} color={tema.get().utama} onClick={handleList} />
)}
</Flex>
</Grid.Col>
@@ -91,10 +92,10 @@ export default function ListProject() {
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
:
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
<Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={tema.get().utama}>Total Kegiatan</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
<Text fz={40} fw={'bold'} c={tema.get().utama}>{isData.length}</Text>
</Flex>
</Box>
}
@@ -115,13 +116,14 @@ export default function ListProject() {
size={50}
aria-label="Gradient action icon"
radius={100}
gradient={{
from: '#DFDA7C',
to: '#F2AF46',
deg: 174
}}
// gradient={{
// from: '#DFDA7C',
// to: '#F2AF46',
// deg: 174
// }}
bg={tema.get().bgFiturHome}
>
<HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
<HiMiniPresentationChartBar size={25} color={tema.get().utama} />
</ActionIcon>
</Center>
</Group>
@@ -179,7 +181,7 @@ export default function ListProject() {
<Box key={i} mb={20}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
<Card.Section>
<Box h={120} bg={WARNA.biruTua}>
<Box h={120} bg={tema.get().utama}>
<Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
</Flex>
@@ -203,7 +205,7 @@ export default function ListProject() {
}</Badge>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
<MdAccountCircle size={32} color={tema.get().utama} />
</Avatar>
<Avatar>+{v.member - 1}</Avatar>
</Avatar.Group>

17
src/module/project/ui/list_tugas_detail_project.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, SkeletonDetailListTugasTask, WARNA } from '@/module/_global';
import { LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from '@/module/_global';
import { Box, Center, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
@@ -24,6 +24,7 @@ export default function ListTugasDetailProject() {
const [openDrawerStatus, setOpenDrawerStatus] = useState(false)
const [isOpenModal, setOpenModal] = useState(false)
const router = useRouter()
const tema = useHookstate(TEMA)
async function getOneData() {
try {
@@ -87,7 +88,7 @@ export default function ListTugasDetailProject() {
return (
<>
<Box pt={20}>
<Text fw={"bold"} c={WARNA.biruTua}>
<Text fw={"bold"} c={tema.get().utama}>
Tanggal & Tugas
</Text>
<Box
@@ -174,28 +175,28 @@ export default function ListTugasDetailProject() {
>
<Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<AiOutlineFileDone size={30} color={WARNA.biruTua} />
<AiOutlineFileDone size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Update status</Text>
<Text c={tema.get().utama}>Update status</Text>
</Box>
</Flex>
<Flex onClick={() => { router.push('update/' + idData) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
<FaPencil size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Edit tugas</Text>
<Text c={tema.get().utama}>Edit tugas</Text>
</Box>
</Flex>
<Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaTrash size={30} color={WARNA.biruTua} />
<FaTrash size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Hapus tugas</Text>
<Text c={tema.get().utama}>Hapus tugas</Text>
</Box>
</Flex>
</SimpleGrid>

11
src/module/project/ui/menu_drawer_project.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 { useSearchParams } from 'next/navigation';
@@ -10,6 +10,7 @@ export default function MenuDrawerProject() {
const roleLogin = useHookstate(globalRole)
const searchParams = useSearchParams()
const group = searchParams.get('group')
const tema = useHookstate(TEMA)
return (
<Box>
@@ -19,20 +20,20 @@ export default function MenuDrawerProject() {
>
<Flex onClick={() => window.location.href = "/project/create"} justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
<IoAddCircle size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Tambah Kegiatan</Text>
<Text c={tema.get().utama}>Tambah Kegiatan</Text>
</Box>
</Flex>
{
roleLogin.get() == "supadmin" &&
<Flex onClick={() => window.location.href = "/project?page=filter&group=" + group} justify={'center'} align={'center'} direction={'column'} >
<Box>
<HiOutlineFilter size={30} color={WARNA.biruTua} />
<HiOutlineFilter size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Filter</Text>
<Text c={tema.get().utama}>Filter</Text>
</Box>
</Flex>
}

25
src/module/project/ui/navbar_detail_project.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
@@ -18,6 +18,7 @@ export default function NavbarDetailProject() {
const [name, setName] = useState('')
const [isOpen, setOpen] = useState(false)
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
async function getOneData() {
try {
@@ -43,7 +44,7 @@ export default function NavbarDetailProject() {
<LayoutNavbarNew back="/project?status=0" title={name} menu={
<ActionIcon
variant="light"
bg={WARNA.bgIcon}
bg={tema.get().bgIcon}
size="lg"
radius="lg"
aria-label="Settings"
@@ -68,10 +69,10 @@ export default function NavbarDetailProject() {
}}
>
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
<IoAddCircle size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Tambah Tugas</Text>
<Text c={tema.get().utama} ta='center'>Tambah Tugas</Text>
</Box>
</Flex>
@@ -84,10 +85,10 @@ export default function NavbarDetailProject() {
}}
>
<Box>
<FaFileCirclePlus size={30} color={WARNA.biruTua} />
<FaFileCirclePlus size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Tambah file</Text>
<Text c={tema.get().utama} ta='center'>Tambah file</Text>
</Box>
</Flex>
@@ -103,10 +104,10 @@ export default function NavbarDetailProject() {
}}
>
<Box>
<FaUsers size={30} color={WARNA.biruTua} />
<FaUsers 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>
@@ -117,10 +118,10 @@ export default function NavbarDetailProject() {
onClick={() => { router.push(param.id + '/edit') }}
>
<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>
@@ -131,10 +132,10 @@ export default function NavbarDetailProject() {
onClick={() => { router.push(param.id + '/cancel') }}
>
<Box>
<MdCancel size={30} color={WARNA.biruTua} />
<MdCancel size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Batal</Text>
<Text c={tema.get().utama} ta='center'>Batal</Text>
</Box>
</Flex>
</>

10
src/module/project/ui/progress_detail_project.tsx
View File

@@ -1,5 +1,4 @@
'use client'
import { WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Grid, Progress, Skeleton, Text } from '@mantine/core';
import { useParams } from 'next/navigation';
@@ -9,6 +8,7 @@ import { globalRefreshProject } from '../lib/val_project';
import toast from 'react-hot-toast';
import { funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
import { TEMA } from '@/module/_global';
export default function ProgressDetailProject() {
const [valProgress, setValProgress] = useState(0)
@@ -16,6 +16,7 @@ export default function ProgressDetailProject() {
const param = useParams<{ id: string }>()
const refresh = useHookstate(globalRefreshProject)
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
async function getOneData() {
try {
@@ -71,9 +72,10 @@ export default function ProgressDetailProject() {
size={68}
aria-label="Gradient action icon"
radius={100}
gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
// gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
bg={tema.get().bgFiturHome}
>
<HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
<HiMiniPresentationChartBar size={35} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={9}>
@@ -84,7 +86,7 @@ export default function ProgressDetailProject() {
border: `1px solid ${"#BDBDBD"}`,
}}
w={"100%"}
color="#FCAA4B"
color={tema.get().bgFiturHome}
radius="md"
size="xl"
value={valProgress}

1
src/module/project/ui/results_date-and_task.tsx
View File

@@ -1,4 +1,3 @@
import { WARNA } from '@/module/_global';
import { Box, Center, Grid, Group, SimpleGrid, Spoiler, Text } from '@mantine/core';
import React from 'react';
import { AiOutlineFileSync } from "react-icons/ai";

18
src/module/project/ui/results_file.tsx
View File

@@ -1,4 +1,4 @@
import { WARNA } from '@/module/_global';
import { Box, Center, Grid, Group, Text } from '@mantine/core';
import React from 'react';
import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
@@ -14,15 +14,19 @@ export default function ResultsFile({ name, extension }: IListFileTaskProject) {
<Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<Grid.Col span={"auto"}>
<Center >
{extension == "pdf" && <BsFiletypePdf size={30} />}
{extension == "csv" && <BsFiletypeCsv size={30} />}
{extension == "png" && <BsFiletypePng size={30} />}
{extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={30} />}
{extension == "heic" && <BsFiletypeHeic size={30} />}
{extension == "pdf" && <BsFiletypePdf size={30} />}
{extension == "csv" && <BsFiletypeCsv size={30} />}
{extension == "png" && <BsFiletypePng size={30} />}
{extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={30} />}
{extension == "heic" && <BsFiletypeHeic size={30} />}
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Text lineClamp={1}>{name}</Text>
<Text lineClamp={1}
style={{
overflowWrap: "break-word"
}}
>{name}</Text>
</Grid.Col>
</Grid>
<Group>

27
src/module/project/ui/tab_project.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
import { ActionIcon, Box, Button, Flex, Group, Indicator, Progress, rem, SimpleGrid, Tabs } from '@mantine/core';
import React, { useState } from 'react';
import { HiMenu } from 'react-icons/hi';
@@ -21,6 +21,7 @@ export default function TabProject() {
const group = searchParams.get("group");
const iconStyle = { width: rem(20), height: rem(20) };
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
const dataStatus = [
{
@@ -49,7 +50,7 @@ export default function TabProject() {
<Box>
<LayoutNavbarNew back='/home' title='Kegiatan'
menu={(roleLogin.get() != "user" && roleLogin.get() != "coadmin") ?
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
: <></>
@@ -64,14 +65,14 @@ export default function TabProject() {
color={
status == item.id
? "white"
: WARNA.biruTua
: tema.get().utama
}
onClick={() => { router.push("?status=" + item.id + "&group=" + group) }}
defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
radius={"xl"}
bg={
status == item.id
? WARNA.biruTua
? tema.get().utama
: "transparent"
}
>
@@ -86,7 +87,7 @@ export default function TabProject() {
<Box key={i}>
<Box w={6} h={6} bg={
status == v.id
? WARNA.biruTua
? tema.get().utama
: "#B0AEAE"
} style={{
borderRadius: 100
@@ -102,27 +103,27 @@ export default function TabProject() {
<Tabs.Tab value="0"
leftSection={<TbClockPause style={iconStyle} />}
onClick={() => { router.push("?status=0&group=" + group) }}
color={WARNA.biruTua}
color={tema.get().utama}
>
Segera
</Tabs.Tab>
<Tabs.Tab value="1"
leftSection={<RiProgress3Line style={iconStyle} />}
onClick={() => { router.push("?status=1&group=" + group) }}
color={WARNA.biruTua}
color={tema.get().utama}
>
Dikerjakan
</Tabs.Tab>
<Tabs.Tab value="2"
leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}
onClick={() => { router.push("?status=2&group=" + group) }}
color={WARNA.biruTua}>
color={tema.get().utama}>
Selesai
</Tabs.Tab>
<Tabs.Tab value="3"
leftSection={<IoCloseCircleOutline style={iconStyle} />}
onClick={() => { router.push("?status=3&group=" + group) }}
color={WARNA.biruTua}>
color={tema.get().utama}>
Batal
</Tabs.Tab>
</SimpleGrid>
@@ -133,27 +134,27 @@ export default function TabProject() {
<Tabs.Tab value="0" w={"23%"}
leftSection={<TbClockPause style={iconStyle} />}
onClick={() => { router.push("?status=0&group=" + group) }}
color={WARNA.biruTua}
color={tema.get().utama}
>
Segera
</Tabs.Tab>
<Tabs.Tab value="1" w={"28%"}
leftSection={<RiProgress3Line style={iconStyle} />}
onClick={() => { router.push("?status=1&group=" + group) }}
color={WARNA.biruTua}
color={tema.get().utama}
>
Dikerjakan
</Tabs.Tab>
<Tabs.Tab value="2" w={"23%"}
leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}
onClick={() => { router.push("?status=2&group=" + group) }}
color={WARNA.biruTua}>
color={tema.get().utama}>
Selesai
</Tabs.Tab>
<Tabs.Tab value="3" w={"20%"}
leftSection={<IoCloseCircleOutline style={iconStyle} />}
onClick={() => { router.push("?status=3&group=" + group) }}
color={WARNA.biruTua}>
color={tema.get().utama}>
Batal
</Tabs.Tab>
</Tabs.List>