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

fix(umkm): fix TypeError, 404 API URL, and Recharts warnings

Browse Source
This commit is contained in:
nico
2026-04-21 12:23:22 +08:00
parent ece84fabf0
commit a2d157ee02
8 changed files with 86 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/admin/(dashboard)/_state/ekonomi/umkm/umkm.ts
View File

@@ -1,5 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Prisma } from "@prisma/client";
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
@@ -244,7 +243,7 @@ export const umkmState = proxy({
async load() {
this.loading = true;
try {
const res = await fetch("/api/ekonomi/pasar-desa/kategori-produk/find-many-all");
const res = await fetch("/api/ekonomi/kategoriproduk/find-many-all");
const result = await res.json();
if (result.success) {
this.data = result.data;

22
src/app/admin/(dashboard)/ekonomi/umkm/dashboard/page.tsx
View File

@@ -21,6 +21,7 @@ import {
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowUpRight, IconArrowDownRight, IconMinus } from '@tabler/icons-react';
import { useProxy } from 'valtio/utils';
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import umkmState from '../../../_state/ekonomi/umkm/umkm';
function UmkmDashboard() {
@@ -53,6 +54,27 @@ function UmkmDashboard() {
</SimpleGrid>
<Grid>
<Grid.Col span={12}>
<Card withBorder radius="md" p="lg" shadow="sm">
<Title order={4} mb="md">Grafik Penjualan per Produk</Title>
<Box style={{ height: 350 }}>
<ResponsiveContainer width="100%" height="100%">
<BarChart data={detail.map(item => ({
name: item.namaProduk,
penjualan: item.penjualanBulanIni
}))}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip formatter={(value: any) => `Rp ${value.toLocaleString()}`} />
<Legend />
<Bar dataKey="penjualan" fill={colors['blue-button']} name="Penjualan" />
</BarChart>
</ResponsiveContainer>
</Box>
</Card>
</Grid.Col>
<Grid.Col span={{ base: 12, md: 4 }}>
<Card withBorder radius="md" p="lg" shadow="sm">
<Title order={4} mb="md">Top 3 Produk</Title>

22
src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx
View File

@@ -5,12 +5,12 @@ import colors from '@/con/colors';
import {
Box, Center, Flex, Grid, GridCol, Image, Pagination, Paper,
Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title,
Tabs, Badge, Card, Group
Tabs, Badge, Card
} from '@mantine/core';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import {
IconBrandWhatsapp, IconMapPinFilled, IconSearch,
IconStarFilled, IconBuildingStore, IconTag, IconUser,
IconStarFilled, IconBuildingStore, IconUser,
IconShoppingBag, IconPackage
} from '@tabler/icons-react';
import { motion } from 'motion/react';
@@ -76,14 +76,14 @@ function TabProdukPasar({ router }: { router: any }) {
const [debouncedSearch] = useDebouncedValue(search, 1000);
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const { data, page, loading, totalPages, load } = state.findMany;
const { data, page, loading, totalPages } = state.findMany;
useShallowEffect(() => {
pasarDesaState.kategoriProduk.findManyAll.load();
}, []);
useShallowEffect(() => {
load(page, 8, debouncedSearch, selectedCategory || undefined);
pasarDesaState.pasarDesa.findMany.load(page, 8, debouncedSearch, selectedCategory || undefined);
}, [page, debouncedSearch, selectedCategory]);
return (
@@ -152,7 +152,7 @@ function TabProdukPasar({ router }: { router: any }) {
))}
</SimpleGrid>
<Center>
<Pagination total={totalPages} value={page} onChange={(p) => load(p)} radius="md" />
<Pagination total={totalPages} value={page} onChange={(p) => pasarDesaState.pasarDesa.findMany.load(p)} radius="md" />
</Center>
</>
)}
@@ -166,14 +166,14 @@ function TabProdukUmkm({ router }: { router: any }) {
const [debouncedSearch] = useDebouncedValue(search, 1000);
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const { data, page, loading, totalPages, load } = state.findMany;
const { data, page, loading, totalPages } = state.findMany;
useShallowEffect(() => {
umkmState.kategoriProduk.findManyAll.load();
}, []);
useShallowEffect(() => {
load(page, 8, debouncedSearch, undefined, selectedCategory || undefined);
umkmState.produk.findMany.load(page, 8, debouncedSearch, undefined, selectedCategory || undefined);
}, [page, debouncedSearch, selectedCategory]);
return (
@@ -234,7 +234,7 @@ function TabProdukUmkm({ router }: { router: any }) {
))}
</SimpleGrid>
<Center>
<Pagination total={totalPages} value={page} onChange={(p) => load(p)} radius="md" />
<Pagination total={totalPages} value={page} onChange={(p) => umkmState.produk.findMany.load(p)} radius="md" />
</Center>
</>
)}
@@ -247,10 +247,10 @@ function TabDirektoriUmkm({ router }: { router: any }) {
const [search, setSearch] = useState('');
const [debouncedSearch] = useDebouncedValue(search, 1000);
const { data, page, loading, totalPages, load } = state.findMany;
const { data, page, loading, totalPages } = state.findMany;
useShallowEffect(() => {
load(page, 8, debouncedSearch);
umkmState.umkm.findMany.load(page, 8, debouncedSearch);
}, [page, debouncedSearch]);
return (
@@ -300,7 +300,7 @@ function TabDirektoriUmkm({ router }: { router: any }) {
))}
</SimpleGrid>
<Center>
<Pagination total={totalPages} value={page} onChange={(p) => load(p)} radius="md" />
<Pagination total={totalPages} value={page} onChange={(p) => umkmState.umkm.findMany.load(p)} radius="md" />
</Center>
</>
)}

2
src/app/darmasaba/(pages)/ekonomi/umkm/[id]/page.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import umkmState from '@/app/admin/(dashboard)/_state/ekonomi/umkm/umkm';
import colors from '@/con/colors';
import { Box, Card, Flex, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title, Badge, SimpleGrid, Group, Divider, Button } from '@mantine/core';
import { Box, Card, Flex, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title, Badge, SimpleGrid, Group, Divider, Button, Center } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconBrandWhatsapp, IconMapPinFilled, IconPackage, IconUser } from '@tabler/icons-react';
import { useParams } from 'next/navigation';