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 calender
- update color palette
- update discussion
- update division
- update task

No Issue
This commit is contained in:
lukman
2024-09-13 11:58:55 +08:00
parent a6d66dd823
commit e803452a00
63 changed files with 502 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/module/division_new/ui/carousel_division.tsx
View File

@@ -1,11 +1,13 @@
'use client'
import React, { useRef } from 'react';
import { Carousel } from '@mantine/carousel';
import { WARNA } from '@/module/_global';
import { TEMA } from '@/module/_global';
import Autoplay from 'embla-carousel-autoplay';
import { Flex, Text } from '@mantine/core';
import { useHookstate } from '@hookstate/core';
export default function CarouselDivision() {
const autoplay = useRef(Autoplay({ delay: 5000 }));
const tema = useHookstate(TEMA)
return (
<>
<Carousel
@@ -15,17 +17,17 @@ export default function CarouselDivision() {
onMouseEnter={autoplay.current.stop}
onMouseLeave={autoplay.current.reset}
>
<Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
<Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
<Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
<Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
<Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
<Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>

20
src/module/division_new/ui/create_anggota_division.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { funGetUserByCookies } from '@/module/auth';
import { funGetAllmember, TypeUser } from '@/module/user';
@@ -14,6 +14,7 @@ import { IDataMemberDivision } from '../lib/type_division';
import { funAddDivisionMember, funGetDivisionById } from '../lib/api_division';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { Carousel } from '@mantine/carousel';
import { useHookstate } from '@hookstate/core';
export default function CreateAnggotaDivision() {
@@ -26,6 +27,7 @@ export default function CreateAnggotaDivision() {
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const [onClickSearch, setOnClickSearch] = useState(false)
const tema = useHookstate(TEMA)
const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -98,7 +100,7 @@ export default function CreateAnggotaDivision() {
return (
<Box>
<LayoutNavbarNew back={`/division/info/${param.id}`} title="tambah 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>}
/>
@@ -108,7 +110,7 @@ export default function CreateAnggotaDivision() {
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,
}}>
@@ -124,8 +126,8 @@ export default function CreateAnggotaDivision() {
input: {
color: "white",
borderRadius: '#A3A3A3',
borderColor: `${WARNA.biruTua}`,
backgroundColor: `${WARNA.biruTua}`,
borderColor: `${tema.get().utama}`,
backgroundColor: `${tema.get().utama}`,
},
}}
size="md"
@@ -142,7 +144,7 @@ export default function CreateAnggotaDivision() {
<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 ? (
@@ -159,7 +161,7 @@ export default function CreateAnggotaDivision() {
<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>
@@ -219,11 +221,11 @@ export default function CreateAnggotaDivision() {
<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

15
src/module/division_new/ui/create_division.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import {
Avatar,
@@ -34,6 +34,7 @@ export default function CreateDivision() {
const [isChooseAnggota, setChooseAnggota] = useState(false)
const [isChooseAdmin, setChooseAdmin] = useState(false)
const member = useHookstate(globalMemberDivision)
const tema = useHookstate(TEMA)
const isMobile = useMediaQuery('(max-width: 369px)');
const [body, setBody] = useState<any>({
idGroup: "",
@@ -173,8 +174,8 @@ export default function CreateDivision() {
</Box>
<Box pt={20} pb={50}>
<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}>
@@ -200,14 +201,14 @@ export default function CreateDivision() {
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>
@@ -227,11 +228,11 @@ export default function CreateDivision() {
<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/division_new/ui/create_report.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import { Box, Select, Skeleton, Stack, Text } from "@mantine/core";
import { DateInput } from "@mantine/dates";
import React, { useState } from "react";
@@ -13,6 +13,7 @@ import { useShallowEffect } from "@mantine/hooks";
import { funGetReportDivision } from "../lib/api_division";
import { useParams } from "next/navigation";
import moment from "moment";
import { useHookstate } from "@hookstate/core";
export default function CreateReport() {
const [value, setValue] = useState<Date | null>(null);
@@ -21,6 +22,7 @@ export default function CreateReport() {
const [tampil, setTampil] = useState(false);
const [isGroup, setIsGroup] = useState("");
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
const [report, setReport] = useState({
progress: [],
dokumen: [],
@@ -129,7 +131,7 @@ export default function CreateReport() {
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
borderRadius: 10,
padding: 10,
}}
@@ -141,7 +143,7 @@ export default function CreateReport() {
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
borderRadius: 10,
padding: 10,
}}
@@ -153,7 +155,7 @@ export default function CreateReport() {
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
borderRadius: 10,
padding: 10,
}}

12
src/module/division_new/ui/drawer_detail_division.tsx
View File

@@ -1,5 +1,6 @@
"use client"
import { WARNA } from "@/module/_global";
import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
import { useParams, useRouter } from "next/navigation";
import { BsInfoCircle } from "react-icons/bs";
@@ -9,6 +10,7 @@ import { TbReportAnalytics } from "react-icons/tb";
export default function DrawerDetailDivision() {
const param = useParams<{ id: string }>()
const router = useRouter()
const tema = useHookstate(TEMA)
return (
<Box>
@@ -18,20 +20,20 @@ export default function DrawerDetailDivision() {
>
<Flex onClick={() => router.push('/division/info/' + param.id)} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsInfoCircle size={30} color={WARNA.biruTua} />
<BsInfoCircle size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Informasi Divisi</Text>
<Text c={tema.get().utama}>Informasi Divisi</Text>
</Box>
</Flex>
<Flex onClick={() => {
router.push('/division/report/' + param.id)
}} justify={'center'} align={'center'} direction={'column'} >
<Box>
<TbReportAnalytics size={30} color={WARNA.biruTua} />
<TbReportAnalytics size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Report Divisi</Text>
<Text c={tema.get().utama}>Report Divisi</Text>
</Box>
</Flex>
</SimpleGrid>

15
src/module/division_new/ui/drawer_division.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { globalRole, WARNA } from '@/module/_global';
import { globalRole, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
import { useRouter, useSearchParams } from 'next/navigation';
@@ -13,6 +13,7 @@ export default function DrawerDivision() {
const roleLogin = useHookstate(globalRole)
const searchParams = useSearchParams()
const group = searchParams.get('group')
const tema = useHookstate(TEMA)
return (
<Box>
@@ -22,10 +23,10 @@ export default function DrawerDivision() {
>
<Flex onClick={() => router.push('/division/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} ta={"center"}>Tambah Divisi</Text>
<Text c={tema.get().utama} ta={"center"}>Tambah Divisi</Text>
</Box>
</Flex>
{
@@ -34,10 +35,10 @@ export default function DrawerDivision() {
router.push('/division?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>
}
@@ -48,10 +49,10 @@ export default function DrawerDivision() {
router.push('/division?page=report')
}} justify={'center'} align={'center'} direction={'column'} >
<Box>
<TbReportAnalytics size={30} color={WARNA.biruTua} />
<TbReportAnalytics size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Report</Text>
<Text c={tema.get().utama}>Report</Text>
</Box>
</Flex>
}

6
src/module/division_new/ui/echart_bar_report.tsx
View File

@@ -4,11 +4,13 @@ import EChartsReact from "echarts-for-react";
import { useShallowEffect } from '@mantine/hooks';
import * as echarts from 'echarts';
import { Box } from '@mantine/core';
import { WARNA } from '@/module/_global';
import { TEMA, } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
export default function EchartBarReport({ data }: { data: any }) {
const [options, setOptions] = useState<EChartsOption>({});
const color = ["#F3C96B", "#9EC97F", "#5971C0"]
const tema = useHookstate(TEMA)
useShallowEffect(() => {
loadData(data)
@@ -21,7 +23,7 @@ export default function EchartBarReport({ data }: { data: any }) {
top: '2%',
left: 'center',
textStyle: {
color: WARNA.biruTua
color: tema.get().utama
}
},
tooltip: {

6
src/module/division_new/ui/echart_pai_report.tsx
View File

@@ -4,10 +4,12 @@ import EChartsReact from "echarts-for-react";
import { useShallowEffect } from '@mantine/hooks';
import * as echarts from 'echarts';
import { Box } from '@mantine/core';
import { WARNA } from '@/module/_global';
import { TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
export default function EchartPaiReport({ data }: { data: any }) {
const [options, setOptions] = useState<EChartsOption>({});
const tema = useHookstate(TEMA)
useShallowEffect(() => {
loadData(data)
@@ -20,7 +22,7 @@ export default function EchartPaiReport({ data }: { data: any }) {
top: '2%',
left: 'center',
textStyle: {
color: WARNA.biruTua
color: tema.get().utama
}
},
legend: {

8
src/module/division_new/ui/edit_division.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { Box, Button, rem, Select, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
@@ -9,12 +9,14 @@ import toast from 'react-hot-toast';
import { funEditDivision, funGetDivisionById } from '../lib/api_division';
import { funGetAllGroup, IDataGroup } from '@/module/group';
import { funGetUserByCookies } from '@/module/auth';
import { useHookstate } from '@hookstate/core';
export default function EditDivision() {
const [openModal, setOpenModal] = useState(false)
const router = useRouter()
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
const [loading, setLoading] = useState(false)
const [body, setBody] = useState<any>({
idGroup: "",
@@ -119,14 +121,14 @@ export default function EditDivision() {
<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}
fullWidth

38
src/module/division_new/ui/feature_detail_division.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { WARNA } from '@/module/_global';
import { TEMA } from '@/module/_global';
import { ActionIcon, Box, Center, Grid, Group, SimpleGrid, Text } from '@mantine/core';
import React, { useState } from 'react';
import { HiMiniUserGroup } from 'react-icons/hi2';
@@ -14,11 +14,13 @@ import { funGetDetailDivisionById } from '../lib/api_division';
import toast from 'react-hot-toast';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataJumlahDetailDivision } from '../lib/type_division';
import { useHookstate } from '@hookstate/core';
export default function FeatureDetailDivision() {
const param = useParams<{ id: string }>()
const router = useRouter()
const [feature, setFeature] = useState<IDataJumlahDetailDivision>()
const tema = useHookstate(TEMA)
async function fetchData() {
try {
@@ -42,7 +44,7 @@ export default function FeatureDetailDivision() {
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Features</Text>
<Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Features</Text>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
style={{
@@ -51,7 +53,7 @@ export default function FeatureDetailDivision() {
}}
>
<Box bg={'white'} style={{
border: `1px solid ${WARNA.bgHijauMuda}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
borderRadius: 10,
padding: 10
}} onClick={() => router.push(param.id + '/task?status=0')}>
@@ -61,13 +63,13 @@ export default function FeatureDetailDivision() {
size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon"
radius={100}
color={WARNA.bgHijauMuda}
color={tema.get().bgTotalKegiatan}
>
<LuClipboardEdit size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
<LuClipboardEdit size={isMobile2 ? 20 : 25} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}>
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Tugas</Text>
<Text fz={15} c={tema.get().utama} fw={"bold"}>Tugas</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>{feature?.tugas} Tugas</Text>
{!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
@@ -76,7 +78,7 @@ export default function FeatureDetailDivision() {
</Grid>
</Box>
<Box bg={'white'} style={{
border: `1px solid ${WARNA.bgHijauMuda}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
borderRadius: 10,
padding: 10
}} onClick={() => router.push(param.id + '/document')}>
@@ -86,13 +88,13 @@ export default function FeatureDetailDivision() {
size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon"
radius={100}
color={WARNA.bgHijauMuda}
color={tema.get().bgTotalKegiatan}
>
<BsFileEarmarkText size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
<BsFileEarmarkText size={isMobile2 ? 20 : 25} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}>
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Dokumen</Text>
<Text fz={15} c={tema.get().utama} fw={"bold"}>Dokumen</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>{feature?.dokumen} File</Text>
{!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
@@ -101,7 +103,7 @@ export default function FeatureDetailDivision() {
</Grid>
</Box>
<Box bg={'white'} style={{
border: `1px solid ${WARNA.bgHijauMuda}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
borderRadius: 10,
padding: 10
}} onClick={() => router.push(param.id + '/discussion')}>
@@ -111,13 +113,13 @@ export default function FeatureDetailDivision() {
size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon"
radius={100}
color={WARNA.bgHijauMuda}
color={tema.get().bgTotalKegiatan}
>
<GoCommentDiscussion size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
<GoCommentDiscussion size={isMobile2 ? 20 : 25} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}>
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Diskusi</Text>
<Text fz={15} c={tema.get().utama} fw={"bold"}>Diskusi</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>{feature?.diskusi} Diskusi</Text>
{!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
@@ -126,7 +128,7 @@ export default function FeatureDetailDivision() {
</Grid>
</Box>
<Box bg={'white'} style={{
border: `1px solid ${WARNA.bgHijauMuda}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
borderRadius: 10,
padding: 10
}} onClick={() => router.push(param.id + '/calender')}>
@@ -136,13 +138,13 @@ export default function FeatureDetailDivision() {
size={isMobile2 ? "lg" : "xl"}
aria-label="Gradient action icon"
radius={100}
color={WARNA.bgHijauMuda}
color={tema.get().bgTotalKegiatan}
>
<IoCalendarOutline size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
<IoCalendarOutline size={isMobile2 ? 20 : 25} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{ base: 7, md: 9 }}>
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Kalender</Text>
<Text fz={15} c={tema.get().utama} fw={"bold"}>Kalender</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>{feature?.kalender} Acara</Text>
{!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}

23
src/module/division_new/ui/information_division.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Button, Divider, Flex, Grid, Group, Skeleton, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
@@ -31,6 +31,7 @@ export default function InformationDivision() {
const roleLogin = useHookstate(globalRole)
const [isAdmin, setAdmin] = useState(false)
const isMobile = useMediaQuery('(max-width: 369px)');
const tema = useHookstate(TEMA)
async function getOneData() {
try {
@@ -110,7 +111,7 @@ export default function InformationDivision() {
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
<ActionIcon variant="light" onClick={() => {
router.push('/division/edit/' + param.id)
}} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
}} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<LuClipboardEdit size={20} color='white' />
</ActionIcon>
: <></>
@@ -121,7 +122,7 @@ export default function InformationDivision() {
<Text fw={"bold"}>Deskripsi Divisi</Text>
<Box p={20} bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${WARNA.borderBiruMuda}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}>
{
loading ?
@@ -142,7 +143,7 @@ export default function InformationDivision() {
<Box mt={20}>
<Box p={20} bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${WARNA.borderBiruMuda}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}>
<Box>
<Text>{member.length} Anggota</Text>
@@ -178,7 +179,7 @@ export default function InformationDivision() {
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
<Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
<Avatar size={isMobile ? 'md' : 'lg'}>
<AiOutlineUserAdd size={isMobile ? 25 : 30} color={WARNA.biruTua} />
<AiOutlineUserAdd size={isMobile ? 25 : 30} color={tema.get().utama} />
</Avatar>
<Text fz={isMobile ? 14 : 16}>Tambah Anggota</Text>
</Group>
@@ -213,14 +214,14 @@ export default function InformationDivision() {
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}>
{(v.isAdmin) ? 'Admin' : 'Anggota'}
</Text>
</Grid.Col>
@@ -242,15 +243,15 @@ export default function InformationDivision() {
<Box>
<Group align='center' mb={20} onClick={() => editStatusAdmin()}>
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
<FaUserTie size={30} color={WARNA.biruTua} />
<FaUserTie size={30} color={tema.get().utama} />
</ActionIcon>
<Text c={WARNA.biruTua}>{(valChooseMemberStatus == false) ? "Jadikan admin" : "Memberhentikan sebagai admin"}</Text>
<Text c={tema.get().utama}>{(valChooseMemberStatus == false) ? "Jadikan admin" : "Memberhentikan sebagai admin"}</Text>
</Group>
<Group align='center' onClick={() => setOpenModal(true)}>
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
<IoIosCloseCircle size={40} color={WARNA.biruTua} />
<IoIosCloseCircle size={40} color={tema.get().utama} />
</ActionIcon>
<Text c={WARNA.biruTua}>Keluarkan dari divisi</Text>
<Text c={tema.get().utama}>Keluarkan dari divisi</Text>
</Group>
</Box>
</LayoutDrawer>

6
src/module/division_new/ui/list_discussion.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { WARNA } from "@/module/_global";
import { TEMA } from "@/module/_global";
import { Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
@@ -9,6 +9,7 @@ import { CiUser, CiClock2 } from "react-icons/ci";
import { GoDiscussionClosed } from "react-icons/go";
import { funGetDetailDivisionById } from "../lib/api_division";
import { IDataDiscussionOnDetailDivision } from "../lib/type_division";
import { useHookstate } from "@hookstate/core";
export default function ListDiscussionOnDetailDivision() {
@@ -17,6 +18,7 @@ export default function ListDiscussionOnDetailDivision() {
const [data, setData] = useState<IDataDiscussionOnDetailDivision[]>([])
const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery('(max-width: 369px)');
const tema = useHookstate(TEMA)
async function fetchData() {
try {
@@ -43,7 +45,7 @@ export default function ListDiscussionOnDetailDivision() {
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={"bold"} fz={16}>
<Text c={tema.get().utama} mb={10} fw={"bold"} fz={16}>
Diskusi Terbaru
</Text>
<Box

30
src/module/division_new/ui/list_division.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, 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';
@@ -25,6 +25,7 @@ export default function ListDivision() {
const [loading, setLoading] = useState(true)
const [nameGroup, setNameGroup] = useState('')
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
const handleList = () => {
@@ -67,7 +68,7 @@ export default function ListDivision() {
<LayoutNavbarNew back='/home' title='Divisi'
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>
} />
@@ -78,7 +79,7 @@ export default function ListDivision() {
<TextInput
styles={{
input: {
color: WARNA.biruTua,
color: tema.get().utama,
borderRadius: '#A3A3A3',
borderColor: '#A3A3A3',
},
@@ -94,9 +95,9 @@ export default function ListDivision() {
<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>
@@ -108,7 +109,7 @@ export default function ListDivision() {
<Skeleton width={"100%"} height={100} radius={"md"} />
</>
:
<Box bg={WARNA.biruTua} p={10} style={{ borderRadius: 10 }}>
<Box bg={tema.get().utama} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={'white'}>Total Divisi</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={'white'}>{jumlah}</Text>
@@ -142,13 +143,14 @@ export default function ListDivision() {
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}
>
<HiMiniUserGroup size={25} color={WARNA.biruTua} />
<HiMiniUserGroup size={25} color={tema.get().utama} />
</ActionIcon>
</Center>
</Group>
@@ -191,7 +193,7 @@ export default function ListDivision() {
<Box key={i} mb={20}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${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.name}</Title>
</Flex>
@@ -202,7 +204,7 @@ export default function ListDivision() {
<Group align='center' pt={10} justify='flex-end'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
<MdAccountCircle size={32} color={tema.get().utama} />
</Avatar>
<Avatar>
{

6
src/module/division_new/ui/list_document.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global";
import { TEMA, } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Box, Image, Text, Center, Paper, Stack, UnstyledButton, Skeleton, Group } from "@mantine/core";
import * as ICON from '../lib/file_icon'
@@ -9,6 +9,7 @@ import toast from "react-hot-toast";
import { funGetDetailDivisionById } from "../lib/api_division";
import { IDataKalenderOnDetailDivision } from "../lib/type_division";
import { useState } from "react";
import { useHookstate } from "@hookstate/core";
const iconContainer = (icon: string) => 'data:image/svg+xml;base64,' + btoa(icon)
@@ -17,6 +18,7 @@ export default function ListDocumentOnDetailDivision() {
const param = useParams<{ id: string }>()
const [data, setData] = useState<IDataKalenderOnDetailDivision[]>([])
const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA)
async function fetchData() {
try {
@@ -42,7 +44,7 @@ export default function ListDocumentOnDetailDivision() {
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Dokumen Terbaru</Text>
<Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Dokumen Terbaru</Text>
<Group justify="center" grow>
{
loading

10
src/module/division_new/ui/list_task.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global";
import { TEMA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Avatar, Box, Group, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
@@ -10,6 +10,7 @@ import { funGetDetailDivisionById } from "../lib/api_division";
import { useState } from "react";
import { IDataTaskOnDetailDivision } from "../lib/type_division";
import _ from "lodash";
import { useHookstate } from "@hookstate/core";
export default function ListTaskOnDetailDivision() {
@@ -17,6 +18,7 @@ export default function ListTaskOnDetailDivision() {
const param = useParams<{ id: string }>()
const [data, setData] = useState<IDataTaskOnDetailDivision[]>([])
const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA)
async function fetchData() {
try {
@@ -42,7 +44,7 @@ export default function ListTaskOnDetailDivision() {
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Tugas Hari Ini</Text>
<Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Tugas Hari Ini</Text>
<Group justify="center" grow>
{
loading ?
@@ -65,8 +67,8 @@ export default function ListTaskOnDetailDivision() {
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{data.map((v, i) =>
<Carousel.Slide key={v.id}>
<Box p={20} w={{ base: 300, md: 400 }} onClick={() => router.push(`/task/${v.id}`)} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
<Text fw={'bold'} c={WARNA.bgWhite} lineClamp={1}>{_.startCase(v.title)}</Text>
<Box p={20} w={{ base: 300, md: 400 }} onClick={() => router.push(`/task/${v.id}`)} bg={tema.get().utama} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
<Text fw={'bold'} c={tema.get().bgUtama} lineClamp={1}>{_.startCase(v.title)}</Text>
<Group justify="space-between" mt={20}>
<Group gap={5} align="center" c={"#CFCDCD"}>
<CiClock2 size={18} />

11
src/module/division_new/ui/navbar_admin_division.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Box, Button, Checkbox, Divider, Flex, Grid, Group, rem, Stack, Text, TextInput } from '@mantine/core';
import { useRouter } from 'next/navigation';
@@ -15,6 +15,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
const member = useHookstate(globalMemberDivision)
const memberValue = member.get() as IFormMemberDivision[]
const [value, setValue] = useState<string[]>([]);
const tema = useHookstate(TEMA)
async function onSubmit() {
if (value.length === 0) {
@@ -50,7 +51,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
<TextInput
styles={{
input: {
color: WARNA.biruTua,
color: tema.get().utama,
borderRadius: '#A3A3A3',
borderColor: '#A3A3A3',
},
@@ -77,7 +78,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
base: 200,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
{v.name}
</Text>
</Box>
@@ -102,11 +103,11 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
<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

21
src/module/division_new/ui/navbar_create_users.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';
@@ -22,6 +22,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
const [dataMember, setDataMember] = useState<TypeUser>([])
const [loading, setLoading] = useState(true)
const [onClickSearch, setOnClickSearch] = useState(false)
const tema = useHookstate(TEMA)
const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -79,12 +80,12 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
<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>} />
{/* SEARCH */}
@@ -94,7 +95,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
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,
}}>
@@ -110,8 +111,8 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
input: {
color: "white",
borderRadius: '#A3A3A3',
borderColor: `${WARNA.biruTua}`,
backgroundColor: `${WARNA.biruTua}`,
borderColor: `${tema.get().utama}`,
backgroundColor: `${tema.get().utama}`,
},
}}
size="md"
@@ -129,7 +130,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
<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 ? (
@@ -146,7 +147,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
<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>
@@ -211,11 +212,11 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
<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

6
src/module/division_new/ui/navbar_detail_division.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { ActionIcon, Box } from "@mantine/core";
import { useState } from "react";
import { HiMenu } from "react-icons/hi";
@@ -8,11 +8,13 @@ import { funGetDivisionById } from "../lib/api_division";
import { useParams } from "next/navigation";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import { useHookstate } from "@hookstate/core";
export default function NavbarDetailDivision() {
const [openDrawer, setOpenDrawer] = useState(false)
const param = useParams<{ id: string }>()
const [name, setName] = useState('')
const tema = useHookstate(TEMA)
async function getOneData() {
try {
@@ -36,7 +38,7 @@ export default function NavbarDetailDivision() {
return (
<>
<LayoutNavbarNew back="/division" title={name} menu={
<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>
} />

10
src/module/division_new/ui/report_division_id.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { Box, Skeleton, Stack } from '@mantine/core';
import { DateInput } from '@mantine/dates';
import React, { useState } from 'react';
@@ -12,6 +12,7 @@ import { funGetReportDivision } from '../lib/api_division';
import moment from 'moment';
import "moment/locale/id";
import toast from 'react-hot-toast';
import { useHookstate } from '@hookstate/core';
export default function ReportDivisionId() {
@@ -19,6 +20,7 @@ export default function ReportDivisionId() {
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(false);
const [tampil, setTampil] = useState(false);
const tema = useHookstate(TEMA)
const [report, setReport] = useState({
progress: [],
dokumen: [],
@@ -95,7 +97,7 @@ export default function ReportDivisionId() {
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
borderRadius: 10,
padding: 10,
}}
@@ -107,7 +109,7 @@ export default function ReportDivisionId() {
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
borderRadius: 10,
padding: 10,
}}
@@ -119,7 +121,7 @@ export default function ReportDivisionId() {
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
borderRadius: 10,
padding: 10,
}}