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

Merge pull request #143 from bipproduction/lukman/23-agustus-2024

Browse Source 
style: update skelaton
This commit is contained in:
Amalia
2024-08-23 14:15:02 +08:00
committed by GitHub
parent f6bebedfe5 f1121afee6
commit d4f60ef016
16 changed files with 756 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/module/_global/components/skeleton_detail_list_tugas_task.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { Box, Center, Grid, Group, SimpleGrid, Skeleton } from '@mantine/core';
import React from 'react';
export default function SkeletonDetailListTugasTask() {
return (
<Grid>
<Grid.Col span={"auto"}>
<Center>
<Skeleton width={30} height={30} radius={"md"} />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Box
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10,
}}
>
<Group>
<Skeleton width={25} height={25} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
</Group>
</Box>
<Box>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Group
bg={"white"}
mt={3}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
</Group>
</Box>
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Group
bg={"white"}
mt={3}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
</Group>
</Box>
</SimpleGrid>
</Box>
</Grid.Col>
</Grid>
);
}

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

@@ -2,6 +2,7 @@ import prisma from "./bin/prisma";
import { pwd_key_config } from "./bin/val_global";
import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment";
import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member";
import SkeletonDetailListTugasTask from "./components/skeleton_detail_list_tugas_task";
import SkeletonDetailProfile from "./components/skeleton_detail_profile";
import SkeletonSingle from "./components/skeleton_single";
import { funUploadFile } from "./fun/upload-file";
@@ -28,4 +29,5 @@ export { SkeletonSingle }
export { SkeletonDetailDiscussionComment }
export { SkeletonDetailDiscussionMember }
export { funUploadFile }
export { SkeletonDetailProfile }
export { SkeletonDetailProfile }
export {SkeletonDetailListTugasTask}

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

@@ -1,5 +1,5 @@
"use client"
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput } from "@mantine/core";
import { SkeletonDetailDiscussionComment, SkeletonDetailDiscussionMember, SkeletonSingle, WARNA } from "@/module/_global";
import { GrChatOption } from "react-icons/gr";
import { LuSendHorizonal } from "react-icons/lu";
@@ -17,7 +17,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
const [isData, setData] = useState<IDetailDiscussion>()
const [isComent, setIsComent] = useState("")
const param = useParams<{ id: string, detail: string }>()
const [isLoad, setIsLoad] = useState(false)
const [isLoad, setIsLoad] = useState(true)
const getData = async () => {
try {
@@ -67,8 +67,26 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
Array(1)
.fill(null)
.map((_, i) => (
<Box key={i} p={10}>
<SkeletonDetailDiscussionMember/>
<Box key={i}>
<Box>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Skeleton width={60} height={60} radius={100} />
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
</Box>
</Group>
<Skeleton width={"50%"} height={20} radius={"md"} />
</Flex>
<Box mt={10}>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
</Box>
</Box>
)) :
<Box>
@@ -104,11 +122,35 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
}
<Box p={10}>
{isLoad ?
Array(6)
Array(2)
.fill(0)
.map((_, i) => (
<Box key={i} p={10}>
<SkeletonDetailDiscussionComment />
<Box>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Skeleton width={40} height={40} radius={100} />
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
</Box>
</Group>
<Skeleton width={"50%"} height={20} radius={"md"} />
</Flex>
<Box mt={10}>
<Skeleton width={"100%"} height={50} radius={"md"} />
</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Skeleton width={"30%"} height={20} radius={"md"} />
</Group>
</Box>
<Box mt={20}>
<Skeleton width={"100%"} height={1} radius={"md"} />
</Box>
</Box>
)) :
isData?.DivisionDisscussionComment.map((v, i) => {
@@ -137,14 +179,20 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
})
}
</Box>
<Box h={60} pos={"fixed"} bottom={0} w={{ base: "90%", md: "35.5%" }} style={{
{isLoad ?
<Skeleton width={"100%"} height={50} radius={100} />
:
<Box h={60} pos={"fixed"} bottom={20} w={{ base: "90%", md: "35.5%" }} style={{
zIndex: 999
}}>
<Group justify="flex-end">
<Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
</Group>
<Grid bg={"white"} style={{
border: '1px solid gray',
borderRadius: 40
}} justify="center" align="center">
<Grid.Col span={10}>
<Grid.Col span={10}>
<TextInput
styles={{
input: {
@@ -157,8 +205,10 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
placeholder="Kirim Komentar"
disabled={isData?.status === 2}
onChange={(e) => setIsComent(e.target.value)}
value={isComent}
/>
value={isComent}
maxLength={300}
/>
</Grid.Col>
<Grid.Col span={2}>
<Center>
@@ -171,6 +221,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
</Grid.Col>
</Grid>
</Box>
}
</Box>
</>
)

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

@@ -1,6 +1,6 @@
'use client'
import { WARNA } from "@/module/_global";
import { Avatar, Badge, Box, Divider, Flex, Group, Text, TextInput } from "@mantine/core";
import { Avatar, Badge, Box, Divider, Flex, Group, Skeleton, Text, TextInput } from "@mantine/core";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { GrChatOption } from "react-icons/gr";
@@ -13,13 +13,18 @@ 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 getData = async () => {
try {
setLoading(true)
const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery)
setData(response.data)
setLoading(false)
} catch (error) {
console.log(error)
} finally {
setLoading(false)
}
}
@@ -45,45 +50,83 @@ export default function ListDiscussion({ id }: { id: string }) {
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
{isData.map((v, i) => {
return (
<Box key={i} pl={10} pr={10}
onClick={() => {
router.push(`/division/${param.id}/discussion/${v.id}`)
}}
>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Avatar alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.user_name}
</Text>
<Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>
{loading ?
Array(3)
.fill(null)
.map((_, i) => (
<Box key={i}>
<Box pl={10} pr={10}>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Skeleton width={40} height={40} radius={"md"} />
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
</Box>
</Group>
<Skeleton width={"50%"} height={20} radius={"md"} />
</Flex>
<Box mt={10}>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
</Group>
<Text c={"grey"} fz={13}>{v.createdAt}</Text>
</Flex>
<Box mt={10}>{v.desc}</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>Diskusikan</Text>
</Group >
<Group gap={5} align="center">
<Text fz={13}>{v.total_komentar} Komentar</Text>
</Group>
</Group>
<Box mt={20}>
<Divider size={"xs"} />
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Skeleton width={"30%"} height={20} radius={"md"} />
<Skeleton width={"30%"} height={20} radius={"md"} />
</Group>
<Box mt={20}>
<Skeleton width={"100%"} height={1} radius={"md"} />
</Box>
</Box>
</Box>
</Box>
);
})}
))
:
isData.map((v, i) => {
return (
<Box key={i} pl={10} pr={10}
onClick={() => {
router.push(`/division/${param.id}/discussion/${v.id}`)
}}
>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Avatar alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.user_name}
</Text>
<Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Group>
<Text c={"grey"} fz={13}>{v.createdAt}</Text>
</Flex>
<Box mt={10}>{v.desc}</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>Diskusikan</Text>
</Group >
<Group gap={5} align="center">
<Text fz={13}>{v.total_komentar} Komentar</Text>
</Group>
</Group>
<Box mt={20}>
{isData.length <= 1 ? "" :
<Divider size={"xs"} />
}
</Box>
</Box>
);
})
}
</Box>
)
}

38
src/module/division_new/ui/information_division.tsx
View File

@@ -21,7 +21,7 @@ export default function InformationDivision() {
const [name, setName] = useState('')
const [deskripsi, setDeskripsi] = useState('')
const [member, setMember] = useState<IDataMemberDivision[]>([])
const [loading, setLoading] = useState(false)
const [loading, setLoading] = useState(true)
const [valChooseMember, setChooseMember] = useState("")
const [valChooseMemberStatus, setChooseMemberStatus] = useState<boolean>(false)
const [valChooseMemberName, setChooseMemberName] = useState("")
@@ -137,12 +137,36 @@ export default function InformationDivision() {
<Text>{member.length} Anggota</Text>
</Box>
<Box mt={15}>
<Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
<Avatar size="lg">
<AiOutlineUserAdd size={30} color={WARNA.biruTua} />
</Avatar>
<Text>Tambah Anggota</Text>
</Group>
{loading ?
<Group
align="center"
style={{
padding: 10,
}}
>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={50}
radius={100}
aria-label="icon"
>
<Skeleton height={25} width={25} />
</ActionIcon>
</Box>
<Box>
<Skeleton height={20} width={100} />
</Box>
</Group>
:
<Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
<Avatar size="lg">
<AiOutlineUserAdd size={30} color={WARNA.biruTua} />
</Avatar>
<Text>Tambah Anggota</Text>
</Group>
}
</Box>
<Box pt={10}>
<Box mb={10}>

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

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } 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';
@@ -95,72 +95,98 @@ export default function ListDivision() {
</Flex>
</Grid.Col>
</Grid>
<Box pt={20}>
<Box pt={20}>
{loading ?
<>
<Skeleton width={"100%"} height={100} radius={"md"} />
</>
:
<Box bg={WARNA.biruTua} 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>
</Flex>
</Box>
</Box>
}
</Box>
{isList ? (
<Box pt={20}>
{data?.map((v: any, i: any) => {
return (
<Box key={i}>
<Group justify="space-between" mb={10} onClick={() => router.push(`/division/${v.id}`)}>
<Group>
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
gradient={{
from: '#DFDA7C',
to: '#F2AF46',
deg: 174
}}
>
<HiMiniUserGroup size={25} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Text>{v.name}</Text>
{loading
? Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
))
:
data?.map((v: any, i: any) => {
return (
<Box key={i}>
<Group justify="space-between" mb={10} onClick={() => router.push(`/division/${v.id}`)}>
<Group>
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
gradient={{
from: '#DFDA7C',
to: '#F2AF46',
deg: 174
}}
>
<HiMiniUserGroup size={25} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Text>{v.name}</Text>
</Group>
</Group>
</Group>
<Divider my="sm" />
</Box>
);
})}
<Divider my="sm" />
</Box>
);
})
}
</Box>
) : (
<Box pt={20}>
{data?.map((v: any, i: any) => {
return (
<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}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.name}</Title>
</Flex>
<Box pt={20}>
{loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i} pb={20}>
<Skeleton width={"100%"} height={200} radius={"md"} />
</Box>
))
:
data?.map((v: any, i: any) => {
return (
<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}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.name}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10}>
<Text lineClamp={2}>{v.desc}</Text>
<Group align='center' pt={10} justify='flex-end'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.jumlah_member - 1}</Avatar>
</Avatar.Group>
</Group>
</Box>
</Card.Section>
<Box pt={10}>
<Text lineClamp={2}>{v.desc}</Text>
<Group align='center' pt={10} justify='flex-end'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.jumlah_member - 1}</Avatar>
</Avatar.Group>
</Group>
</Box>
</Card>
</Box>
);
})}
</Card>
</Box>
);
})
}
</Box>
)}
</Box>

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

@@ -1,7 +1,7 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Button, Center, Input, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { Avatar, Box, Button, Center, Input, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
@@ -17,6 +17,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
const member = useHookstate(globalMemberDivision)
const [selectedFiles, setSelectedFiles] = useState<any>([]);
const [dataMember, setDataMember] = useState<TypeUser>([])
const [loading, setLoading] = useState(true)
const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -28,6 +29,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
async function loadData(search: string) {
setLoading(true)
const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search);
const user = await funGetUserByCookies();
@@ -41,7 +43,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
} else {
toast.error(res.message)
}
setLoading(false)
}
@@ -77,35 +79,51 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
onChange={(e) => loadData(e.target.value)}
/>
<Box pt={10}>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
spacing={{ base: 20, sm: "xl" }}
verticalSpacing={{ base: "md", sm: "xl" }}
>
{dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box key={index} mb={10}>
<Box
bg={isSelected ? WARNA.bgHijauMuda : "white"}
style={{
border: `1px solid ${WARNA.biruTua}`,
borderRadius: 20,
}}
py={10}
onClick={() => handleFileClick(index)}
>
<Center>
<Avatar src={"https://i.pravatar.cc/1000?img=37"} alt="it's me" size="xl" />
</Center>
<Text mt={20} ta="center">
{v.name}
</Text>
{loading ?
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
spacing={{ base: 20, sm: "xl" }}
verticalSpacing={{ base: "md", sm: "xl" }}
>
{Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
</Box>
);
})}
</SimpleGrid>
))}
</SimpleGrid>
:
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
spacing={{ base: 20, sm: "xl" }}
verticalSpacing={{ base: "md", sm: "xl" }}
>
{dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box key={index} mb={10}>
<Box
bg={isSelected ? WARNA.bgHijauMuda : "white"}
style={{
border: `1px solid ${WARNA.biruTua}`,
borderRadius: 20,
}}
py={10}
onClick={() => handleFileClick(index)}
>
<Center>
<Avatar src={"https://i.pravatar.cc/1000?img=37"} alt="it's me" size="xl" />
</Center>
<Text mt={20} ta="center">
{v.name}
</Text>
</Box>
</Box>
);
})}
</SimpleGrid>
}
</Box>
</Stack>
<Box mt="xl">

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

@@ -3,6 +3,7 @@ import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import {
ActionIcon,
Anchor,
Avatar,
Box,
@@ -11,6 +12,7 @@ import {
Divider,
Flex,
Group,
Skeleton,
Text,
TextInput,
} from "@mantine/core";
@@ -28,10 +30,12 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
const [isData, setData] = useState<IDataMemberDivision[]>([])
const member = useHookstate(globalMemberTask)
const [selectAll, setSelectAll] = useState(false)
const [loading, setLoading] = useState(true)
async function getData() {
try {
setLoading(true)
const response = await funGetDivisionById(param.id)
if (response.success) {
setData(response.data.member)
@@ -41,9 +45,12 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
} else {
toast.error(response.message)
}
setLoading(false)
} catch (error) {
console.log(error)
toast.error("Gagal mendapatkan anggota, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -110,43 +117,72 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/> */}
<Group justify="space-between" mt={20} onClick={handleSelectAll}>
<Text c={WARNA.biruTua} fw={"bold"}>
Pilih Semua Anggota
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
{loading ?
<Skeleton height={20} width={"100%"} mt={20} />
:
<Group justify="space-between" mt={20} onClick={handleSelectAll}>
<Text c={WARNA.biruTua} fw={"bold"}>
Pilih Semua Anggota
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
}
<Box mt={15}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}>
{loading ?
Array(3)
.fill(null)
.map((_, i) => (
<Box key={i} mb={15}>
<Group>
<Avatar src={"v.image"} alt="it's me" size="lg" />
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{v.name}
</Text>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={"lg"}
radius={100}
aria-label="icon"
>
<Skeleton height={30} width={30} />
</ActionIcon>
</Box>
<Box>
<Skeleton height={20} width={"80%"} />
</Box>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
);
})}
</Box>
))
:
isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Avatar src={"v.image"} alt="it's me" size="lg" />
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{v.name}
</Text>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
);
})
}
</Box>
<Box mt={"xl"}>
<Button
@@ -155,7 +191,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
size="lg"
radius={30}
fullWidth
onClick={() => {onSubmit()}}
onClick={() => { onSubmit() }}
>
Simpan
</Button>

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

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, WARNA } from "@/module/_global";
import { LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
@@ -79,7 +79,15 @@ export default function ListAnggotaDetailTask() {
py={10}
>
{
loading ? <Text>loading</Text> :
loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
))
:
isData.length === 0 ? <Text>Tidak ada anggota</Text> :
isData.map((v, i) => {
return (

18
src/module/task/ui/detail_list_file_task.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { WARNA } from "@/module/_global";
import { Box, Group, Text } from "@mantine/core";
import { SkeletonDetailListTugasTask, WARNA } from "@/module/_global";
import { Box, Group, Skeleton, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
@@ -22,7 +22,6 @@ export default function ListFileDetailTask() {
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan file tugas divisi, coba lagi nanti");
@@ -45,7 +44,18 @@ export default function ListFileDetailTask() {
}}>
{
loading ? <Text>loading</Text> :
loading ?
Array(1)
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<Group>
<Skeleton width={30} height={30} radius={"md"} />
<Skeleton width={"50%"} height={30} radius={"md"} />
</Group>
</Box>
))
:
isData.length === 0 ? <Text>Tidak ada file</Text> :
isData.map((item, index) => {
return (

13
src/module/task/ui/detail_list_tugas_task.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, WARNA } from "@/module/_global"
import { LayoutDrawer, SkeletonDetailListTugasTask, WARNA } 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"
@@ -99,7 +99,11 @@ export default function ListTugasDetailTask() {
}}
>
{
loading ? <Text>loading</Text> :
loading ?
<>
<SkeletonDetailListTugasTask />
</>
:
isData.length === 0 ? <Text>Tidak ada tugas</Text> :
isData.map((item, index) => {
return (
@@ -163,7 +167,10 @@ export default function ListTugasDetailTask() {
</Box>
</Grid.Col>
</Grid>
<Divider my={"lg"} />
{isData.length >= 1
? "" :
<Divider my={"lg"} />
}
</Box>
)
})

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

@@ -1,6 +1,6 @@
'use client'
import { WARNA } from "@/module/_global";
import { Box, Grid, ActionIcon, Progress, Text } from "@mantine/core";
import { Box, Grid, ActionIcon, Progress, Text, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import toast from "react-hot-toast";
@@ -15,9 +15,11 @@ export default function ProgressDetailTask() {
const [valLastUpdate, setValLastUpdate] = useState('')
const param = useParams<{ id: string, detail: string }>()
const refresh = useHookstate(globalRefreshTask)
const [loading, setLoading] = useState(true)
async function getOneData() {
try {
setLoading(true)
const res = await funGetTaskDivisionById(param.detail, 'progress');
if (res.success) {
setValProgress(res.data.progress);
@@ -25,10 +27,12 @@ export default function ProgressDetailTask() {
} else {
toast.error(res.message);
}
setLoading(false)
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan progress tugas divisi, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -39,7 +43,7 @@ export default function ProgressDetailTask() {
}
}
useEffect(() => {
onRefresh()
@@ -51,6 +55,9 @@ export default function ProgressDetailTask() {
return (
<Box mt={10}>
{loading ?
<Skeleton width={"100%"} height={100} radius={"md"} />
:
<Box
p={20}
bg={"#DCEED8"}
@@ -83,11 +90,11 @@ export default function ProgressDetailTask() {
size="xl"
value={valProgress}
/>
{/* <Text c={"dimmed"}>Update terakhir : {valLastUpdate}</Text> */}
</Box>
</Grid.Col>
</Grid>
</Box>
}
</Box>
)
}

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

@@ -1,5 +1,5 @@
import { WARNA } from "@/module/_global";
import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Text, TextInput, Title } from "@mantine/core";
import { ActionIcon, Avatar, Badge, 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";
import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2";
@@ -8,6 +8,7 @@ import { IDataTask } from "../lib/type_task";
import { funGetAllTask } from "../lib/api_task";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
export default function ListDivisionTask() {
const [isList, setIsList] = useState(false)
@@ -79,12 +80,18 @@ export default function ListDivisionTask() {
</Grid.Col>
</Grid>
<Box pt={20}>
{loading ?
<Box>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
:
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
</Flex>
</Box>
}
{isList ? (
<Box pt={20}>
{isData.map((v, i) => {
@@ -117,37 +124,53 @@ export default function ListDivisionTask() {
</Box>
) : (
<Box pt={20}>
{isData.map((v: any, i: any) => {
return (
<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}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.title}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10}>
<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 my={10}>{v.desc}</Text>
<Group align='center' pt={10} justify='space-between'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.member-1}</Avatar>
</Avatar.Group>
</Group>
</Box>
</Card>
{loading ?
Array(3)
.fill(null)
.map((_, i) => (
<Box key={i} mb={20}>
<Skeleton width={"100%"} height={200} radius={"md"} />
</Box>
))
:
_.isEmpty(isData)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Tugas</Text>
</Box>
);
})}
:
isData.map((v: any, i: any) => {
return (
<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}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.title}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10}>
<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 my={10}>{v.desc}</Text>
<Group align='center' pt={10} justify='space-between'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.member - 1}</Avatar>
</Avatar.Group>
</Group>
</Box>
</Card>
</Box>
);
})
}
</Box>
)}
</Box>

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

@@ -4,12 +4,14 @@ import { ActionIcon } from "@mantine/core";
import { useState } from "react";
import { HiMenu } from "react-icons/hi";
import DrawerDivisionTask from "./drawer_division_task";
import { useParams } from "next/navigation";
export default function NavbarDivisionTask() {
const [openDrawer, setOpenDrawer] = useState(false)
const param = useParams<{ id: string}>()
return (
<>
<LayoutNavbarNew back="" title="Divisi - Tugas"
<LayoutNavbarNew back={`/division/${param.id}`} title="Divisi - Tugas"
menu={
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />

144
src/module/user/member/ui/create_member.tsx
View File

@@ -10,6 +10,7 @@ import { HiUser } from "react-icons/hi2";
import { IDataPositionMember, IDataROleMember } from "../lib/type_member";
import { funGetAllPosition } from "@/module/position/lib/api_position";
import { funCreateMember, funGetRoleUser } from "../lib/api_member";
import _ from "lodash";
export default function CreateMember() {
const router = useRouter();
@@ -17,6 +18,16 @@ export default function CreateMember() {
const [listGroup, setListGorup] = useState<IDataGroup[]>([]);
const [listPosition, setListPosition] = useState<IDataPositionMember[]>([]);
const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([]);
const [touched, setTouched] = useState({
nik: false,
name: false,
phone: false,
email: false,
gender: false,
idGroup: false,
idPosition: false,
idUserRole: false
});
const [listData, setListData] = useState({
nik: "",
@@ -80,24 +91,29 @@ export default function CreateMember() {
async function onSubmit(val: boolean) {
try {
const res = await funCreateMember({
nik: listData.nik,
name: listData.name,
phone: listData.phone,
email: listData.email,
gender: listData.gender,
idGroup: listData.idGroup,
idPosition: listData.idPosition,
idUserRole: listData.idUserRole,
});
if (res.success) {
toast.success(res.message);
setModal(false);
router.push("/member?active=true");
} else {
toast.error(res.message);
if (_.isEmpty(listData)) {
return;
}
if (val) {
const res = await funCreateMember({
nik: listData.nik,
name: listData.name,
phone: listData.phone,
email: listData.email,
gender: listData.gender,
idGroup: listData.idGroup,
idPosition: listData.idPosition,
idUserRole: listData.idUserRole,
});
if (res.success) {
toast.success(res.message);
setModal(false);
router.push("/member?active=true");
} else {
toast.error(res.message);
}
}
setModal(false);
} catch (error) {
toast.error("Error");
} finally {
@@ -142,14 +158,20 @@ export default function CreateMember() {
data={
listGroup
? listGroup.map((data) => ({
value: data.id,
label: data.name,
}))
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) => {
changeGrup(val);
}}
onBlur={() => setTouched({ ...touched, idGroup: true })}
error={
touched.idGroup && (
listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
)
}
/>
<Select
placeholder="Pilih Jabatan"
@@ -169,9 +191,9 @@ export default function CreateMember() {
data={
listPosition
? listPosition.map((data) => ({
value: data.id,
label: data.name,
}))
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) =>
@@ -181,6 +203,12 @@ export default function CreateMember() {
})
}
value={listData.idPosition == "" ? null : listData.idPosition}
onBlur={() => setTouched({ ...touched, idPosition: true })}
error={
touched.idPosition && (
listData.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
)
}
/>
<Select
placeholder="Pilih Role"
@@ -200,9 +228,9 @@ export default function CreateMember() {
data={
listUserRole
? listUserRole.map((data) => ({
value: data.id,
label: data.name,
}))
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) =>
@@ -211,6 +239,12 @@ export default function CreateMember() {
idUserRole: val,
})
}
onBlur={() => setTouched({ ...touched, idUserRole: true })}
error={
touched.idUserRole && (
listData.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
)
}
/>
<TextInput
size="md"
@@ -227,11 +261,16 @@ export default function CreateMember() {
borderColor: WARNA.biruTua,
},
}}
onChange={(event: any) =>
setListData({
...listData,
nik: event.target.value,
})
onChange={(event: any) => {
setListData({ ...listData, nik: event.target.value });
setTouched({ ...touched, nik: true });
}}
onBlur={() => setTouched({ ...touched, nik: true })}
error={
touched.nik && (
listData.nik == "" ? "NIK Tidak Boleh Kosong" :
listData.nik.length < 16 ? "NIK Harus 16 Karakter" : null
)
}
/>
<TextInput
@@ -255,6 +294,12 @@ export default function CreateMember() {
name: event.target.value,
})
}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
listData.name == "" ? "Nama Tidak Boleh Kosong" : null
)
}
/>
<TextInput
size="md"
@@ -277,6 +322,13 @@ export default function CreateMember() {
email: event.target.value,
})
}
onBlur={() => setTouched({ ...touched, email: true })}
error={
touched.email && (
listData.email == "" ? "Email Tidak Boleh Kosong" :
!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(listData.email) ? "Email tidak valid" : null
)
}
/>
<TextInput
size="md"
@@ -299,6 +351,13 @@ export default function CreateMember() {
phone: event.target.value,
})
}
onBlur={() => setTouched({ ...touched, phone: true })}
error={
touched.phone && (
listData.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
listData.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
)
}
/>
<Select
placeholder="Pilih Gender"
@@ -325,6 +384,12 @@ export default function CreateMember() {
gender: val,
})
}
onBlur={() => setTouched({ ...touched, gender: true })}
error={
touched.gender && (
listData.gender == "" ? "Gender Tidak Boleh Kosong" : null
)
}
/>
</Stack>
<Box mt={30} mx={20} pb={20}>
@@ -334,7 +399,22 @@ export default function CreateMember() {
size="md"
radius={30}
fullWidth
onClick={() => setModal(true)}
onClick={() => {
if (
listData.nik !== "" &&
listData.name !== "" &&
listData.email !== "" &&
listData.phone !== "" &&
listData.gender !== "" &&
listData.idGroup !== "" &&
listData.idPosition !== "" &&
listData.idUserRole !== ""
) {
setModal(true);
} else {
toast.error("Mohon lengkapi semua form");
}
}}
>
Simpan
</Button>

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

@@ -11,6 +11,7 @@ import toast from "react-hot-toast";
import { HiUser } from "react-icons/hi2";
import { IDataPositionMember, IDataROleMember, IEditDataMember, IFormMember } from "../lib/type_member";
import { funEditMember, funGetOneMember, funGetRoleUser } from "../lib/api_member";
import _ from "lodash";
export default function EditMember({ id }: { id: string }) {
@@ -19,6 +20,16 @@ export default function EditMember({ id }: { id: string }) {
const [listGroup, setListGorup] = useState<IDataGroup[]>([])
const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([])
const [touched, setTouched] = useState({
nik: false,
name: false,
phone: false,
email: false,
gender: false,
idGroup: false,
idPosition: false,
idUserRole: false
});
const [data, setData] = useState<IEditDataMember>({
id: "",
nik: "",
@@ -95,21 +106,25 @@ export default function EditMember({ id }: { id: string }) {
async function onSubmit(val: boolean) {
try {
const res = await funEditMember(id, {
id: data.id,
nik: data.nik,
name: data.name,
phone: data.phone,
email: data.email,
gender: data.gender,
idGroup: data.idGroup,
idPosition: data.idPosition,
idUserRole: data.idUserRole
})
toast.success(res.message)
router.push(`/member?active=true`)
if (_.isEmpty(data)) {
return
}
if (val) {
const res = await funEditMember(id, {
id: data.id,
nik: data.nik,
name: data.name,
phone: data.phone,
email: data.email,
gender: data.gender,
idGroup: data.idGroup,
idPosition: data.idPosition,
idUserRole: data.idUserRole
})
toast.success(res.message)
router.push(`/member?active=true`)
}
} catch (error) {
toast.error('Error');
@@ -152,6 +167,12 @@ export default function EditMember({ id }: { id: string }) {
changeGrup(val)
}}
value={data?.idGroup}
onBlur={() => setTouched({ ...touched, idGroup: true })}
error={
touched.idGroup && (
data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
)
}
/>
<Select
placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
@@ -172,6 +193,12 @@ export default function EditMember({ id }: { id: string }) {
}
onChange={(val: any) => setData({ ...data, idPosition: val })}
value={(data?.idPosition == "") ? null : data.idPosition}
onBlur={() => setTouched({ ...touched, idPosition: true })}
error={
touched.idPosition && (
data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
)
}
/>
<Select
placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
@@ -192,6 +219,12 @@ export default function EditMember({ id }: { id: string }) {
}
onChange={(val: any) => setData({ ...data, idUserRole: val })}
value={data?.idUserRole}
onBlur={() => setTouched({ ...touched, idUserRole: true })}
error={
touched.idUserRole && (
data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
)
}
/>
<TextInput
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
@@ -204,6 +237,13 @@ export default function EditMember({ id }: { id: string }) {
}}
onChange={(e) => setData({ ...data, nik: e.target.value })}
value={data.nik}
onBlur={() => setTouched({ ...touched, nik: true })}
error={
touched.nik && (
data.nik == "" ? "NIK Tidak Boleh Kosong" :
data.nik.length < 16 ? "NIK Harus 16 Karakter" : null
)
}
/>
<TextInput
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
@@ -216,6 +256,12 @@ export default function EditMember({ id }: { id: string }) {
}}
onChange={(e) => setData({ ...data, name: e.target.value })}
value={data.name}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
data.name == "" ? "Nama Tidak Boleh Kosong" : null
)
}
/>
<TextInput
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
@@ -228,6 +274,13 @@ export default function EditMember({ id }: { id: string }) {
}}
onChange={(e) => setData({ ...data, email: e.target.value })}
value={data.email}
onBlur={() => setTouched({ ...touched, email: true })}
error={
touched.email && (
data.email == "" ? "Email Tidak Boleh Kosong" :
!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null
)
}
/>
<TextInput
size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
@@ -240,6 +293,13 @@ export default function EditMember({ id }: { id: string }) {
}}
onChange={(e) => setData({ ...data, phone: e.target.value })}
value={data.phone}
onBlur={() => setTouched({ ...touched, phone: true })}
error={
touched.phone && (
data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
data.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
)
}
/>
<Select
placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
@@ -264,19 +324,40 @@ export default function EditMember({ id }: { id: string }) {
}
onChange={(val: any) => setData({ ...data, gender: val })}
value={data.gender}
onBlur={() => setTouched({ ...touched, gender: true })}
error={
touched.gender && (
data.gender == "" ? "Gender Tidak Boleh Kosong" : null
)
}
/>
</Stack>
<Box mt={30} mx={20} pb={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
onClick={() => setModal(true)}
>
Simpan
</Button>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
onClick={() => {
if (
data.nik !== "" &&
data.name !== "" &&
data.email !== "" &&
data.phone !== "" &&
data.gender !== "" &&
data.idGroup !== "" &&
data.idPosition !== "" &&
data.idUserRole !== ""
) {
setModal(true);
} else {
toast.error("Mohon lengkapi semua form");
}
}}
>
Simpan
</Button>
</Box>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah data?"