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

style : update style

Browse Source
This commit is contained in:
lukman
2024-09-17 17:49:20 +08:00
parent 4e4160ed83
commit 048b2632a9
27 changed files with 357 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/api/announcement/route.ts
View File

@@ -89,7 +89,7 @@ export async function GET(request: Request) {
const allData = announcements.map((v: any) => ({
..._.omit(v, ["createdAt"]),
createdAt: moment(v.createdAt).format("LL")
createdAt: moment(v.createdAt).format("ll")
}))
return NextResponse.json({ success: true, message: "Berhasil mendapatkan pengumuman", data: allData, }, { status: 200 });

5
src/app/layout.tsx
View File

@@ -13,6 +13,7 @@ import { Toaster } from 'react-hot-toast';
import '@mantine/dates/styles.css';
import '@mantine/notifications/styles.css';
import { Notifications } from '@mantine/notifications'
import LayoutBackground from "@/module/_global/layout/layout_background";
export const metadata = {
title: "SISTEM DESA MANDIRI",
@@ -42,9 +43,9 @@ export default function RootLayout({
overflowY: "auto",
}}>
<Toaster/>
<Container mih={'100vh'} p={0} size={rem(550)} bg={WARNA.bgWhite}>
<LayoutBackground>
{children}
</Container>
</LayoutBackground>
</Box>
</MantineProvider>
</body>

2
src/module/_global/bin/type_global.ts
View File

@@ -3,6 +3,6 @@ export interface IGlobalTema {
bgUtama: string
bgIcon: string
bgFiturHome: string
bgFiturDivisi: string
bgFiturDivision: string
bgTotalKegiatan: string
}

2
src/module/_global/bin/val_global.ts
View File

@@ -17,6 +17,6 @@ export const TEMA = hookstate<IGlobalTema>({
bgUtama: "#F4F9FD",
bgIcon: "#384288",
bgFiturHome: "#FCAA4B",
bgFiturDivisi: "#FCAA4B",
bgFiturDivision: "#FCAA4B",
bgTotalKegiatan: "#DCEED8"
})

8
src/module/_global/fun/WARNA.ts
View File

@@ -1,9 +1,9 @@
export const WARNA = {
bgWhite: "#F4F9FD",
// biruTua: "#19345E",
biruTua: "#508D4E",
// bgIcon: "#384288",
bgIcon: "#3C8754",
biruTua: "#19345E",
// biruTua: "#508D4E",
bgIcon: "#384288",
// bgIcon: "#3C8754",
borderOrange: "#FCAA4B",
bgHijauMuda: "#DCEED8",
borderBiruMuda: "#9EBDED"

14
src/module/_global/layout/layout_background.tsx Normal file
View File

@@ -0,0 +1,14 @@
"use client"
import { useHookstate } from '@hookstate/core';
import { Container, rem } from '@mantine/core';
import React from 'react';
import { TEMA } from '../bin/val_global';
export default function LayoutBackground({ children }: { children: React.ReactNode }) {
const tema = useHookstate(TEMA)
return (
<Container mih={'100vh'} p={0} size={rem(550)} bg={tema.get().bgUtama}>
{children}
</Container>
);
}

33
src/module/announcement/ui/detail_announcement.tsx
View File

@@ -57,24 +57,21 @@ export default function DetailAnnouncement({ id }: { id: string }) {
<Skeleton height={18} width={150} />
</Box>
</Group>
<Grid gutter={'md'}>
<Grid.Col span={1}>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={30}
radius={100}
aria-label="icon"
>
<Skeleton height={25} width={40} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={11}>
<Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Skeleton mt={5} ml={5} height={18} width={150} />
</Spoiler>
</Grid.Col>
</Grid>
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={30}
radius={100}
aria-label="icon"
>
<Skeleton height={25} width={40} />
</ActionIcon>
<Box>
<Skeleton height={18} width={150} />
</Box>
</Group>
</Stack>
:
<Stack>

2
src/module/announcement/ui/drawer_announcement.tsx
View File

@@ -14,7 +14,7 @@ export default function DrawerAnnouncement() {
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
cols={{ base: 2, sm: 3, lg: 3 }}
>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{

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

@@ -13,6 +13,7 @@ import { globalCalender, globalUlangiEvent } from '../lib/val_calender';
import { IFormMemberCalender, IFormUlangiEvent } from '../lib/type_calender';
import { funCreateCalender } from '../lib/api_calender';
import CreateUserCalender from './create_user_calender';
import { useMediaQuery } from '@mantine/hooks';
export default function NavbarCreateDivisionCalender() {
const [value, setValue] = useState<Date | null>(null);
@@ -23,6 +24,7 @@ export default function NavbarCreateDivisionCalender() {
const [openMember, setOpenMember] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const tema = useHookstate(TEMA)
const isMobile = useMediaQuery('(max-width: 369px)');
const [touched, setTouched] = useState({
title: false,
dateStart: false,
@@ -301,19 +303,19 @@ export default function NavbarCreateDivisionCalender() {
>
<Grid.Col span={9}>
<Group>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{
base: 140,
base: isMobile ? 130 : 140,
xl: 270
}}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
<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={tema.get().utama} fw={"bold"} ta={'end'}>
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
Anggota
</Text>
</Grid.Col>

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

@@ -49,7 +49,7 @@ export default function DrawerPaletEditEndDefault({ id, idVillage }: { id: strin
return (
<Box>
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
<SimpleGrid cols={{ base: 2, sm: 3, lg: 3 }}>
<Flex justify={'center'} align={'center'} direction={'column'}
onClick={() => setModal(true)}
>

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

@@ -1,7 +1,7 @@
"use client"
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 { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
import { IEditTheme } from '../lib/type_theme';
import toast from 'react-hot-toast';
@@ -15,6 +15,7 @@ export default function EditPaletteColor() {
const router = useRouter()
const [isModal, setModal] = useState(false)
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const [touched, setTouched] = useState({
name: false,
utama: false,
@@ -38,15 +39,19 @@ export default function EditPaletteColor() {
async function getOneData() {
try {
setLoading(true)
const res = await funGetThemeById(param.id)
if (res.success) {
setWarna(res.data)
} else {
toast.error(res.message);
}
setLoading(false)
} catch (error) {
console.error(error)
toast.error("Gagal menambahkan tema, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -75,141 +80,154 @@ export default function EditPaletteColor() {
<Box>
<LayoutNavbarNew back='/color-palette' title='Edit Tema' menu />
<Box p={20}>
<Stack>
<TextInput
label={'Judul Tema'}
placeholder='Judul Tema'
required
size="md"
radius="md"
value={isWarna.name}
onChange={
(e) => {
setWarna({ ...isWarna, name: e.target.value })
setTouched({ ...touched, name: true })
{loading ?
<Stack>
{Array(7)
.fill(null)
.map((_, i) => (
<Box key={i}>
<Skeleton width={"30%"} height={20} mb={10} radius={"md"} />
<Skeleton width={"100%"} height={40} radius={"md"} />
</Box>
))}
</Stack>
:
<Stack>
<TextInput
label={'Judul Tema'}
placeholder='Judul Tema'
required
size="md"
radius="md"
value={isWarna.name}
onChange={
(e) => {
setWarna({ ...isWarna, name: e.target.value })
setTouched({ ...touched, name: true })
}
}
}
error={
touched.name && (
isWarna.name == "" ? "Judul Tema Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Warna Utama'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.utama}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, utama: color })
setTouched({ ...touched, utama: true })
error={
touched.name && (
isWarna.name == "" ? "Judul Tema Tidak Boleh Kosong" : null
)
}
}
error={
touched.utama && (
isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Utama'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgUtama}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgUtama: color })
setTouched({ ...touched, bgUtama: true })
/>
<ColorInput
label={'Warna Utama'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.utama}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, utama: color })
setTouched({ ...touched, utama: true })
}
}
}
error={
touched.bgUtama && (
isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Icon'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgIcon}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgIcon: color })
setTouched({ ...touched, bgIcon: true })
error={
touched.utama && (
isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null
)
}
}
error={
touched.bgIcon && (
isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Fitur Home'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgFiturHome}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgFiturHome: color })
setTouched({ ...touched, bgFiturHome: true })
/>
<ColorInput
label={'Background Utama'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgUtama}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgUtama: color })
setTouched({ ...touched, bgUtama: true })
}
}
}
error={
touched.bgFiturHome && (
isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Fitur Divisi'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgFiturDivision}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgFiturDivision: color })
setTouched({ ...touched, bgFiturDivision: true })
error={
touched.bgUtama && (
isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null
)
}
}
error={
touched.bgFiturDivision && (
isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Total Kegiatan'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgTotalKegiatan}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgTotalKegiatan: color })
setTouched({ ...touched, bgTotalKegiatan: true })
/>
<ColorInput
label={'Background Icon'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgIcon}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgIcon: color })
setTouched({ ...touched, bgIcon: true })
}
}
}
error={
touched.bgTotalKegiatan && (
isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : null
)
}
/>
</Stack>
error={
touched.bgIcon && (
isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Fitur Home'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgFiturHome}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgFiturHome: color })
setTouched({ ...touched, bgFiturHome: true })
}
}
error={
touched.bgFiturHome && (
isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Fitur Divisi'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgFiturDivision}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgFiturDivision: color })
setTouched({ ...touched, bgFiturDivision: true })
}
}
error={
touched.bgFiturDivision && (
isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" : null
)
}
/>
<ColorInput
label={'Background Total Kegiatan'}
placeholder='Pilih Warna'
required
size="md"
radius="md"
value={isWarna.bgTotalKegiatan}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgTotalKegiatan: color })
setTouched({ ...touched, bgTotalKegiatan: true })
}
}
error={
touched.bgTotalKegiatan && (
isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : null
)
}
/>
</Stack>
}
<Flex justify={'center'} align={"center"} w={"auto"} gap={10} mt={20} mb={100}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 6 }}
@@ -286,18 +304,22 @@ export default function EditPaletteColor() {
zIndex: 999,
backgroundColor: `${tema.get().bgUtama}`,
}}>
<Button
color="white"
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth
onClick={() => {
setModal(true)
}}
>
Simpan
</Button>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
color="white"
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth
onClick={() => {
setModal(true)
}}
>
Simpan
</Button>
}
</Box>

115
src/module/color_palette/ui/list_color_palette.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
import { ActionIcon, Box, Checkbox, Flex, Group, Text } from '@mantine/core';
import { ActionIcon, Box, Checkbox, Flex, Group, Skeleton, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { FaCircleCheck } from 'react-icons/fa6';
@@ -24,18 +24,23 @@ export default function ListColorPalette() {
const [isChooseName, setChooseName] = useState('')
const [isChooseVillage, setChooseVillage] = useState('')
const refresh = useHookstate(globalRefreshTheme)
const [loading, setLoading] = useState(true)
async function loadData() {
try {
setLoading(true)
const res = await funGetAllTheme()
if (res.success) {
setData(res.data)
} else {
toast.error(res.message)
}
setLoading(false)
} catch (error) {
console.error(error)
toast.error("Gagal mendapatkan data tema, coba lagi nanti")
} finally {
setLoading(false)
}
}
@@ -52,56 +57,68 @@ export default function ListColorPalette() {
<HiMenu size={20} color='white' />
</ActionIcon>
} />
<Box p={20}>
{isData.map((v, i) => (
<Box mb={20} key={i}>
<Box style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}} pt={10} pb={10} pl={20} pr={20}
onClick={() => {
setChooseId(v.id)
setChooseName(v.name)
setChooseVillage(v.idVillage)
setOpenTambahan(true)
}}
>
<Group justify='space-between' align='center'>
<Text>{v.name}</Text>
{v.isUse ? <FaCircleCheck size={20} /> : <></>}
</Group>
<Box pt={10}>
<Flex gap={10}>
<Box bg={v.utama} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgUtama} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgIcon} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgFiturHome} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgFiturDivision} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgTotalKegiatan} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
</Flex>
{loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i} pl={20} pr={20} pt={20}>
<Box>
<Skeleton width={"100%"} height={90} radius={10} />
</Box>
</Box>
</Box>
))}
</Box>
))
:
<Box p={20}>
{isData.map((v, i) => (
<Box mb={20} key={i}>
<Box style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}} pt={10} pb={10} pl={20} pr={20}
onClick={() => {
setChooseId(v.id)
setChooseName(v.name)
setChooseVillage(v.idVillage)
setOpenTambahan(true)
}}
>
<Group justify='space-between' align='center'>
<Text>{v.name}</Text>
{v.isUse ? <FaCircleCheck size={20} /> : <></>}
</Group>
<Box pt={10}>
<Flex gap={10}>
<Box bg={v.utama} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgUtama} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgIcon} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgFiturHome} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgFiturDivision} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
<Box bg={v.bgTotalKegiatan} w={30} h={30} style={{
borderRadius: "100%",
border: "1px solid grey"
}} />
</Flex>
</Box>
</Box>
</Box>
))}
</Box>
}
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerCreatePalette />
</LayoutDrawer>

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

@@ -94,7 +94,7 @@ export default function ListDivision() {
onChange={(val) => { searchDivision(val.target.value) }}
/>
</Grid.Col>
<Grid.Col span={'auto'}>
<Grid.Col span={2}>
<Flex justify={'center'}>
{isList ? (
<HiOutlineListBullet size={35} color={tema.get().utama} onClick={handleList} />

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

@@ -4,7 +4,7 @@ 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'
import { useParams, useRouter } from "next/navigation";
import { useShallowEffect } from "@mantine/hooks";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import toast from "react-hot-toast";
import { funGetDetailDivisionById } from "../lib/api_division";
import { IDataKalenderOnDetailDivision } from "../lib/type_division";
@@ -41,6 +41,7 @@ export default function ListDocumentOnDetailDivision() {
useShallowEffect(() => {
fetchData()
}, [param.id])
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<Box pt={10}>
@@ -69,14 +70,14 @@ export default function ListDocumentOnDetailDivision() {
data.map((v) =>
<Carousel.Slide key={v.id}>
<UnstyledButton onClick={() => router.push(`/division/${param.id}/document`)}>
<Stack gap={0} w={200}>
<Stack gap={0} w={isMobile ? 100 : 170}>
<Paper withBorder shadow="sm" radius={12} >
<Center p={"md"}>
<Image w={"75"} src={(v.extension == "pdf") ? iconContainer(ICON.PDF) : iconContainer(ICON.IMAGE)} alt="image" />
<Image w={isMobile ? 50 : 75} src={(v.extension == "pdf") ? iconContainer(ICON.PDF) : iconContainer(ICON.IMAGE)} alt="image" />
</Center>
</Paper>
<Box>
<Text c={"dimmed"}ta={"center"} lineClamp={1}>{v.name + '.' + v.extension}</Text>
<Text c={"dimmed"}ta={"center"} lineClamp={1} fz={isMobile? 14 : 16}>{v.name + '.' + v.extension}</Text>
</Box>
</Stack>
</UnstyledButton>

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

@@ -2,7 +2,7 @@
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";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { CiClock2 } from "react-icons/ci";
@@ -42,6 +42,8 @@ export default function ListTaskOnDetailDivision() {
fetchData()
}, [param.id])
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<Box pt={10}>
<Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Tugas Hari Ini</Text>
@@ -52,8 +54,8 @@ export default function ListTaskOnDetailDivision() {
.fill(null)
.map((_, i) => (
<Stack align="stretch" justify="center" key={i}>
<Skeleton height={80} radius="md" m={0} />
<Skeleton height={10} radius="md" m={0} />
<Skeleton height={80} radius="md" m={0} w={isMobile ? "80%" : "90%"} />
<Skeleton height={10} radius="md" m={0} w={isMobile ? "80%" : "90%"}/>
</Stack>
))
:
@@ -67,7 +69,10 @@ 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={tema.get().utama} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
<Box p={20} w={{
base: isMobile ? 230 : 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"}>

15
src/module/document/ui/drawer_share_document.tsx
View File

@@ -1,7 +1,7 @@
import { TEMA } from "@/module/_global";
import { funGetListDivisionByIdDivision, IDataDivison } from "@/module/division_new";
import { IDataMemberTaskDivision } from "@/module/task/lib/type_task";
import { Box, Select, Button, Avatar, Divider, Flex, Group, Stack, Text, ActionIcon } from "@mantine/core";
import { Box, Select, Button, Avatar, Divider, Flex, Group, Stack, Text, ActionIcon, ScrollArea } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
@@ -12,13 +12,13 @@ import { funShareDocument } from "../lib/api_document";
import { useHookstate } from "@hookstate/core";
import { globalRefreshDocument } from "../lib/val_document";
export default function DrawerShareDocument({ data }: { data: IShareDivision[]}) {
export default function DrawerShareDocument({ data }: { data: IShareDivision[] }) {
const [selectedFiles, setSelectedFiles] = useState<any>([])
const [isData, setData] = useState<IDataDivison[]>([])
const param = useParams<{ id: string }>()
const refresh = useHookstate(globalRefreshDocument)
const tema = useHookstate(TEMA)
async function onShare() {
@@ -72,6 +72,12 @@ export default function DrawerShareDocument({ data }: { data: IShareDivision[]})
return (
<Box pt={10}>
<Box mt={10}>
<ScrollArea
h={{
base: "58vh", xl: "58vh", md: "57vh",
sm: "58vh",
}} type="scroll" scrollbarSize={2} scrollHideDelay={0} scrollbars="y"
>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.id == v.id);
return (
@@ -106,8 +112,9 @@ export default function DrawerShareDocument({ data }: { data: IShareDivision[]})
</Box>
);
})}
</ScrollArea>
</Box>
<Box h={90} pos={"fixed"} bottom={0} w={{ base: "92%", md: "94%" }} style={{
<Box h={60} pos={"fixed"} bottom={0} w={{ base: "92%", md: "94%" }} style={{
zIndex: 999
}}>
<Box>

4
src/module/document/ui/navbar_document_division.tsx
View File

@@ -436,9 +436,9 @@ export default function NavbarDocumentDivision() {
</Box>
</Flex>
<Checkbox
color="teal"
color={tema.get().utama}
radius="lg"
size="md"
size={isMobile ? "sm" : "md"}
checked={isSelected}
onChange={() => handleCheckboxChange(i)}
/>

2
src/module/group/ui/drawer_group.tsx
View File

@@ -47,7 +47,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
cols={{ base: 2, sm: 3, lg: 3 }}
onClick={() => setOpenDrawerGroup(true)}
>
<Flex justify={"center"} align={"center"} direction={"column"}>

18
src/module/home/ui/list_divisi.tsx
View File

@@ -8,7 +8,7 @@ import { useState } from "react";
import { IDataHomeDivision } from "../lib/type_home";
import { funGetHome } from "../lib/api_home";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useHookstate } from "@hookstate/core";
export default function ListDivisi() {
@@ -41,6 +41,7 @@ export default function ListDivisi() {
useShallowEffect(() => {
fetchData();
}, []);
const isMobile = useMediaQuery('(max-width: 369px)');
return (
@@ -61,18 +62,21 @@ export default function ListDivisi() {
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{isData.map((v) =>
<Carousel.Slide key={v.id}>
<Box w={{ base: 300, md: 400 }}>
<Box w={{
base: isMobile ? 230 : 300,
md: 400
}}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
<Card.Section>
<Box h={120} bg={tema.get().bgFiturHome}>
<Box h={isMobile ? 100 : 120} bg={tema.get().bgFiturHome}>
<Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={tema.get().utama} ta={"center"} lineClamp={2}>{v.name}</Title>
<Title order={isMobile ? 4 : 3} c={tema.get().utama} ta={"center"} lineClamp={2}>{v.name}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10} mih={150}>
<Text fw={'bold'} fz={18}>KEGIATAN</Text>
<Text fw={'bolder'} ta={'center'} fz={70}>{v.jumlah}</Text>
<Box pt={10} mih={isMobile ? 100 : 150}>
<Text fw={'bold'} fz={isMobile ? 15 : 18}>KEGIATAN</Text>
<Text fw={'bolder'} ta={'center'} fz={isMobile ? 50 : 70}>{v.jumlah}</Text>
</Box>
</Card>
</Box>

17
src/module/home/ui/list_project.tsx
View File

@@ -2,7 +2,7 @@
import { TEMA, WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Title, Text, Progress, Stack, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
@@ -41,6 +41,8 @@ export default function ListProjects() {
useShallowEffect(() => {
fetchData();
}, []);
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<>
@@ -60,22 +62,25 @@ export default function ListProjects() {
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{isData.map((v) =>
<Carousel.Slide key={v.id}>
<Box w={{ base: 300, md: 400 }}>
<Box w={{
base: isMobile ? 230 : 300,
md: 400
}}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
<Card.Section>
<Box h={120} bg={tema.get().utama}>
<Box h={isMobile ? 100 : 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>
<Title order={isMobile ? 4 : 3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
</Flex>
</Box>
</Card.Section>
<Stack h={150} align="stretch" justify="center">
<Stack h={isMobile ? 100 : 150} align="stretch" justify="center">
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
<Progress.Section value={v.progress} color="yellow" striped >
<Progress.Label>{v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text c={tema.get().utama}>{v.createdAt}</Text>
<Text c={tema.get().utama} fz={isMobile ? 14 : 16}>{v.createdAt}</Text>
</Stack>
</Card>
</Box>

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

@@ -74,7 +74,7 @@ export default function ProgressDetailTask() {
aria-label="Gradient action icon"
radius={100}
// gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
bg={tema.get().bgFiturDivisi}
bg={tema.get().bgFiturDivision}
>
<HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
@@ -87,7 +87,7 @@ export default function ProgressDetailTask() {
border: `1px solid ${"#BDBDBD"}`,
}}
w={"100%"}
color={tema.get().bgFiturDivisi}
color={tema.get().bgFiturDivision}
radius="md"
size={isMobile ? "lg" : "xl"}
value={valProgress}

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

@@ -117,12 +117,7 @@ export default function ListDivisionTask() {
size={50}
aria-label="Gradient action icon"
radius={100}
// gradient={{
// from: '#DFDA7C',
// to: '#F2AF46',
// deg: 174
// }}
bg={tema.get().bgFiturDivisi}
bg={tema.get().bgFiturDivision}
>
<HiMiniPresentationChartBar size={25} color={tema.get().utama} />
</ActionIcon>

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

@@ -67,8 +67,8 @@ export default function TabsDivisionTask() {
key={index}
bg={
status == item.id
? tema.get().bgFiturDivisi
: (status == null && item.id == "0") ? tema.get().bgFiturDivisi : "transparent"
? tema.get().bgFiturDivision
: (status == null && item.id == "0") ? tema.get().bgFiturDivision : "transparent"
}
leftSection={item.icon}
>

2
src/module/user/member/ui/drawer_detail_member.tsx
View File

@@ -28,7 +28,7 @@ export default function DrawerDetailMember({
try {
if (val) {
const res = await funEditStatusMember(id, {
isActive: true,
isActive: status ? true : false,
});
if (res.success) {
toast.success(res.message);

2
src/module/user/member/ui/drawer_list_member.tsx
View File

@@ -17,7 +17,7 @@ export default function DrawerListMember() {
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
cols={{ base: 2, sm: 3, lg: 3 }}
>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{

2
src/module/user/member/ui/edit_member.tsx
View File

@@ -173,7 +173,7 @@ export default function EditMember({ id }: { id: string }) {
{loading ?
<Skeleton height={150} width={150} radius={"100"} />
:
<Indicator offset={20} withBorder inline color={tema.get().bgIcon} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
<Indicator offset={20} withBorder inline color={tema.get().bgFiturHome} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
<Avatar
size="150"
radius={"100"}

41
src/module/user/profile/ui/edit_profile.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, Flex, Indicator, Modal, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core";
import toast from "react-hot-toast";
import LayoutModal from "@/module/_global/layout/layout_modal";
@@ -11,6 +11,7 @@ import { FaCamera, FaShare } from "react-icons/fa6";
import { Dropzone } from "@mantine/dropzone";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useHookstate } from "@hookstate/core";
export default function EditProfile() {
const [isValModal, setValModal] = useState(false)
@@ -20,6 +21,7 @@ export default function EditProfile() {
const [imgForm, setImgForm] = useState<any>()
const router = useRouter()
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
nik: false,
@@ -90,6 +92,7 @@ export default function EditProfile() {
gap="xs"
pt={30}
px={20}
pb={100}
>
<Dropzone
openRef={openRef}
@@ -112,7 +115,7 @@ export default function EditProfile() {
{loading ?
<Skeleton height={150} width={150} radius={"100"} />
:
<Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
<Indicator offset={20} withBorder inline color={tema.get().bgFiturHome} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
<Avatar
size="150"
radius={"100"}
@@ -134,9 +137,9 @@ export default function EditProfile() {
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
@@ -156,9 +159,9 @@ export default function EditProfile() {
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
@@ -177,9 +180,9 @@ export default function EditProfile() {
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
@@ -199,9 +202,9 @@ export default function EditProfile() {
size="md" type="number" radius={30} placeholder="8xx xxxx xxxx" withAsterisk label="Nomor Telepon" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
leftSection={<Text>+62</Text>}
@@ -221,9 +224,9 @@ export default function EditProfile() {
placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={
@@ -256,14 +259,14 @@ export default function EditProfile() {
<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="md"
radius={30}
fullWidth