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

src/app/api/home/route.ts

@@ -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 = {

src/module/home/lib/type_home.ts

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

src/module/home/ui/chart_progress_tugas.tsx

@@ -1,13 +1,13 @@
 'use client'
-import { TEMA, WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
-import { Box, Text } from "@mantine/core";
+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",

src/module/home/ui/list_project.tsx

@@ -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>
+                                    <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>

src/module/home/ui/view_search.tsx

@@ -1,62 +1,49 @@
 "use client";
-import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, SkeletonList, 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 { 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 [search, setSearch] = useState("")
-  const [dataUser, setDataUser] = useState<IDataUserSearch[]>([]);
+  const [dataUser, setDataUser] = useState<IDataUserSearch[]>([])
-  const [dataProject, setDataProject] = useState<IDataProjectSearch[]>([]);
+  const [dataProject, setDataProject] = useState<IDataProjectSearch[]>([])
-  const [dataDivision, setDataDivision] = useState<IDataDivisionSearch[]>([]);
+  const [dataDivision, setDataDivision] = useState<IDataDivisionSearch[]>([])
-  const router = useRouter();
+  const [loading, setLoading] = useState(false)
-  const tema = useHookstate(TEMA);
+  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);
+      setLoading(true)
+      setSearch(cari)
+      if (cari != "") {
+        const res = await funGetSearchAll("?search=" + cari);
         setDataUser(res.data.user);
         setDataProject(res.data.project);
         setDataDivision(res.data.division);
-    } catch (error) {
-      console.error(error);
-      throw new Error("Error");
-    }
-  }
-
-  useShallowEffect(() => {
-    if (search != "") {
-      featchSearch();
       } else {
         setDataUser([]);
         setDataProject([]);
         setDataDivision([]);
       }
-  }, [search]);
+    } catch (error) {
-  const isMobile2 = useMediaQuery("(max-width: 460px)");
+      console.error(error);
+      toast.error("Gagal mendapatkan data, coba lagi nanti");
+    } finally {
+      setLoading(false)
+    }
+  }
+
+
 
   return (
     <>
@@ -74,9 +61,20 @@ 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 ? (
+        {
+          loading ?
+            Array(5)
+              .fill(null)
+              .map((_, i) => (
+                <Box key={i}>
+                  <SkeletonList />
+                </Box>
+              ))
+            :
+            dataUser.length || dataProject.length || dataDivision.length > 0 ?
+              (
                 <Box pt={20}>
                   <Box
                     style={{
@@ -330,7 +328,13 @@ export default function ViewSearch() {
                     ) : 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>
     </>
   );