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

30
src/module/calender/ui/create_user_calender.tsx
View File

@@ -5,10 +5,10 @@ import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } f
import { useHookstate } from '@hookstate/core';
import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks';
import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Text, TextInput } from '@mantine/core';
import { FaCheck } from 'react-icons/fa6';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { Carousel } from '@mantine/carousel';
@@ -22,6 +22,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
const [loading, setLoading] = useState(true)
const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA)
async function getData() {
try {
@@ -117,7 +118,14 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
<LayoutNavbarNew
// back=""
title="Pilih Anggota"
menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
state={
<Box>
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
}
menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
<HiMagnifyingGlass size={20} color='white' />
</ActionIcon>}
/>
@@ -129,7 +137,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
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,
}}>
@@ -145,8 +153,8 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
input: {
color: "white",
borderRadius: '#A3A3A3',
borderColor: `${WARNA.biruTua}`,
backgroundColor: `${WARNA.biruTua}`,
borderColor: `${tema.get().utama}`,
backgroundColor: `${tema.get().utama}`,
},
}}
size="md"
@@ -164,7 +172,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
<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 ? (
@@ -181,7 +189,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
<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>
@@ -202,7 +210,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
<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 }} /> : ""}
@@ -249,11 +257,11 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
<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

22
src/module/calender/ui/create_user_detail_calender.tsx
View File

@@ -4,7 +4,7 @@ import { useParams, useRouter } from 'next/navigation';
import { funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks';
import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Text, TextInput } from '@mantine/core';
import { FaCheck } from 'react-icons/fa6';
import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -12,6 +12,7 @@ import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { Carousel } from '@mantine/carousel';
import { funAddMemberCalender, funGetOneCalender } from '../lib/api_calender';
import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
import { useHookstate } from '@hookstate/core';
export default function CreateUserDetailCalender() {
const router = useRouter()
@@ -24,6 +25,7 @@ export default function CreateUserDetailCalender() {
const [loading, setLoading] = useState(true)
const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA)
async function getData() {
try {
@@ -130,7 +132,7 @@ export default function CreateUserDetailCalender() {
<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>}
/>
@@ -142,7 +144,7 @@ export default function CreateUserDetailCalender() {
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,
}}>
@@ -158,8 +160,8 @@ export default function CreateUserDetailCalender() {
input: {
color: "white",
borderRadius: '#A3A3A3',
borderColor: `${WARNA.biruTua}`,
backgroundColor: `${WARNA.biruTua}`,
borderColor: `${tema.get().utama}`,
backgroundColor: `${tema.get().utama}`,
},
}}
size="md"
@@ -177,7 +179,7 @@ export default function CreateUserDetailCalender() {
<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 ? (
@@ -194,7 +196,7 @@ export default function CreateUserDetailCalender() {
<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>
@@ -215,7 +217,7 @@ export default function CreateUserDetailCalender() {
<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 }} /> : ""}
@@ -264,11 +266,11 @@ export default function CreateUserDetailCalender() {
<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

3
src/module/calender/ui/date_event_division.tsx
View File

@@ -1,4 +1,3 @@
import { WARNA } from '@/module/_global';
import { Box, Divider, Flex, Group, Indicator, Skeleton, Text } from '@mantine/core';
import { DatePicker, DatePickerProps } from '@mantine/dates';
import { useParams, useRouter } from 'next/navigation';
@@ -10,7 +9,6 @@ import moment from 'moment';
import _ from 'lodash';
import toast from 'react-hot-toast';
import 'dayjs/locale/id'
import { PiCalendarStarThin } from 'react-icons/pi';
export default function DateEventDivision() {
@@ -23,6 +21,7 @@ export default function DateEventDivision() {
const [loading, setLoading] = useState(true)
const isMobile = useMediaQuery('(max-width: 369px)');
const getData = async (tgl: any) => {
try {
setLoading(true)

12
src/module/calender/ui/dawer_division_calender.tsx
View File

@@ -1,4 +1,5 @@
import { WARNA } from '@/module/_global';
import { TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
import { useParams } from 'next/navigation';
import React from 'react';
@@ -7,6 +8,7 @@ import { IoAddCircle } from 'react-icons/io5';
export default function DawerDivisionCalender() {
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
return (
<Box>
<Stack pt={10}>
@@ -15,18 +17,18 @@ export default function DawerDivisionCalender() {
>
<Flex onClick={() => window.location.href = `/division/${param.id}/calender/create`} justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
<IoAddCircle size={30} color={tema.get().utama} />
</Box>
<Box>
<Text ta={"center"} c={WARNA.biruTua}>Tambah Acara</Text>
<Text ta={"center"} c={tema.get().utama}>Tambah Acara</Text>
</Box>
</Flex>
<Flex onClick={() => window.location.href = `/division/${param.id}/calender/history`} justify={'center'} align={'center'} direction={'column'} >
<Box>
<AiOutlineFileSearch size={30} color={WARNA.biruTua} />
<AiOutlineFileSearch size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Riwayat</Text>
<Text c={tema.get().utama}>Riwayat</Text>
</Box>
</Flex>
</SimpleGrid>

28
src/module/calender/ui/detail_event_division.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, CopyButton, Divider, Flex, Grid, Group, SimpleGrid, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
@@ -19,6 +19,7 @@ import SkeletonDetailEvent from './skeleton_detail_event';
import { IoIosCloseCircle } from 'react-icons/io';
import LayoutModal from '@/module/_global/layout/layout_modal';
import toast from 'react-hot-toast';
import { useHookstate } from '@hookstate/core';
export default function DetailEventDivision() {
const param = useParams<{ id: string, detail: string }>()
@@ -31,6 +32,7 @@ export default function DetailEventDivision() {
const [isOpenModal, setOpenModal] = useState(false)
const router = useRouter()
const [dataChoose, setDataChoose] = useState({ id: '', name: '' })
const tema = useHookstate(TEMA)
const getData = async () => {
@@ -73,7 +75,7 @@ export default function DetailEventDivision() {
return (
<Box>
<LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Detail Acara"
menu={<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
menu={<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>} />
<Box p={20}>
@@ -92,7 +94,7 @@ export default function DetailEventDivision() {
base: 2,
xl: 1
}}>
<BsCalendar2Event size={25} color={WARNA.biruTua} />
<BsCalendar2Event size={25} color={tema.get().utama} />
</Grid.Col>
<Grid.Col span={{
base: 10,
@@ -106,7 +108,7 @@ export default function DetailEventDivision() {
base: 2,
xl: 1
}}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
<BsCalendarDate size={25} color={tema.get().utama} />
</Grid.Col>
<Grid.Col span={{
base: 10,
@@ -120,7 +122,7 @@ export default function DetailEventDivision() {
base: 2,
xl: 1
}}>
<LuClock size={25} color={WARNA.biruTua} />
<LuClock size={25} color={tema.get().utama} />
</Grid.Col>
<Grid.Col span={{
base: 10,
@@ -134,7 +136,7 @@ export default function DetailEventDivision() {
base: 2,
xl: 1
}}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
<BsCalendarDate size={25} color={tema.get().utama} />
</Grid.Col>
<Grid.Col span={{
base: 10,
@@ -156,7 +158,7 @@ export default function DetailEventDivision() {
base: 2,
xl: 1
}}>
<LuLink size={25} color={WARNA.biruTua} />
<LuLink size={25} color={tema.get().utama} />
</Grid.Col>
<Grid.Col span={{
base: 10,
@@ -173,7 +175,7 @@ export default function DetailEventDivision() {
<CopyButton value={String(isDataCalender?.linkMeet)} timeout={2000}>
{({ copied, copy }) => (
<Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
<ActionIcon color={copied ? 'teal' : WARNA.biruTua} variant="subtle" onClick={copy}>
<ActionIcon color={copied ? 'teal' : tema.get().utama} variant="subtle" onClick={copy}>
{copied ? (
<FaCheck size={20} />
) : (
@@ -195,7 +197,7 @@ export default function DetailEventDivision() {
base: 2,
xl: 1
}}>
<MdOutlineFormatListBulleted size={25} color={WARNA.biruTua} />
<MdOutlineFormatListBulleted size={25} color={tema.get().utama} />
</Grid.Col>
<Grid.Col span={{
base: 10,
@@ -317,19 +319,19 @@ export default function DetailEventDivision() {
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>
<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>
</SimpleGrid>

16
src/module/calender/ui/drawer_detail_event.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { WARNA } from '@/module/_global';
import { TEMA } 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';
@@ -8,11 +8,13 @@ import toast from 'react-hot-toast';
import { MdDelete, MdEdit } from 'react-icons/md';
import { funDeleteCalenderById } from '../lib/api_calender';
import { FaUsers } from 'react-icons/fa6';
import { useHookstate } from '@hookstate/core';
export default function DrawerDetailEvent({ idCalendar }: { idCalendar: string }) {
const router = useRouter()
const [isModal, setModal] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const tema = useHookstate(TEMA)
async function fetchDeleteCalender(val: boolean) {
try {
@@ -42,26 +44,26 @@ export default function DrawerDetailEvent({ idCalendar }: { idCalendar: string }
>
<Flex onClick={() => setModal(true)} justify={'center'} align={'center'} direction={'column'} >
<Box>
<MdDelete size={30} color={WARNA.biruTua} />
<MdDelete size={30} color={tema.get().utama} />
</Box>
<Box>
<Text ta={"center"} c={WARNA.biruTua}>Hapus Acara</Text>
<Text ta={"center"} c={tema.get().utama}>Hapus Acara</Text>
</Box>
</Flex>
<Flex onClick={() => router.push(`/division/${param.id}/calender/update/${idCalendar}`)} justify={'center'} align={'center'} direction={'column'} >
<Box>
<MdEdit size={30} color={WARNA.biruTua} />
<MdEdit size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Edit Acara</Text>
<Text c={tema.get().utama}>Edit Acara</Text>
</Box>
</Flex>
<Flex onClick={() => router.push(`/division/${param.id}/calender/${param.detail}/add-member`)} justify={'center'} align={'center'} direction={'column'} >
<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>
</SimpleGrid>

12
src/module/calender/ui/history_division_calender.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { Box, Center, Flex, Grid, Group, Skeleton, Text, TextInput } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
@@ -10,6 +10,7 @@ import { useShallowEffect } from '@mantine/hooks';
import moment from 'moment';
import "moment/locale/id";
import _ from 'lodash';
import { useHookstate } from '@hookstate/core';
export default function HistoryDivisionCalender() {
const [isData, setData] = useState<IHistoryCalender[]>([])
@@ -17,6 +18,7 @@ export default function HistoryDivisionCalender() {
const param = useParams<{ id: string, detail: string }>()
const [searchQuery, setSearchQuery] = useState('')
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const getData = async () => {
@@ -42,9 +44,9 @@ export default function HistoryDivisionCalender() {
<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"
@@ -55,7 +57,7 @@ export default function HistoryDivisionCalender() {
onChange={(e) => setSearchQuery(e.target.value)}
/>
<Box mt={30}>
<Box bg={"#DBE9D8"} style={{
<Box bg={tema.get().bgTotalKegiatan} style={{
borderRadius: 10,
padding: 20
}}>

15
src/module/calender/ui/navbar_create_division_calender.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { Avatar, Box, Button, Divider, Flex, Grid, Group, Input, NumberInput, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { DateInput, TimeInput } from '@mantine/dates';
import React, { useState } from 'react';
@@ -22,6 +22,7 @@ export default function NavbarCreateDivisionCalender() {
const memberValue = member.get() as IFormMemberCalender[]
const [openMember, setOpenMember] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
title: false,
dateStart: false,
@@ -274,8 +275,8 @@ export default function NavbarCreateDivisionCalender() {
member.length > 0 &&
<Box pt={30} mb={60}>
<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 NavbarCreateDivisionCalender() {
base: 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
<Text c={tema.get().utama} fw={"bold"} ta={'end'}>
Anggota
</Text>
</Grid.Col>
@@ -333,11 +334,11 @@ export default function NavbarCreateDivisionCalender() {
<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

6
src/module/calender/ui/navbar_division_calender.tsx
View File

@@ -1,20 +1,22 @@
'use client'
import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
import { ActionIcon, Box } from '@mantine/core';
import React, { useState } from 'react';
import { HiMenu } from 'react-icons/hi';
import DawerDivisionCalender from './dawer_division_calender';
import DateEventDivision from './date_event_division';
import { useParams } from 'next/navigation';
import { useHookstate } from '@hookstate/core';
export default function NavbarDivisionCalender() {
const [openDrawer, setOpenDrawer] = useState(false)
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
return (
<div>
<LayoutNavbarNew back={`/division/${param.id}`} title="Kalender"
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>
}

8
src/module/calender/ui/update_division_calender.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { Box, Button, Group, rem, Select, SimpleGrid, Skeleton, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { DateInput, TimeInput } from '@mantine/dates';
import React, { useState } from 'react';
@@ -12,6 +12,7 @@ import { IDetailByIdCalender } from '../lib/type_calender';
import moment from 'moment';
import "moment/locale/id";
import UpdateListUsers from './update_list_users';
import { useHookstate } from '@hookstate/core';
export default function UpdateDivisionCalender() {
const [isModal, setModal] = useState(false)
@@ -19,6 +20,7 @@ export default function UpdateDivisionCalender() {
const [isDataCalender, setDataCalender] = useState<IDetailByIdCalender>()
const [openMember, setOpenMember] = useState(false)
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
title: false,
dateStart: false,
@@ -324,14 +326,14 @@ export default function UpdateDivisionCalender() {
<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

21
src/module/calender/ui/update_list_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 { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
@@ -24,6 +24,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
const [loading, setLoading] = useState(true)
const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA)
async function getData() {
try {
@@ -118,7 +119,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
<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>}
/>
@@ -130,7 +131,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
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,
}}>
@@ -146,8 +147,8 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
input: {
color: "white",
borderRadius: '#A3A3A3',
borderColor: `${WARNA.biruTua}`,
backgroundColor: `${WARNA.biruTua}`,
borderColor: `${tema.get().utama}`,
backgroundColor: `${tema.get().utama}`,
},
}}
size="md"
@@ -165,7 +166,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
<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 ? (
@@ -182,7 +183,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
<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>
@@ -203,7 +204,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
<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 }} /> : ""}
@@ -250,14 +251,14 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
<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