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-23 15:28:30 +08:00
parent f27a00ae70
commit 0db13c9e5e
17 changed files with 187 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/module/_global/components/skeleton_list.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { Box, Divider, Grid, Skeleton } from '@mantine/core';
import React from 'react';
export default function SkeletonList() {
return (
<div>
<Box>
<Grid p={10} align="center">
<Grid.Col span={2}>
<Skeleton w={50} h={50} radius={100} />
</Grid.Col>
<Grid.Col span={9}>
<Skeleton w={"80%"} h={20} />
</Grid.Col>
</Grid>
</Box>
<Divider my={2} />
</div >
);
}

22
src/module/_global/components/skeleton_user.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { Box, Divider, Grid, Skeleton } from '@mantine/core';
import React from 'react';
export default function SkeletonUser() {
return (
<div>
<Box>
<Grid p={10} align="center">
<Grid.Col span={2}>
<Skeleton w={50} h={50} radius={100} />
</Grid.Col>
<Grid.Col span={9}>
<Skeleton w={"50%"} h={20} />
<Skeleton mt={5} w={"30%"} h={10} />
</Grid.Col>
</Grid>
</Box>
<Divider my={10} />
</div>
);
}

4
src/module/_global/index.ts
View File

@@ -25,6 +25,8 @@ import ViewFilter from "./view/view_filter";
import mtqq_client from "./bin/mqtt_client"
import NotificationCustome from "./components/notification_custome";
import { ScrollProvider } from "./components/scroll_provider";
import SkeletonUser from "./components/skeleton_user";
import SkeletonList from "./components/skeleton_list";
export { WARNA };
export { LayoutLogin };
@@ -58,3 +60,5 @@ export { ReloadButtonTop }
export { NotificationCustome }
export { ScrollProvider }
export { currentScroll }
export { SkeletonUser }
export { SkeletonList }

17
src/module/announcement/ui/list_announcement.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { currentScroll, globalNotifPage, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
import { currentScroll, globalNotifPage, SkeletonSingle, SkeletonUser, TEMA, WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Stack, Text, TextInput } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { TfiAnnouncement } from "react-icons/tfi";
@@ -63,13 +63,6 @@ export default function ListAnnouncement() {
}, [isPage])
// useShallowEffect(() => {
// if (load.get().category == "announcement") {
// console.log('masuk sinii', load.get().load)
// fetchData()
// }
// }, [load.get().load])
useEffect(() => {
const handleScroll = async () => {
@@ -111,8 +104,8 @@ export default function ListAnnouncement() {
? Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
<Box key={i} mt={10}>
<SkeletonUser />
</Box>
))
: (isData.length === 0) ?
@@ -135,7 +128,7 @@ export default function ListAnnouncement() {
<Grid.Col span={10}>
<Grid onClick={() => {
router.push(`/announcement/${v.id}`)
}} mb={10}>
}}>
<Grid.Col span={{
base: 7,
xl: 8
@@ -158,7 +151,7 @@ export default function ListAnnouncement() {
</Grid.Col>
</Grid>
</Box>
<Divider my={15} />
<Divider my={20} />
</Box>
)
})}

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

@@ -176,7 +176,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{selectedFiles.map((v: any, i: any) => {
return (
<Carousel.Slide key={i}>

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

@@ -183,7 +183,7 @@ export default function CreateUserDetailCalender() {
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{selectedFiles.map((v: any, i: any) => {
return (
<Carousel.Slide key={i}>

2
src/module/calender/ui/update_list_users.tsx
View File

@@ -170,7 +170,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{selectedFiles.map((v: any, i: any) => {
return (
<Carousel.Slide key={i}>

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

@@ -148,7 +148,7 @@ export default function CreateAnggotaDivision() {
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{selectedFiles.map((v: any, i: any) => {
return (
<Carousel.Slide key={i}>

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

@@ -134,7 +134,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{selectedFiles.map((v: any, i: any) => {
return (
<Carousel.Slide key={i}>

2
src/module/project/ui/add_member_detail_project.tsx
View File

@@ -176,7 +176,7 @@ export default function AddMemberDetailProject() {
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{selectedFiles.map((v: any, i: any) => {
return (
<Carousel.Slide key={i}>

6
src/module/project/ui/create_date_end_task.tsx
View File

@@ -58,7 +58,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
} title={"Tanggal Tugas"} menu />
} title={"Tanggal dan Tugas"} menu />
<Box p={20}>
<Group
justify="center"
@@ -107,7 +107,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
placeholder="Input Judul Tahapan"
label="Judul Tahapan"
required
size="md"
@@ -119,7 +119,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
onBlur={() => setTouched({ ...touched, title: true })}
error={
touched.title && (
title == "" ? "Judul Tidak Boleh Kosong" : null
title == "" ? "Judul Tahapan Tidak Boleh Kosong" : null
)
}
/>

17
src/module/project/ui/create_project.tsx
View File

@@ -138,15 +138,20 @@ export default function CreateProject() {
<Box>
<LayoutNavbarNew back="/project" title="tambah Kegiatan" menu />
<Box p={20}>
<Stack>
<Box>
{
(roleLogin.get() == "supadmin") && (
<Select
placeholder="Grup"
label="Grup"
size="md"
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
required
radius={40}
data={dataGroup?.map((pro: any) => ({
value: String(pro.id),
label: pro.name
@@ -174,6 +179,7 @@ export default function CreateProject() {
borderRadius: 10,
},
}}
mt={10}
required withAsterisk
placeholder="Nama Kegiatan"
size="md"
@@ -189,7 +195,7 @@ export default function CreateProject() {
)
}
/>
<Box onClick={() => { setOpenTugas(true) }}>
<Box onClick={() => { setOpenTugas(true) }} mt={15}>
<Group
justify="space-between"
p={10}
@@ -213,11 +219,12 @@ export default function CreateProject() {
// setOpenDrawer(true)
openRef.current?.()
}
mt={15}
>
<Text>Upload File</Text>
<IoIosArrowDropright size={25} />
</Group>
<Box onClick={() => { onToChooseAnggota() }}>
<Box onClick={() => { onToChooseAnggota() }} mt={15}>
<Group
justify="space-between"
p={10}
@@ -230,7 +237,7 @@ export default function CreateProject() {
<IoIosArrowDropright size={25} />
</Group>
</Box>
</Stack>
</Box>
<Box pb={100}>
{

37
src/module/project/ui/create_users_project.tsx
View File

@@ -1,8 +1,8 @@
"use client"
import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, SkeletonUser, 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';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
@@ -24,6 +24,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
const [openTugas, setOpenTugas] = useState(false)
const [onClickSearch, setOnClickSearch] = useState(false)
const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -136,7 +137,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{selectedFiles.map((v: any, i: any) => {
return (
<Carousel.Slide key={i}>
@@ -175,35 +176,43 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
<SkeletonList />
</Box>
))
:
dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box mb={15} key={index} onClick={() => handleFileClick(index)}>
<Box mb={10} key={index} onClick={() => handleFileClick(index)}>
<Grid align='center'>
<Grid.Col span={{
base: 3,
xl: 2
}}>
<Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1,
}}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={{
base: 9,
xl: 10
}}>
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text>
<Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
<Divider my={10} />
</Box>
</Box>
);

161
src/module/project/ui/list_project.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { currentScroll, globalRole, TEMA, WARNA } from '@/module/_global';
import { currentScroll, globalRole, SkeletonList, SkeletonUser, TEMA, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
import { useRouter, useSearchParams } from 'next/navigation';
import React, { useEffect, useState } from 'react';
@@ -123,86 +123,91 @@ export default function ListProject() {
</Grid.Col>
</Grid>
<Box pt={20}>
{roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>}
{loading ?
<Box>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
:
<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={tema.get().utama}>{totalData}</Text>
</Flex>
</Box>
}
{roleLogin.get() == 'supadmin' && <Text mb={5}>Filter by: {nameGroup}</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={tema.get().utama}>{totalData}</Text>
</Flex>
</Box>
{isList ? (
<Box pt={20}>
{isData.map((v, i) => {
return (
<Box key={i}>
<Grid align='center' onClick={() => router.push(`/project/${v.id}`)}>
<Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1
}}>
<Group >
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
// gradient={{
// from: '#DFDA7C',
// to: '#F2AF46',
// deg: 174
// }}
bg={tema.get().bgFiturHome}
>
<HiMiniPresentationChartBar size={25} color={tema.get().utama} />
</ActionIcon>
</Center>
</Group>
</Grid.Col>
<Grid.Col span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Group justify='space-between' align='center'>
<Box>
<Box w={{
base: isMobile ? 200 : 230,
xl: 430
}}>
<Text truncate="end" pl={paddingLift ? 30 : 20}>
{v.title}
</Text>
</Box>
</Box>
<RiCircleFill size={12} color={
v.status === 0 ? '#1372C4' :
v.status === 1 ? '#C5771A' :
v.status === 2 ? '#0B6025' :
v.status === 3 ? '#BB1F1F' :
""
} />
</Group>
</Grid.Col>
</Grid>
<Divider my="sm" />
{loading ?
Array(3)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonList/>
</Box>
))
:
_.isEmpty(isData)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Kegiatan</Text>
</Box>
);
})}
:
isData.map((v, i) => {
return (
<Box key={i}>
<Grid align='center' onClick={() => router.push(`/project/${v.id}`)}>
<Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1
}}>
<Group >
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
bg={tema.get().bgFiturHome}
>
<HiMiniPresentationChartBar size={25} color={tema.get().utama} />
</ActionIcon>
</Center>
</Group>
</Grid.Col>
<Grid.Col span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Group justify='space-between' align='center'>
<Box>
<Box w={{
base: isMobile ? 200 : 230,
xl: 430
}}>
<Text truncate="end" pl={paddingLift ? 30 : 20}>
{v.title}
</Text>
</Box>
</Box>
<RiCircleFill size={12} color={
v.status === 0 ? '#1372C4' :
v.status === 1 ? '#C5771A' :
v.status === 2 ? '#0B6025' :
v.status === 3 ? '#BB1F1F' :
""
} />
</Group>
</Grid.Col>
</Grid>
<Divider my="sm" />
</Box>
);
})
}
</Box>
) : (
<Box pt={20}>

2
src/module/task/ui/add_member_detail_task.tsx
View File

@@ -211,7 +211,7 @@ export default function AddMemberDetailTask() {
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{selectedFiles.map((v: any, i: any) => {
return (
<Carousel.Slide key={i}>

2
src/module/task/ui/create_users_project.tsx
View File

@@ -192,7 +192,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{selectedFiles.map((v: any, i: any) => {
return (
<Carousel.Slide key={i}>

34
src/module/user/member/ui/tab_list_member.tsx
View File

@@ -1,4 +1,4 @@
import { currentScroll, globalRole, SkeletonSingle, TEMA } from "@/module/_global"
import { currentScroll, globalRole, SkeletonSingle, SkeletonUser, TEMA } from "@/module/_global"
import { Box, Text, TextInput, Divider, Avatar, Grid, Group, ActionIcon, Skeleton } from "@mantine/core"
import { useShallowEffect } from "@mantine/hooks"
import { useRouter, useSearchParams } from "next/navigation"
@@ -100,35 +100,13 @@ export default function TabListMember() {
/>
{roleLogin.get() == 'supadmin' && <Text mt={10}>Filter by: {nameGroup}</Text>}
{loading
? Array(6)
?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i} mb={20}>
<Group
align="center"
style={{
border: `1px solid ${tema.get().bgTotalKegiatan}`,
padding: 10,
borderRadius: 10,
cursor: "pointer",
}}
>
<Box>
<ActionIcon
variant="light"
bg={tema.get().bgTotalKegiatan}
size={50}
radius={100}
aria-label="icon"
>
<Skeleton height={25} width={25} />
</ActionIcon>
</Box>
<Box>
<Skeleton height={20} width={100} />
</Box>
</Group>
</Box>
<Box key={i} mb={10}>
<SkeletonUser/>
</Box>
))
:
<Box>