UI Sub Menu Keamanan

package.json

@@ -1,6 +1,6 @@
 {
   "name": "desa-darmasaba",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

src/app/darmasaba/(pages)/ekonomi/PADesa-pendapatan-asli-desa/page.tsx

@@ -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;

src/app/darmasaba/(pages)/ekonomi/demografi-pekerjaan/page.tsx

@@ -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;

src/app/darmasaba/(pages)/ekonomi/jumlah-penduduk-miskin-2024-2025/page.tsx

@@ -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;

src/app/darmasaba/(pages)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/page.tsx

@@ -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;

src/app/darmasaba/(pages)/ekonomi/jumlah-pengangguran-2024-2025/page.tsx

@@ -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;

src/app/darmasaba/(pages)/ekonomi/lowongan-kerja-lokal/page.tsx

@@ -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;

src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx

@@ -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;

src/app/darmasaba/(pages)/ekonomi/program-kemiskinan/page.tsx

@@ -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;

src/app/darmasaba/(pages)/ekonomi/sektor-unggulan-desa/page.tsx

@@ -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;

src/app/darmasaba/(pages)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/page.tsx

@@ -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;

src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/page.tsx

@@ -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;

src/app/darmasaba/(pages)/inovasi/layanan-online-desa/page.tsx

@@ -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;

src/app/darmasaba/(pages)/inovasi/program-kreatif-desa/page.tsx

@@ -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;

src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -0,0 +1,107 @@
+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: 'Peran Pecalang dalam Keamanan Desa',
+    image: '/api/img/pecalang.png',
+    pengertian: 'Pecalang adalah petugas keamanan adat di Bali yang memiliki peran penting dalam menjaga ketertiban dan budaya lokal. Tugas mereka meliputi:',
+    deskripsi: <List>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Mengamankan upacara adat dan kegiatan keagamaan.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Mengatur lalu lintas saat ada perayaan atau kegiatan besar.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Berpatroli untuk mencegah gangguan keamanan di lingkungan desa.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Berkoordinasi dengan aparat desa dan kepolisian dalam penanganan situasi darurat.</ListItem>
+    </List>
+  },
+  {
+    id: 2,
+    judul: 'Patwal (Patroli Pengawal) Desa',
+    image: '/api/img/patwal-1.png',
+    pengertian: 'Selain Pecalang, Desa Darmasaba juga memiliki Patwal yang bertugas menjaga keamanan sehari-hari. Peran mereka antara lain:',
+    deskripsi: <List>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Berpatroli secara rutin untuk memastikan lingkungan tetap aman.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Menjaga ketertiban lalu lintas di area desa.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Melakukan tindakan preventif terhadap potensi gangguan keamanan.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Siap siaga dalam keadaan darurat untuk membantu warga.</ListItem>
+    </List>
+  },
+  {
+    id: 3,
+    judul: 'Layanan Keamanan yang Tersedia',
+    image: '/api/img/pospecalang.png',
+    pengertian: 'Jika terjadi keadaan darurat atau membutuhkan bantuan keamanan, warga dapat menghubungi:',
+    deskripsi: <List>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Pos Pecalang Desa: [Masukkan Nomor Kontak].</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Patwal Desa Darmasaba: [Masukkan Nomor Kontak].</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Polsek Terdekat: 110 (Layanan Kepolisian).</ListItem>
+    </List>
+  },
+  {
+    id: 4,
+    judul: 'Program Keamanan Desa',
+    image: '/api/img/rond.png',
+    pengertian: 'Untuk meningkatkan keamanan, Desa Darmasaba menjalankan berbagai program, seperti:',
+    deskripsi: <List>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Ronda Malam Warga: Kegiatan jaga malam secara bergilir oleh warga bersama Pecalang dan Patwal.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Sosialisasi Keamanan: Edukasi bagi warga tentang cara menjaga keamanan lingkungan.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}> Pengawasan Kamera CCTV: Memantau titik- titik strategis untuk mencegah tindak kejahatan.</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"}>
+          Keamanan Lingkungan (Pecalang / Patwal)
+        </Text>
+        <Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+          Keamanan dan ketertiban lingkungan di Desa Darmasaba dijaga melalui peran aktif Pecalang dan Patwal (Patroli Pengawal). Mereka bertugas memastikan desa tetap aman, tertib, dan kondusif bagi 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 px={10} py={20}>
+                      <Image src={v.image} alt='' />
+                    </Center>
+                    <Box px={'lg'}>
+                      <Box pb={20}>
+                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
+                          {v.judul}
+                        </Text>
+                        <Text pb={10} fz={"h4"} ta={'justify'}>
+                          {v.pengertian}
+                        </Text>
+                        <Box px={10}>
+                          {v.deskripsi}
+                        </Box>
+                      </Box>
+                    </Box>
+                  </Stack>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/keamanan/kontak-darurat/page.tsx

@@ -0,0 +1,160 @@
+import colors from '@/con/colors';
+import { Avatar, Box, Flex, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconAmbulance, IconBadge, IconBuildingBank, IconBuildingSkyscraper, IconFiretruck, IconFirstAidKit, IconPhoneCall, IconUser } from '@tabler/icons-react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const emergencyServices = [
+  {
+    id: 1,
+    name: "Polisi",
+    icon: <IconBadge size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  },
+  {
+    id: 2,
+    name: "Ambulans",
+    icon: <IconAmbulance size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  },
+  {
+    id: 3,
+    name: "Pemadam Kebakaran",
+    icon: <IconFiretruck size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  }
+];
+
+const healthFacilities = [
+  {
+    id: 4,
+    name: "Puskesmas Darmasaba",
+    icon: <IconFirstAidKit size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  },
+  {
+    id: 5,
+    name: "UGD Terdekat",
+    icon: <IconAmbulance size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  }
+];
+
+const villageGovernment = [
+  {
+    id: 6,
+    name: "Kantor Desa Darmasaba",
+    icon: <IconBuildingSkyscraper size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  },
+  {
+    id: 7,
+    name: "Kepala Desa",
+    icon: <IconUser size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  }
+];
+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"}>
+          Kontak Darurat
+        </Text>
+        <Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+          Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung.
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+            <Flex justify={'center'} gap={'lg'} align={'center'}>
+              <Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
+                <IconPhoneCall size={30} color={colors["blue-button"]} />
+              </Avatar>
+              <Box>
+                <Text ta={'center'} c={colors['blue-button']} py={10} fz={{ base: "md", md: "h4" }} fw={"bold"} >
+                  Nomor Darurat Utama
+                </Text>
+                <Text ta={'center'} fw={"bold"} fz={'h2'} c={colors["blue-button"]}>112</Text>
+              </Box>
+            </Flex>
+          </Paper>
+        </Stack>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
+          {/* Layanan Darurat */}
+          <Paper p="lg" radius="md" bg={colors['white-trans-1']}>
+            <Group pb="md" align="center">
+              <Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
+                <IconFirstAidKit size={30} color={colors["blue-button"]} />
+              </Avatar>
+              <Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
+                Layanan Darurat
+              </Text>
+            </Group>
+
+            {emergencyServices.map((v, k) => (
+              <Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
+                <Group>
+                  {v.icon}
+                  <Text>{v.name}</Text>
+                </Group>
+                <Text>{v.nomor}</Text>
+              </Group>
+            ))}
+          </Paper>
+
+          {/* Fasilitas Kesehatan */}
+          <Paper p="lg" radius="md" bg={colors['white-trans-1']}>
+            <Group pb="md" align="center">
+              <Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
+                <IconBuildingSkyscraper size={30} color={colors["blue-button"]} />
+              </Avatar>
+              <Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
+                Fasilitas Kesehatan
+              </Text>
+            </Group>
+
+            {healthFacilities.map((v, k) => (
+              <Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
+                <Group>
+                  {v.icon}
+                  <Text>{v.name}</Text>
+                </Group>
+                <Text>{v.nomor}</Text>
+              </Group>
+            ))}
+          </Paper>
+
+          {/* Pemerintah Desa */}
+          <Paper p="lg" radius="md" bg={colors['white-trans-1']}>
+            <Group pb="md" align="center">
+              <Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
+                <IconBuildingBank size={30} color={colors["blue-button"]} />
+              </Avatar>
+              <Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
+                Pemerintah Desa
+              </Text>
+            </Group>
+
+            {villageGovernment.map((v, k) => (
+              <Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
+                <Group>
+                  {v.icon}
+                  <Text>{v.name}</Text>
+                </Group>
+                <Text>{v.nomor}</Text>
+              </Group>
+            ))}
+          </Paper>
+        </SimpleGrid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/keamanan/laporan-publik/page.tsx

@@ -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;

src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/page.tsx

@@ -0,0 +1,123 @@
+import colors from '@/con/colors';
+import { Box, Button, Flex, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { IconArrowRight } from '@tabler/icons-react';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <SimpleGrid
+        px={{ base: 20, md: 100 }}
+        cols={{
+          base: 1,
+          md: 2
+        }}
+      >
+        {/* Content 1 */}
+        <Box pt={{base: 0, md: 35}}>
+          <Text c={colors["blue-button"]} fz={{ base: "h4", md: "h3" }} >
+            Info Keamanan dan Pencegahan Kriminalitas
+          </Text>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Kontak Darurat
+          </Text>
+          <Group>
+            <Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
+              Lihat Detail
+            </Button>
+          </Group>
+        </Box>
+        {/* Content 2 */}
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Paper p={"lg"}>
+            <Text c={colors["blue-button"]} fw={'bold'} fz={{ base: "h4", md: "h3" }} >
+              Tips menjaga keamanan lingkungan
+            </Text>
+            <Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
+              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            </Text>
+            <Group>
+              <Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
+                Lihat Detail
+              </Button>
+            </Group>
+          </Paper>
+          <Paper p={"lg"}>
+            <Text c={colors["blue-button"]} fw={'bold'} fz={{ base: "h4", md: "h3" }} >
+              Mengenali tanda-tanda kegiatan kriminal
+            </Text>
+            <Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
+              the printing and typesetting industry. the printing and typesetting industry.
+            </Text>
+            <Group>
+              <Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
+                Lihat Detail
+              </Button>
+            </Group>
+          </Paper>
+        </SimpleGrid>
+        {/* Content 3 */}
+        <Paper p={'xl'}>
+          <Text fz={{ base: "h3", md: "h2" }} c={colors["blue-button"]} fw={"bold"}>
+            Program Keamanan Rutin
+          </Text>
+          <Stack pt={30} gap={'lg'}>
+            <Box>
+              <Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
+                <Flex align={'center'} justify={'space-between'}>
+                  <Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
+                  <IconArrowRight size={30} color={colors['white-1']} />
+                </Flex>
+              </Paper>
+            </Box>
+            <Box>
+              <Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
+                <Flex align={'center'} justify={'space-between'}>
+                  <Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
+                  <IconArrowRight size={30} color={colors['white-1']} />
+                </Flex>
+              </Paper>
+            </Box>
+            <Box>
+              <Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
+                <Flex align={'center'} justify={'space-between'}>
+                  <Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
+                  <IconArrowRight size={30} color={colors['white-1']} />
+                </Flex>
+              </Paper>
+            </Box>
+            <Box pt={25}>
+              <Button fullWidth rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>Lihat program lainnya</Button>
+            </Box>
+          </Stack>
+        </Paper>
+        {/* Content 4 */}
+        <Box>
+          <Paper p={'xl'} >
+            <Box style={{ maxWidth: "560px", width: "100%", aspectRatio: "16/9" }}>
+              <iframe width="100%"
+                height="100%"
+                src="https://www.youtube.com/embed/p5OkdBgasWA?si=6lFKXeE9LN5zcJQq" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"  ></iframe>
+            </Box>
+            <Text py={10} fz={{ base: "h3", md: "h2" }} fw={'bold'} c={colors['blue-button']}>
+              Patroli Malam Darmasaba
+            </Text>
+            <Text fz={'h4'} >
+              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            </Text>
+            <Box pt={10}>
+              <Button bg={colors['blue-button']} rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>
+                Lihat Video Lainnya
+              </Button>
+            </Box>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/keamanan/polsek-terdekat/page.tsx

@@ -0,0 +1,95 @@
+import colors from '@/con/colors';
+import { Badge, Box, Button, Flex, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { IconArrowDown, IconClock, IconNavigation, IconPhone, IconPin, IconSearch } from '@tabler/icons-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 pb={10} px={{ base: 20, md: 100 }}>
+        <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Kantor Polisi Terdekat
+        </Text>
+        <Text pb={15} fz={'h4'} >
+          Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung
+        </Text>
+        <TextInput radius={10} leftSection={<IconSearch size={20} />} placeholder='Cari Kantor Polisi' />
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Paper radius={10} bg={colors["white-trans-1"]} p={'xl'}>
+            <Stack gap={'xs'}>
+              <SimpleGrid
+                cols={{
+                  base: 1,
+                  md: 2,
+                }}
+              >
+                {/* Content Sebelah Kiri */}
+                <Box>
+                  <Text c={colors["blue-button"]} fw={'bold'} fz={'h2'}>Polsek Abiansemal</Text>
+                  <Text c={colors["blue-button"]} fz={'sm'}>2,5 Km dari Desa Darmasaba</Text>
+                  <Flex py={10} gap={9} align={'center'}>
+                    <IconPin size={25} color={colors["blue-button"]} />
+                    <Text c={colors["blue-button"]} fz={'lg'}>Jl. Gandamayu 1 Blahkiuh</Text>
+                  </Flex>
+                  <Flex gap={9} align={'center'}>
+                    <IconPhone size={25} color={colors["blue-button"]} />
+                    <Text c={colors["blue-button"]} fz={'lg'}>08xxxxxxxx</Text>
+                  </Flex>
+                  <Flex py={10} gap={9} align={'center'}>
+                    <IconClock size={25} color={colors["blue-button"]} />
+                    <Text c={colors["blue-button"]} fz={'lg'}>24 Jam</Text>
+                  </Flex>
+                  <Box>
+                    <Text c={colors["blue-button"]} fw={'bold'} fz={'h2'}>Layanan Yang Tersedia :</Text>
+                    <SimpleGrid
+                      py={10}
+                      cols={{
+                        base: 1,
+                        md: 2,
+                      }}
+                    >
+                      <Box>
+                        <Text c={colors["blue-button"]} fz={'lg'}>Laporan Kehilangan</Text>
+                      </Box>
+                      <Box>
+                        <Text c={colors["blue-button"]} fz={'lg'}>Laporan Kriminal</Text>
+                      </Box>
+                      <Box>
+                        <Text c={colors["blue-button"]} fz={'lg'}>Pelayanan SKCK</Text>
+                      </Box>
+                      <Box>
+                        <Text c={colors["blue-button"]} fz={'lg'}>Pengaduan Masyarakat</Text>
+                      </Box>
+                    </SimpleGrid>
+                  </Box>
+                  <Box>
+                    <Button bg={colors["blue-button"]} rightSection={<IconArrowDown size={20}/>}>Lihat Kantor Polisi Lainnya</Button>
+                  </Box>
+                </Box>
+                <Box pos={'relative'}>
+                  <Box style={{ position: 'absolute', top: 0, right: 0 }}>
+                    <Badge size='lg' c={'#287407'} bg={'#A8EDC4'}>Buka</Badge>
+                  </Box>
+                  <Box pt={40}>
+                  <iframe style={{ border: 2, width: "100%" }} src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3945.7949871034166!2d115.20778387533218!3d-8.519275686287415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23ceb4f6e5363%3A0xa353662f070f47d8!2sAbian%20Semal%20Police%20Station!5e0!3m2!1sid!2sid!4v1742789148825!5m2!1sid!2sid" width="550" height="300" ></iframe>
+                  </Box>
+                  <Box pt={20}>
+                    <Button fullWidth bg={colors["blue-button"]} radius={10} leftSection={<IconNavigation size={20}/>}>Petunjuk Arah</Button>
+                  </Box>
+                </Box>
+              </SimpleGrid>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx

@@ -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;

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/page.tsx

@@ -0,0 +1,298 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, Paper, Center, Flex, ColorSwatch, SimpleGrid, Anchor, Divider, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { BarChart } from '@mantine/charts';
+
+
+const dataKematian = [
+  {
+    id: 1,
+    tahun: '2023',
+    kematianKasar: '1.7',
+    kematianBayi: '1.4',
+    kelahiranKasar: '0.5'
+  },
+  {
+    id: 2,
+    tahun: '2024',
+    kematianKasar: '1.4',
+    kematianBayi: '1.8',
+    kelahiranKasar: '1.5'
+  },
+  {
+    id: 3,
+    tahun: '2025',
+    kematianKasar: '2.0',
+    kematianBayi: '1.5',
+    kelahiranKasar: '1.2'
+  },
+
+]
+
+const dataPenyakit = [
+  { penyakit: 'Covid', penderita: 335 },
+  { penyakit: 'Tuli', penderita: 105 },
+  { penyakit: 'Bisul', penderita: 98 },
+  { penyakit: 'Panas', penderita: 96 },
+  { penyakit: 'Batuk', penderita: 87 },
+  { penyakit: 'Sembelit', penderita: 72 },
+  { penyakit: 'Demam', penderita: 51 },
+  { penyakit: 'Gred', penderita: 36 },
+  { penyakit: 'Magh', penderita: 34 },
+  { penyakit: 'Farangitis Akut', penderita: 17 },
+]
+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"}>
+        Data Kesehatan Masyarakat Puskesmas Darmasaba
+      </Text>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          {/* Bar Chart Kematian Kelahiran */}
+          <Box>
+            <Paper p={"xl"} bg={colors['white-trans-1']}>
+              <Box pb={30}>
+                <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' }}>Angka Kematian Kasar</Text>
+                      <ColorSwatch color="#26308A" size={30} />
+                    </Flex>
+                  </Box>
+                  <Box>
+                    <Flex gap={{ base: 0, md: 5 }} align={'center'}>
+                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kematian Bayi</Text>
+                      <ColorSwatch color="#135A9B" size={30} />
+                    </Flex>
+                  </Box>
+                  <Box>
+                    <Flex gap={{ base: 0, md: 5 }} align={'center'}>
+                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kelahiran Kasar</Text>
+                      <ColorSwatch color="#3290CA" size={30} />
+                    </Flex>
+                  </Box>
+                </Flex>
+                <Center>
+                  <BarChart
+                    h={400}
+                    data={dataKematian}
+                    dataKey="tahun"
+                    series={[
+                      { name: 'kematianKasar', color: '#26308A' },
+                      { name: 'kematianBayi', color: '#135A9B' },
+                      { name: 'kelahiranKasar', color: '#3290CA' },
+                    ]}
+                    tickLine="y"
+                  />
+                </Center>
+              </Box>
+            </Paper>
+          </Box>
+          {/* Bar Chart Penyakit */}
+          <Box>
+            <Paper p={"xl"} bg={colors['white-trans-1']}>
+              <Box pb={30}>
+                <Text pb={30} fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
+                  Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik
+                </Text>
+                <Center>
+                  <BarChart
+                    p={20}
+                    mb={30}
+                    h={500}
+                    data={dataPenyakit}
+                    dataKey='penyakit'
+                    orientation='vertical'
+                    yAxisProps={{ width: 80 }}
+                    barProps={{ radius: 10 }}
+                    series={[{ name: 'penderita', color: colors['blue-button'] }]}
+                  />
+                </Center>
+                <Text ta={"center"} fw={"bold"} fz={"h4"}>Jumlah Penderita</Text>
+              </Box>
+            </Paper>
+          </Box>
+          {/* Artikel Kesehatan */}
+          <Box>
+            <SimpleGrid
+              cols={{
+                base: 1,
+                md: 3,
+              }}
+            >
+              {/* Fasilitas Kesehatan */}
+              <Box>
+                <Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
+                  <Stack gap={'xs'}>
+                    <Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Fasilitas Kesehatan</Text>
+                    <Box>
+                      <Text fz={'h4'}>
+                        UPTD Puskesmas Abiansemal III
+                      </Text>
+                      <Text fz={'h4'}>
+                        Jl. Ratna, Sibang Kaja
+                      </Text>
+                      <Text fz={'h4'}>
+                        08:00-16:00 WITA
+                        (Senin-Sabtu)
+                      </Text>
+                      <Text fz={'h4'}>
+                        Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
+                      </Text>
+                      <Anchor c={'black'} variant='transparent'>
+                        <Text c={'black'} fz={'h4'}>
+                          Detail Lengkap {'>>'}
+                        </Text>
+                      </Anchor>
+                    </Box>
+                    <Divider color={colors['blue-button']} px={'xl'} />
+                    <Box>
+                      <Text fz={'h4'}>
+                        UPTD Puskesmas Abiansemal III
+                      </Text>
+                      <Text fz={'h4'}>
+                        Jl. Ratna, Sibang Kaja
+                      </Text>
+                      <Text fz={'h4'}>
+                        08:00-16:00 WITA
+                        (Senin-Sabtu)
+                      </Text>
+                      <Text fz={'h4'}>
+                        Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
+                      </Text>
+                      <Anchor c={'black'} variant='transparent'>
+                        <Text c={'black'} fz={'h4'}>
+                          Detail Lengkap {'>>'}
+                        </Text>
+                      </Anchor>
+                    </Box>
+                    <Divider color={colors['blue-button']} px={'xl'} />
+                    <Box>
+                      <Text fz={'h4'}>
+                        UPTD Puskesmas Abiansemal III
+                      </Text>
+                      <Text fz={'h4'}>
+                        Jl. Ratna, Sibang Kaja
+                      </Text>
+                      <Text fz={'h4'}>
+                        08:00-16:00 WITA
+                        (Senin-Sabtu)
+                      </Text>
+                      <Text fz={'h4'}>
+                        Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
+                      </Text>
+                      <Anchor c={'black'} variant='transparent'>
+                        <Text c={'black'} fz={'h4'}>
+                          Detail Lengkap {'>>'}
+                        </Text>
+                      </Anchor>
+                    </Box>
+                    <Divider color={colors['blue-button']} px={'xl'}/>
+                  </Stack>
+                </Paper>
+              </Box>
+              {/* Jadwal Kegiatan */}
+              <Box>
+                <Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
+                  <Stack gap={'xs'}>
+                    <Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Jadwal Kegiatan</Text>
+                    <Box>
+                      <Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>
+                        21 Februari 2025
+                      </Text>
+                      <Text fz={'h4'} fw={'bold'}>
+                        Posyandu Balita
+                      </Text>
+                      <Text fz={'h4'}>
+                        08:00-12:00 WITA
+                      </Text>
+                      <Text fz={'h4'}>
+                        Banjar Gulingan
+                      </Text>
+                      <Anchor c={colors['blue-button']} variant='transparent'>
+                        <Text c={colors['blue-button']} fz={'h4'} >
+                          Detail & Pendaftaran
+                        </Text>
+                      </Anchor>
+                    </Box>
+                    <Divider color={colors['blue-button']} px={'xl'} />
+                    <Box>
+                      <Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>
+                        23 Februari 2025
+                      </Text>
+                      <Text fz={'h4'} fw={'bold'}>
+                        Donor Darah
+                      </Text>
+                      <Text fz={'h4'}>
+                        09:00-14:00 WITA
+                      </Text>
+                      <Text fz={'h4'}>
+                      Puskesmas Abiansemal III
+                      </Text>
+                      <Anchor c={colors['blue-button']} variant='transparent'>
+                        <Text c={colors['blue-button']} fz={'h4'} >
+                          Detail & Pendaftaran
+                        </Text>
+                      </Anchor>
+                    </Box>
+                  </Stack>
+                </Paper>
+              </Box>
+              {/* Artikel Kesehatan */}
+              <Box>
+                <Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
+                  <Stack gap={'xs'}>
+                    <Box>
+                    <Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Artikel Kesehatan</Text>
+                    <Image pt={5} src={'/api/img/dbd.png'} alt="" />
+                      <Text fz={'h4'} fw={'bold'} >
+                      Tips Mencegah Demam Berdarah Saat Musim Hujan
+                      </Text>
+                      <Text fz={'h6'} pb={10}>
+                      Diposting: 12 Februari 2025 | Dinas Kesehatan
+                      </Text>
+                      <Text fz={'h4'} pb={10}>
+                      Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
+                      </Text>
+                      <Anchor c={'black'} variant='transparent'>
+                        <Text c={'black'} fz={'h4'} >
+                          Baca Selengkapnya {'>>'}
+                        </Text>
+                      </Anchor>
+                    </Box>
+                    <Divider color={colors['blue-button']} px={'xl'} />
+                    <Box>
+                    <Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Artikel Kesehatan</Text>
+                    <Image pt={5} src={'/api/img/dbd.png'} alt="" />
+                      <Text fz={'h4'} fw={'bold'} >
+                      Tips Mencegah Demam Berdarah Saat Musim Hujan
+                      </Text>
+                      <Text fz={'h6'} pb={10}>
+                      Diposting: 12 Februari 2025 | Dinas Kesehatan
+                      </Text>
+                      <Text fz={'h4'} pb={10}>
+                      Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
+                      </Text>
+                      <Anchor c={'black'} variant='transparent'>
+                        <Text c={'black'} fz={'h4'} >
+                          Baca Selengkapnya {'>>'}
+                        </Text>
+                      </Anchor>
+                    </Box>
+                  </Stack>
+                </Paper>
+              </Box>
+            </SimpleGrid>
+          </Box>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/kesehatan/info-wabah-penyakit/page.tsx

@@ -0,0 +1,120 @@
+import colors from '@/con/colors';
+import { Box, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+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"}>
+        Info Wabah / Penyakit
+      </Text>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <SimpleGrid
+            cols={{
+              base: 1,
+              md: 3,
+            }}
+          >
+            <Box>
+              <Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
+                <Stack gap={'xs'}>
+                  <Box>
+                    <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>Demam Berdarah Dengue (DBD)</Text>
+                    <Image pt={5} src={'/api/img/dbd.png'} alt="" />
+                    <Text fz={'h4'} fw={'bold'} >
+                      Apa itu DBD penyebab, gejala dan cara penanganannya?
+                    </Text>
+                    <Text fz={'h6'} pb={10}>
+                      Diposting: 12 Februari 2025 | Dinas Kesehatan
+                    </Text>
+                    <Text fz={'h4'} pb={10}>
+                      Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
+                    </Text>
+                    <List>
+                      <ListItem>
+                        Penyebab: Virus dengue yang ditularkan oleh nyamuk Aedes aegypti.
+                      </ListItem>
+                      <ListItem>
+                        Gejala: Demam tinggi, nyeri sendi, ruam kulit, dan pendarahan ringan.
+                      </ListItem>
+                      <ListItem>
+                        Pencegahan: Menguras tempat air, menutup wadah air, fogging, dan menggunakan lotion anti-nyamuk.
+                      </ListItem>
+                    </List>
+                  </Box>
+                </Stack>
+              </Paper>
+            </Box>
+            <Box>
+              <Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
+                <Stack gap={'xs'}>
+                  <Box>
+                    <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>TBC (Tuberkulosis)</Text>
+                    <Image pt={5} src={'/api/img/tbc-1.png'} alt="" />
+                    <Text fz={'h4'} fw={'bold'} >
+                      Apa itu TBC penyebab, gejala dan cara penanganannya?
+                    </Text>
+                    <Text fz={'h6'} pb={10}>
+                      Diposting: 12 Februari 2025 | Dinas Kesehatan
+                    </Text>
+                    <Text fz={'h4'} pb={10}>
+                      Yuk Kenali gelaja dan cara penanganan TBC yang efektif untuk melindungi keluarga anda.
+                    </Text>
+                    <List>
+                      <ListItem>
+                        Penyebab: Bakteri Mycobacterium tuberculosis yang menyebar melalui udara.
+                      </ListItem>
+                      <ListItem>
+                        Gejala: Batuk lebih dari 2 minggu, berkeringat di malam hari, dan berat badan turun.
+                      </ListItem>
+                      <ListItem>
+                        Pencegahan: Vaksin BCG, pola hidup sehat, dan pengobatan bagi penderita agar tidak menular.
+                      </ListItem>
+                    </List>
+                  </Box>
+                </Stack>
+              </Paper>
+            </Box>
+            <Box>
+              <Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
+                <Stack gap={'xs'}>
+                  <Box>
+                    <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>Diare dan Kolera</Text>
+                    <Image pt={5} src={'/api/img/diare.png'} alt="" />
+                    <Text fz={'h4'} fw={'bold'} >
+                      Apa itu Diare dan Kolera penyebab, gejala dan cara penanganannya?
+                    </Text>
+                    <Text fz={'h6'} pb={10}>
+                      Diposting: 12 Februari 2025 | Dinas Kesehatan
+                    </Text>
+                    <Text fz={'h4'} pb={10}>
+                      Yuk Kenali gelaja dan cara penanganan Diare dan Kolera yang efektif untuk melindungi keluarga anda.
+                    </Text>
+                    <List>
+                      <ListItem>
+                        Penyebab: Bakteri Vibrio cholerae (Kolera) atau Escherichia coli (diare) akibat makanan/minuman yang terkontaminasi.
+                      </ListItem>
+                      <ListItem>
+                        Gejala: Buang air besar cair terus-menerus, dehidrasi, dan lemas.
+                      </ListItem>
+                      <ListItem>
+                        Pencegahan: Menjaga kebersihan makanan dan air, serta mencuci tangan dengan sabun.
+                      </ListItem>
+                    </List>
+                  </Box>
+                </Stack>
+              </Paper>
+            </Box>
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx

@@ -0,0 +1,106 @@
+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 fz={{base: 'h4', md: 'lg'}}>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>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"}>
+          Kontak 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;

src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx

@@ -0,0 +1,106 @@
+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;

src/app/darmasaba/(pages)/kesehatan/posyandu/page.tsx

@@ -0,0 +1,100 @@
+import colors from "@/con/colors";
+import { Stack, Box, Text, SimpleGrid, Paper, Center, Image, Flex, List, ListItem } from "@mantine/core";
+import BackButton from "../../desa/layanan/_com/BackButto";
+
+const data = [
+    {
+        id: 1,
+        judul: 'Posyandu Banjar Bucu',
+        nomor: '082345678910',
+        image: '/api/img/posyandu.png'
+    },
+    {
+        id: 2,
+        judul: 'Posyandu Banjar Bucu',
+        nomor: '082345678910',
+        image: '/api/img/posyandu.png'
+    },
+    {
+        id: 3,
+        judul: 'Posyandu Banjar Bucu',
+        nomor: '082345678910',
+        image: '/api/img/posyandu.png'
+    }
+]
+export default 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"}>
+                Posyandu Darmasaba
+            </Text>
+            <Box px={{ base: "md", md: 100 }}>
+                <Stack gap={'lg'}>
+                    <SimpleGrid
+                        pb={10}
+                        cols={{
+                            base: 1,
+                            md: 3,
+                        }}>
+                        {data.map((v, k) => {
+                            return (
+                                <Paper key={k} p={"xl"} bg={colors["white-trans-1"]}>
+                                    <Stack gap={'xs'}>
+                                        <Text c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
+                                            {v.judul}
+                                        </Text>
+                                        <Text fz={'h4'}>
+                                            {v.nomor}
+                                        </Text>
+                                        <Center>
+                                            <Image src={v.image} alt="" />
+                                        </Center>
+                                        <Text fz={'h4'}>
+                                            Jadwal Pelayanan
+                                        </Text>
+                                        <Text fz={'h4'}>
+                                            Setiap tanggal 5, Pukul 09:00 -
+                                            12:00 WITA
+                                        </Text>
+                                        <Box>
+                                            <Flex justify={'space-between'}>
+                                                <Text fz={'h4'}>Balita</Text>
+                                                <Box>
+                                                    <Text fz={'h4'}>Selasa minggu pertama</Text>
+                                                    <Text fz={'h4'}>(09:00-11:00 WITA)</Text>
+                                                </Box>
+                                            </Flex>
+                                        </Box>
+                                        <Box>
+                                            <Flex justify={'space-between'}>
+                                                <Text fz={'h4'}>Lansia</Text>
+                                                <Box>
+                                                    <Text fz={'h4'}>Selasa minggu pertama</Text>
+                                                    <Text fz={'h4'}>(09:00-11:00 WITA)</Text>
+                                                </Box>
+                                            </Flex>
+                                        </Box>
+                                    </Stack>
+                                </Paper>
+                            )
+                        })}
+                    </SimpleGrid>
+                    <Text fz={'h4'} fw={"bold"}>
+                        Pelayanan Posyandu
+                    </Text>
+                    <List type="ordered">
+                        <ListItem fz={'h4'}>Penimbangan bayi dan balita</ListItem>
+                        <ListItem fz={'h4'}>Pemantuan status gizi</ListItem>
+                        <ListItem fz={'h4'}>Imunisasi dasar lengkap</ListItem>
+                        <ListItem fz={'h4'}>Konseling</ListItem>
+                        <ListItem fz={'h4'}>Pemantuan kesehatan ibu hamil</ListItem>
+                    </List>
+                </Stack>
+            </Box>
+        </Stack>
+
+    )
+}

src/app/darmasaba/(pages)/kesehatan/program-kesehatan/page.tsx

@@ -0,0 +1,146 @@
+import colors from "@/con/colors";
+import { Box, Button, Center, Group, Image, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
+import { IconBarbell, IconCalendar, IconOld, IconUser, IconUsersGroup } from "@tabler/icons-react";
+import BackButton from "../../desa/layanan/_com/BackButto";
+
+const data1 = [
+  {
+    id: 1,
+    judul: 'Posyandu Terintegrasi',
+    image: '/api/img/pk-1.png',
+    deskripsi: 'Program pemantauan kesehatan terpadu untuk balita, ibu hamil, dan lansia di Banjar Gulingan dengan sistem pencatatan digital. Layanan meliputi penimbangan, imunisasi, dan konsultasi kesehatan'
+  },
+  {
+    id: 2,
+    judul: 'Senam Lansia',
+    image: '/api/img/pk-2.png',
+    deskripsi: 'Kegiatan olahraga teratur untuk warga lanjut usia dengan gerakan yang disesuaikan untuk menjaga kebugaran dan kesehatan. Program ini didampingi oleh instruktur profesional dan pemantauan kesehatan rutin.'
+  },
+  {
+    id: 3,
+    judul: 'Vaksinasi & Sterilasi HPR',
+    image: '/api/img/pk-3.png',
+    deskripsi: 'Program pengendalian hewan penular rabies melalui vaksinasi dan sterilisasi untuk mencegah penyebaran penyakit zoonosis. Dilengkapi dengan sistem pendataan digital untuk memantau cakupan dan efektivitas program.'
+  }
+]
+const data2 = [
+  {
+    id: 1,
+    icon: <IconBarbell size={50} color={colors['BG-trans']} />,
+    title: "Menjaga Kesehatan Tubuh",
+    desc: "Program kesehatan desa dirancang untuk memelihara kesehatan fisik masyarakat melalui aktivitas rutin, pemeriksaan kesehatan berkala, dan edukasi gaya hidup sehat.",
+  },
+  {
+    id: 2,
+    icon: <IconUsersGroup size={50} color={colors['BG-trans']} />,
+    title: "Mempererat Kebersamaan",
+    desc: "Kegiatan kesehatan komunal menjadi wadah interaksi sosial yang memperkuat ikatan antar warga desa, menumbuhkan rasa kepedulian dan gotong royong.",
+  },
+  {
+    id: 3,
+    icon: <IconOld size={50} color={colors['BG-trans']} />,
+    title: "Medukung Lansia Aktif",
+    desc: "Program khusus bagi lansia membantu menjaga kebugaran, mengurangi risiko penyakit degeneratif, dan menciptakan komunitas pendukung untuk kehidupan yang sehat dan bahagia.",
+  },
+]
+export default 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"}>
+          Program Kesehatan Unggulan
+        </Text>
+        <Text px={{base: 20, md: 90}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+          Desa Darmasaba mengembangkan berbagai program kesehatan terpadu untuk meningkatkan kualitas
+          hidup masyarakat, dengan pendekatan preventif dan promotif bebrbasis teknologi serta prtisipasi aktif
+          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>
+                      <Image src={v.image} alt="" style={{ borderRadius: '14px 14px 0 0' }} />
+                    </Center>
+                    <Box px={'lg'}>
+                      <Box>
+                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
+                          {v.judul}
+                        </Text>
+                        <Text ta={'justify'} fz={'h4'}>{v.deskripsi}</Text>
+                      </Box>
+                      <Box py={15}>
+                        <Button fw={'bold'} fz={'h5'} c={colors["blue-button"]} bg={colors["BG-trans"]}>Detail Program</Button>
+                      </Box>
+                      <Group py={20}>
+                        <Group gap="xs">
+                          <IconCalendar size={18} />
+                          <Text size="sm">Selasa, 11 Januari 2025</Text>
+                        </Group>
+                        <Group gap="xs">
+                          <IconUser size={18} />
+                          <Text size="sm">Admin Desa</Text>
+                        </Group>
+                      </Group>
+                    </Box>
+                  </Stack>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+      <Box py={10} px={{ base: "md", md: 100 }}>
+        <Box pb={10}>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Manfaat Program Kesehatan
+          </Text>
+          <Text fz={{ base: "h4", md: "h3" }} >
+            Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat.
+          </Text>
+        </Box>
+        <SimpleGrid
+          pb={30}
+          cols={{
+            base: 1,
+            md: 3,
+          }}>
+          {data2.map((v, k) => {
+            return (
+              <Paper key={k} px={"xl"} py={80} bg={colors['white-trans-1']} c={colors['blue-button']}>
+                <Stack justify='space-between' >
+                  <Group justify='center'>
+                    <Paper p={'xl'} radius={'100'} bg={colors['blue-button']}>
+                      <Center >
+                        {v.icon}
+                      </Center>
+                    </Paper>
+                  </Group>
+                  <Text ta={"center"} fw={"bold"} fz={"h3"}>
+                    {v.title}
+                  </Text>
+                  <Text ta={"center"} fz={'h4'}>
+                    {v.desc}
+                  </Text>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+    </Stack>
+
+  )
+}

src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx

@@ -0,0 +1,127 @@
+import colors from '@/con/colors';
+import { Stack, Box, Paper, Text, BackgroundImage, SimpleGrid, Title, Flex } 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"}>
+        Puskesmas Darmasaba
+      </Text>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Box>
+            <Paper p={"xl"} bg={colors['white-trans-1']}>
+              <Box pb={30}>
+                <BackgroundImage
+                  pb={30}
+                  radius={16}
+                  h={{ base: 250, md: 500 }}
+                  src='/api/img/posyandu.png'
+                  style={{ position: 'relative' }}
+                >
+                  <Box
+                    style={{
+                      borderRadius: 16,
+                      zIndex: 0
+                    }}
+                    pos={"absolute"}
+                    w={"100%"}
+                    h={"100%"}
+                    bg={colors.trans.dark[2]}
+                  />
+                  <Text style={{
+                    position: 'absolute',
+                    bottom: 35,
+                    left: 15,
+                  }} fw={'bold'} fz={{ base: 'md', md: 'h3' }} c={colors['white-1']}>Puskesmas Darmasaba</Text>
+                  <Text style={{
+                    position: 'absolute',
+                    bottom: 10,
+                    left: 15,
+                  }} fw={'bold'} fz={{ base: 'md', md: 'h4' }} c={colors['white-1']}>Jl. Raya Darmasaba No.45, Badung, Bali</Text>
+                </BackgroundImage>
+                <SimpleGrid
+                  py={20}
+                  cols={{
+                    base: 1,
+                    md: 2
+                  }}>
+                  <Box>
+                    <Stack>
+                      <Title order={3}>Jam Operasional</Title>
+                      <Box>
+                        <Flex justify={'space-between'} align={'center'}>
+                          <Box>
+                            <Text>Senin - Kamis</Text>
+                            <Text>Jumat</Text>
+                            <Text>Sabtu</Text>
+                            <Text> Minggu & Libur</Text>
+                          </Box>
+                          <Box>
+                            <Text>08:00 - 15:00 WITA</Text>
+                            <Text>08:00 - 15:00 WITA</Text>
+                            <Text>08:00 - 15:00 WITA</Text>
+                            <Text>Tutp (UGD 24 JAM)</Text>
+                          </Box>
+                        </Flex>
+                      </Box>
+                    </Stack>
+                  </Box>
+                  <Box>
+                    <Stack>
+                      <Title order={3}>Jam Operasional</Title>
+                      <Box>
+                        <Flex justify={'space-between'} align={'center'}>
+                          <Box>
+                            <Text>Senin - Kamis</Text>
+                            <Text>Jumat</Text>
+                            <Text>Sabtu</Text>
+                            <Text> Minggu & Libur</Text>
+                          </Box>
+                          <Box>
+                            <Text>08:00 - 15:00 WITA</Text>
+                            <Text>08:00 - 15:00 WITA</Text>
+                            <Text>08:00 - 15:00 WITA</Text>
+                            <Text>Tutp (UGD 24 JAM)</Text>
+                          </Box>
+                        </Flex>
+                      </Box>
+                    </Stack>
+                  </Box>
+                  <Box>
+
+                  </Box>
+                </SimpleGrid>
+              </Box>
+              <Box>
+                <Paper p={"xl"} bg={'#B1C5F2'}>
+                  <SimpleGrid
+                    cols={{
+                      base: 1,
+                      md: 2
+                    }}>
+                    <Paper p={"xl"} bg={colors['white-trans-1']}>
+                      <Text fw={"bold"} fz={'h3'} ta={'center'}>Poliklinik Umum</Text>
+                      <Text ta={'center'} fz={{ base: 45, md: 65 }} fw={'bold'} c={colors['blue-button']}>26</Text>
+                    </Paper>
+                    <Paper p={"xl"} bg={colors['white-trans-1']}>
+                      <Text ta={'center'} fz={'h3'} fw={"bold"}>Poli Gigi</Text>
+                      <Text ta={'center'} fz={{ base: 45, md: 65 }} fw={'bold'} c={colors['blue-button']}>26</Text>
+                    </Paper>
+                  </SimpleGrid>
+                </Paper>
+              </Box>
+            </Paper>
+          </Box>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <Stack gap={0} bg={colors.grey[1]}>
             <Navbar />
             <Space h={{
-                base: "2.2rem",
+                base: "3.9rem",
                 md: "2.5rem"
             }} />
             <Box style={{

src/con/navbar-list-menu.ts

@@ -7,42 +7,42 @@ const navbarListMenu = [
             {
                 id: "1.1",
                 name: "Profile PPID",
-                href: "/darmasaba/ppid/profile"
+                href: "/darmasaba/ppid/profile-ppid"
             },
             {
                 id: "1.2",
                 name: "Struktur PPID",
-                href: "/darmasaba/ppid/struktur"
+                href: "/darmasaba/ppid/struktur-ppid"
             },
             {
                 id: "1.3",
                 name: "Visi Misi PPID",
-                href: "/darmasaba/ppid/visimisi"
+                href: "/darmasaba/ppid/visi-misi-ppid"
             },
             {
                 id: "1.4",
                 name: "Dasar Hukum",
-                href: "/darmasaba/ppid/dasarhukum"
+                href: "/darmasaba/ppid/dasar-hukum"
             },
             {
                 id: "1.5",
                 name: "Permohonan Informasi Publik",
-                href: "/darmasaba/ppid/informasi"
+                href: "/darmasaba/ppid/permohonan-informasi-publik"
             },
             {
                 id: "1.6",
                 name: "Permohonan Keberatan Informasi Publik",
-                href: "/darmasaba/ppid/keberatan"
+                href: "/darmasaba/ppid/permohonan-keberatan-informasi-publik"
             },
             {
                 id: "1.7",
                 name: "Daftar Informasi Publik Desa Darmasaba",
-                href: "/darmasaba/ppid/daftar"
+                href: "/darmasaba/ppid/daftar-informasi-publik-desa-darmasaba"
             },
             {
                 id: "1.8",
                 name: "IKM Desa Darmasaba",
-                href: "/darmasaba/ppid/ikm"
+                href: "/darmasaba/ppid/ikm-desa-darmasaba"
             },
 
         ]
@@ -141,7 +141,7 @@ const navbarListMenu = [
             {
                 id: "4.1",
                 name: "Keamanan Lingkungan (Pecalang/Patwal)",
-                href: "/darmasaba/keamanan/keamanan-lingkungan"
+                href: "/darmasaba/keamanan/keamanan-lingkungan-pecalang-patwal"
             },
             {
                 id: "4.2",
@@ -182,43 +182,48 @@ const navbarListMenu = [
             },
             {
                 id: "5.2",
-                name: "Koperasi",
-                href: "/darmasaba/ekonomi/koperasi"
+                name: "Lowongan Kerja Lokal",
+                href: "/darmasaba/ekonomi/lowongan-kerja-lokal"
             },
             {
                 id: "5.3",
-                name: "UMKM",
-                href: "/darmasaba/ekonomi/umkm"
+                name: "Struktur Organisasi dan SK Pengurus BUMDesa",
+                href: "/darmasaba/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa"
             },
             {
                 id: "5.4",
-                name: "Data Ekonomi Desa",
-                href: "/darmasaba/ekonomi/data-ekonomi-desa"
+                name: "PADesa (Pendapatan Asli Desa)",
+                href: "/darmasaba/ekonomi/PADesa-pendapatan-asli-desa"
             },
             {
                 id: "5.5",
-                name: "Pelatihan Wirausaha",
-                href: "/darmasaba/ekonomi/pelatihan-wirausaha"
+                name: "Jumlah Pengangguran 2024-2025",
+                href: "/darmasaba/ekonomi/jumlah-pengangguran-2024-2025"
             },
             {
                 id: "5.6",
-                name: "Bantuan & Pendanaan",
-                href: "/darmasaba/ekonomi/bantuan-pendanaan"
+                name: "Jumlah penduduk usia kerja yang menganggur",
+                href: "/darmasaba/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur"
             },
             {
                 id: "5.7",
-                name: "Investasi Desa",
-                href: "/darmasaba/ekonomi/investasi-desa"
+                name: "Jumlah Penduduk Miskin 2024-2025",
+                href: "/darmasaba/ekonomi/jumlah-penduduk-miskin-2024-2025"
             },
             {
                 id: "5.8",
-                name: "Produk Unggulan",
-                href: "/darmasaba/ekonomi/produk-unggulan"
+                name: "Program Kemiskinan",
+                href: "/darmasaba/ekonomi/program-kemiskinan"
             },
             {
                 id: "5.9",
-                name: "Lowongan Kerja Lokal",
-                href: "/darmasaba/ekonomi/lowongan-kerja-lokal"
+                name: "Sektor Unggulan Desa",
+                href: "/darmasaba/ekonomi/sektor-unggulan-desa"
+            },
+            {
+                id: "5.10",
+                name: "Demografi Pekerjaan",
+                href: "/darmasaba/ekonomi/demografi-pekerjaan"
             }
         ]
     }, {