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;
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
import colors from '@/con/colors';
|
||||||
|
import { Stack, Box, Text, List, ListItem, Paper, SimpleGrid, Image } from '@mantine/core';
|
||||||
|
import React from 'react';
|
||||||
|
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
image: '/api/img/administrasi-digital.png',
|
||||||
|
judul: 'Layanan Administrasi Digital',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem pengurusan dokumen kependudukan online.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pembuatan KTP, KK, Surat Keterangan secara daring.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Antrian dan pembayaran pajak berbasis aplikasi mobile.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem informasi kependudukan terintegrasi.</ListItem>
|
||||||
|
</List>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
image: '/api/img/edukasi-digital.png',
|
||||||
|
judul: 'Edukasi Digital',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Ruang Belajar Digital dengan akses internet gratis.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pelatihan komputer dan literasi digital untuk semua usia.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Kursus online keterampilan digital (desain, pemrograman, marketing).</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Beasiswa pendidikan teknologi untuk pemuda desa.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Perpustakaan digital dengan koleksi buku elektronik.</ListItem>
|
||||||
|
</List>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
image: '/api/img/ekonomi-digital.png',
|
||||||
|
judul: 'Ekonomi Digital',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Marketplace produk UMKM Darmasaba.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Platform pemasaran hasil pertanian dan kerajinan lokal.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem pembayaran digital untuk pelaku usaha desa.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Inkubator bisnis digital untuk wirausaha muda.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pelatihan e-commerce dan digital marketing.</ListItem>
|
||||||
|
</List>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
image: '/api/img/kesehatan-daring.png',
|
||||||
|
judul: 'Kesehatan Daring',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Telemedicine dengan dokter dan puskesmas.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Monitoring kesehatan berbasis aplikasi.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pendaftaran antrian puskesmas online.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Edukasi kesehatan melalui platform digital.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Rekam medis elektronik.</ListItem>
|
||||||
|
</List>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
image: '/api/img/pertanian-cerdas.png',
|
||||||
|
judul: 'Pertanian Cerdas',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem informasi cuaca dan prediksi pertanian.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Konsultasi pertanian online dengan ahli.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Penjualan hasil pertanian melalui platform digital.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pelatihan pertanian modern berbasis teknologi.</ListItem>
|
||||||
|
</List>
|
||||||
|
},
|
||||||
|
]
|
||||||
|
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"}>
|
||||||
|
Desa Digital / Smart Village
|
||||||
|
</Text>
|
||||||
|
<Text ta={'center'} fz={'h4'}>Mewujudkan Desa Darmasaba sebagai pusat inovasi digital yang memberdayakan masyarakat, meningkatkan kesejahteraan, dan menciptakan peluang ekonomi berbasis teknologi.</Text>
|
||||||
|
</Box>
|
||||||
|
<Box px={{ base: "md", md: 100 }}>
|
||||||
|
<Stack gap={'lg'} justify='center'>
|
||||||
|
<SimpleGrid
|
||||||
|
pb={10}
|
||||||
|
cols={{
|
||||||
|
base: 1,
|
||||||
|
md: 3
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.map((v, k) => {
|
||||||
|
return (
|
||||||
|
<Paper p={'xl'} key={k}>
|
||||||
|
<Image src={v.image} pb={10} radius={10} alt='' />
|
||||||
|
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
|
||||||
|
<Box pr={'lg'}>
|
||||||
|
{v.deskripsi}
|
||||||
|
</Box>
|
||||||
|
</Paper>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</SimpleGrid>
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
import colors from '@/con/colors';
|
||||||
|
import { Box, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||||
|
import { IconBell, IconFileCheckFilled, IconMessageCircleQuestion } from '@tabler/icons-react';
|
||||||
|
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
icon: <IconFileCheckFilled size={50} color={colors['blue-button']} />,
|
||||||
|
judul: 'Administrasi Online',
|
||||||
|
deskripsi: 'Pengurusan surat dan dokumen secara digital tanpa perlu datang ke kantor desa'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
icon: <IconMessageCircleQuestion size={50} color={colors['blue-button']} />,
|
||||||
|
judul: 'Pengaduan Masyarakat',
|
||||||
|
deskripsi: 'Sampaikan keluhan dan aspirasi Anda melalui platform digital kami'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
icon: <IconBell size={50} color={colors['blue-button']} />,
|
||||||
|
judul: 'Informasi Desa',
|
||||||
|
deskripsi: 'Akses berita dan pengumuman terbaru seputar kegiatan desa'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
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"}>
|
||||||
|
Layanan Online Desa
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box px={{ base: "md", md: 100 }}>
|
||||||
|
<Stack gap={'lg'} justify='center'>
|
||||||
|
<SimpleGrid
|
||||||
|
pb={10}
|
||||||
|
cols={{
|
||||||
|
base: 1,
|
||||||
|
md: 1
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.map((v, k) => {
|
||||||
|
return (
|
||||||
|
<Stack key={k} >
|
||||||
|
|
||||||
|
<Paper p={'xl'} >
|
||||||
|
<Box>
|
||||||
|
{v.icon}
|
||||||
|
</Box>
|
||||||
|
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
|
||||||
|
<Text fz={'lg'} c={'black'}>{v.deskripsi}</Text>
|
||||||
|
</Paper>
|
||||||
|
</Stack>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</SimpleGrid>
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
import colors from '@/con/colors';
|
||||||
|
import { Stack, Box, Text, SimpleGrid, Paper, Center, Button } from '@mantine/core';
|
||||||
|
import React from 'react';
|
||||||
|
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||||
|
import { IconBuildingCircus, IconChartLine, IconLeaf, IconRecycle, IconTrophy } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
icon: <IconLeaf size={50} color={colors['blue-button']} />,
|
||||||
|
judul: 'Ekowisata dan Desa Hijau',
|
||||||
|
deskripsi: 'Inisiatif ramah lingkungan untuk desa berkelanjutan'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
icon: <IconTrophy size={50} color={colors['blue-button']} />,
|
||||||
|
judul: 'Kompetisi dan Festival Desa',
|
||||||
|
deskripsi: 'Ajang kompetisi inovasi dan festival tahunan desa'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
icon: <IconBuildingCircus size={50} color={colors['blue-button']} />,
|
||||||
|
judul: 'Wisata Kreatif dan Budaya',
|
||||||
|
deskripsi: 'Promosi destinasi wisata berbasis budaya dan alam'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
icon: <IconChartLine size={50} color={colors['blue-button']} />,
|
||||||
|
judul: 'Ekonomi Kreatif',
|
||||||
|
deskripsi: 'Mendukung pelaku UMKM dengan platform digital untuk mempromosikan produk lokal ke pasar global'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
icon: <IconRecycle size={50} color={colors['blue-button']} />,
|
||||||
|
judul: 'Smart Waste Management',
|
||||||
|
deskripsi: 'Inisiatif pengelolaan sampah berbasis teknologi untuk menciptakan lingkungan yang bersih dan berkelanjutan.'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
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 Kreatif Desa
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box px={{ base: "md", md: 100 }}>
|
||||||
|
<Stack gap={'lg'} justify='center'>
|
||||||
|
<SimpleGrid
|
||||||
|
cols={{
|
||||||
|
base: 1,
|
||||||
|
md: 3
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.map((v, k) => {
|
||||||
|
return (
|
||||||
|
<Stack key={k} >
|
||||||
|
<Paper p={'xl'} >
|
||||||
|
<Center pb={20}>
|
||||||
|
{v.icon}
|
||||||
|
</Center>
|
||||||
|
<Text ta={'center'} fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
|
||||||
|
<Text py={10} ta={'center'} fz={'lg'} c={'black'}>{v.deskripsi}</Text>
|
||||||
|
<Center>
|
||||||
|
<Button bg={colors['blue-button']}>Selengkapnya</Button>
|
||||||
|
</Center>
|
||||||
|
</Paper>
|
||||||
|
</Stack>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</SimpleGrid>
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
118
src/app/darmasaba/(pages)/keamanan/laporan-publik/page.tsx
Normal file
118
src/app/darmasaba/(pages)/keamanan/laporan-publik/page.tsx
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
import colors from '@/con/colors';
|
||||||
|
import { Stack, Box, Text, Flex, ColorSwatch, SimpleGrid, List, ListItem, Button, Paper, Title } from '@mantine/core';
|
||||||
|
import React from 'react';
|
||||||
|
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||||
|
import { IconArrowRight } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
judul: 'Kasus Pencurian Banjar Tengah',
|
||||||
|
tanggal: '3 Februari 2025, 02:00 WITA',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem>Laporan ke Polsek setempat</ListItem>
|
||||||
|
<ListItem>Penyisiran area oleh Pecalang</ListItem>
|
||||||
|
<ListItem>Koordinasi dengan dealer motor</ListItem>
|
||||||
|
<ListItem>Penyebaran informasi ke grup keamanan</ListItem>
|
||||||
|
</List>,
|
||||||
|
button: <Button fz={'md'} fullWidth bg={'#2A742D'}>Terselesaikan</Button>
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
judul: 'Kasus Narkoba Banjar Kaja',
|
||||||
|
tanggal: '10 Februari 2025, 22:30 WITA',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem>Koordinasi dengan Satres Narkoba</ListItem>
|
||||||
|
<ListItem>Penggerebekan lokasi</ListItem>
|
||||||
|
<ListItem>Pengamanan barang bukti</ListItem>
|
||||||
|
<ListItem>Pemeriksaan saksi</ListItem>
|
||||||
|
</List>,
|
||||||
|
button: <Button fz={'md'} fullWidth bg={'#D1961F'}>Dalam Proses</Button>
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
judul: 'Kasus Tawuran Banjar Kaja',
|
||||||
|
tanggal: '15 Februari 2025, 22:30 WITA',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem>Laporan ke Polsek setempat</ListItem>
|
||||||
|
<ListItem>Penggerebekan lokasi</ListItem>
|
||||||
|
<ListItem>Pengamanan barang bukti</ListItem>
|
||||||
|
<ListItem>Pemeriksaan saksi</ListItem>
|
||||||
|
</List>,
|
||||||
|
button: <Button fz={'md'} fullWidth bg={'#2A742D'}>Terselesaikan</Button>
|
||||||
|
|
||||||
|
},
|
||||||
|
]
|
||||||
|
function Page() {
|
||||||
|
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"}>
|
||||||
|
Laporan Keamanan Lingkungan
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box px={{ base: "md", md: 100 }}>
|
||||||
|
<Stack gap={'lg'}>
|
||||||
|
<Flex justify={'space-between'} align={'center'}>
|
||||||
|
<Text fz={{ base: 'sm', md: 'h4' }} fw={'bold'}>Laporan Terbaru</Text>
|
||||||
|
<Box>
|
||||||
|
<Flex gap={'lg'}>
|
||||||
|
<Box>
|
||||||
|
<Flex gap={{ base: 2, md: 5 }} align={'center'}>
|
||||||
|
<Text fz={{ base: 'sm', md: 'h4' }}>Terselesaikan</Text>
|
||||||
|
<ColorSwatch color="#2A742D" size={20} />
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Flex gap={{ base: 2, md: 5 }} align={'center'}>
|
||||||
|
<Text fz={{ base: 'sm', md: 'h4' }}>Dalam Proses</Text>
|
||||||
|
<ColorSwatch color="#D1961F" size={20} />
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Flex gap={{ base: 2, md: 5 }} align={'center'}>
|
||||||
|
<Text fz={{ base: 'sm', md: 'h4' }}>Gagal</Text>
|
||||||
|
<ColorSwatch color="#A34437" size={20} />
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
<SimpleGrid
|
||||||
|
cols={{
|
||||||
|
base: 1,
|
||||||
|
md: 3
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.map((v, k) => {
|
||||||
|
return (
|
||||||
|
<Paper radius={'lg'} key={k} bg={colors['white-trans-1']} p={'xl'}>
|
||||||
|
<Stack>
|
||||||
|
<Title c={colors['blue-button']} order={1}>{v.judul}</Title>
|
||||||
|
<Text fs={'italic'} fz={'xl'}>{v.tanggal}</Text>
|
||||||
|
<Box>
|
||||||
|
<Text fw={'bold'}>Penanganan:</Text>
|
||||||
|
{v.deskripsi}
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
{v.button}
|
||||||
|
</Box>
|
||||||
|
<Button bg={colors['blue-button']} rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>Lihat Detail Kronologi</Button>
|
||||||
|
</Stack>
|
||||||
|
</Paper>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</SimpleGrid>
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
import colors from '@/con/colors';
|
|
||||||
import { Stack, Box, Text, Flex, ColorSwatch } 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>
|
|
||||||
<Box>
|
|
||||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
|
||||||
Laporan Keamanan Lingkungan
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
<Box px={{ base: "md", md: 100 }}>
|
|
||||||
<Stack gap={'lg'}>
|
|
||||||
<Flex justify={'space-between'}>
|
|
||||||
<Text fz={"h4"}>Laporan Terbaru</Text>
|
|
||||||
<Box>
|
|
||||||
<Flex gap={'lg'}>
|
|
||||||
<Box>
|
|
||||||
<Flex gap={{ base: 0, md: 5 }} align={'center'}>
|
|
||||||
<Text fz={{ base: 'md', md: 'h4' }}>Terselesaikan</Text>
|
|
||||||
<ColorSwatch color="#2A742D" size={30} />
|
|
||||||
</Flex>
|
|
||||||
</Box>
|
|
||||||
<Box>
|
|
||||||
<Flex gap={{ base: 0, md: 5 }} align={'center'}>
|
|
||||||
<Text fz={{ base: 'md', md: 'h4' }}>Dalam Proses</Text>
|
|
||||||
<ColorSwatch color="#135A9B" size={30} />
|
|
||||||
</Flex>
|
|
||||||
</Box>
|
|
||||||
<Box>
|
|
||||||
<Flex gap={{ base: 0, md: 5 }} align={'center'}>
|
|
||||||
<Text fz={{ base: 'md', md: 'h4' }}>Gagal</Text>
|
|
||||||
<ColorSwatch color="#A34437" size={30} />
|
|
||||||
</Flex>
|
|
||||||
</Box>
|
|
||||||
</Flex>
|
|
||||||
</Box>
|
|
||||||
</Flex>
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Page;
|
|
||||||
120
src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx
Normal file
120
src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
import colors from '@/con/colors';
|
||||||
|
import { Box, Center, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||||
|
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||||
|
|
||||||
|
const data1 = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
judul: 'Keamanan Rumah',
|
||||||
|
image: '/api/img/kemanan.png',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pastikan pintu dan jendela selalu terkunci saat meninggalkan rumah.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pasang lampu penerangan di halaman dan area sekitar rumah untuk mencegah tindak kejahatan.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jangan mudah memberikan akses masuk ke orang yang tidak dikenal.</ListItem>
|
||||||
|
</List>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
judul: 'Keamanan di Jalan',
|
||||||
|
image: '/api/img/keamananjalan.png',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Hindari berjalan sendirian di tempat sepi, terutama pada malam hari.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Simpan barang berharga di tempat yang aman saat bepergian.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Gunakan jalur yang ramai dan terang saat pulang malam.</ListItem>
|
||||||
|
</List>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
judul: 'Keamanan Kendaraan',
|
||||||
|
image: '/api/img/keamanankendaraan.png',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Gunakan kunci ganda saat memarkir kendaraan, terutama di tempat umum.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Parkir di tempat yang terang dan mudah diawasi.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jangan meninggalkan barang berharga di dalam kendaraan.</ListItem>
|
||||||
|
</List>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
judul: 'Keamanan Sosial',
|
||||||
|
image: '/api/img/mencurigakan.png',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Laporkan kejadian mencurigakan kepada Pecalang atau perangkat desa.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jangan mudah percaya terhadap informasi yang belum jelas sumbernya.</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Ikuti program sosialisasi keamanan yang diadakan oleh desa.</ListItem>
|
||||||
|
</List>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
judul: 'Sistem Laporan Kejadian',
|
||||||
|
image: '/api/img/securitydigital.png',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem>Jangan mudah membagikan informasi pribadi di media sosial.</ListItem>
|
||||||
|
<ListItem>Waspada terhadap penipuan online dan telepon yang mengatasnamakan instansi resmi.</ListItem>
|
||||||
|
<ListItem>Gunakan kata sandi yang kuat untuk akun digital dan ganti secara berkala.</ListItem>
|
||||||
|
</List>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
judul: 'Nomor Darurat yang Bisa Dihubungi',
|
||||||
|
image: '/api/img/kontakpecalang.png',
|
||||||
|
deskripsi: <List>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pecalang: 08125651052</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Ambulans: 08125651052</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pemadam Kebakaran: 113</ListItem>
|
||||||
|
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Polisi: 110</ListItem>
|
||||||
|
</List>
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
function Page() {
|
||||||
|
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"}>
|
||||||
|
Tips Keamanan
|
||||||
|
</Text>
|
||||||
|
<Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
|
||||||
|
Desa Darmasaba berkomitmen untuk menjaga keamanan dan kenyamanan seluruh warganya. Berikut beberapa tips yang dapat membantu meningkatkan keamanan di lingkungan desa.
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box px={{ base: "md", md: 100 }}>
|
||||||
|
<Stack gap={'lg'}>
|
||||||
|
<SimpleGrid
|
||||||
|
pb={10}
|
||||||
|
cols={{
|
||||||
|
base: 1,
|
||||||
|
md: 3,
|
||||||
|
}}>
|
||||||
|
{data1.map((v, k) => {
|
||||||
|
return (
|
||||||
|
<Paper radius={10} key={k} bg={colors["white-trans-1"]}>
|
||||||
|
<Stack gap={'xs'}>
|
||||||
|
<Center p={10}>
|
||||||
|
<Image src={v.image} radius={10}
|
||||||
|
alt='' />
|
||||||
|
</Center>
|
||||||
|
<Box px={'xl'}>
|
||||||
|
<Box pb={20}>
|
||||||
|
<Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
|
||||||
|
{v.judul}
|
||||||
|
</Text>
|
||||||
|
<Box pr={10}>
|
||||||
|
{v.deskripsi}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Stack>
|
||||||
|
</Paper>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</SimpleGrid>
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
@@ -1,106 +0,0 @@
|
|||||||
import colors from '@/con/colors';
|
|
||||||
import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
|
||||||
import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-react';
|
|
||||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
|
||||||
|
|
||||||
const data1 = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
judul: 'Layanan Medis Cepat',
|
|
||||||
icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
|
|
||||||
deskripsi: <List>
|
|
||||||
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
|
|
||||||
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
|
|
||||||
</List>
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
judul: 'Nomor Darurat',
|
|
||||||
icon: <IconPhone size={80} color={colors["blue-button"]}/>,
|
|
||||||
deskripsi: <List>
|
|
||||||
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
|
|
||||||
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
|
|
||||||
<ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
|
|
||||||
<ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
|
|
||||||
</List>
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
judul: 'Posko Kesehatan & Evakuasi',
|
|
||||||
icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
|
|
||||||
deskripsi: <List>
|
|
||||||
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
|
|
||||||
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
|
|
||||||
</List>
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
judul: 'Pelatihan & Sosialisasi',
|
|
||||||
icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
|
|
||||||
deskripsi: <List>
|
|
||||||
<ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
|
|
||||||
<ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
|
|
||||||
</List>
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
judul: 'Sistem Laporan Kejadian',
|
|
||||||
icon: <IconReport size={80} color={colors["blue-button"]}/>,
|
|
||||||
deskripsi: <List>
|
|
||||||
<ListItem>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
|
|
||||||
<ListItem>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
|
|
||||||
</List>
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
function Page() {
|
|
||||||
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"}>
|
|
||||||
Penanganan Darurat
|
|
||||||
</Text>
|
|
||||||
<Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
|
|
||||||
Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
<Box px={{ base: "md", md: 100 }}>
|
|
||||||
<Stack gap={'lg'}>
|
|
||||||
<SimpleGrid
|
|
||||||
pb={10}
|
|
||||||
cols={{
|
|
||||||
base: 1,
|
|
||||||
md: 3,
|
|
||||||
}}>
|
|
||||||
{data1.map((v, k) => {
|
|
||||||
return (
|
|
||||||
<Paper radius={10} key={k} bg={colors["white-trans-1"]}>
|
|
||||||
<Stack gap={'xs'}>
|
|
||||||
<Center py={40}>
|
|
||||||
{v.icon}
|
|
||||||
</Center>
|
|
||||||
<Box px={'lg'}>
|
|
||||||
<Box pb={20}>
|
|
||||||
<Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
|
|
||||||
{v.judul}
|
|
||||||
</Text>
|
|
||||||
<Box px={10}>
|
|
||||||
{v.deskripsi}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</Stack>
|
|
||||||
</Paper>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</SimpleGrid>
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Page;
|
|
||||||
@@ -7,42 +7,42 @@ const navbarListMenu = [
|
|||||||
{
|
{
|
||||||
id: "1.1",
|
id: "1.1",
|
||||||
name: "Profile PPID",
|
name: "Profile PPID",
|
||||||
href: "/darmasaba/ppid/profile"
|
href: "/darmasaba/ppid/profile-ppid"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "1.2",
|
id: "1.2",
|
||||||
name: "Struktur PPID",
|
name: "Struktur PPID",
|
||||||
href: "/darmasaba/ppid/struktur"
|
href: "/darmasaba/ppid/struktur-ppid"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "1.3",
|
id: "1.3",
|
||||||
name: "Visi Misi PPID",
|
name: "Visi Misi PPID",
|
||||||
href: "/darmasaba/ppid/visimisi"
|
href: "/darmasaba/ppid/visi-misi-ppid"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "1.4",
|
id: "1.4",
|
||||||
name: "Dasar Hukum",
|
name: "Dasar Hukum",
|
||||||
href: "/darmasaba/ppid/dasarhukum"
|
href: "/darmasaba/ppid/dasar-hukum"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "1.5",
|
id: "1.5",
|
||||||
name: "Permohonan Informasi Publik",
|
name: "Permohonan Informasi Publik",
|
||||||
href: "/darmasaba/ppid/informasi"
|
href: "/darmasaba/ppid/permohonan-informasi-publik"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "1.6",
|
id: "1.6",
|
||||||
name: "Permohonan Keberatan Informasi Publik",
|
name: "Permohonan Keberatan Informasi Publik",
|
||||||
href: "/darmasaba/ppid/keberatan"
|
href: "/darmasaba/ppid/permohonan-keberatan-informasi-publik"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "1.7",
|
id: "1.7",
|
||||||
name: "Daftar Informasi Publik Desa Darmasaba",
|
name: "Daftar Informasi Publik Desa Darmasaba",
|
||||||
href: "/darmasaba/ppid/daftar"
|
href: "/darmasaba/ppid/daftar-informasi-publik-desa-darmasaba"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "1.8",
|
id: "1.8",
|
||||||
name: "IKM Desa Darmasaba",
|
name: "IKM Desa Darmasaba",
|
||||||
href: "/darmasaba/ppid/ikm"
|
href: "/darmasaba/ppid/ikm-desa-darmasaba"
|
||||||
},
|
},
|
||||||
|
|
||||||
]
|
]
|
||||||
@@ -104,7 +104,7 @@ const navbarListMenu = [
|
|||||||
{
|
{
|
||||||
id: "3.2",
|
id: "3.2",
|
||||||
name: "Data Kesehatan Warga",
|
name: "Data Kesehatan Warga",
|
||||||
href: "/darmasaba/kesehatan/datakesehatan"
|
href: "/darmasaba/kesehatan/data-kesehatan-warga"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "3.3",
|
id: "3.3",
|
||||||
@@ -114,22 +114,22 @@ const navbarListMenu = [
|
|||||||
{
|
{
|
||||||
id: "3.4",
|
id: "3.4",
|
||||||
name: "Program Kesehatan",
|
name: "Program Kesehatan",
|
||||||
href: "/darmasaba/kesehatan/program"
|
href: "/darmasaba/kesehatan/program-kesehatan"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "3.5",
|
id: "3.5",
|
||||||
name: "Penanganan Darurat",
|
name: "Penanganan Darurat",
|
||||||
href: "/darmasaba/kesehatan/penanganan"
|
href: "/darmasaba/kesehatan/penanganan-darurat"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "3.6",
|
id: "3.6",
|
||||||
name: "Kontak Darurat",
|
name: "Kontak Darurat",
|
||||||
href: "/darmasaba/kesehatan/kontak"
|
href: "/darmasaba/kesehatan/kontak-darurat"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "3.7",
|
id: "3.7",
|
||||||
name: "Info Wabah/Penyakit",
|
name: "Info Wabah/Penyakit",
|
||||||
href: "/darmasaba/kesehatan/info"
|
href: "/darmasaba/kesehatan/info-wabah-penyakit"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -141,27 +141,27 @@ const navbarListMenu = [
|
|||||||
{
|
{
|
||||||
id: "4.1",
|
id: "4.1",
|
||||||
name: "Keamanan Lingkungan (Pecalang/Patwal)",
|
name: "Keamanan Lingkungan (Pecalang/Patwal)",
|
||||||
href: "/darmasaba/keamanan/lingkungan"
|
href: "/darmasaba/keamanan/keamanan-lingkungan-pecalang-patwal"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "4.2",
|
id: "4.2",
|
||||||
name: "Polsek Terdekat",
|
name: "Polsek Terdekat",
|
||||||
href: "/darmasaba/keamanan/polsek"
|
href: "/darmasaba/keamanan/polsek-terdekat"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "4.3",
|
id: "4.3",
|
||||||
name: "Kontak Darurat",
|
name: "Kontak Darurat",
|
||||||
href: "/darmasaba/keamanan/darurat"
|
href: "/darmasaba/keamanan/kontak-darurat"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "4.4",
|
id: "4.4",
|
||||||
name: "Pencegahan Kriminalitas",
|
name: "Pencegahan Kriminalitas",
|
||||||
href: "/darmasaba/keamanan/kriminalitas"
|
href: "/darmasaba/keamanan/pencegahan-kriminalitas"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "4.5",
|
id: "4.5",
|
||||||
name: "Laporan Publik",
|
name: "Laporan Publik",
|
||||||
href: "/darmasaba/keamanan/laporan"
|
href: "/darmasaba/keamanan/laporan-publik"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "4.6",
|
id: "4.6",
|
||||||
@@ -182,43 +182,48 @@ const navbarListMenu = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "5.2",
|
id: "5.2",
|
||||||
name: "Koperasi",
|
name: "Lowongan Kerja Lokal",
|
||||||
href: "/darmasaba/ekonomi/koperasi"
|
href: "/darmasaba/ekonomi/lowongan-kerja-lokal"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "5.3",
|
id: "5.3",
|
||||||
name: "UMKM",
|
name: "Struktur Organisasi dan SK Pengurus BUMDesa",
|
||||||
href: "/darmasaba/ekonomi/umkm"
|
href: "/darmasaba/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "5.4",
|
id: "5.4",
|
||||||
name: "Data Ekonomi Desa",
|
name: "PADesa (Pendapatan Asli Desa)",
|
||||||
href: "/darmasaba/ekonomi/data-ekonomi-desa"
|
href: "/darmasaba/ekonomi/PADesa-pendapatan-asli-desa"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "5.5",
|
id: "5.5",
|
||||||
name: "Pelatihan Wirausaha",
|
name: "Jumlah Pengangguran 2024-2025",
|
||||||
href: "/darmasaba/ekonomi/pelatihan-wirausaha"
|
href: "/darmasaba/ekonomi/jumlah-pengangguran-2024-2025"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "5.6",
|
id: "5.6",
|
||||||
name: "Bantuan & Pendanaan",
|
name: "Jumlah penduduk usia kerja yang menganggur",
|
||||||
href: "/darmasaba/ekonomi/bantuan-pendanaan"
|
href: "/darmasaba/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "5.7",
|
id: "5.7",
|
||||||
name: "Investasi Desa",
|
name: "Jumlah Penduduk Miskin 2024-2025",
|
||||||
href: "/darmasaba/ekonomi/investasi-desa"
|
href: "/darmasaba/ekonomi/jumlah-penduduk-miskin-2024-2025"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "5.8",
|
id: "5.8",
|
||||||
name: "Produk Unggulan",
|
name: "Program Kemiskinan",
|
||||||
href: "/darmasaba/ekonomi/produk-unggulan"
|
href: "/darmasaba/ekonomi/program-kemiskinan"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "5.9",
|
id: "5.9",
|
||||||
name: "Lowongan Kerja Lokal",
|
name: "Sektor Unggulan Desa",
|
||||||
href: "/darmasaba/ekonomi/lowongan-kerja-lokal"
|
href: "/darmasaba/ekonomi/sektor-unggulan-desa"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "5.10",
|
||||||
|
name: "Demografi Pekerjaan",
|
||||||
|
href: "/darmasaba/ekonomi/demografi-pekerjaan"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
|
|||||||
Reference in New Issue
Block a user