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

22
src/module/color_palette/ui/create_palette_color.tsx
View File

@@ -1,11 +1,13 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text } from '@mantine/core';
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
export default function CreatePaletteColor() {
const tema = useHookstate(TEMA)
const [isWarna, setWarna] = useState({
judulTema: '',
warnaUtama: '',
backgroundUtama: '',
backgroundIcon: '',
@@ -18,6 +20,16 @@ export default function CreatePaletteColor() {
<LayoutNavbarNew back='/color-palette' title='Tambah Tema' menu />
<Box p={20}>
<Stack>
<TextInput
label={'Judul Tema'}
placeholder='Judul Tema'
required
size="md"
radius="md"
onChange={
(e) => setWarna({ ...isWarna, judulTema: e.target.value })
}
/>
<ColorInput
label={'Warna Utama'}
placeholder='Pilih Warna'
@@ -152,11 +164,11 @@ export default function CreatePaletteColor() {
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(535),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
backgroundColor: `${tema.get().bgUtama}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth

8
src/module/color_palette/ui/drawer_create_palette.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, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
@@ -6,6 +7,7 @@ import { IoAddCircle } from 'react-icons/io5';
export default function DrawerCreatePalette() {
const router = useRouter()
const tema = useHookstate(TEMA)
return (
<Box>
<SimpleGrid
@@ -15,10 +17,10 @@ export default function DrawerCreatePalette() {
onClick={() => router.push('/color-palette/create')}
>
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
<IoAddCircle size={30} color={tema.get().utama} />
</Box>
<Box>
<Text ta={'center'} c={WARNA.biruTua}>Tambah Tema</Text>
<Text ta={'center'} c={tema.get().utama}>Tambah Tema</Text>
</Box>
</Flex>
</SimpleGrid>

10
src/module/color_palette/ui/drawer_palet_edit_end_default.tsx
View File

@@ -1,4 +1,4 @@
import { TEMA, WARNA } from '@/module/_global';
import { TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Flex, SimpleGrid, Text } from '@mantine/core';
@@ -29,20 +29,20 @@ export default function DrawerPaletEditEndDefault() {
onClick={() => setModal(true)}
>
<Box>
<IoColorPalette size={30} color={WARNA.biruTua} />
<IoColorPalette size={30} color={tema.get().utama} />
</Box>
<Box>
<Text ta={'center'} c={WARNA.biruTua}>Gunakan Tema</Text>
<Text ta={'center'} c={tema.get().utama}>Gunakan Tema</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'}
onClick={() => router.push('/color-palette/update/1')}
>
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
<FaPencil size={30} color={tema.get().utama} />
</Box>
<Box>
<Text ta={'center'} c={WARNA.biruTua}>Edit Tema</Text>
<Text ta={'center'} c={tema.get().utama}>Edit Tema</Text>
</Box>
</Flex>
</SimpleGrid>

21
src/module/color_palette/ui/edit_palette_color.tsx
View File

@@ -1,10 +1,13 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text } from '@mantine/core';
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
export default function EditPaletteColor() {
const tema = useHookstate(TEMA)
const [isWarna, setWarna] = useState({
judulTema: '',
warnaUtama: '',
backgroundUtama: '',
backgroundIcon: '',
@@ -17,6 +20,16 @@ export default function EditPaletteColor() {
<LayoutNavbarNew back='/color-palette' title='Edit Tema' menu />
<Box p={20}>
<Stack>
<TextInput
label={'Judul Tema'}
placeholder='Judul Tema'
required
size="md"
radius="md"
onChange={
(e) => setWarna({ ...isWarna, judulTema: e.target.value })
}
/>
<ColorInput
label={'Warna Utama'}
placeholder='Pilih Warna'
@@ -151,11 +164,11 @@ export default function EditPaletteColor() {
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(535),
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/color_palette/ui/list_color_palette.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, Checkbox, Flex, Group, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
@@ -7,8 +7,9 @@ import { FaCircleCheck } from 'react-icons/fa6';
import { HiMenu } from 'react-icons/hi';
import DrawerCreatePalette from './drawer_create_palette';
import DrawerPaletEditEndDefault from './drawer_palet_edit_end_default';
import { useHookstate } from '@hookstate/core';
const paletWarna = [
const palettema = [
{
id: 1,
name: 'Tema Bawaan 1',
@@ -38,15 +39,16 @@ export default function ListColorPalette() {
const router = useRouter()
const [isOpen, setOpen] = useState(false)
const [isOpenTambahan, setOpenTambahan] = useState(false)
const tema = useHookstate(TEMA)
return (
<Box>
<LayoutNavbarNew back='/home' title='Tema Aplikasi' menu={
<ActionIcon onClick={() => { setOpen(true) }} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<ActionIcon onClick={() => { setOpen(true) }} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
} />
<Box p={20}>
{paletWarna.map((v, i) => (
{palettema.map((v, i) => (
<Box mb={20} key={i}>
<Box style={{
borderWidth: "3px",

23
src/module/discussion/ui/detail_discussion.tsx
View File

@@ -1,10 +1,10 @@
"use client"
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Input, rem, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonDetailDiscussionComment, SkeletonDetailDiscussionMember, SkeletonSingle, WARNA } from "@/module/_global";
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, rem, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { GrChatOption } from "react-icons/gr";
import { LuSendHorizonal } from "react-icons/lu";
import { useState } from "react";
import { funCreateComent, funGetAllDiscussion, funGetDiscussionById } from "../lib/api_discussion";
import { funCreateComent, funGetDiscussionById } from "../lib/api_discussion";
import { useShallowEffect } from "@mantine/hooks";
import { IDetailDiscussion } from "../lib/type_discussion";
import moment from "moment";
@@ -27,6 +27,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
const roleLogin = useHookstate(globalRole)
const [isCreator, setCreator] = useState(false)
const adminLogin = useHookstate(globalIsAdminDivision)
const tema = useHookstate(TEMA)
const getData = async () => {
try {
@@ -83,7 +84,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
<LayoutNavbarNew back={`/division/${param.id}/discussion/`} title="Diskusi "
menu={
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || adminLogin.get() || isCreator) ?
<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>
: <></>
@@ -133,7 +134,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
<Group>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${isData?.user_img}`} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
<Text c={tema.get().utama} fw={"bold"}>
{isData?.username}
</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
@@ -175,7 +176,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
md: 0,
base: 10
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
{isData?.username}
</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
@@ -249,7 +250,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
</Grid.Col>
<Grid.Col span={6}>
<Box>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={15}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={15}>
{v.username}
</Text>
</Box>
@@ -283,12 +284,12 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
:
<Box pos={'fixed'} bottom={0} w={"100%"} style={{
maxWidth: rem(550)
}} pl={rem(15)} pr={rem(15)} bg={WARNA.bgWhite}>
<Box bg={WARNA.bgWhite} >
}} pl={rem(15)} pr={rem(15)} bg={tema.get().bgUtama}>
<Box bg={tema.get().bgUtama} >
<Group justify="flex-end">
<Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
</Group>
<Box mb={20} bg={WARNA.bgWhite}>
<Box mb={20} bg={tema.get().bgUtama}>
<Grid bg={"white"} style={{
border: '1px solid gray',
borderRadius: 40
@@ -297,7 +298,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
<TextInput
styles={{
input: {
color: WARNA.biruTua,
color: tema.get().utama,
border: "none",
backgroundColor: "transparent"
},

19
src/module/discussion/ui/drawer_detail_discussion.tsx
View File

@@ -1,4 +1,4 @@
import { WARNA } from "@/module/_global";
import { TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
import { useState } from "react";
@@ -17,6 +17,7 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
const router = useRouter()
const param = useParams<{ id: string, detail: string }>()
const refresh = useHookstate(globalRefreshDiscussion)
const tema = useHookstate(TEMA)
async function fetchStatusDiscussion(val: boolean) {
@@ -77,19 +78,19 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
>
<Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsTrash3 size={30} color={WARNA.biruTua} />
<BsTrash3 size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Hapus</Text>
<Text c={tema.get().utama}>Hapus</Text>
</Box>
</Flex>
<Flex onClick={() => window.location.href = `/division/${param.id}/discussion/update/${param.detail}`} 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</Text>
<Text c={tema.get().utama}>Edit</Text>
</Box>
</Flex>
@@ -99,9 +100,9 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
<>
<Flex justify={'center'} align={'center'} direction={'column'}>
<Box>
<MdClose size={30} color={WARNA.biruTua} />
<MdClose size={30} color={tema.get().utama} />
</Box>
<Text style={{ color: WARNA.biruTua }}>Tutup Diskusi</Text>
<Text style={{ color: tema.get().utama }}>Tutup Diskusi</Text>
</Flex>
</>
) : (
@@ -109,9 +110,9 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
<Flex justify={'center'} align={'center'} direction={'column'}>
<Box>
<FaCheck size={30} color={WARNA.biruTua} />
<FaCheck size={30} color={tema.get().utama} />
</Box>
<Text style={{ color: WARNA.biruTua }}>Buka Diskusi</Text>
<Text style={{ color: tema.get().utama }}>Buka Diskusi</Text>
</Flex>
</>
)}

8
src/module/discussion/ui/drawer_list_discussion.tsx
View File

@@ -1,10 +1,12 @@
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 } from "next/navigation";
import { IoAddCircle } from "react-icons/io5";
export default function DrawerListDiscussion() {
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
return (
<Box>
@@ -14,10 +16,10 @@ export default function DrawerListDiscussion() {
>
<Flex onClick={() => window.location.href = "/division/" + param.id + "/discussion/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 Diskusi</Text>
<Text c={tema.get().utama}>Tambah Diskusi</Text>
</Box>
</Flex>
</SimpleGrid>

8
src/module/discussion/ui/form_create_discussion.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 { Avatar, Box, Button, Center, Grid, Group, rem, Text, Textarea } from "@mantine/core";
import { useState } from "react";
@@ -8,6 +8,7 @@ import { funCreateDiscussion, funGetDiscussionById } from "../lib/api_discussion
import { useParams, useRouter } from "next/navigation";
import { useShallowEffect } from "@mantine/hooks";
import { funGetProfileByCookies } from "@/module/user/profile/lib/api_profile";
import { useHookstate } from "@hookstate/core";
export default function FormCreateDiscussion({ id }: { id: string }) {
const [isValModal, setValModal] = useState(false)
@@ -16,6 +17,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
const param = useParams<{ id: string, detail: string }>()
const [loading, setLoading] = useState(true)
const [img, setIMG] = useState<any | null>()
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
desc: false,
});
@@ -99,11 +101,11 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
backgroundColor: `${tema.get().bgUtama}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth

8
src/module/discussion/ui/form_edit_discussion.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, Group, Avatar, Textarea, Button, Grid, rem, Skeleton } from "@mantine/core"
import { useParams, useRouter } from "next/navigation"
@@ -8,6 +8,7 @@ import toast from "react-hot-toast"
import { funEditDiscussion, funGetDiscussionById } from "../lib/api_discussion"
import { useShallowEffect } from "@mantine/hooks"
import { funGetProfileByCookies } from "@/module/user/profile/lib/api_profile"
import { useHookstate } from "@hookstate/core"
export default function FormEditDiscussion() {
const [isValModal, setValModal] = useState(false)
@@ -16,6 +17,7 @@ export default function FormEditDiscussion() {
const [isDataOne, setDataOne] = useState("")
const [loading, setLoading] = useState(true)
const [img, setIMG] = useState<any | null>()
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
desc: false,
});
@@ -125,14 +127,14 @@ export default function FormEditDiscussion() {
<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

12
src/module/discussion/ui/list_discussion.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global";
import { TEMA} from "@/module/_global";
import { Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
@@ -10,12 +10,14 @@ import { useShallowEffect } from "@mantine/hooks";
import { IDataDiscussion } from "../lib/type_discussion";
import toast from "react-hot-toast";
import _ from "lodash";
import { useHookstate } from "@hookstate/core";
export default function ListDiscussion({ id }: { id: string }) {
const [isData, setData] = useState<IDataDiscussion[]>([])
const [searchQuery, setSearchQuery] = useState('')
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const getData = async () => {
try {
@@ -46,9 +48,9 @@ export default function ListDiscussion({ id }: { id: string }) {
<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"
@@ -115,7 +117,7 @@ export default function ListDiscussion({ id }: { id: string }) {
md: 0,
base: 10
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
{v.user_name}
</Text>
<Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>

5
src/module/discussion/ui/navbar_detail_discussion.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 } from "@mantine/core";
import { useState } from "react";
import { HiMenu } from "react-icons/hi";
@@ -11,11 +11,12 @@ export default function NavbarDetailDiscussion({id, status, idDivision}: {id: st
const [openDrawer, setOpenDrawer] = useState(false)
const param = useParams<{ id: string }>()
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
return (
<>
<LayoutNavbarNew back={`/division/${param.id}/discussion/`} title="Diskusi "
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>}
/>

6
src/module/discussion/ui/navbar_list_discussion.tsx
View File

@@ -1,19 +1,21 @@
'use client'
import { LayoutNavbarNew, WARNA, LayoutDrawer } from "@/module/_global";
import { LayoutNavbarNew, LayoutDrawer, TEMA } from "@/module/_global";
import { ActionIcon } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import { useState } from "react";
import DrawerListDiscussion from "./drawer_list_discussion";
import { useParams } from "next/navigation";
import { useHookstate } from "@hookstate/core";
export default function NavbarListDiscussion() {
const [openDrawer, setOpenDrawer] = useState(false)
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
return (
<>
<LayoutNavbarNew back={`/division/${param.id}`} title="Diskusi"
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/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,
}}

10
src/module/task/ui/add_detail_task.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import {
Avatar,
Box,
@@ -21,6 +21,7 @@ import { IFormDateTask } from "../lib/type_task";
import moment from "moment";
import { funCreateDetailTask } from "../lib/api_task";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
export default function AddDetailTask() {
@@ -29,6 +30,7 @@ export default function AddDetailTask() {
const [title, setTitle] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
title: false,
});
@@ -83,7 +85,7 @@ export default function AddDetailTask() {
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
c={tema.get().utama}
/>
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
@@ -140,11 +142,11 @@ export default function AddDetailTask() {
<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

14
src/module/task/ui/add_file_detail_task.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import {
Box,
Button,
@@ -21,6 +21,7 @@ import ResultsFile from "./results_file";
import { FaTrash } from "react-icons/fa6";
import { funAddFileTask, funCekNamFileUploadTask } from "../lib/api_task";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
export default function AddFileDetailTask() {
@@ -31,6 +32,7 @@ export default function AddFileDetailTask() {
const param = useParams<{ id: string, detail: 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) {
@@ -118,7 +120,7 @@ export default function AddFileDetailTask() {
{
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"}`,
@@ -143,11 +145,11 @@ export default function AddFileDetailTask() {
<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={() => {
@@ -170,10 +172,10 @@ export default function AddFileDetailTask() {
<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/task/ui/add_member_detail_task.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 {
ActionIcon,
@@ -30,6 +30,7 @@ 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 AddMemberDetailTask() {
const router = useRouter()
@@ -42,6 +43,7 @@ export default function AddMemberDetailTask() {
const [loading, setLoading] = useState(true)
const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA)
async function getData() {
@@ -159,7 +161,7 @@ export default function AddMemberDetailTask() {
<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>}
/>
@@ -170,7 +172,7 @@ export default function AddMemberDetailTask() {
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,
}}>
@@ -186,8 +188,8 @@ export default function AddMemberDetailTask() {
input: {
color: "white",
borderRadius: '#A3A3A3',
borderColor: `${WARNA.biruTua}`,
backgroundColor: `${WARNA.biruTua}`,
borderColor: `${tema.get().utama}`,
backgroundColor: `${tema.get().utama}`,
},
}}
size="md"
@@ -205,7 +207,7 @@ export default function AddMemberDetailTask() {
<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 ? (
@@ -222,7 +224,7 @@ export default function AddMemberDetailTask() {
<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>
@@ -244,7 +246,7 @@ export default function AddMemberDetailTask() {
<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 }} /> : ""}
@@ -295,11 +297,11 @@ export default function AddMemberDetailTask() {
<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

8
src/module/task/ui/cancel_task.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import {
Box,
Button,
@@ -12,12 +12,14 @@ import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { funCancelTask } from "../lib/api_task";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
export default function CancelTask() {
const router = useRouter()
const [alasan, setAlasan] = useState("")
const [openModal, setOpenModal] = useState(false)
const tema = useHookstate(TEMA)
const param = useParams<{ id: string, detail: string }>()
const [touched, setTouched] = useState({
reason: false,
@@ -73,11 +75,11 @@ export default function CancelTask() {
<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/task/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,6 +21,7 @@ import toast from "react-hot-toast";
import { IFormDateTask } from "../lib/type_task";
import moment from "moment";
import { HiChevronLeft } from "react-icons/hi2";
import { useHookstate } from "@hookstate/core";
export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: boolean) => void, onSet: (val: IFormDateTask) => void }) {
@@ -28,6 +29,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
const router = useRouter()
const param = useParams<{ id: string }>()
const [title, setTitle] = useState("")
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
title: false,
});
@@ -53,7 +55,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>
@@ -71,7 +73,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}>
@@ -123,11 +125,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/task/ui/create_task.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { useParams, useRouter } from "next/navigation";
import React, { useRef, useState } from "react";
@@ -40,6 +40,7 @@ export default function CreateTask() {
const [indexDelTask, setIndexDelTask] = useState<number>(0)
const isMobile = useMediaQuery('(max-width: 369px)');
const [title, setTitle] = useState("")
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
title: false,
task: false,
@@ -174,7 +175,7 @@ export default function CreateTask() {
{
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 (
@@ -193,7 +194,7 @@ export default function CreateTask() {
{
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"}`,
@@ -220,8 +221,8 @@ export default function CreateTask() {
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}>
@@ -245,14 +246,14 @@ export default function CreateTask() {
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>
@@ -273,11 +274,11 @@ export default function CreateTask() {
<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={() => {
@@ -371,10 +372,10 @@ export default function CreateTask() {
<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>
@@ -392,10 +393,10 @@ export default function CreateTask() {
<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>

25
src/module/task/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 { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import {
@@ -40,6 +40,7 @@ export default function CreateUsersProject({ 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() {
@@ -135,13 +136,13 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
<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>}
/>
@@ -152,7 +153,7 @@ export default function CreateUsersProject({ 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,
}}>
@@ -168,8 +169,8 @@ export default function CreateUsersProject({ 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"
@@ -187,7 +188,7 @@ export default function CreateUsersProject({ 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 ? (
@@ -204,7 +205,7 @@ export default function CreateUsersProject({ 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>
@@ -229,10 +230,10 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
<Skeleton height={20} width={"100%"} mt={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>
<BsListCheck size={25} style={{ marginRight: 5 }} color={WARNA.biruTua} />
<BsListCheck size={25} style={{ marginRight: 5 }} color={tema.get().utama} />
</Group>
}
<Box mt={15} mb={100}>
@@ -280,11 +281,11 @@ export default function CreateUsersProject({ 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

17
src/module/task/ui/detail_list_anggota_task.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 { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
@@ -25,6 +25,7 @@ export default function ListAnggotaDetailTask() {
const roleLogin = useHookstate(globalRole)
const adminLogin = useHookstate(globalIsAdminDivision)
const isMobile = useMediaQuery('(max-width: 369px)');
const tema = useHookstate(TEMA)
async function getOneData() {
try {
@@ -70,8 +71,8 @@ export default function ListAnggotaDetailTask() {
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}>
@@ -118,7 +119,7 @@ export default function ListAnggotaDetailTask() {
</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>
@@ -139,20 +140,20 @@ export default function ListAnggotaDetailTask() {
>
<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>
{
(roleLogin.get() != "user" && roleLogin.get() != "coadmin") || adminLogin.get() ?
<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/task/ui/detail_list_file_task.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, LayoutModalViewFile, SkeletonDetailListTugasTask, WARNA } from "@/module/_global";
import { LayoutDrawer, LayoutModalViewFile, SkeletonDetailListTugasTask, TEMA } from "@/module/_global";
import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
@@ -10,6 +10,7 @@ import { funDeleteFileTask, funGetTaskDivisionById } from "../lib/api_task";
import { IDataFileTaskDivision } from "../lib/type_task";
import { FaTrash } from "react-icons/fa6";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
export default function ListFileDetailTask() {
const [isData, setData] = useState<IDataFileTaskDivision[]>([])
@@ -23,6 +24,7 @@ export default function ListFileDetailTask() {
const [nameData, setNameData] = useState('')
const [isOpenModalView, setOpenModalView] = useState(false)
const [isExtension, setExtension] = useState('')
const tema = useHookstate(TEMA)
async function getOneData() {
try {
@@ -67,7 +69,7 @@ export default function ListFileDetailTask() {
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 ListFileDetailTask() {
>
<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>

17
src/module/task/ui/detail_list_tugas_task.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, Grid, Center, Checkbox, Group, SimpleGrid, Text, Stack, Flex, Divider } from "@mantine/core"
import { useShallowEffect } from "@mantine/hooks"
import { useParams, useRouter } from "next/navigation"
@@ -25,6 +25,7 @@ export default function ListTugasDetailTask() {
const [statusData, setStatusData] = useState(0)
const router = useRouter()
const refresh = useHookstate(globalRefreshTask)
const tema = useHookstate(TEMA)
async function getOneData() {
try {
setLoading(true)
@@ -88,7 +89,7 @@ export default function ListTugasDetailTask() {
return (
<Box pt={20}>
<Text fw={"bold"} c={WARNA.biruTua}>
<Text fw={"bold"} c={tema.get().utama}>
Tanggal & Tugas
</Text>
<Box
@@ -178,28 +179,28 @@ export default function ListTugasDetailTask() {
>
<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('edit/' + 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>

12
src/module/task/ui/detail_progress_task.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global";
import { TEMA } from "@/module/_global";
import { Box, Grid, ActionIcon, Progress, Text, Skeleton } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
@@ -17,6 +17,7 @@ export default function ProgressDetailTask() {
const refresh = useHookstate(globalRefreshTask)
const [loading, setLoading] = useState(true)
const isMobile = useMediaQuery('(max-width: 369px)');
const tema = useHookstate(TEMA)
async function getOneData() {
try {
@@ -60,7 +61,7 @@ export default function ProgressDetailTask() {
:
<Box
p={20}
bg={"#DCEED8"}
bg={tema.get().bgTotalKegiatan}
style={{
borderRadius: 10,
}}
@@ -72,9 +73,10 @@ export default function ProgressDetailTask() {
size={isMobile ? 50 : 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().bgFiturDivisi}
>
<HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
<HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={9}>
@@ -85,7 +87,7 @@ export default function ProgressDetailTask() {
border: `1px solid ${"#BDBDBD"}`,
}}
w={"100%"}
color="#FCAA4B"
color={tema.get().bgFiturDivisi}
radius="md"
size={isMobile ? "lg" : "xl"}
value={valProgress}

8
src/module/task/ui/drawer_division_task.tsx
View File

@@ -1,8 +1,10 @@
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 { IoAddCircle } from "react-icons/io5";
export default function DrawerDivisionTask() {
const tema = useHookstate(TEMA)
return (
<Box>
<Stack pt={10}>
@@ -11,10 +13,10 @@ export default function DrawerDivisionTask() {
>
<Flex onClick={() => window.location.href = "task/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 Tugas</Text>
<Text c={tema.get().utama}>Tambah Tugas</Text>
</Box>
</Flex>
</SimpleGrid>

12
src/module/task/ui/edit_detail_task.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import {
Avatar,
Box,
@@ -22,6 +22,7 @@ import moment from "moment";
import { funEditDetailTask, funGetDetailTask } from "../lib/api_task";
import { useShallowEffect } from "@mantine/hooks";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
export default function EditDetailTask() {
@@ -31,6 +32,7 @@ export default function EditDetailTask() {
const param = useParams<{ id: string, detail: string }>()
const [openModal, setOpenModal] = useState(false)
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
async function onSubmit() {
if (value[0] == null || value[1] == null)
@@ -101,7 +103,7 @@ export default function EditDetailTask() {
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
c={tema.get().utama}
/>
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
@@ -127,7 +129,7 @@ export default function EditDetailTask() {
<Skeleton height={45} mt={20} radius={10} />
:
<>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Text c={tema.get().utama}>Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
@@ -164,14 +166,14 @@ export default function EditDetailTask() {
<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/task/ui/edit_task.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import {
Box,
Button,
@@ -16,6 +16,7 @@ import toast from "react-hot-toast";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { funEditTask, funGetTaskDivisionById } from "../lib/api_task";
import { useShallowEffect } from "@mantine/hooks";
import { useHookstate } from "@hookstate/core";
export default function EditTask() {
@@ -24,6 +25,7 @@ export default function EditTask() {
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
title: false,
});
@@ -111,14 +113,14 @@ export default function EditTask() {
<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

33
src/module/task/ui/list_division_task.tsx
View File

@@ -1,4 +1,4 @@
import { WARNA } from "@/module/_global";
import { TEMA } from "@/module/_global";
import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
@@ -9,6 +9,7 @@ import { funGetAllTask } from "../lib/api_task";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { useHookstate } from "@hookstate/core";
export default function ListDivisionTask() {
const [isList, setIsList] = useState(false)
@@ -19,6 +20,7 @@ export default function ListDivisionTask() {
const status = searchParams.get('status')
const [searchQuery, setSearchQuery] = useState('')
const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA)
const handleList = () => {
setIsList(!isList)
@@ -58,7 +60,7 @@ export default function ListDivisionTask() {
<TextInput
styles={{
input: {
color: WARNA.biruTua,
color: tema.get().utama,
borderRadius: '#A3A3A3',
borderColor: '#A3A3A3',
},
@@ -73,9 +75,9 @@ export default function ListDivisionTask() {
<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>
@@ -86,10 +88,10 @@ export default function ListDivisionTask() {
<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>
}
@@ -110,13 +112,14 @@ export default function ListDivisionTask() {
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().bgFiturDivisi}
>
<HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
<HiMiniPresentationChartBar size={25} color={tema.get().utama} />
</ActionIcon>
</Center>
</Group>
@@ -164,7 +167,7 @@ export default function ListDivisionTask() {
<Box key={i} mb={20}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`task/${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>
@@ -180,7 +183,7 @@ export default function ListDivisionTask() {
<Group align='center' pt={10} justify='space-between'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
<MdAccountCircle size={32} color={tema.get().utama} />
</Avatar>
<Avatar>{(v.member == 0) ? "0" : "+" + (v.member - 1)}</Avatar>
</Avatar.Group>

25
src/module/task/ui/navbar_detail_division_task.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 { useState } from "react";
@@ -20,6 +20,7 @@ export default function NavbarDetailDivisionTask() {
const [isOpen, setOpen] = useState(false)
const roleLogin = useHookstate(globalRole)
const adminLogin = useHookstate(globalIsAdminDivision)
const tema = useHookstate(TEMA)
async function getOneData() {
try {
@@ -46,7 +47,7 @@ export default function NavbarDetailDivisionTask() {
<LayoutNavbarNew back={`/division/${param.id}/task/`} title={name} menu={
<ActionIcon
variant="light"
bg={WARNA.bgIcon}
bg={tema.get().bgIcon}
size="lg"
radius="lg"
aria-label="Settings"
@@ -72,10 +73,10 @@ export default function NavbarDetailDivisionTask() {
}}
>
<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>
@@ -88,10 +89,10 @@ export default function NavbarDetailDivisionTask() {
}}
>
<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>
@@ -104,10 +105,10 @@ export default function NavbarDetailDivisionTask() {
}}
onClick={() => { router.push(param.detail + '/add-member') }} >
<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 NavbarDetailDivisionTask() {
}}
onClick={() => { router.push(param.detail + '/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>
@@ -130,10 +131,10 @@ export default function NavbarDetailDivisionTask() {
}}
onClick={() => { router.push(param.detail + '/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>
</> : <></>

5
src/module/task/ui/navbar_division_task.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 } from "@mantine/core";
import { useState } from "react";
import { HiMenu } from "react-icons/hi";
@@ -13,12 +13,13 @@ export default function NavbarDivisionTask() {
const param = useParams<{ id: string }>()
const roleLogin = useHookstate(globalRole)
const adminLogin = useHookstate(globalIsAdminDivision)
const tema = useHookstate(TEMA)
return (
<>
<LayoutNavbarNew back={`/division/${param.id}`} title="Divisi - Tugas"
menu={((roleLogin.get() != "user" && roleLogin.get() != "coadmin") || adminLogin.get()) ?
<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>
: <></>

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

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

1
src/module/task/ui/results_file.tsx
View File

@@ -1,4 +1,3 @@
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';

10
src/module/task/ui/tabs_division_task.tsx
View File

@@ -7,13 +7,15 @@ import { TbClockPause } from "react-icons/tb";
import ListDivisionTask from "./list_division_task";
import { useRouter, useSearchParams } from "next/navigation";
import { Carousel } from "@mantine/carousel";
import { WARNA } from "@/module/_global";
import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
export default function TabsDivisionTask() {
const iconStyle = { width: rem(20), height: rem(20) };
const router = useRouter()
const searchParams = useSearchParams()
const status = searchParams.get('status')
const tema = useHookstate(TEMA)
const dataStatus = [
{
@@ -77,15 +79,15 @@ export default function TabsDivisionTask() {
color={
status == item.id
? "white"
: (status == null && item.id == "0") ? "white" : WARNA.biruTua
: (status == null && item.id == "0") ? "white" : tema.get().utama
}
onClick={() => { router.push("?status=" + item.id) }}
defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
radius={"xl"}
bg={
status == item.id
? "#FF9861"
: (status == null && item.id == "0") ? "#FF9861" : "transparent"
? tema.get().bgFiturDivisi
: (status == null && item.id == "0") ? tema.get().bgFiturDivisi : "transparent"
}
>
{item.icon}