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

Merge pull request #321 from bipproduction/amalia/30-okt-24

Browse Source 
Amalia/30 okt 24
This commit is contained in:
Amalia
2024-10-30 14:57:30 +08:00
committed by GitHub
parent 381c66e379 3b1fa31c88
commit ea6a69932f
9 changed files with 324 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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)

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>

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>
</>
);

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}