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

QC Admin - User Menu Ekonomi : Jumlah Pengangguran

Browse Source
This commit is contained in:
nico
2025-09-16 10:11:54 +08:00
parent a5d841bb6b
commit 4ceea5203f
97 changed files with 6023 additions and 3481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/darmasaba/(pages)/desa/potensi/page.tsx
View File

@@ -76,7 +76,7 @@ function Page() {
</Paper>
</Flex>
<SimpleGrid py={48} cols={{ base: 1, sm: 2, lg: 3 }} spacing="2xl">
<SimpleGrid py={48} cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
{loading ? (
Array.from({ length: 6 }).map((_, i) => (
<Skeleton key={i} h={360} radius="xl" />

32
src/app/darmasaba/(pages)/desa/profile/ui/profileDesa.tsx
View File

@@ -1,6 +1,5 @@
import colors from '@/con/colors';
import { Center, Paper, SimpleGrid, Box, Text } from '@mantine/core';
import React from 'react';
import { Box, Center, Paper } from '@mantine/core';
function ProfileDesa() {
return (
@@ -12,35 +11,6 @@ function ProfileDesa() {
</Center>
</Paper>
</Center>
<Center>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<SimpleGrid
cols={{
base: 1,
sm: 3
}}
>
<Box>
<Paper p={"sm"} w={{ base: "100%", md: "100%" }}>
<Text fz={50} c={colors['blue-button']} ta={"center"} fw={"bold"}>8</Text>
<Text fz={{ base: "md", md: "h3"}} ta={"center"}>Tempat Wisata</Text>
</Paper>
</Box>
<Box>
<Paper p={"sm"} w={{ base: "100%", md: "100%" }}>
<Text fz={50} c={colors['blue-button']} ta={"center"} fw={"bold"}>8</Text>
<Text fz={{ base: "md", md: "h3"}} ta={"center"}>Tempat Wisata</Text>
</Paper>
</Box>
<Box>
<Paper p={"sm"} w={{ base: "100%", md: "100%" }}>
<Text fz={50} c={colors['blue-button']} ta={"center"} fw={"bold"}>8</Text>
<Text fz={{ base: "md", md: "h3"}} ta={"center"}>Tempat Wisata</Text>
</Paper>
</Box>
</SimpleGrid>
</Paper>
</Center>
</Box>
);
}

4
src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx
View File

@@ -54,7 +54,7 @@ function SemuaPerbekel() {
{data.map((v: any, k: number) => (
<Paper
key={k}
radius="2xl"
radius="xl"
shadow="md"
withBorder
p="lg"
@@ -65,7 +65,7 @@ function SemuaPerbekel() {
className="hover:shadow-xl hover:scale-[1.02]"
>
<Stack gap="md" align="center">
<Box w="100%" h={300} style={{ overflow: "hidden", borderRadius: "1rem" }}>
<Box w="100%" h={500} style={{ overflow: "hidden", borderRadius: "1rem" }}>
<Image
src={v.image?.link}
alt={v.nama || "Foto Perbekel"}

56
src/app/darmasaba/(pages)/ekonomi/jumlah-pengangguran/page.tsx
View File

@@ -19,8 +19,14 @@ type DataPengangguran = {
function Page() {
const [chartData, setChartData] = useState<DataPengangguran[]>([])
const [mounted, setMounted] = useState(false)
const [yearlyData, setYearlyData] = useState<{
total: number;
educated: number;
uneducated: number;
year: number;
} | null>(null);
const state = useProxy(jumlahPengangguranState.jumlahPengangguran)
// const [selectedYear, setSelectedYear] = useState<string | null>(null);
const currentYear = new Date().getFullYear();
useShallowEffect(() => {
setMounted(true)
@@ -30,14 +36,36 @@ function Page() {
useEffect(() => {
setMounted(true);
if (state.findMany.data) {
// Set chart data
setChartData(state.findMany.data.map((item) => ({
id: item.id,
bulan: item.month,
berpendidikan: Number(item.educatedUnemployment),
takberpendidikan: Number(item.uneducatedUnemployment),
})));
// Calculate yearly totals
const currentYearData = state.findMany.data.filter(item => item.year === currentYear);
if (currentYearData.length > 0) {
const yearlyTotal = {
total: 0,
educated: 0,
uneducated: 0,
year: currentYear
};
currentYearData.forEach(item => {
yearlyTotal.total += Number(item.totalUnemployment) || 0;
yearlyTotal.educated += Number(item.educatedUnemployment) || 0;
yearlyTotal.uneducated += Number(item.uneducatedUnemployment) || 0;
});
setYearlyData(yearlyTotal);
} else {
setYearlyData(null);
}
}
}, [state.findMany.data]);
}, [state.findMany.data, currentYear]);
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
@@ -65,10 +93,10 @@ function Page() {
<IconUserOff size={35} color={colors['blue-button']} />
<Text fz="h4" fw={600}>Total Pengangguran</Text>
<Text fz="h2" fw={700} c={colors['blue-button']}>
{state.findMany.data?.[0]?.totalUnemployment || 0} Orang
{yearlyData?.total.toLocaleString() || 0} Orang
</Text>
<Text fz="sm" c="dimmed">
Data tahun {state.findMany.data?.[0]?.year ? new Date(state.findMany.data[0].year).getFullYear() : ''}
Total data tahun {currentYear}
</Text>
</Flex>
</Paper>
@@ -79,12 +107,14 @@ function Page() {
<IconSchool size={35} color="#5082EE" />
<Text fz="h4" fw={600}>Pengangguran Terdidik</Text>
<Text fz="h2" fw={700} c="#5082EE">
{state.findMany.data?.[0]?.educatedUnemployment || 0} Orang
{yearlyData?.educated.toLocaleString() || 0} Orang
</Text>
<Text fz="sm" c="dimmed">
{state.findMany.data?.[0]?.totalUnemployment ?
`${Math.round((state.findMany.data[0].educatedUnemployment / state.findMany.data[0].totalUnemployment) * 100)}% dari total` :
'0% dari total'}
{yearlyData ?
<>
{((yearlyData.educated / yearlyData.total) * 100).toFixed(1)}%
dari total pengangguran
</> : 'Tidak ada data'}
</Text>
</Flex>
</Paper>
@@ -95,12 +125,14 @@ function Page() {
<IconSchoolOff size={35} color="#DA524C" />
<Text fz="h4" fw={600}>Pengangguran Tidak Terdidik</Text>
<Text fz="h2" fw={700} c="#DA524C">
{state.findMany.data?.[0]?.uneducatedUnemployment || 0} Orang
{yearlyData?.uneducated.toLocaleString() || 0} Orang
</Text>
<Text fz="sm" c="dimmed">
{state.findMany.data?.[0]?.totalUnemployment ?
`${Math.round((state.findMany.data[0].uneducatedUnemployment / state.findMany.data[0].totalUnemployment) * 100)}% dari total` :
'0% dari total'}
{yearlyData ?
<>
{((yearlyData.uneducated / yearlyData.total) * 100).toFixed(1)}%
dari total pengangguran
</> : 'Tidak ada data'}
</Text>
</Flex>
</Paper>

2
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/[id]/page.tsx
View File

@@ -54,7 +54,7 @@ function Page() {
const tarif = (data?.tarifdanlayanan as TarifDanLayanan) || null;
const kontak = (data?.kontak as Kontak) || {
telepon: '(0361) 123456',
whatsapp: '081234567890',
whatsapp: '6289647037426',
email: 'info@fasilitas-kesehatan.id'
};
const lokasi = (data?.lokasi as Lokasi) || {

6
src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx
View File

@@ -25,10 +25,12 @@ import { IconSearch, IconFileInfo, IconMail, IconBrandWhatsapp } from '@tabler/i
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import BackButton from '../../desa/layanan/_com/BackButto';
import { useDebouncedValue } from '@mantine/hooks';
function Page() {
const listData = useProxy(daftarInformasiPublik)
const [search, setSearch] = useState('')
const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
const {
data,
@@ -39,8 +41,8 @@ function Page() {
} = listData.findMany
useShallowEffect(() => {
load(page, 5, search)
}, [page, search])
load(page, 5, debouncedSearch)
}, [page, debouncedSearch])
if (loading || !data) {
return (

70
src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx
View File

@@ -1,5 +1,19 @@
"use client";
import profileLandingPageState from "@/app/admin/(dashboard)/_state/landing-page/profile";
import { Box, Center, Image, Paper, SimpleGrid, Stack, Text, Tooltip } from "@mantine/core";
import {
Box,
Center,
Image,
Paper,
SimpleGrid,
Stack,
Text,
Tooltip,
Skeleton,
useMantineColorScheme,
ScrollArea,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { motion } from "framer-motion";
import { useTransitionRouter } from "next-view-transitions";
@@ -11,29 +25,36 @@ type ProgramInovasiItem = Prisma.ProgramInovasiGetPayload<{ include: { image: tr
function ModuleItem({ data }: { data: ProgramInovasiItem }) {
const router = useTransitionRouter();
const { colorScheme } = useMantineColorScheme();
const isDark = colorScheme === "dark";
return (
<motion.div whileHover={{ scale: 1.04 }}>
<motion.div whileHover={{ scale: 1.03 }}>
<Tooltip label={`Lihat ${data.name}`} withArrow>
<Paper
onClick={() => router.push(`/darmasaba/program-inovasi/${data.id}`)}
p="xl"
radius="2xl"
bg="white"
className="cursor-pointer transition-all shadow-md hover:shadow-xl"
p="lg"
radius="xl"
shadow="sm"
role="button"
tabIndex={0}
className="cursor-pointer transition-all"
bg={isDark ? "dark.6" : "white"}
>
<Center h={180}>
<Center h={160}>
{data.image?.link ? (
<Image
src={data.image.link}
alt={data.name}
fit="contain"
radius="lg"
radius="md"
fit="cover"
h={140}
w="100%"
loading="lazy"
style={{ objectFit: "contain", objectPosition: "center" }}
/>
) : (
<Stack align="center" gap="xs">
<IconPhotoOff size={40} stroke={1.5} />
<IconPhotoOff size={38} stroke={1.5} />
<Text size="sm" c="dimmed">
Belum ada gambar
</Text>
@@ -41,7 +62,7 @@ function ModuleItem({ data }: { data: ProgramInovasiItem }) {
)}
</Center>
<Box mt="md">
<Text fw={600} ta="center" size="lg" c="black">
<Text fw={600} ta="center" size="md">
{data.name}
</Text>
</Box>
@@ -58,12 +79,22 @@ function ModuleView() {
listImageState.findMany.load();
}, []);
if (!listImageState.findMany.loading && !listImageState.findMany.data?.length) {
if (listImageState.findMany.loading) {
return (
<SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg" mt="lg">
{Array.from({ length: 3 }).map((_, i) => (
<Skeleton key={i} height={220} radius="xl" />
))}
</SimpleGrid>
);
}
if (!listImageState.findMany.data?.length) {
return (
<Center h={320}>
<Stack align="center" gap="sm">
<IconPhotoOff size={54} stroke={1.5} />
<Text size="lg" fw={600} c="white">
<Text size="lg" fw={600}>
Belum ada program inovasi
</Text>
<Text size="sm" c="dimmed">
@@ -75,11 +106,20 @@ function ModuleView() {
}
return (
<SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="xl" mt="lg">
<ScrollArea h={280} // ✅ tinggi fixed, bisa disesuaikan
scrollbarSize={8}
offsetScrollbars
type="auto"
styles={{
viewport: { paddingRight: 8 }, // kasih jarak biar scroll nggak dempet
}}
>
<SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg" mt="lg">
{listImageState.findMany.data?.map((item) => (
<ModuleItem key={item.id} data={item} />
))}
</SimpleGrid>
</ScrollArea>
);
}

6
src/app/darmasaba/_com/main-page/landing-page/index.tsx
View File

@@ -36,7 +36,7 @@ const getCurrentTime = () => {
};
const isWorkingHours = (currentTime: string): boolean => {
const [openTime, closeTime] = ["08:00", "16:00"];
const [openTime, closeTime] = ["08:00", "17:00"];
const compareTimes = (time1: string, time2: string) => {
const [hour1, minute1] = time1.split(":").map(Number);
const [hour2, minute2] = time2.split(":").map(Number);
@@ -54,8 +54,8 @@ const getWorkStatus = (day: string, currentTime: string): { status: string; mess
}
const isOpen = isWorkingHours(currentTime);
return isOpen
? { status: "Buka", message: "08:00 - 16:00" }
: { status: "Tutup", message: "08:00 - 16:00" };
? { status: "Buka", message: "08:00 - 17:00" }
: { status: "Tutup", message: "08:00 - 17:00" };
};
function LandingPage() {