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

Merge pull request #322 from bipproduction/join

Browse Source 
Join
This commit is contained in:
Amalia
2024-10-30 16:00:27 +08:00
committed by GitHub
parent a6ff2dc4fc ea6a69932f
commit 7eaef66a50
19 changed files with 548 additions and 514 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(application)/banner/page.tsx
View File

@@ -1,4 +1,3 @@
import { ListBanner, NavbarBanner } from "@/module/banner";
import { Box } from "@mantine/core";
@@ -7,7 +6,6 @@ export default function Page() {
<Box>
<NavbarBanner />
<ListBanner />
</Box>
);
}

3
src/app/api/home/route.ts
View File

@@ -185,9 +185,10 @@ export async function GET(request: Request) {
const cek = data.some((i: any) => i.status == dataStatus[index].status)
if (cek) {
const find = ((Number(data.find((i: any) => i.status == dataStatus[index].status)?._count) * 100) / data.reduce((n, { _count }) => n + _count, 0)).toFixed(2)
const fix = find.substr(-2, 2) == "00" ? find.substr(0, 2) : find
input = {
name: dataStatus[index].name,
value: find
value: fix
}
} else {
input = {

10
src/module/_global/layout/layout_icon_back.tsx
View File

@@ -1,11 +1,9 @@
'use client'
import { ActionIcon, Box } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
import { HiChevronLeft } from 'react-icons/hi2';
import { WARNA } from '../fun/WARNA';
import _ from 'lodash';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box } from '@mantine/core';
import _ from 'lodash';
import { useRouter } from 'next/navigation';
import { HiChevronLeft } from 'react-icons/hi2';
import { TEMA } from '../bin/val_global';
function LayoutIconBack({ back }: { back?: string }) {

9
src/module/_global/layout/layout_navbar_new.tsx
View File

@@ -1,11 +1,10 @@
'use client'
import { ActionIcon, Box, Grid, Group, Text, Title } from '@mantine/core';
import React from 'react';
import { WARNA } from '../fun/WARNA';
import LayoutIconBack from './layout_icon_back';
import _ from 'lodash';
import { useHookstate } from '@hookstate/core';
import { Box, Grid, Group, Title } from '@mantine/core';
import _ from 'lodash';
import React from 'react';
import { TEMA } from '../bin/val_global';
import LayoutIconBack from './layout_icon_back';
export const LayoutNavbarNew = ({ back, state, title, menu }: { back?: string, title: string, menu: React.ReactNode, state?: React.ReactNode }) => {
const tema = useHookstate(TEMA)

66
src/module/banner/ui/list_banner.tsx
View File

@@ -5,7 +5,7 @@ import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6';
@@ -25,6 +25,7 @@ function ListBanner() {
const [isData, setData] = useState<IDataBanner[]>([])
const [idData, setIdData] = useState('')
const [isPage, setPage] = useState(1)
const [loadingModal, setLoadingModal] = useState(false)
const fetchData = async (loading: boolean) => {
try {
@@ -57,6 +58,7 @@ function ListBanner() {
async function onDelete(id: string) {
try {
setLoadingModal(true)
const res = await funDeleteBanner(id);
if (res.success) {
toast.success(res.message)
@@ -70,8 +72,10 @@ function ListBanner() {
} catch (error) {
console.error(error);
toast.error("Gagal menghapus banner, coba lagi nanti");
} finally {
setLoadingModal(false)
setOpenModal(false)
}
}
@@ -100,34 +104,34 @@ function ListBanner() {
isData.map((v, i) => {
return (
<Box key={i} mb={20}>
<Paper radius={'md'} withBorder onClick={() => {
setIdData(v.id);
setIdDataStorage(v.image);
setExtension(v.extension);
setOpenDrawer(true)
}
}
style={{
width: '100%',
maxWidth: 550,
height: 85,
backgroundColor: 'transparent',
border: `1px solid ${tema.get().bgTotalKegiatan}`
<Paper radius={'md'} withBorder onClick={() => {
setIdData(v.id);
setIdDataStorage(v.image);
setExtension(v.extension);
setOpenDrawer(true)
}
}
style={{
width: '100%',
maxWidth: 550,
height: 85,
backgroundColor: 'transparent',
border: `1px solid ${tema.get().bgTotalKegiatan}`
}}>
<Group mt={"25"}>
<ActionIcon variant='transparent' w={"100"}>
<Image
radius={"xs"}
src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
alt=''
w={76}
h={38.9}
/>
</ActionIcon>
<Text c={"dark"} fz={"h4"}>{v.title}</Text>
</Group>
</Paper>
}}>
<Group mt={"25"}>
<ActionIcon variant='transparent' w={"100"}>
<Image
radius={"xs"}
src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
alt=''
w={76}
h={38.9}
/>
</ActionIcon>
<Text c={"dark"} fz={"h4"}>{v.title}</Text>
</Group>
</Paper>
</Box>
)
})
@@ -178,14 +182,16 @@ function ListBanner() {
</LayoutDrawer>
<LayoutModal
loading={loadingModal}
opened={isOpenModal}
onClose={() => setOpenModal(false)}
description='Apakah Anda yakin ingin menghapus banner?'
onYes={(val) => {
if (val) {
onDelete(idData)
} else {
setOpenModal(false)
}
setOpenModal(false)
}} />
<LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur="image" />

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

@@ -3,11 +3,11 @@ import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Flex, SimpleGrid, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaPencil, FaTrash } from 'react-icons/fa6';
import { IoColorPalette } from 'react-icons/io5';
import { funChangeTheme, funDeleteTheme, funGetThemeById } from '../lib/api_theme';
import { funChangeTheme, funDeleteTheme } from '../lib/api_theme';
import { globalRefreshTheme } from '../lib/val_theme';
export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id: string, idVillage: string, isUse: boolean }) {
@@ -16,9 +16,12 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
const [isModalDel, setModalDel] = useState(false)
const tema = useHookstate(TEMA)
const refresh = useHookstate(globalRefreshTheme)
const [loadingApply, setLoadingApply] = useState(false)
const [loadingDelete, setLoadingDelete] = useState(false)
async function onChangeTheme() {
try {
setLoadingApply(true)
const res = await funChangeTheme(id)
if (res.success) {
tema.set(res.data)
@@ -29,11 +32,15 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
} catch (error) {
console.error(error)
toast.error("Gagal mengubah tema, coba lagi nanti");
} finally {
setLoadingApply(false)
setModal(false)
}
}
async function onDelete() {
try {
setLoadingDelete(true)
const res = await funDeleteTheme(id)
if (res.success) {
toast.success(res.message);
@@ -44,6 +51,9 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
} catch (error) {
console.error(error)
toast.error("Gagal menghapus tema, coba lagi nanti");
} finally {
setLoadingDelete(false)
setModalDel(false)
}
}
@@ -86,23 +96,25 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
}
</SimpleGrid>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
<LayoutModal loading={loadingApply} opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah Tema Aplikasi?"
onYes={(val) => {
if (val) {
onChangeTheme()
}else{
setModal(false)
}
setModal(false)
}} />
<LayoutModal opened={isModalDel} onClose={() => setModalDel(false)}
<LayoutModal loading={loadingDelete} opened={isModalDel} onClose={() => setModalDel(false)}
description="Apakah Anda yakin ingin menghapus Tema Aplikasi?"
onYes={(val) => {
if (val) {
onDelete()
}else{
setModalDel(false)
}
setModalDel(false)
}} />
</Box>
);

18
src/module/division_new/ui/navbar_detail_division.tsx
View File

@@ -1,14 +1,14 @@
'use client'
import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { ActionIcon, Box } from "@mantine/core";
import { useState } from "react";
import { HiMenu } from "react-icons/hi";
import DrawerDetailDivision from "./drawer_detail_division";
import { funGetDivisionById } from "../lib/api_division";
import { useParams } from "next/navigation";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import { useHookstate } from "@hookstate/core";
import { ActionIcon } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiMenu } from "react-icons/hi";
import { funGetDivisionById } from "../lib/api_division";
import DrawerDetailDivision from "./drawer_detail_division";
export default function NavbarDetailDivision() {
const [openDrawer, setOpenDrawer] = useState(false)
@@ -37,7 +37,7 @@ export default function NavbarDetailDivision() {
return (
<>
<LayoutNavbarNew back="/division" title={name} menu={
<LayoutNavbarNew back="" title={name} menu={
<ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>

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

@@ -12,6 +12,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
const [namaGroup, setNamaGroup] = useState("");
const tema = useHookstate(TEMA)
const refresh = useHookstate(globalRefreshGroup)
const [loading, setLoading] = useState(false)
const [touched, setTouched] = useState({
name: false,
});
@@ -19,8 +20,8 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
async function createData() {
try {
setLoading(true)
const response = await funCreateGroup({ name: namaGroup })
if (response.success) {
toast.success(response.message);
refresh.set(!refresh.get())
@@ -33,6 +34,8 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
} catch (error) {
console.error(error);
toast.error("Gagal menambahkan grup, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -85,7 +88,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
onClose={() => setOpenDrawerGroup(false)}
title={"Tambah Grup"}
>
<Box pt={10}>
<Box pos={"relative"} h={"28.5vh"}>
<TextInput
styles={{
input: {
@@ -109,7 +112,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
)
}
/>
<Box mt={"xl"}>
<Box pos={"absolute"} bottom={10} left={0} right={0}>
<Button
c={"white"}
bg={tema.get().utama}
@@ -117,6 +120,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
radius={30}
fullWidth
onClick={() => { onCheck() }}
loading={loading}
>
Simpan
</Button>

24
src/module/group/ui/edit_drawer_group.tsx
View File

@@ -2,15 +2,7 @@
import { LayoutDrawer, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import {
Box,
Button,
Flex,
SimpleGrid,
Stack,
Text,
TextInput
} from "@mantine/core";
import { Box, Button, Flex, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import toast from "react-hot-toast";
@@ -23,6 +15,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
const [isModal, setModal] = useState(false);
const [name, setName] = useState("");
const [loading, setLoading] = useState(false);
const [loadingModal, setLoadingModal] = useState(false)
const refresh = useHookstate(globalRefreshGroup)
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
@@ -90,6 +83,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
async function nonActive(val: boolean) {
try {
if (val) {
setLoadingModal(true)
const res = await funEditStatusGroup(id, { isActive: isActive });
if (res.success) {
toast.success(res.message);
@@ -99,11 +93,12 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
toast.error(res.message)
}
}
setModal(false);
} catch (error) {
setModal(false);
console.error(error);
toast.error("Edit grup gagal, coba lagi nanti");
} finally {
setLoadingModal(false)
setModal(false);
}
}
@@ -146,7 +141,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
onClose={() => setOpenDrawerGroup(false)}
title={"Edit Grup"}
>
<Box pt={10}>
<Box pos={"relative"} h={"28.5vh"}>
<TextInput
styles={{
input: {
@@ -155,7 +150,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
borderColor: tema.get().utama,
},
}}
size="lg"
size="md"
value={name}
onChange={(e) => {
onValidation('name', e.target.value)
@@ -171,7 +166,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
label="Grup"
required
/>
<Box mt={"xl"}>
<Box pos={"absolute"} bottom={10} left={0} right={0}>
<Button
c={"white"}
bg={tema.get().utama}
@@ -188,6 +183,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
</LayoutDrawer>
<LayoutModal
loading={loadingModal}
opened={isModal}
onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mangubah status aktifasi data?"

33
src/module/group/ui/list_group_active.tsx
View File

@@ -1,26 +1,17 @@
import { LayoutDrawer, SkeletonSingle, TEMA, WARNA } from "@/module/_global";
import {
ActionIcon,
Box,
Flex,
Grid,
Group,
Skeleton,
Text,
TextInput,
} from "@mantine/core";
import React, { useEffect, useState } from "react";
import { LayoutDrawer, SkeletonSingle, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { useSearchParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiOutlineOfficeBuilding } from "react-icons/hi";
import { HiMagnifyingGlass } from "react-icons/hi2";
import EditDrawerGroup from "./edit_drawer_group";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import { funGetAllGroup } from "../lib/api_group";
import { IDataGroup } from "../lib/type_group";
import { useSearchParams } from "next/navigation";
import _ from "lodash";
import { useHookstate } from "@hookstate/core";
import { globalRefreshGroup } from "../lib/val_group";
import EditDrawerGroup from "./edit_drawer_group";
export default function ListGroupActive() {
@@ -117,7 +108,7 @@ export default function ListGroupActive() {
base: 3,
xl: 2
}}>
<Flex justify={{base: "center", xl: "flex-start"}}>
<Flex justify={{ base: "center", xl: "flex-start" }}>
<ActionIcon
variant="light"
bg={tema.get().bgTotalKegiatan}
@@ -143,8 +134,8 @@ export default function ListGroupActive() {
}}
>
<Text fw={"bold"} c={tema.get().utama} lineClamp={1}>
{v.name}
</Text>
{v.name}
</Text>
</Box>
</Grid.Col>
</Grid>

2
src/module/home/lib/type_home.ts
View File

@@ -2,7 +2,7 @@ export interface IDataHomeKegiatan {
id: string
title: string
desc: string
status: string
status: number
progress: number
createdAt: string
}

10
src/module/home/ui/chart_progress_tugas.tsx
View File

@@ -1,13 +1,13 @@
'use client'
import { TEMA, WARNA } from "@/module/_global";
import { Box, Text } from "@mantine/core";
import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Box } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { EChartsOption } from "echarts";
import EChartsReact from "echarts-for-react";
import { useState } from "react";
import { funGetHome } from "../lib/api_home";
import toast from "react-hot-toast";
import { useHookstate } from "@hookstate/core";
import { funGetHome } from "../lib/api_home";
export default function ChartProgressHome() {
const [options, setOptions] = useState<EChartsOption>({});
@@ -41,7 +41,7 @@ export default function ChartProgressHome() {
}
};
const loadData = (value:any) => {
const loadData = (value: any) => {
const option: EChartsOption = {
title: {
text: "PROGRES KEGIATAN",

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

@@ -2,7 +2,7 @@
import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Progress, Skeleton, Stack, Text, Title } from "@mantine/core";
import { Badge, Box, Card, Flex, Group, Progress, Skeleton, Stack, Text, Title } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { useRouter } from "next/navigation";
@@ -79,7 +79,24 @@ export default function ListProjects() {
<Progress.Label>{_.isNull(v.progress) ? 0 : v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text c={tema.get().utama} fz={isMobile ? 14 : 16}>{v.createdAt}</Text>
<Group align='center' pt={10} justify='space-between'>
<Text c={tema.get().utama} fz={isMobile ? 14 : 16}>{v.createdAt}</Text>
<Badge color={
v.status === 0 ? '#1372C4' :
v.status === 1 ? '#C5771A' :
v.status === 2 ? '#0B6025' :
v.status === 3 ? '#BB1F1F' :
"grey"
}>
{
v.status === 0 ? 'Segera' :
v.status === 1 ? 'Dikerjakan' :
v.status === 2 ? 'Selesai' :
v.status === 3 ? 'Dibatalkan' :
"Segera"
}
</Badge>
</Group>
</Stack>
</Card>
</Box>

552
src/module/home/ui/view_search.tsx
View File

@@ -1,62 +1,49 @@
"use client";
import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
import {
ActionIcon,
Avatar,
Box,
Divider,
Grid,
Group,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import {
HiMagnifyingGlass,
HiMiniPresentationChartBar,
HiMiniUserGroup,
} from "react-icons/hi2";
import { funGetSearchAll } from "../lib/api_search";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import {
IDataDivisionSearch,
IDataProjectSearch,
IDataUserSearch,
} from "../lib/type_search";
import { useRouter } from "next/navigation";
import _ from "lodash";
import { LayoutNavbarNew, SkeletonList, TEMA, WARNA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Avatar, Box, Divider, Grid, Text, TextInput } from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiMiniUserGroup, } from "react-icons/hi2";
import { funGetSearchAll } from "../lib/api_search";
import { IDataDivisionSearch, IDataProjectSearch, IDataUserSearch, } from "../lib/type_search";
export default function ViewSearch() {
const [search, setSearch] = useState("");
const [dataUser, setDataUser] = useState<IDataUserSearch[]>([]);
const [dataProject, setDataProject] = useState<IDataProjectSearch[]>([]);
const [dataDivision, setDataDivision] = useState<IDataDivisionSearch[]>([]);
const router = useRouter();
const tema = useHookstate(TEMA);
const [search, setSearch] = useState("")
const [dataUser, setDataUser] = useState<IDataUserSearch[]>([])
const [dataProject, setDataProject] = useState<IDataProjectSearch[]>([])
const [dataDivision, setDataDivision] = useState<IDataDivisionSearch[]>([])
const [loading, setLoading] = useState(false)
const router = useRouter()
const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 460px)");
async function featchSearch() {
async function featchSearch(cari: string) {
try {
const res = await funGetSearchAll("?search=" + search);
setDataUser(res.data.user);
setDataProject(res.data.project);
setDataDivision(res.data.division);
setLoading(true)
setSearch(cari)
if (cari != "") {
const res = await funGetSearchAll("?search=" + cari);
setDataUser(res.data.user);
setDataProject(res.data.project);
setDataDivision(res.data.division);
} else {
setDataUser([]);
setDataProject([]);
setDataDivision([]);
}
} catch (error) {
console.error(error);
throw new Error("Error");
toast.error("Gagal mendapatkan data, coba lagi nanti");
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
if (search != "") {
featchSearch();
} else {
setDataUser([]);
setDataProject([]);
setDataDivision([]);
}
}, [search]);
const isMobile2 = useMediaQuery("(max-width: 460px)");
return (
<>
@@ -74,263 +61,280 @@ export default function ViewSearch() {
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
onChange={(e) => setSearch(e.target.value)}
onChange={(e) => featchSearch(e.target.value)}
/>
{dataUser.length || dataProject.length || dataDivision.length > 0 ? (
<Box pt={20}>
<Box
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
padding: 10,
borderRadius: 10,
}}
>
{dataUser.length > 0 ? (
<Box>
<Text>ANGGOTA</Text>
{
loading ?
Array(5)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonList />
</Box>
))
:
dataUser.length || dataProject.length || dataDivision.length > 0 ?
(
<Box pt={20}>
<Box
style={{
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 10,
backgroundColor: `#E7EBF1`,
borderRadius: 5,
border: `1px solid ${WARNA.borderBiruMuda}`,
padding: 10,
borderRadius: 10,
}}
>
{dataUser.length > 0 ? (
<Box mt={5}>
{dataUser.map((v, i) => {
return (
<Box key={i}>
<Box
onClick={() => {
router.push(`/member/${v.id}`);
}}
>
<Grid align="center">
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}}
>
<Avatar
src={`https://wibu-storage.wibudev.com/api/files/${v.img}`}
size={50}
alt="image"
/>
</Grid.Col>
<Grid.Col
span={{
base: 10,
xs: 10.5,
sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
pl={isMobile2 ? 30 : 20}
>
<Text
fw={"bold"}
c={tema.get().utama}
truncate="end"
<Box>
<Text>ANGGOTA</Text>
<Box
style={{
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 10,
backgroundColor: `#E7EBF1`,
borderRadius: 5,
}}
>
{dataUser.length > 0 ? (
<Box mt={5}>
{dataUser.map((v, i) => {
return (
<Box key={i}>
<Box
onClick={() => {
router.push(`/member/${v.id}`);
}}
>
{_.startCase(v.name)}
</Text>
<Text fw={"lighter"} fz={12} truncate="end">
{v.group + " - " + v.position}
</Text>
</Grid.Col>
</Grid>
</Box>
<Divider my={10} />
<Grid align="center">
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}}
>
<Avatar
src={`https://wibu-storage.wibudev.com/api/files/${v.img}`}
size={50}
alt="image"
/>
</Grid.Col>
<Grid.Col
span={{
base: 10,
xs: 10.5,
sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
pl={isMobile2 ? 30 : 20}
>
<Text
fw={"bold"}
c={tema.get().utama}
truncate="end"
>
{_.startCase(v.name)}
</Text>
<Text fw={"lighter"} fz={12} truncate="end">
{v.group + " - " + v.position}
</Text>
</Grid.Col>
</Grid>
</Box>
<Divider my={10} />
</Box>
);
})}
</Box>
);
})}
) : null}
</Box>
</Box>
) : null}
</Box>
</Box>
) : null}
{dataDivision.length > 0 ? (
<Box mt={10}>
<Text>DIVISI</Text>
<Box
style={{
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 10,
backgroundColor: `#E7EBF1`,
borderRadius: 5,
}}
>
{dataDivision.length > 0 ? (
<Box>
{dataDivision.map((v, i) => {
return (
<Box
key={i}
onClick={() => router.push(`/division/${v.id}`)}
>
<Grid align="center" mt={15}>
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}}
>
<ActionIcon
variant="light"
bg={tema.get().utama}
size={50}
radius={100}
aria-label="icon"
>
<HiMiniUserGroup
color={"white"}
size={25}
/>
</ActionIcon>
</Grid.Col>
<Grid.Col
span={{
base: 10,
xs: 10.5,
sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
pl={isMobile2 ? 30 : 20}
>
<Box mt={10}>
<Text>DIVISI</Text>
<Box
style={{
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 10,
backgroundColor: `#E7EBF1`,
borderRadius: 5,
}}
>
{dataDivision.length > 0 ? (
<Box>
{dataDivision.map((v, i) => {
return (
<Box
key={i}
onClick={() => router.push(`/division/${v.id}`)}
>
<Grid align="center" mt={15}>
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}}
>
<ActionIcon
variant="light"
bg={tema.get().utama}
size={50}
radius={100}
aria-label="icon"
>
<HiMiniUserGroup
color={"white"}
size={25}
/>
</ActionIcon>
</Grid.Col>
<Grid.Col
span={{
base: 10,
xs: 10.5,
sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
pl={isMobile2 ? 30 : 20}
>
<Box
>
<Text
fw={"bold"}
c={tema.get().utama}
truncate="end"
>
{v.name.toUpperCase()}
</Text>
</Box>
<Text fw={"lighter"} fz={12} truncate="end">
{v.group}
</Text>
</Grid.Col>
</Grid>
<Text
fw={"bold"}
c={tema.get().utama}
truncate="end"
fw={"lighter"}
mt={10}
mb={10}
lineClamp={2}
>
{v.name.toUpperCase()}
{v.desc}
</Text>
<Divider my={5} />
</Box>
<Text fw={"lighter"} fz={12} truncate="end">
{v.group}
</Text>
</Grid.Col>
</Grid>
<Text
fw={"lighter"}
mt={10}
mb={10}
lineClamp={2}
>
{v.desc}
</Text>
<Divider my={5} />
);
})}
</Box>
);
})}
) : null}
</Box>
</Box>
) : null}
</Box>
</Box>
) : null}
{dataProject.length > 0 ? (
<Box mt={10}>
<Text>KEGIATAN</Text>
<Box
style={{
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 10,
backgroundColor: `#E7EBF1`,
borderRadius: 5,
}}
>
{dataProject.length > 0 ? (
<Box>
{dataProject.map((v, i) => {
return (
<Box
key={i}
onClick={() => router.push(`/project/${v.id}`)}
>
<Grid justify="center" align="center" mt={10}>
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}}
>
<ActionIcon
variant="light"
bg={tema.get().utama}
size={50}
radius={100}
aria-label="icon"
>
<HiMiniPresentationChartBar
color={"white"}
size={25}
/>
</ActionIcon>
</Grid.Col>
<Grid.Col
span={{
base: 10,
xs: 10.5,
sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
pl={isMobile2 ? 30 : 20}
>
<Box mt={10}>
<Text>KEGIATAN</Text>
<Box
style={{
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 10,
backgroundColor: `#E7EBF1`,
borderRadius: 5,
}}
>
{dataProject.length > 0 ? (
<Box>
{dataProject.map((v, i) => {
return (
<Box
key={i}
onClick={() => router.push(`/project/${v.id}`)}
>
<Text
fw={"bold"}
c={tema.get().utama}
truncate="end"
>
{v.title.toUpperCase()}
</Text>
<Grid justify="center" align="center" mt={10}>
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}}
>
<ActionIcon
variant="light"
bg={tema.get().utama}
size={50}
radius={100}
aria-label="icon"
>
<HiMiniPresentationChartBar
color={"white"}
size={25}
/>
</ActionIcon>
</Grid.Col>
<Grid.Col
span={{
base: 10,
xs: 10.5,
sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
pl={isMobile2 ? 30 : 20}
>
<Box
>
<Text
fw={"bold"}
c={tema.get().utama}
truncate="end"
>
{v.title.toUpperCase()}
</Text>
</Box>
<Text fw={"lighter"} fz={12} truncate="end">
{v.group}
</Text>
</Grid.Col>
</Grid>
<Divider mt={10} />
</Box>
<Text fw={"lighter"} fz={12} truncate="end">
{v.group}
</Text>
</Grid.Col>
</Grid>
<Divider mt={10} />
);
})}
</Box>
);
})}
) : null}
</Box>
</Box>
) : null}
</Box>
</Box>
) : null}
</Box>
</Box>
) : null}
) :
search != '' ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada data</Text>
</Box>
: null
}
</Box>
</>
);

29
src/module/position/ui/drawer_detail_position.tsx
View File

@@ -1,25 +1,24 @@
import { keyWibu, LayoutDrawer, TEMA, WARNA } from "@/module/_global"
import { keyWibu, LayoutDrawer, TEMA } from "@/module/_global"
import LayoutModal from "@/module/_global/layout/layout_modal"
import { funGetAllGroup, IDataGroup } from "@/module/group"
import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button, Skeleton } from "@mantine/core"
import { funGetAllGroup } from "@/module/group"
import { useHookstate } from "@hookstate/core"
import { Box, Button, Flex, SimpleGrid, Skeleton, Stack, Text, TextInput } from "@mantine/core"
import { useShallowEffect } from "@mantine/hooks"
import { useEffect, useState } from "react"
import { useState } from "react"
import toast from "react-hot-toast"
import { FaPencil, FaToggleOff } from "react-icons/fa6"
import { useWibuRealtime } from "wibu-realtime"
import { funEditPosition, funEditStatusPosition, funGetOnePosition } from "../lib/api_position"
import { IDataPosition } from "../lib/type_position"
import { useHookstate } from "@hookstate/core"
import { globalRefreshPosition } from "../lib/val_posisition"
import { useWibuRealtime } from "wibu-realtime"
export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
onUpdated: (val: boolean) => void, id: string, isActive: boolean;
}) {
export default function DrawerDetailPosition({ onUpdated, id, isActive }: { onUpdated: (val: boolean) => void, id: string, isActive: boolean; }) {
const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
const [isModal, setModal] = useState(false)
const refresh = useHookstate(globalRefreshPosition)
const [loading, setLoading] = useState(true)
const [loadingEdit, setLoadingEdit] = useState(false)
const [loadingModal, setLoadingModal] = useState(false)
const tema = useHookstate(TEMA)
const [data, setData] = useState<any>({
id: id,
@@ -128,6 +127,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
async function nonActive(val: boolean) {
try {
if (val) {
setLoadingModal(true)
const res = await funEditStatusPosition(id, { isActive: isActive })
if (res.success) {
toast.success(res.message);
@@ -142,12 +142,13 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
toast.error(res.message)
}
}
setModal(false);
} catch (error) {
console.error(error);
setModal(false);
toast.error("Edit jabatan gagal, coba lagi nanti");
onUpdated(false);
onUpdated(false)
} finally {
setLoadingModal(false)
setModal(false)
}
}
@@ -185,7 +186,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
</Stack>
<LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Jabatan'} >
<Box pt={10} pos={"relative"} h={"28.5vh"}>
<Box pos={"relative"} h={"28.5vh"}>
{loading ?
<Box>
<Skeleton height={40} mt={6} radius={10} />
@@ -233,7 +234,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
</LayoutDrawer>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
<LayoutModal loading={loadingModal} opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah status aktifasi data?"
onYes={(val) => { nonActive(val) }} />
</Box>

4
src/module/project/ui/navbar_detail_project.tsx
View File

@@ -10,8 +10,8 @@ import { FaFileCirclePlus, FaPencil, FaUsers } from 'react-icons/fa6';
import { HiMenu } from 'react-icons/hi';
import { IoAddCircle } from 'react-icons/io5';
import { MdCancel } from 'react-icons/md';
import { funGetOneProjectById } from '../lib/api_project';
import { useWibuRealtime } from 'wibu-realtime';
import { funGetOneProjectById } from '../lib/api_project';
export default function NavbarDetailProject() {
const router = useRouter()
@@ -54,7 +54,7 @@ export default function NavbarDetailProject() {
return (
<>
<LayoutNavbarNew back="/project?status=0" title={name} menu={
<LayoutNavbarNew back="" title={name} menu={
<ActionIcon
variant="light"
bg={tema.get().bgIcon}

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

@@ -11,92 +11,96 @@ import { useWibuRealtime } from "wibu-realtime";
import { funEditStatusMember } from "../lib/api_member";
export default function DrawerDetailMember({ onDeleted, id, status, }: { onDeleted: (val: boolean) => void; id: string; status: boolean; }) {
const router = useRouter();
const [isModal, setModal] = useState(false);
const tema = useHookstate(TEMA)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const router = useRouter()
const [isModal, setModal] = useState(false)
const tema = useHookstate(TEMA)
const [loadingModal, setLoadingModal] = useState(false)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function nonActive(val: boolean) {
try {
if (val) {
const res = await funEditStatusMember(id, {
isActive: status ? true : false,
});
if (res.success) {
setDataRealtime([{
category: "data-member",
group: res.data.idGroup,
}])
toast.success(res.message);
router.push("/member?active=true");
onDeleted(true);
} else {
onDeleted(false);
}
async function nonActive(val: boolean) {
try {
if (val) {
setLoadingModal(true)
const res = await funEditStatusMember(id, {
isActive: status ? true : false,
});
if (res.success) {
setDataRealtime([{
category: "data-member",
group: res.data.idGroup,
}])
toast.success(res.message);
router.push("/member?active=true");
onDeleted(true);
} else {
onDeleted(false);
}
}
} catch (error) {
console.error(error);
toast.error("Terjadi kesalahan");
} finally {
setModal(false)
setLoadingModal(false)
}
setModal(false);
} catch (error) {
console.error(error);
setModal(false);
toast.error("Terjadi kesalahan");
}
}
}
return (
<Box>
<Stack pt={10}>
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
<Flex
justify={"center"}
align={"center"}
direction={"column"}
style={{ cursor: "pointer" }}
onClick={() => {
setModal(true);
}}
>
<Box>
<FaToggleOff size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama} ta="center">
{" "}
{status === false ? "Aktifkan" : "Non Aktifkan"}
</Text>
</Box>
</Flex>
return (
<Box>
<Stack pt={10}>
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
<Flex
justify={"center"}
align={"center"}
direction={"column"}
style={{ cursor: "pointer" }}
onClick={() => {
setModal(true);
}}
>
<Box>
<FaToggleOff size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama} ta="center">
{" "}
{status === false ? "Aktifkan" : "Non Aktifkan"}
</Text>
</Box>
</Flex>
<Flex
justify={"center"}
align={"center"}
direction={"column"}
style={{ cursor: "pointer" }}
onClick={() => {
router.push(`/member/edit/${id}`);
<Flex
justify={"center"}
align={"center"}
direction={"column"}
style={{ cursor: "pointer" }}
onClick={() => {
router.push(`/member/edit/${id}`);
}}
>
<Box>
<FaPencil size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama} ta="center">
Edit
</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
<LayoutModal
loading={loadingModal}
opened={isModal}
onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
onYes={(val) => {
nonActive(val);
}}
>
<Box>
<FaPencil size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama} ta="center">
Edit
</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
<LayoutModal
opened={isModal}
onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
onYes={(val) => {
nonActive(val);
}}
/>
</Box>
);
/>
</Box>
);
}

26
src/module/user/member/ui/navbar_detail_member.tsx
View File

@@ -1,19 +1,19 @@
'use client'
import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile, globalRole, TEMA } from "@/module/_global";
import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton, Grid } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import DrawerDetailMember from "./drawer_detail_member";
import { useState } from "react";
import { RiIdCardFill } from "react-icons/ri";
import { FaSquarePhone } from "react-icons/fa6";
import { MdEmail } from "react-icons/md";
import { IoMaleFemale } from "react-icons/io5";
import { useShallowEffect } from "@mantine/hooks";
import { funGetOneMember } from "../lib/api_member";
import toast from "react-hot-toast";
import { IListMember, IMember } from "../lib/type_member";
import { globalRole, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Avatar, Box, Center, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import toast from "react-hot-toast";
import { FaSquarePhone } from "react-icons/fa6";
import { HiMenu } from "react-icons/hi";
import { IoMaleFemale } from "react-icons/io5";
import { MdEmail } from "react-icons/md";
import { RiIdCardFill } from "react-icons/ri";
import { valueRoleUser } from "../../lib/val_user";
import { funGetOneMember } from "../lib/api_member";
import { IListMember, IMember } from "../lib/type_member";
import DrawerDetailMember from "./drawer_detail_member";
export default function NavbarDetailMember({ id }: IMember) {

49
src/module/user/profile/ui/profile.tsx
View File

@@ -1,19 +1,19 @@
"use client"
import { LayoutIconBack, LayoutNavbarHome, SkeletonAvatar, SkeletonDetailProfile, TEMA, WARNA } from "@/module/_global";
import { ActionIcon, Avatar, Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
import { RiIdCardFill } from "react-icons/ri";
import { FaSquarePhone } from "react-icons/fa6";
import { MdEmail } from "react-icons/md";
import { IoMaleFemale } from "react-icons/io5";
import toast from "react-hot-toast";
import { LuLogOut } from "react-icons/lu";
import { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useState } from "react";
import { funGetProfileByCookies } from "../lib/api_profile";
import { useShallowEffect } from "@mantine/hooks";
import { IProfileById } from "../lib/type_profile";
import { useRouter } from "next/navigation";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Avatar, Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { FaSquarePhone } from "react-icons/fa6";
import { IoMaleFemale } from "react-icons/io5";
import { LuLogOut } from "react-icons/lu";
import { MdEmail } from "react-icons/md";
import { RiIdCardFill } from "react-icons/ri";
import { funGetProfileByCookies } from "../lib/api_profile";
import { IProfileById } from "../lib/type_profile";
export default function Profile() {
const [openModal, setOpenModal] = useState(false);
@@ -22,6 +22,7 @@ export default function Profile() {
const [loading, setLoading] = useState(true)
const [img, setIMG] = useState<any | null>()
const tema = useHookstate(TEMA)
const [loadingModal, setLoadingModal] = useState(false)
async function getData() {
try {
@@ -44,17 +45,19 @@ export default function Profile() {
async function onLogout(val: boolean) {
try {
if (val) {
setLoadingModal(true)
await fetch('/api/auth/logout', {
method: 'DELETE',
});
toast.success('Logout Sukses')
window.location.href = '/';
}
setOpenModal(false)
} catch (error) {
console.error(error);
toast.error("Logout gagal, coba lagi nanti");
} finally {
setLoadingModal(false)
setOpenModal(false)
}
}
return (
@@ -72,12 +75,12 @@ export default function Profile() {
justify="center"
gap="xs"
>
{loading ? <Skeleton height={100} radius={"100"} width={100} /> :
<Avatar
size="100"
radius={"100"}
src={img}
/>
{loading ? <Skeleton height={100} radius={"100"} width={100} /> :
<Avatar
size="100"
radius={"100"}
src={img}
/>
}
{/* <SkeletonAvatar size="100" sizeNoImg="100" img={img} /> */}
{loading ?
@@ -150,7 +153,7 @@ export default function Profile() {
</Stack>
}
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
<LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin keluar?"
onYes={(val) => onLogout(val)} />
</>