27 Oct
This commit is contained in:
@@ -1,167 +1,3 @@
|
||||
// 'use client'
|
||||
// import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
|
||||
// import colors from '@/con/colors';
|
||||
// import { Box, Grid, GridCol, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
|
||||
// import { useProxy } from 'valtio/utils';
|
||||
// import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
// import { useShallowEffect } from '@mantine/hooks';
|
||||
|
||||
|
||||
// function Page() {
|
||||
// const state = useProxy(PendapatanAsliDesa.ApbDesa);
|
||||
|
||||
// useShallowEffect(() => {
|
||||
// state.findMany.load();
|
||||
// }, []);
|
||||
|
||||
// useShallowEffect(() => {
|
||||
// PendapatanAsliDesa.pembiayaan.findMany.load();
|
||||
// PendapatanAsliDesa.belanja.findMany.load();
|
||||
// PendapatanAsliDesa.pendapatan.findMany.load();
|
||||
// }, []);
|
||||
|
||||
// // Get the latest APB data
|
||||
// const latestApb = state.findMany.data?.[0];
|
||||
|
||||
// // Calculate totals
|
||||
// const totalPendapatan = latestApb?.pendapatan?.reduce((sum, item) => sum + (item?.value || 0), 0) || 0;
|
||||
// const totalBelanja = latestApb?.belanja?.reduce((sum, item) => sum + (item?.value || 0), 0) || 0;
|
||||
// const totalPembiayaan = latestApb?.pembiayaan?.reduce((sum, item) => sum + (item?.value || 0), 0) || 0;
|
||||
|
||||
|
||||
// return (
|
||||
// <Stack pos="relative" bg={colors.Bg} py="xl" gap="lg">
|
||||
// <Box px={{ base: 'md', md: 100 }}>
|
||||
// <BackButton />
|
||||
// </Box>
|
||||
// <Text ta="center" fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
|
||||
// Pendapatan Asli Desa
|
||||
// </Text>
|
||||
// <Box px={{ base: "md", md: 100 }}>
|
||||
// <Stack gap="lg" justify="center">
|
||||
// <Paper bg={colors['white-1']} p="xl">
|
||||
// <SimpleGrid cols={{ base: 1, md: 3 }} spacing="md">
|
||||
// {/* Pendapatan Card */}
|
||||
// <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
|
||||
// <Stack gap={"xs"}>
|
||||
// <Title order={3}>Pendapatan</Title>
|
||||
// {PendapatanAsliDesa.pendapatan.findMany.data?.map((item) => (
|
||||
// <Box key={item.id}>
|
||||
// <Grid>
|
||||
// <GridCol span={{ base: 12, md: 6 }}>
|
||||
// <Text fz="md" fw={500}>{item.name}</Text>
|
||||
// </GridCol>
|
||||
// <GridCol span={{ base: 12, md: 6 }}>
|
||||
// <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
|
||||
// style: 'currency',
|
||||
// currency: 'IDR',
|
||||
// minimumFractionDigits: 0
|
||||
// }).format(item.value)}</Text>
|
||||
// </GridCol>
|
||||
// </Grid>
|
||||
// </Box>
|
||||
// ))}
|
||||
// <Grid>
|
||||
// <GridCol span={{ base: 12, md: 6 }}>
|
||||
// <Text fz="lg" fw={600} mb="xs">Total Pendapatan</Text>
|
||||
// </GridCol>
|
||||
// <GridCol span={{ base: 12, md: 6 }}>
|
||||
// <Text fz="xl" fw={700} c={colors['blue-button']}>
|
||||
// {new Intl.NumberFormat('id-ID', {
|
||||
// style: 'currency',
|
||||
// currency: 'IDR',
|
||||
// minimumFractionDigits: 0
|
||||
// }).format(totalPendapatan)}
|
||||
// </Text>
|
||||
// </GridCol>
|
||||
// </Grid>
|
||||
// </Stack>
|
||||
// </Box>
|
||||
|
||||
// {/* Belanja Card */}
|
||||
// <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
|
||||
// <Stack gap={"xs"}>
|
||||
// <Title order={3}>Belanja</Title>
|
||||
// {PendapatanAsliDesa.belanja.findMany.data?.map((item) => (
|
||||
// <Box key={item.id}>
|
||||
// <Grid>
|
||||
// <GridCol span={{ base: 12, md: 6 }}>
|
||||
// <Text fz="md" fw={500}>{item.name}</Text>
|
||||
// </GridCol>
|
||||
// <GridCol span={{ base: 12, md: 6 }}>
|
||||
// <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
|
||||
// style: 'currency',
|
||||
// currency: 'IDR',
|
||||
// minimumFractionDigits: 0
|
||||
// }).format(item.value)}</Text>
|
||||
// </GridCol>
|
||||
// </Grid>
|
||||
// </Box>
|
||||
// ))}
|
||||
// <Grid>
|
||||
// <GridCol span={{ base: 12, md: 6 }}>
|
||||
// <Text fz="lg" fw={600} mb="xs">Total Belanja</Text>
|
||||
// </GridCol>
|
||||
// <GridCol span={{ base: 12, md: 6 }}>
|
||||
// <Text fz="xl" fw={700} c="orange">
|
||||
// {new Intl.NumberFormat('id-ID', {
|
||||
// style: 'currency',
|
||||
// currency: 'IDR',
|
||||
// minimumFractionDigits: 0
|
||||
// }).format(totalBelanja)}
|
||||
// </Text>
|
||||
// </GridCol>
|
||||
// </Grid>
|
||||
// </Stack>
|
||||
// </Box>
|
||||
|
||||
// {/* Pembiayaan Card */}
|
||||
// <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
|
||||
// <Stack gap={"xs"}>
|
||||
// <Title order={3}>Pembiayaan</Title>
|
||||
// {PendapatanAsliDesa.pembiayaan.findMany.data?.map((item) => (
|
||||
// <Box key={item.id}>
|
||||
// <Grid>
|
||||
// <GridCol span={{ base: 12, md: 6 }}>
|
||||
// <Text fz="md" fw={500}>{item.name}</Text>
|
||||
// </GridCol>
|
||||
// <GridCol span={{ base: 12, md: 6 }}>
|
||||
// <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
|
||||
// style: 'currency',
|
||||
// currency: 'IDR',
|
||||
// minimumFractionDigits: 0
|
||||
// }).format(item.value)}</Text>
|
||||
// </GridCol>
|
||||
// </Grid>
|
||||
// </Box>
|
||||
// ))}
|
||||
// <Grid>
|
||||
// <GridCol span={{ base: 12, md: 6 }}>
|
||||
// <Text fz="lg" fw={600} mb="xs">Total Pembiayaan</Text>
|
||||
// </GridCol>
|
||||
// <GridCol span={{ base: 12, md: 6 }}>
|
||||
// <Text fz="xl" fw={700} c="green">
|
||||
// {new Intl.NumberFormat('id-ID', {
|
||||
// style: 'currency',
|
||||
// currency: 'IDR',
|
||||
// minimumFractionDigits: 0
|
||||
// }).format(totalPembiayaan)}
|
||||
// </Text>
|
||||
// </GridCol>
|
||||
// </Grid>
|
||||
// </Stack>
|
||||
// </Box>
|
||||
|
||||
// </SimpleGrid>
|
||||
// </Paper>
|
||||
// </Stack>
|
||||
// </Box>
|
||||
// </Stack>
|
||||
// );
|
||||
// }
|
||||
|
||||
// export default Page;
|
||||
|
||||
'use client'
|
||||
import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
|
||||
import colors from '@/con/colors';
|
||||
@@ -206,32 +42,41 @@ function Page() {
|
||||
<Stack gap="lg" justify="center">
|
||||
<Paper bg={colors['white-1']} p="xl">
|
||||
<SimpleGrid cols={{ base: 1, md: 3 }} spacing="md">
|
||||
{/* Pendapatan Card */}
|
||||
<Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
|
||||
{/* Pendapatan Card */}
|
||||
<Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>Pendapatan</Title>
|
||||
{PendapatanAsliDesa.pendapatan.findMany.data?.map((item) => (
|
||||
{latestApb?.pendapatan?.map((item) => (
|
||||
<Box key={item.id}>
|
||||
<Grid>
|
||||
<GridCol span={{ base: 12, md: 6 }}>
|
||||
<GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
<Text fz="md" fw={500}>{item.name}</Text>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 6 }}>
|
||||
<Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0
|
||||
}).format(item.value)}</Text>
|
||||
<GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
<Text
|
||||
fz="md"
|
||||
fw={500}
|
||||
style={{
|
||||
wordBreak: 'break-word',
|
||||
whiteSpace: 'normal',
|
||||
textAlign: 'right',
|
||||
}}
|
||||
>
|
||||
{new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(item.value)}
|
||||
</Text>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
<Grid>
|
||||
<GridCol span={{ base: 12, md: 6 }}>
|
||||
<GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
<Text fz="lg" fw={600} mb="xs">Total Pendapatan</Text>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 6 }}>
|
||||
<Text fz="xl" fw={700} c={colors['blue-button']}>
|
||||
<GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
<Text style={{
|
||||
wordBreak: 'break-word',
|
||||
whiteSpace: 'normal'
|
||||
}} fz="xl" fw={700} c={colors['blue-button']}>
|
||||
{new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
@@ -247,18 +92,28 @@ function Page() {
|
||||
<Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>Belanja</Title>
|
||||
{PendapatanAsliDesa.belanja.findMany.data?.map((item) => (
|
||||
{latestApb?.belanja?.map((item) => (
|
||||
<Box key={item.id}>
|
||||
<Grid>
|
||||
<GridCol span={{ base: 12, md: 6 }}>
|
||||
<GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
<Text fz="md" fw={500}>{item.name}</Text>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 6 }}>
|
||||
<Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0
|
||||
}).format(item.value)}</Text>
|
||||
<GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
<Text
|
||||
fz="md"
|
||||
fw={500}
|
||||
style={{
|
||||
wordBreak: 'break-word',
|
||||
whiteSpace: 'normal',
|
||||
textAlign: 'right',
|
||||
}}
|
||||
>
|
||||
{new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0
|
||||
}).format(item.value)}
|
||||
</Text>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</Box>
|
||||
@@ -284,18 +139,28 @@ function Page() {
|
||||
<Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>Pembiayaan</Title>
|
||||
{PendapatanAsliDesa.pembiayaan.findMany.data?.map((item) => (
|
||||
{latestApb?.pembiayaan?.map((item) => (
|
||||
<Box key={item.id}>
|
||||
<Grid>
|
||||
<GridCol span={{ base: 12, md: 6 }}>
|
||||
<GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
<Text fz="md" fw={500}>{item.name}</Text>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 6 }}>
|
||||
<Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0
|
||||
}).format(item.value)}</Text>
|
||||
<GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
<Text
|
||||
fz="md"
|
||||
fw={500}
|
||||
style={{
|
||||
wordBreak: 'break-word',
|
||||
whiteSpace: 'normal',
|
||||
textAlign: 'right',
|
||||
}}
|
||||
>
|
||||
{new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0
|
||||
}).format(item.value)}
|
||||
</Text>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</Box>
|
||||
@@ -367,4 +232,3 @@ function Page() {
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
|
||||
155
src/app/darmasaba/(pages)/ekonomi/pasar-desa/[id]/page.tsx
Normal file
155
src/app/darmasaba/(pages)/ekonomi/pasar-desa/[id]/page.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, Text, Image, Skeleton, Group, Badge, Divider } from '@mantine/core';
|
||||
import { IconArrowBack, 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 */}
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
leftSection={<IconArrowBack size={20} color={colors['blue-button']} />}
|
||||
mb={15}
|
||||
>
|
||||
Kembali ke daftar produk
|
||||
</Button>
|
||||
|
||||
<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={300}
|
||||
w="100%"
|
||||
fit="cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<Box
|
||||
h={300}
|
||||
bg="gray.1"
|
||||
display="flex"
|
||||
style={{ alignItems: 'center', justifyContent: 'center', borderRadius: 'md' }}
|
||||
>
|
||||
<Text c="dimmed">Tidak ada gambar</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Detail Produk */}
|
||||
<Stack gap="xs">
|
||||
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
|
||||
{data.nama || 'Produk Tanpa Nama'}
|
||||
</Text>
|
||||
<Group>
|
||||
<Badge color="green" size="lg" radius="md">
|
||||
Rp {data.harga?.toLocaleString('id-ID')}
|
||||
</Badge>
|
||||
{data.rating && (
|
||||
<Group gap={4}>
|
||||
<IconStar size={18} color="#FFD43B" />
|
||||
<Text fz="md" fw={500}>{data.rating}</Text>
|
||||
</Group>
|
||||
)}
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<Divider my="sm" />
|
||||
|
||||
{/* Info Tambahan */}
|
||||
<Stack gap="sm">
|
||||
<Box>
|
||||
<Text fz="lg" fw={600}>Kategori</Text>
|
||||
<Group gap="xs" mt={4}>
|
||||
{data.KategoriToPasar && data.KategoriToPasar.length > 0 ? (
|
||||
data.KategoriToPasar.map((kategori) => (
|
||||
<Badge key={kategori.id} color="blue" variant="light">
|
||||
{kategori.kategori.nama}
|
||||
</Badge>
|
||||
))
|
||||
) : (
|
||||
<Text fz="sm" c="dimmed">Tidak ada kategori</Text>
|
||||
)}
|
||||
</Group>
|
||||
</Box>
|
||||
|
||||
{data.alamatUsaha && (
|
||||
<Group gap={6}>
|
||||
<IconMapPin size={18} color={colors['blue-button']} />
|
||||
<Text fz="md">{data.alamatUsaha}</Text>
|
||||
</Group>
|
||||
)}
|
||||
|
||||
{data.kontak && (
|
||||
<Group gap={6}>
|
||||
<IconPhone size={18} color={colors['blue-button']} />
|
||||
<Text fz="md">{data.kontak}</Text>
|
||||
</Group>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
<Divider my="sm" />
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Box>
|
||||
<Text fz="lg" fw={600}>Deskripsi Produk</Text>
|
||||
<Text fz="md" c="dimmed" mt={4}>
|
||||
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"
|
||||
>
|
||||
Hubungi Penjual via WhatsApp
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailProdukPasarUser;
|
||||
@@ -105,7 +105,7 @@ function Page() {
|
||||
return (
|
||||
<Stack key={k}>
|
||||
<motion.div
|
||||
onClick={() => router.push(`https://wa.me/${v.kontak?.replace(/\D/g, '')}`)}
|
||||
onClick={() => router.push(`/darmasaba/ekonomi/pasar-desa/${v.id}`)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.8 }}
|
||||
>
|
||||
|
||||
@@ -129,9 +129,7 @@ function Page() {
|
||||
|
||||
</Text>
|
||||
<Divider />
|
||||
<Text fz="sm" lh={1.5} lineClamp={3} truncate="end">
|
||||
{v.deskripsiSingkat}
|
||||
</Text>
|
||||
<Text fz="sm" lh={1.5} lineClamp={3} truncate="end" dangerouslySetInnerHTML={{ __html: v.deskripsiSingkat }} />
|
||||
<Button variant="light" radius="md" size="md" onClick={() => router.push(`/darmasaba/kesehatan/info-wabah-penyakit/${v.id}`)}>
|
||||
Selengkapnya
|
||||
</Button>
|
||||
|
||||
@@ -84,7 +84,7 @@ function Page({ params }: PageProps) {
|
||||
<TableTr>
|
||||
<TableTh w="30%">Nama Pengajar</TableTh>
|
||||
<TableTh w="30%">Nama Lembaga</TableTh>
|
||||
<TableTh w="40%">Jenjang Pendidikan</TableTh>
|
||||
<TableTh w="40%">Mengajar Di Jenjang Pendidikan</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
|
||||
Reference in New Issue
Block a user