UI Sub Menu Keamanan
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Text, Image } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<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'>
|
||||
<Image src={'/api/img/pa-desa.png'} alt=''/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
250
src/app/darmasaba/(pages)/ekonomi/demografi-pekerjaan/page.tsx
Normal file
250
src/app/darmasaba/(pages)/ekonomi/demografi-pekerjaan/page.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Paper, Text, ColorSwatch, Flex } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
import { BarChart } from '@mantine/charts';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
Pekerjaan: 'Guru',
|
||||
laki: 2,
|
||||
perempuan: 3
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
Pekerjaan: 'Belajar/Mahasiswa',
|
||||
laki: 37,
|
||||
perempuan: 38
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
Pekerjaan: 'Karyawan Bumdn',
|
||||
laki: 1,
|
||||
perempuan: 0
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
Pekerjaan: 'Buruh Tani/Perkebunan',
|
||||
laki: 1,
|
||||
perempuan: 0
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
Pekerjaan: 'Karyawan Swasta',
|
||||
laki: 3,
|
||||
perempuan: 17
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
Pekerjaan: 'Karyawan Honorer',
|
||||
laki: 2,
|
||||
perempuan: 1
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
Pekerjaan: 'Buruh Harian Lepas',
|
||||
laki: 8,
|
||||
perempuan: 5
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
Pekerjaan: 'Belum/Tidak Bekerja',
|
||||
laki: 87,
|
||||
perempuan: 44
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
Pekerjaan: ' Kepolisian RI (Polri)',
|
||||
laki: 4,
|
||||
perempuan: 0
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
Pekerjaan: 'Wiraswasta Mengurus Rumah Tangga',
|
||||
laki: 1,
|
||||
perempuan: 7
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
Pekerjaan: 'Dosen',
|
||||
laki: 1,
|
||||
perempuan: 1
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
Pekerjaan: 'Perangkat Desa',
|
||||
laki: 17,
|
||||
perempuan: 19
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
Pekerjaan: 'Nelayan',
|
||||
laki: 3,
|
||||
perempuan: 0
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
Pekerjaan: 'Penyuluh Pertanian',
|
||||
laki: 33,
|
||||
perempuan: 24
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
Pekerjaan: 'Tukang Las/Pandai Besi',
|
||||
laki: 5,
|
||||
perempuan: 0
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
Pekerjaan: 'Sopir/Driver',
|
||||
laki: 10,
|
||||
perempuan: 3
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
Pekerjaan: 'Teknisi/Listrik',
|
||||
laki: 25,
|
||||
perempuan: 0
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
Pekerjaan: 'Montir/Mekanik',
|
||||
laki: 25,
|
||||
perempuan: 0
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
Pekerjaan: 'Karyawan Hotel/Pariwisata',
|
||||
laki: 2,
|
||||
perempuan: 52
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
Pekerjaan: 'Pengrajin (Batik, Anyaman, Kayu)',
|
||||
laki: 5,
|
||||
perempuan: 25
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
Pekerjaan: 'Tukang Bangunan',
|
||||
laki: 25,
|
||||
perempuan: 5
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
Pekerjaan: 'Tukang Kayu/Furnitur',
|
||||
laki: 25,
|
||||
perempuan: 0
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
Pekerjaan: 'Penjahit',
|
||||
laki: 2,
|
||||
perempuan: 35
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
Pekerjaan: 'Pedagang Pasar',
|
||||
laki: 25,
|
||||
perempuan: 30
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
Pekerjaan: 'Warung Makan/Penjual Makanan',
|
||||
laki: 15,
|
||||
perempuan: 30
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
Pekerjaan: 'Satpam/Security',
|
||||
laki: 20,
|
||||
perempuan: 5
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
Pekerjaan: 'Pengusaha Kecil (UMKM)',
|
||||
laki: 5,
|
||||
perempuan: 20
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
Pekerjaan: 'Karyawan Restoran/Kafe',
|
||||
laki: 5,
|
||||
perempuan: 15
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
Pekerjaan: 'Freelancer',
|
||||
laki: 20,
|
||||
perempuan: 10
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
Pekerjaan: 'Fotografer',
|
||||
laki: 25,
|
||||
perempuan: 9
|
||||
},
|
||||
]
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} >
|
||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Demografi Pekerjaan
|
||||
</Text>
|
||||
<Text ta={'center'} fz={'h4'}>Desa Darmasaba memiliki komposisi penduduk yang beragam dalam sektor pekerjaan</Text>
|
||||
</Box>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Stack gap={'lg'} justify='center'>
|
||||
<Paper p={'xl'}>
|
||||
<Text fw={'bold'} fz={'h4'}>Statistik Demografi Pekerjaan Di Desa Darmasaba</Text>
|
||||
<BarChart
|
||||
type='stacked'
|
||||
p={10}
|
||||
mb={50}
|
||||
h={400}
|
||||
data={data}
|
||||
dataKey="Pekerjaan"
|
||||
series={[
|
||||
{ name: 'laki', color: '#5082EE' },
|
||||
{ name: 'perempuan', color: '#6EDF9C' },
|
||||
]}
|
||||
tickLine="y"
|
||||
xAxisProps={{
|
||||
angle: -45, // Rotate labels by -45 degrees
|
||||
textAnchor: 'end', // Anchor text to the end for better alignment
|
||||
height: 100, // Increase height for rotated labels
|
||||
interval: 0, // Show all labels
|
||||
style: {
|
||||
fontSize: '12px', // Adjust font size if needed
|
||||
overflow: 'visible',
|
||||
whiteSpace: 'nowrap'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Flex pb={30} justify={'center'} gap={'xl'} align={'center'}>
|
||||
<Box>
|
||||
<Flex gap={{ base: 0, md: 5 }} align={'center'}>
|
||||
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Laki-Laki</Text>
|
||||
<ColorSwatch color="#5082EE" size={30} />
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex gap={{ base: 0, md: 5 }} align={'center'}>
|
||||
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Perempuan</Text>
|
||||
<ColorSwatch color="#6EDF9C" size={30} />
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,119 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, CheckIcon, Combobox, ComboboxChevron, ComboboxOption, ComboboxOptions, ComboboxTarget, Group, InputBase, InputPlaceholder, Paper, SimpleGrid, Stack, Text, useCombobox } from '@mantine/core';
|
||||
import { useState } from 'react';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
import { BarChart } from '@mantine/charts';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
tahun: '2024',
|
||||
Penduduk: 400000
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
tahun: '2025',
|
||||
Penduduk: 450000
|
||||
},
|
||||
|
||||
]
|
||||
const tahun = [
|
||||
'2024',
|
||||
'2025'
|
||||
];
|
||||
function Page() {
|
||||
const combobox = useCombobox({
|
||||
onDropdownClose: () => combobox.resetSelectedOption(),
|
||||
onDropdownOpen: (eventSource) => {
|
||||
if (eventSource === 'keyboard') {
|
||||
combobox.selectActiveOption();
|
||||
} else {
|
||||
combobox.updateSelectedOptionIndex('active');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [value, setValue] = useState<string | null>('2024');
|
||||
|
||||
const options = tahun.map((item) => (
|
||||
<ComboboxOption value={item} key={item} active={item === value}>
|
||||
<Group gap="xs">
|
||||
{item === value && <CheckIcon size={12} />}
|
||||
<span>{item}</span>
|
||||
</Group>
|
||||
</ComboboxOption>
|
||||
));
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} >
|
||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Jumlah Penduduk Miskin Tahun 2024-2025
|
||||
</Text>
|
||||
</Box>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Stack gap={'lg'} justify='center'>
|
||||
<SimpleGrid
|
||||
pb={20}
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 2
|
||||
}}
|
||||
>
|
||||
<Paper p={'xl'}>
|
||||
<Text fz={'h3'}>Tahun: 2024</Text>
|
||||
<Text fw={"bold"} fz={'h1'}>4,800,000 Orang</Text>
|
||||
</Paper>
|
||||
<Paper p={'xl'}>
|
||||
<Text>Pilih Tahun</Text>
|
||||
<Combobox
|
||||
store={combobox}
|
||||
resetSelectionOnOptionHover
|
||||
withinPortal={false}
|
||||
onOptionSubmit={(val) => {
|
||||
setValue(val);
|
||||
combobox.updateSelectedOptionIndex('active');
|
||||
}}
|
||||
>
|
||||
<ComboboxTarget targetType="button">
|
||||
<InputBase
|
||||
component="button"
|
||||
type="button"
|
||||
pointer
|
||||
rightSection={<ComboboxChevron />}
|
||||
rightSectionPointerEvents="none"
|
||||
onClick={() => combobox.toggleDropdown()}
|
||||
>
|
||||
{value || <InputPlaceholder>Pick value</InputPlaceholder>}
|
||||
</InputBase>
|
||||
</ComboboxTarget>
|
||||
|
||||
<Combobox.Dropdown>
|
||||
<ComboboxOptions>{options}</ComboboxOptions>
|
||||
</Combobox.Dropdown>
|
||||
</Combobox>
|
||||
</Paper>
|
||||
</SimpleGrid>
|
||||
<Paper p={'xl'}>
|
||||
<Text pb={10} fw={'bold'} fz={'h4'}>Jumlah Penduduk Miskin Per Tahun</Text>
|
||||
<BarChart
|
||||
p={10}
|
||||
h={300}
|
||||
data={data}
|
||||
dataKey="tahun"
|
||||
series={[
|
||||
{ name: 'Penduduk', color: '#8785D3' },
|
||||
]}
|
||||
tickLine="y"
|
||||
/>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,142 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Text, Center, Paper, ColorSwatch, Flex } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
import { PieChart } from '@mantine/charts';
|
||||
|
||||
const datausiaKerja = [
|
||||
{
|
||||
id: 1,
|
||||
name: '18 - 25',
|
||||
value: 45,
|
||||
color: 'indigo.6'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '26 - 35',
|
||||
value: 35,
|
||||
color: 'teal.6'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '36 - 45',
|
||||
value: 15,
|
||||
color: 'yellow.6'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '46+',
|
||||
value: 5,
|
||||
color: 'red.6'
|
||||
},
|
||||
]
|
||||
const datakerjaPendidikan = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'SD',
|
||||
value: 10,
|
||||
color: 'indigo.6'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'SMP',
|
||||
value: 20,
|
||||
color: 'teal.6'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'SMA/SMK',
|
||||
value: 45,
|
||||
color: 'yellow.6'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'D3/S1',
|
||||
value: 25,
|
||||
color: 'red.6'
|
||||
},
|
||||
]
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} >
|
||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Jumlah Penduduk Usia Kerja Yang Menganggur
|
||||
</Text>
|
||||
</Box>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Stack gap={'lg'} justify='center'>
|
||||
<Paper p={'lg'}>
|
||||
<Text fw={'bold'} fz={'h3'}>Pengangguran Berdasarkan Usia</Text>
|
||||
<Center>
|
||||
<PieChart size={300} withLabelsLine labelsPosition="outside" labelsType="percent" withLabels data={datausiaKerja} withTooltip tooltipDataSource="segment" mx="auto" />
|
||||
</Center>
|
||||
<Flex pb={30} justify={'center'} gap={'xl'} align={'center'}>
|
||||
<Box>
|
||||
<Flex gap={{ base: 5, md: 8 }} align={'center'}>
|
||||
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>18-25</Text>
|
||||
<ColorSwatch color="#4b6Ef5" size={30} />
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex gap={{ base: 5, md: 8 }} align={'center'}>
|
||||
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>26-35</Text>
|
||||
<ColorSwatch color="#14b885" size={30} />
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex gap={{ base: 5, md: 8 }} align={'center'}>
|
||||
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>36-45</Text>
|
||||
<ColorSwatch color="#E6A03B" size={30} />
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex gap={{ base: 5, md: 8 }} align={'center'}>
|
||||
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>46+</Text>
|
||||
<ColorSwatch color="#DB524D" size={30} />
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Paper>
|
||||
<Paper p={'lg'}>
|
||||
<Text fw={'bold'} fz={'h3'}>Pengangguran Berdasarkan Pendidikan</Text>
|
||||
<Center>
|
||||
<PieChart size={300} withLabelsLine labelsPosition="outside" labelsType="percent" withLabels data={datakerjaPendidikan} withTooltip tooltipDataSource="segment" mx="auto" />
|
||||
</Center>
|
||||
<Flex pb={30} justify={'center'} gap={'xl'} align={'center'}>
|
||||
<Box>
|
||||
<Flex gap={{ base: 5, md: 8 }} align={'center'}>
|
||||
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>SD</Text>
|
||||
<ColorSwatch color="#4b6Ef5" size={30} />
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex gap={{ base: 5, md: 8 }} align={'center'}>
|
||||
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>SMP</Text>
|
||||
<ColorSwatch color="#14b885" size={30} />
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex gap={{ base: 5, md: 8 }} align={'center'}>
|
||||
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>SMA/SMK</Text>
|
||||
<ColorSwatch color="#E6A03B" size={30} />
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex gap={{ base: 5, md: 8 }} align={'center'}>
|
||||
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>D3/S1</Text>
|
||||
<ColorSwatch color="#DB524D" size={30} />
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,185 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Text, Group, Flex, Button, SimpleGrid, Paper, Center, ColorSwatch, TableTd, TableTr, Table, TableTbody, TableTh, TableThead } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
import { IconBriefcase, IconChevronDown, IconDownload, IconSchool, IconUserOff, IconUsersGroup } from '@tabler/icons-react';
|
||||
import { BarChart } from '@mantine/charts';
|
||||
|
||||
const data1 = [
|
||||
{
|
||||
id: 1,
|
||||
icon: <IconUserOff size={35} />,
|
||||
judul: 'Total Pengangguran',
|
||||
jumlah: '140',
|
||||
persentase: <Text fz={'h4'} c={'green'}>-12.5% dari 2024</Text>
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: <IconSchool size={35} />,
|
||||
judul: 'Pengangguran Terdidik',
|
||||
jumlah: '80',
|
||||
persentase: <Text fz={'h4'} c={'gray'}>57.1% dari total</Text>
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: <IconUsersGroup size={35} />,
|
||||
judul: 'Usia Produktif',
|
||||
jumlah: '125',
|
||||
persentase: <Text fz={'h4'} c={'gray'}>89.3% dari total</Text>
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: <IconBriefcase size={35} />,
|
||||
judul: 'Sedang Mencari Kerja',
|
||||
jumlah: '95',
|
||||
persentase: <Text fz={'h4'} c={'red'}>67.9% dari total</Text>
|
||||
},
|
||||
]
|
||||
|
||||
const dataPengangguran = [
|
||||
{
|
||||
id: 1,
|
||||
bulan: 'Jan',
|
||||
berpendidikan: 98,
|
||||
takberpendidikan: 74,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
bulan: 'Feb',
|
||||
berpendidikan: 85,
|
||||
takberpendidikan: 74,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
bulan: 'Mar',
|
||||
berpendidikan: 76,
|
||||
takberpendidikan: 55,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
bulan: 'Apr',
|
||||
berpendidikan: 98,
|
||||
takberpendidikan: 74,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
bulan: 'Mei',
|
||||
berpendidikan: 74,
|
||||
takberpendidikan: 54,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
bulan: 'Jun',
|
||||
berpendidikan: 55,
|
||||
takberpendidikan: 50,
|
||||
},
|
||||
]
|
||||
const dataTable = [
|
||||
{ bulan: 'Jan', total: 160, terdidik: 95, takterdidik: 65, perubahan: '-' },
|
||||
{ bulan: 'Feb', total: 155, terdidik: 90, takterdidik: 65, perubahan: '-3.1%' },
|
||||
{ bulan: 'Mar', total: 150, terdidik: 88, takterdidik: 62, perubahan: '-3.2%' },
|
||||
{ bulan: 'Apr', total: 148, terdidik: 85, takterdidik: 63, perubahan: '-1.3%' },
|
||||
{ bulan: 'Mei', total: 145, terdidik: 82, takterdidik: 63, perubahan: '-2.0%' },
|
||||
{ bulan: 'Jun', total: 140, terdidik: 80, takterdidik: 60, perubahan: '-3.4%' },
|
||||
]
|
||||
function Page() {
|
||||
const rows = dataTable.map((element) => (
|
||||
<TableTr key={element.bulan}>
|
||||
<TableTd ta={'center'}>{element.bulan}</TableTd>
|
||||
<TableTd ta={'center'}>{element.total}</TableTd>
|
||||
<TableTd ta={'center'}>{element.terdidik}</TableTd>
|
||||
<TableTd ta={'center'}>{element.takterdidik}</TableTd>
|
||||
<TableTd ta={'center'}>{element.perubahan}</TableTd>
|
||||
</TableTr>
|
||||
));
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} >
|
||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Jumlah Pengangguran 2024 - 2025
|
||||
</Text>
|
||||
<Group py={20} align='center' justify='space-between'>
|
||||
<Text fz={'h4'} fw={"bold"}>DATA PENGANGGURAN DESA</Text>
|
||||
<Flex gap={'xl'}>
|
||||
<Button c={'black'} bg={colors['white-1']} rightSection={<IconChevronDown size={20} />}>2025</Button>
|
||||
<Button leftSection={<IconDownload size={20} />}>Export</Button>
|
||||
</Flex>
|
||||
</Group>
|
||||
</Box>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Stack gap={'lg'} justify='center'>
|
||||
<SimpleGrid
|
||||
cols={1}
|
||||
pb={20}
|
||||
>
|
||||
{data1.map((v, k) => {
|
||||
return (
|
||||
<Paper px={25} key={k} py={'lg'} bg={colors['white-1']} shadow={'md'}>
|
||||
<Flex justify={'space-between'} align={'center'}>
|
||||
<Box>
|
||||
<Stack>
|
||||
<Text fz={'h4'}>{v.judul}</Text>
|
||||
<Text fz={'h2'} fw={'bold'}>{v.jumlah}</Text>
|
||||
{v.persentase}
|
||||
</Stack>
|
||||
</Box>
|
||||
{v.icon}
|
||||
</Flex>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Paper p={'lg'}>
|
||||
<Flex pb={30} justify={'flex-end'} gap={'xl'} align={'center'}>
|
||||
<Box>
|
||||
<Flex gap={{ base: 0, md: 5 }} align={'center'}>
|
||||
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Pengangguran Berpendidikan</Text>
|
||||
<ColorSwatch color="#5082EE" size={30} />
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex gap={{ base: 0, md: 5 }} align={'center'}>
|
||||
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Pengangguran Tak Berpendidikan</Text>
|
||||
<ColorSwatch color="#DA524C" size={30} />
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Center>
|
||||
<BarChart
|
||||
p={10}
|
||||
h={400}
|
||||
data={dataPengangguran}
|
||||
dataKey="bulan"
|
||||
series={[
|
||||
{ name: 'berpendidikan', color: '#5082EE' },
|
||||
{ name: 'takberpendidikan', color: '#DA524C' },
|
||||
]}
|
||||
tickLine="y"
|
||||
/>
|
||||
</Center>
|
||||
</Paper>
|
||||
<Paper p={'lg'}>
|
||||
<Text fw={'bold'} fz={'h4'}>Detail Data Pengangguran</Text>
|
||||
<Table striped highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh ta={'center'}>Bulan</TableTh>
|
||||
<TableTh ta={'center'}>Total</TableTh>
|
||||
<TableTh ta={'center'}>Terdidik</TableTh>
|
||||
<TableTh ta={'center'}>Tidak Terdidik</TableTh>
|
||||
<TableTh ta={'center'}>Perubahan</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>{rows}</TableTbody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
128
src/app/darmasaba/(pages)/ekonomi/lowongan-kerja-lokal/page.tsx
Normal file
128
src/app/darmasaba/(pages)/ekonomi/lowongan-kerja-lokal/page.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Text, TextInput, Group, SimpleGrid, Paper, Flex, Button } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
import { IconBriefcase, IconClock, IconMapPin, IconSearch } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
kerja: 'Kasir',
|
||||
tempat: 'Toko Sumber Rejeki',
|
||||
alamat: 'Desa Munggu , Badung',
|
||||
gaji: 'Rp. 2.500.000 / bulan'
|
||||
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
kerja: 'Kasir',
|
||||
tempat: 'Toko Sumber Rejeki',
|
||||
alamat: 'Desa Munggu , Badung',
|
||||
gaji: 'Rp. 2.500.000 / bulan'
|
||||
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
kerja: 'Kasir',
|
||||
tempat: 'Toko Sumber Rejeki',
|
||||
alamat: 'Desa Munggu , Badung',
|
||||
gaji: 'Rp. 2.500.000 / bulan'
|
||||
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
kerja: 'Kasir',
|
||||
tempat: 'Toko Sumber Rejeki',
|
||||
alamat: 'Desa Munggu , Badung',
|
||||
gaji: 'Rp. 2.500.000 / bulan'
|
||||
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
kerja: 'Kasir',
|
||||
tempat: 'Toko Sumber Rejeki',
|
||||
alamat: 'Desa Munggu , Badung',
|
||||
gaji: 'Rp. 2.500.000 / bulan'
|
||||
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
kerja: 'Kasir',
|
||||
tempat: 'Toko Sumber Rejeki',
|
||||
alamat: 'Desa Munggu , Badung',
|
||||
gaji: 'Rp. 2.500.000 / bulan'
|
||||
|
||||
},
|
||||
|
||||
]
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Lowongan Kerja Lokal
|
||||
</Text>
|
||||
<Group justify='center'>
|
||||
<TextInput
|
||||
radius={'xl'}
|
||||
w={{ base: 500, md: 700 }}
|
||||
placeholder='Cari Pekerjaan'
|
||||
leftSection={<IconSearch size={20} />}
|
||||
/>
|
||||
</Group>
|
||||
</Box>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Stack gap={'lg'}>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 3
|
||||
}}
|
||||
>
|
||||
{data.map((v, k) => {
|
||||
return (
|
||||
<Paper key={k} p={'xl'}>
|
||||
<Stack gap={'md'}>
|
||||
<Box>
|
||||
<Flex gap={'xl'} align={'center'}>
|
||||
<IconBriefcase color={colors['blue-button']} size={50} />
|
||||
<Box>
|
||||
<Text fw={'bold'} fz={'h4'} c={colors['blue-button']}>{v.kerja}</Text>
|
||||
<Text fz={'h4'}>{v.tempat}</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex gap={'xl'} align={'center'}>
|
||||
<IconMapPin color={colors['blue-button']} size={50} />
|
||||
<Text fz={'h4'}>{v.alamat}</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex gap={'xl'} align={'center'}>
|
||||
<IconClock color={colors['blue-button']} size={50} />
|
||||
<Box>
|
||||
<Text fw={'bold'} fz={'h4'} c={colors['blue-button']}>Full Time</Text>
|
||||
<Text fz={'h4'}>{v.gaji}</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
<Button onClick={() => router.push('https://www.whatsapp.com/?lang=id')} bg={colors['blue-button']}>Lamar Sekarang</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Box >
|
||||
</Stack >
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
182
src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx
Normal file
182
src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Combobox, Flex, Group, Image, InputBase, InputPlaceholder, Paper, SimpleGrid, Stack, Text, TextInput, useCombobox } from '@mantine/core';
|
||||
import { IconArrowDown, IconMapPinFilled, IconSearch, IconShoppingCartFilled, IconStarFilled } from '@tabler/icons-react';
|
||||
import { useState } from 'react';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { motion } from 'motion/react';
|
||||
|
||||
const groceries = [
|
||||
'Makanan',
|
||||
'Minuman',
|
||||
'Pakaian',
|
||||
'Alat Dapur',
|
||||
'Alat Mandi',
|
||||
'Furniture',
|
||||
];
|
||||
|
||||
const dataBarang = [
|
||||
{
|
||||
id: 1,
|
||||
image: '/api/img/semat.png',
|
||||
judul: 'Semat Bambu / Semat Banten',
|
||||
harga: 'Rp. 3000 / pcs',
|
||||
bintang: '4.9',
|
||||
alamat: 'Jl. Kecubung no.6'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: '/api/img/kerupuk.png',
|
||||
judul: 'Kerupuk Babi',
|
||||
harga: 'Rp. 12000 / pcs',
|
||||
bintang: '4.9',
|
||||
alamat: 'Jl. Kenari no.7'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: '/api/img/beras.png',
|
||||
judul: 'beras Merah Organik',
|
||||
harga: 'Rp. 40000 / 1 kg',
|
||||
bintang: '4.9',
|
||||
alamat: 'Jl. Mawar no.8'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: '/api/img/genteng.png',
|
||||
judul: 'Genteng',
|
||||
harga: 'Rp. 3600 / pcs',
|
||||
bintang: '4.9',
|
||||
alamat: 'Jl. Kecubung no.16'
|
||||
},
|
||||
|
||||
]
|
||||
function Page() {
|
||||
const [search, setSearch] = useState('');
|
||||
const combobox = useCombobox({
|
||||
onDropdownClose: () => {
|
||||
combobox.resetSelectedOption();
|
||||
combobox.focusTarget();
|
||||
setSearch('');
|
||||
},
|
||||
|
||||
onDropdownOpen: () => {
|
||||
combobox.focusSearchInput();
|
||||
},
|
||||
});
|
||||
|
||||
const [value, setValue] = useState<string | null>(null);
|
||||
|
||||
const options = groceries
|
||||
.filter((item) => item.toLowerCase().includes(search.toLowerCase().trim()))
|
||||
.map((item) => (
|
||||
<Combobox.Option value={item} key={item}>
|
||||
{item}
|
||||
</Combobox.Option>
|
||||
));
|
||||
const router = useRouter()
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Pasar Desa
|
||||
</Text>
|
||||
<Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
|
||||
Pasar Desa Online merupakan Media Promosi yang bertujuan untuk membantu warga desa dalam memasarkan dan memperkenalkan produknya kepada masyarakat.
|
||||
</Text>
|
||||
</Box>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Stack gap={'lg'}>
|
||||
<SimpleGrid
|
||||
pb={30}
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 2
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Combobox
|
||||
store={combobox}
|
||||
withinPortal={false}
|
||||
onOptionSubmit={(val) => {
|
||||
setValue(val);
|
||||
combobox.closeDropdown();
|
||||
}}
|
||||
>
|
||||
<Combobox.Target>
|
||||
<InputBase
|
||||
component="button"
|
||||
type="button"
|
||||
pointer
|
||||
rightSection={<Combobox.Chevron />}
|
||||
onClick={() => combobox.toggleDropdown()}
|
||||
rightSectionPointerEvents="none"
|
||||
>
|
||||
{value || <InputPlaceholder>Kategori</InputPlaceholder>}
|
||||
</InputBase>
|
||||
</Combobox.Target>
|
||||
|
||||
<Combobox.Dropdown>
|
||||
<Combobox.Search
|
||||
value={search}
|
||||
onChange={(event) => setSearch(event.currentTarget.value)}
|
||||
placeholder="Search groceries"
|
||||
/>
|
||||
<Combobox.Options>
|
||||
{options.length > 0 ? options : <Combobox.Empty>Nothing found</Combobox.Empty>}
|
||||
</Combobox.Options>
|
||||
</Combobox.Dropdown>
|
||||
</Combobox>
|
||||
</Box>
|
||||
<Box>
|
||||
<TextInput
|
||||
placeholder='Cari Produk'
|
||||
leftSection={<IconSearch size={20} />}
|
||||
/>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
<SimpleGrid cols={{ base: 1, md: 4 }}>
|
||||
{dataBarang.map((v, k) => {
|
||||
return (
|
||||
<Stack key={k}>
|
||||
<motion.div
|
||||
onClick={() => router.push('https://www.whatsapp.com/?lang=id')}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.8 }}
|
||||
>
|
||||
<Paper p={'lg'}>
|
||||
<Image radius={'lg'} src={v.image} alt='' />
|
||||
<Text py={10} fw={'bold'} fz={'lg'}>{v.judul}</Text>
|
||||
<Text fz={'md'}>{v.harga}</Text>
|
||||
<Flex py={10} gap={'md'}>
|
||||
<IconStarFilled size={20} color='#EBCB09' />
|
||||
<Text fz={'sm'} ml={2}>{v.bintang}</Text>
|
||||
</Flex>
|
||||
<Flex justify={'space-between'} align={'center'}>
|
||||
<Box>
|
||||
<Flex gap={'md'} align={'center'}>
|
||||
<IconMapPinFilled size={20} color='red' />
|
||||
<Text fz={'sm'} ml={2}>{v.alamat}</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
<IconShoppingCartFilled size={20} color={colors['blue-button']} />
|
||||
</Flex>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Stack>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Group justify='center'>
|
||||
<Button bg={colors['blue-button']} rightSection={<IconArrowDown size={20} color={colors['white-1']} />} fz={'md'}>Lihat Produk Lainnya</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,99 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Text, SimpleGrid, Paper } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
import { LineChart } from '@mantine/charts';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'Bantuan Tunai',
|
||||
deskripsi: 'Bantuan keuangan langsung bagi keluarga kurang mampu'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Pelatihan Kerja',
|
||||
deskripsi: 'Program pelatihan keterampilan untuk meningkatkan peluang kerja'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'Subsidi Pangan',
|
||||
deskripsi: 'Distribusi bahan pangan bersubsidi bagi masyarakat kurang mampu'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
judul: 'Layanan Kesehatan Gratis',
|
||||
deskripsi: 'Akses kesehatan gratis bagi masyarakat kurang mampu'
|
||||
},
|
||||
]
|
||||
const dataStatistik = [
|
||||
{
|
||||
id: 1,
|
||||
tahun: '2022',
|
||||
Kemiskinan: 400000
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
tahun: '2023',
|
||||
Kemiskinan: 450000
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
tahun: '2024',
|
||||
Kemiskinan: 500000
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
tahun: '2025',
|
||||
Kemiskinan: 400000
|
||||
},
|
||||
]
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} >
|
||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Program Kemiskinan
|
||||
</Text>
|
||||
<Text ta={'center'} fz={'h4'}>Berbagai program bantuan untuk mengurangi kemiskinan dan meningkatkan kesejahteraan masyarakat</Text>
|
||||
</Box>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Stack gap={'lg'} justify='center'>
|
||||
<SimpleGrid
|
||||
pb={10}
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 2
|
||||
}}
|
||||
>
|
||||
{data.map((v, k) => {
|
||||
return (
|
||||
<Paper p={'xl'} key={k}>
|
||||
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
|
||||
<Text fz={'lg'} c={'black'}>{v.deskripsi}</Text>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Paper p={'xl'}>
|
||||
<Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>Statistik Kemiskinan Masyarakat</Text>
|
||||
<LineChart
|
||||
h={300}
|
||||
data={dataStatistik}
|
||||
dataKey="tahun"
|
||||
series={[
|
||||
{ name: 'Kemiskinan', color: colors['blue-button'] },
|
||||
]}
|
||||
curveType="linear"
|
||||
/>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,69 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Text, Paper } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
import { BarChart } from '@mantine/charts';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
sektor: 'Sektor Pertanian',
|
||||
Ton: 20
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
sektor: 'Sektor Peternakan',
|
||||
Ton: 5
|
||||
},
|
||||
|
||||
]
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} >
|
||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Sektor Unggulan Desa Darmasaba
|
||||
</Text>
|
||||
<Text ta={'center'} fz={'h4'}> Desa Darmasaba dikenal sebagai desa dengan potensi unggulan di sektor pertanian dan peternakan</Text>
|
||||
</Box>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Stack gap={'lg'} justify='center'>
|
||||
<Paper p={'xl'}>
|
||||
<Text fw={'bold'} fz={'h4'}>Jumlah Penduduk Miskin Per Tahun</Text>
|
||||
<Text fz={'h4'} ta={'justify'}>
|
||||
Pertanian di Darmasaba berfokus pada padi, sayuran, dan hortikultura yang dikembangkan dengan metode pertanian
|
||||
organik serta sistem irigasi tradisional yang efisien. Keberlanjutan dalam pertanian juga didukung dengan pemanfaatan
|
||||
teknologi modern untuk meningkatkan produktivitas hasil panen.
|
||||
</Text>
|
||||
</Paper>
|
||||
<Paper p={'xl'}>
|
||||
<Text fw={'bold'} fz={'h4'}>Sektor Peternakan</Text>
|
||||
<Text fz={'h4'} ta={'justify'}>
|
||||
Di bidang peternakan, Desa Darmasaba memiliki potensi besar dalam pengembangan sapi, ayam, dan babi. Sistem
|
||||
peternakan yang diterapkan mengutamakan pengelolaan pakan alami dan perawatan hewan yang sehat, sehingga
|
||||
menghasilkan produk ternak berkualitas tinggi.
|
||||
</Text>
|
||||
</Paper>
|
||||
<Paper p={'xl'}>
|
||||
<Text pb={10} fw={'bold'} fz={'h4'}>Statistik Sektor Unggulan Darmasaba</Text>
|
||||
<BarChart
|
||||
p={10}
|
||||
h={300}
|
||||
data={data}
|
||||
dataKey="sektor"
|
||||
series={[
|
||||
{ name: 'Ton', color: colors['blue-button'] },
|
||||
]}
|
||||
tickLine="y"
|
||||
/>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,24 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Text, Image } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Text px={{ base: 'md', md: 100 }} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Struktur Organisasi dan SK Pengurus BUMDesa
|
||||
</Text>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Stack gap={'lg'} justify='center'>
|
||||
<Image src={'/api/img/bpddarmasaba.png'} alt='' />
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
Reference in New Issue
Block a user