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

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

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

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

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