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

refactor(ekonomi): consolidate Pasar Desa into UMKM module

Browse Source 
- Remove "Pasar Desa" as a separate entity; products are now strictly linked to UMKM.
- Delete redundant Pasar Desa API endpoints and state management.
- Update Admin UI: remove "Pasar Desa" menu and unified product management under UMKM.
- Update Public UI: replace "Pasar Desa" with "UMKM" in navbar and unified hub at /darmasaba/ekonomi/umkm.
- Implement mandatory umkmId in PasarDesa model and update seeders accordingly.
- Fix UI bugs, missing imports, and invalid API filters for mandatory umkmId.
- Increment version to 0.1.18.
This commit is contained in:
nico
2026-04-21 17:52:08 +08:00
parent e286cb4f2b
commit 1a48c15c87
45 changed files with 341 additions and 3409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/app/darmasaba/(pages)/ekonomi/pasar-desa/[id]/page.tsx
View File

@@ -1,177 +0,0 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Stack, Text, Image, Skeleton, Group, Badge, Divider, Title } from '@mantine/core';
import { IconArrowBack, IconBrandWhatsapp, IconMapPin, IconPhone, IconStar } from '@tabler/icons-react';
import { useRouter, useParams } from 'next/navigation';
import React from 'react';
import { useProxy } from 'valtio/utils';
import { useShallowEffect } from '@mantine/hooks';
import pasarDesaState from '@/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa';
function DetailProdukPasarUser() {
const router = useRouter();
const params = useParams();
const statePasar = useProxy(pasarDesaState);
useShallowEffect(() => {
statePasar.pasarDesa.findUnique.load(params?.id as string);
}, []);
const data = statePasar.pasarDesa.findUnique.data;
if (!data) {
return (
<Stack py={10}>
<Skeleton height={400} radius="md" />
</Stack>
);
}
return (
<Box py={20}>
{/* Tombol kembali */}
<Box px={{ base: 'md', md: 100 }}>
<Button
variant="subtle"
onClick={() => router.back()}
leftSection={<IconArrowBack size={20} color={colors['blue-button']} />}
mb={15}
>
<Text fz={{ base: 'md', md: 'lg' }} lh={1.5}>
Kembali ke daftar produk
</Text>
</Button>
</Box>
<Paper
w={{ base: '100%', md: '70%' }}
mx="auto"
p="lg"
radius="md"
shadow="sm"
bg={colors['white-1']}
>
<Stack gap="lg">
{/* Gambar Produk */}
{data.image?.link ? (
<Image
src={data.image.link}
alt={data.nama}
radius="md"
h={250}
w="100%"
fit="cover"
loading="lazy"
/>
) : (
<Box
h={300}
bg="gray.1"
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 'var(--mantine-radius-md)' }}
>
<Text c="dimmed" fz={{ base: 'sm', md: 'md' }} lh={1.5}>
Tidak ada gambar
</Text>
</Box>
)}
{/* Detail Produk */}
<Stack gap="xs">
<Title order={2} lh={1.1} c={colors['blue-button']}>
{data.nama || 'Produk Tanpa Nama'}
</Title>
<Group>
<Badge color="green" size="lg" radius="md">
<Text c={"white"} fz={{ base: 'sm', md: 'md' }} fw={600} lh={1.4}>
Rp {data.harga?.toLocaleString('id-ID')}
</Text>
</Badge>
{data.rating && (
<Group gap={4}>
<IconStar size={18} color="#FFD43B" />
<Text fz={{ base: 'sm', md: 'md' }} fw={500} lh={1.5}>
{data.rating}
</Text>
</Group>
)}
</Group>
</Stack>
<Divider my="sm" />
{/* Info Tambahan */}
<Stack gap="sm">
<Box>
<Title order={3} lh={1.15}>
Kategori
</Title>
<Group gap="xs" mt={4}>
{data.KategoriToPasar && data.KategoriToPasar.length > 0 ? (
data.KategoriToPasar.map((kategori) => (
<Badge key={kategori.id} color="blue" variant="light" fz={{ base: 'xs', md: 'sm' }} lh={1.4}>
{kategori.kategori.nama}
</Badge>
))
) : (
<Text fz={{ base: 'xs', md: 'sm' }} c="dimmed" lh={1.5}>
Tidak ada kategori
</Text>
)}
</Group>
</Box>
{data.alamatUsaha && (
<Group gap={6}>
<IconMapPin size={18} color={colors['blue-button']} />
<Text fz={{ base: 'sm', md: 'md' }} lh={1.5}>
{data.alamatUsaha}
</Text>
</Group>
)}
{data.kontak && (
<Group gap={6}>
<IconPhone size={18} color={colors['blue-button']} />
<Text fz={{ base: 'sm', md: 'md' }} lh={1.5}>
{data.kontak}
</Text>
</Group>
)}
</Stack>
<Divider my="sm" />
{/* Deskripsi */}
<Box>
<Title order={3} lh={1.15}>
Deskripsi Produk
</Title>
<Text fz={{ base: 'sm', md: 'md' }} c="dimmed" mt={4} lh={1.5}>
Tidak ada deskripsi.
</Text>
</Box>
{/* Tombol Aksi User */}
{data.kontak && (
<Button
mt="md"
color="green"
size="lg"
radius="md"
component="a"
href={`https://wa.me/${data.kontak.replace(/[^0-9]/g, '')}`}
target="_blank"
leftSection={<IconBrandWhatsapp/>}
>
<Text c={"white"} fz={{ base: 'sm', md: 'md' }} lh={1.5}>
Hubungi Penjual via WhatsApp
</Text>
</Button>
)}
</Stack>
</Paper>
</Box>
);
}
export default DetailProdukPasarUser;

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

@@ -1,14 +1,15 @@
'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, Center } from '@mantine/core';
import { Box, Card, Flex, Grid, GridCol, Image, 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';
import { IconBrandWhatsapp, IconMapPinFilled, IconUser } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import BackButton from '../../../desa/layanan/_com/BackButto';
function Page() {
const router = useRouter();
const params = useParams();
const id = params.id as string;
const state = useProxy(umkmState.umkm.findUnique);
@@ -83,7 +84,14 @@ function Page() {
<Title order={2} mb="xl">Katalog Produk</Title>
<SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="lg">
{u.produk?.map((p: any, k: number) => (
<Card key={k} withBorder padding="lg" radius="md">
<Card
key={k}
withBorder
padding="lg"
radius="md"
style={{ cursor: 'pointer' }}
onClick={() => router.push(`/darmasaba/ekonomi/umkm/produk/${p.id}`)}
>
<Card.Section>
<Image
src={p.image?.link || '/no-image.jpg'}

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

@@ -1,5 +1,4 @@
'use client'
import pasarDesaState from '@/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa';
import umkmState from '@/app/admin/(dashboard)/_state/ekonomi/umkm/umkm';
import colors from '@/con/colors';
import {
@@ -9,9 +8,9 @@ import {
} from '@mantine/core';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import {
IconBrandWhatsapp, IconMapPinFilled, IconSearch,
IconStarFilled, IconBuildingStore, IconUser,
IconShoppingBag, IconPackage
IconMapPinFilled, IconSearch,
IconBuildingStore, IconUser,
IconPackage
} from '@tabler/icons-react';
import { motion } from 'motion/react';
import { useRouter } from 'next/navigation';
@@ -21,7 +20,7 @@ import BackButton from '../../desa/layanan/_com/BackButto';
function Page() {
const router = useRouter()
const [activeTab, setActiveTab] = useState<string | null>('produk-pasar');
const [activeTab, setActiveTab] = useState<string | null>('produk-umkm');
return (
<Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
@@ -31,7 +30,7 @@ function Page() {
<Box px={{ base: 'md', md: 100 }}>
<Title order={1} c={colors["blue-button"]} fw="bold" lh={1.15} mb="md">
Pasar Desa & UMKM Darmasaba
UMKM & Produk Desa Darmasaba
</Title>
<Text ta="justify" fz={{ base: 'sm', md: 'md' }} lh={1.5} c="black" mb="xl">
Pusat informasi produk lokal dan direktori usaha warga Desa Darmasaba.
@@ -40,21 +39,14 @@ function Page() {
<Tabs value={activeTab} onChange={setActiveTab} color="blue" variant="pills" radius="md">
<Tabs.List mb="xl">
<Tabs.Tab value="produk-pasar" leftSection={<IconShoppingBag size={18} />}>
Produk Pasar Desa
</Tabs.Tab>
<Tabs.Tab value="produk-umkm" leftSection={<IconPackage size={18} />}>
Produk UMKM
Katalog Produk
</Tabs.Tab>
<Tabs.Tab value="direktori-umkm" leftSection={<IconBuildingStore size={18} />}>
Direktori UMKM
Direktori Bisnis
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="produk-pasar">
<TabProdukPasar router={router} />
</Tabs.Panel>
<Tabs.Panel value="produk-umkm">
<TabProdukUmkm router={router} />
</Tabs.Panel>
@@ -70,96 +62,6 @@ function Page() {
// --- TAB COMPONENTS ---
function TabProdukPasar({ router }: { router: any }) {
const state = useProxy(pasarDesaState.pasarDesa);
const [search, setSearch] = useState('');
const [debouncedSearch] = useDebouncedValue(search, 1000);
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const { data, page, loading, totalPages } = state.findMany;
useShallowEffect(() => {
pasarDesaState.kategoriProduk.findManyAll.load();
}, []);
useShallowEffect(() => {
pasarDesaState.pasarDesa.findMany.load(page, 8, debouncedSearch, selectedCategory || undefined);
}, [page, debouncedSearch, selectedCategory]);
return (
<Stack gap="lg">
<Grid gutter="md" align="flex-end">
<GridCol span={{ base: 12, md: 8 }}>
<TextInput
label="Cari Produk Pasar"
placeholder="Ketik nama produk..."
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
leftSection={<IconSearch size={18} />}
radius="md"
/>
</GridCol>
<GridCol span={{ base: 12, md: 4 }}>
<Select
label="Kategori"
placeholder="Pilih Kategori"
data={pasarDesaState.kategoriProduk.findManyAll.data?.map((v) => ({
value: v.id, label: v.nama
})) || []}
value={selectedCategory}
onChange={setSelectedCategory}
clearable
radius="md"
/>
</GridCol>
</Grid>
{loading ? (
<Skeleton h={400} radius="md" />
) : (
<>
<SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="lg">
{data?.map((v, k) => (
<motion.div
key={k}
onClick={() => router.push(`/darmasaba/ekonomi/pasar-desa/${v.id}`)}
whileHover={{ scale: 1.03 }}
>
<Paper p="md" radius="md" withBorder shadow="xs" style={{ cursor: 'pointer' }}>
<Image
radius="md"
src={v.image?.link || '/no-image.jpg'}
alt={v.nama}
h={180}
w="100%"
style={{ objectFit: 'cover' }}
/>
<Text mt="md" fw="bold" fz="lg" lineClamp={1}>{v.nama}</Text>
<Text c="blue" fw={700} fz="md">Rp {v.harga.toLocaleString('id-ID')}</Text>
<Flex py="xs" gap="xs" align="center">
<IconStarFilled size={16} color="#EBCB09" />
<Text size="sm">{v.rating}</Text>
</Flex>
<Flex justify="space-between" align="center">
<Flex gap={5} align="center">
<IconMapPinFilled size={16} color="red" />
<Text size="xs" c="dimmed" lineClamp={1}>{v.alamatUsaha}</Text>
</Flex>
<IconBrandWhatsapp size={18} color="green" />
</Flex>
</Paper>
</motion.div>
))}
</SimpleGrid>
<Center>
<Pagination total={totalPages} value={page} onChange={(p) => pasarDesaState.pasarDesa.findMany.load(p)} radius="md" />
</Center>
</>
)}
</Stack>
);
}
function TabProdukUmkm({ router }: { router: any }) {
const state = useProxy(umkmState.produk);
const [search, setSearch] = useState('');
@@ -210,7 +112,12 @@ function TabProdukUmkm({ router }: { router: any }) {
<>
<SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="lg">
{data?.map((v, k) => (
<motion.div key={k} whileHover={{ scale: 1.03 }}>
<motion.div
key={k}
whileHover={{ scale: 1.03 }}
onClick={() => router.push(`/darmasaba/ekonomi/umkm/produk/${v.id}`)}
style={{ cursor: 'pointer' }}
>
<Card shadow="xs" padding="md" radius="md" withBorder>
<Card.Section>
<Image
@@ -224,7 +131,10 @@ function TabProdukUmkm({ router }: { router: any }) {
{v.stok > 0 ? 'Tersedia' : 'Habis'}
</Badge>
<Text fw={700} fz="md" lineClamp={1}>{v.nama}</Text>
<Text size="sm" c="blue" fw={500} style={{ cursor: 'pointer' }} onClick={() => router.push(`/darmasaba/ekonomi/umkm/${v.umkmId}`)}>
<Text size="sm" c="blue" fw={500} style={{ cursor: 'pointer' }} onClick={(e) => {
e.stopPropagation();
router.push(`/darmasaba/ekonomi/umkm/${v.umkmId}`);
}}>
{v.umkm?.nama}
</Text>
<Text fz="lg" fw={800} c="orange">Rp {v.harga.toLocaleString('id-ID')}</Text>

134
src/app/darmasaba/(pages)/ekonomi/umkm/produk/[id]/page.tsx Normal file
View File

@@ -0,0 +1,134 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Stack, Text, Image, Skeleton, Group, Badge, Divider, Title } from '@mantine/core';
import { IconArrowBack, IconBrandWhatsapp, IconMapPin, IconUser } from '@tabler/icons-react';
import { useRouter, useParams } from 'next/navigation';
import React from 'react';
import { useProxy } from 'valtio/utils';
import { useShallowEffect } from '@mantine/hooks';
import umkmState from '@/app/admin/(dashboard)/_state/ekonomi/umkm/umkm';
function DetailProdukPasarUser() {
const router = useRouter();
const params = useParams();
const state = useProxy(umkmState.produk.findUnique);
useShallowEffect(() => {
state.load(params?.id as string);
}, []);
const data = state.data;
if (state.loading || !data) {
return (
<Stack py={10} px={{ base: 'md', md: 100 }}>
<Skeleton height={400} radius="md" />
</Stack>
);
}
return (
<Box py={20} bg={colors.Bg}>
{/* Tombol kembali */}
<Box px={{ base: 'md', md: 100 }}>
<Button
variant="subtle"
onClick={() => router.push('/darmasaba/ekonomi/umkm')}
leftSection={<IconArrowBack size={20} color={colors['blue-button']} />}
mb={15}
>
<Text fz={{ base: 'md', md: 'lg' }} lh={1.5}>
Kembali ke Katalog
</Text>
</Button>
</Box>
<Paper
w={{ base: '90%', md: '70%' }}
mx="auto"
p="lg"
radius="md"
shadow="sm"
bg="white"
>
<Stack gap="lg">
{/* Gambar Produk */}
<Image
src={data.image?.link || '/no-image.jpg'}
alt={data.nama}
radius="md"
h={{ base: 250, md: 400 }}
w="100%"
fit="cover"
fallbackSrc="/no-image.jpg"
/>
{/* Detail Produk */}
<Stack gap="xs">
<Group justify="space-between" align="flex-start">
<Stack gap={5}>
<Badge color="blue" variant="light">{data.kategoriProduk?.nama}</Badge>
<Title order={1} fw={800} c={colors['blue-button']}>
{data.nama}
</Title>
</Stack>
<Badge color={data.stok > 0 ? 'green' : 'red'} size="lg">
{data.stok > 0 ? `Stok: ${data.stok}` : 'Stok Habis'}
</Badge>
</Group>
<Text fz="2rem" fw={900} c="orange">
Rp {data.harga?.toLocaleString('id-ID')}
</Text>
<Divider my="sm" />
<Stack gap="md">
<Box>
<Title order={3} mb="xs">Informasi Penjual</Title>
<Paper withBorder p="md" radius="md" bg="gray.0">
<Group justify="space-between">
<Stack gap={4}>
<Text fw={700} fz="lg" c="blue" style={{ cursor: 'pointer' }} onClick={() => router.push(`/darmasaba/ekonomi/umkm/${data.umkmId}`)}>
{data.umkm?.nama}
</Text>
<Group gap="xs">
<IconUser size={16} color="gray" />
<Text size="sm" c="dimmed">{data.umkm?.pemilik}</Text>
</Group>
<Group gap="xs">
<IconMapPin size={16} color="red" />
<Text size="sm" c="dimmed">{data.umkm?.alamat || 'Darmasaba'}</Text>
</Group>
</Stack>
{data.umkm?.kontak && (
<Button
color="green"
radius="md"
component="a"
href={`https://wa.me/${data.umkm.kontak.replace(/[^0-9]/g, '')}`}
target="_blank"
leftSection={<IconBrandWhatsapp size={20}/>}
>
WhatsApp
</Button>
)}
</Group>
</Paper>
</Box>
<Box>
<Title order={3} mb="xs">Deskripsi Produk</Title>
<Text fz="md" lh={1.6} c="dark">
{data.deskripsi || 'Tidak ada deskripsi tersedia untuk produk ini.'}
</Text>
</Box>
</Stack>
</Stack>
</Stack>
</Paper>
</Box>
);
}
export default DetailProdukPasarUser;