fix: home
Deskripsi: - memberi status pada kegiatan - menghilangkan ,00 pada persen hcart proses kegiatan - menambahkan skeleton loading pada pencarian - fix : hasil pencarian yg telat - menambahkan tampilan tidak ada data pada pencarian No Issues
This commit is contained in:
amel
@@ -2,7 +2,7 @@ export interface IDataHomeKegiatan {
|
||||
id: string
|
||||
title: string
|
||||
desc: string
|
||||
status: string
|
||||
status: number
|
||||
progress: number
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user