wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : update tema

Browse Source 
Deskripsi:
- update calender
- update color palette
- update discussion
- update division
- update task

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

10
src/module/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}