feat: implement Kependudukan menu with CRUD admin pages

- Add Distribusi Umur admin pages (list, create, edit)
- Add Data Banjar admin pages (list, create, edit)
- Add Migrasi Penduduk admin pages (list, create, edit)
- Update state management with full CRUD operations for all modules
- Add Kependudukan menu to admin sidebar (devBar, navBar, role1)
- Add public pages for Distribusi Umur with age range sorting
- Update Dinamika Penduduk to use real-time birth/death data
- Add Biome configuration for code linting
- Create API routes for all Kependudukan modules

Features:
- Pagination and search for all admin list pages
- Responsive design (table for desktop, cards for mobile)
- Delete confirmation modal
- Toast notifications for user feedback
- Zod validation for all forms
- Age range auto-sorting in public Distribusi Umur chart

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

src/app/darmasaba/(pages)/kependudukan/dashboard/page.tsx

@@ -0,0 +1,196 @@
+'use client'
+import colors from '@/con/colors';
+import { Stack, Box, Paper, Text, Title, SimpleGrid, Skeleton, Group, Badge, Center, Image } from '@mantine/core';
+import { IconUsers, IconHome, IconBasket, IconCoin, IconDatabaseOff } from '@tabler/icons-react';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { useProxy } from 'valtio/utils';
+import kependudukanDashboard from '@/app/admin/(dashboard)/_state/kependudukan/dashboard';
+import { useShallowEffect } from '@mantine/hooks';
+
+function Page() {
+  const state = useProxy(kependudukanDashboard)
+
+  useShallowEffect(() => {
+    state.summary.load()
+  }, [])
+
+  const summary = state.summary.data?.summary;
+
+  if (state.summary.loading) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={200} />
+      </Stack>
+    )
+  }
+
+  if (!summary) {
+    return (
+      <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"lg"}>
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+        </Box>
+        
+        <Box px={{ base: 'md', md: 100 }}>
+          <Title
+            order={1}
+            ta="center"
+            c={colors["blue-button"]}
+            fw="bold"
+            lh={1.2}
+          >
+            Dashboard Kependudukan
+          </Title>
+          <Text
+            ta="center"
+            fz={{ base: 'sm', md: 'md' }}
+            lh={1.5}
+            c="black"
+          >
+            Ringkasan data kependudukan Desa Darmasaba
+          </Text>
+        </Box>
+
+        <Box px={{ base: "md", md: 100 }}>
+          <Paper p="xl" withBorder>
+            <Center py="xl">
+              <Stack align="center" gap="md">
+                <IconDatabaseOff size={80} color={colors.grey['2']} />
+                <Text ta="center" fz="lg" fw={500} c="dimmed">
+                  Data Belum Tersedia
+                </Text>
+                <Text ta="center" fz="sm" c="dimmed" maw={400}>
+                  Data kependudukan untuk tahun ini belum diperbarui. 
+                  Silakan hubungi administrator desa untuk informasi lebih lanjut.
+                </Text>
+              </Stack>
+            </Center>
+          </Paper>
+        </Box>
+      </Stack>
+    )
+  }
+
+  const stats = [
+    {
+      title: 'Total Penduduk',
+      value: summary.totalPenduduk,
+      icon: IconUsers,
+      color: colors['blue-button'],
+    },
+    {
+      title: 'Kepala Keluarga',
+      value: summary.totalKK,
+      icon: IconHome,
+      color: '#6EDF9C',
+    },
+    {
+      title: 'Kelahiran Tahun Ini',
+      value: summary.totalKelahiran,
+      icon: IconBasket,
+      color: '#FF9F43',
+    },
+    {
+      title: 'Penduduk Miskin',
+      value: summary.totalKemiskinan,
+      icon: IconCoin,
+      color: '#EE5050',
+    },
+  ];
+
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"lg"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      
+      <Box px={{ base: 'md', md: 100 }}>
+        <Title
+          order={1}
+          ta="center"
+          c={colors["blue-button"]}
+          fw="bold"
+          lh={1.2}
+        >
+          Dashboard Kependudukan
+        </Title>
+        <Text
+          ta="center"
+          fz={{ base: 'sm', md: 'md' }}
+          lh={1.5}
+          c="black"
+        >
+          Ringkasan data kependudukan Desa Darmasaba
+        </Text>
+      </Box>
+
+      <Box px={{ base: "md", md: 100 }}>
+        <SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="md">
+          {stats.map((stat) => {
+            const Icon = stat.icon;
+            return (
+              <Paper key={stat.title} p="xl" withBorder>
+                <Group justify="space-between">
+                  <div>
+                    <Text c="dimmed" fz="sm" fw={500}>
+                      {stat.title}
+                    </Text>
+                    <Text fz={28} fw={700} mt={5}>
+                      {stat.value.toLocaleString('id-ID')}
+                    </Text>
+                  </div>
+                  <Badge
+                    size="xl"
+                    color={stat.color}
+                    variant="light"
+                  >
+                    <Icon size={32} />
+                  </Badge>
+                </Group>
+              </Paper>
+            );
+          })}
+        </SimpleGrid>
+      </Box>
+
+      {state.summary.data?.dinamika && (
+        <Box px={{ base: "md", md: 100 }}>
+          <Paper p="xl" withBorder>
+            <Title order={3} mb="md" c={colors["blue-button"]}>
+              Dinamika Penduduk
+            </Title>
+            <SimpleGrid cols={{ base: 2, md: 4 }} spacing="md">
+              <Paper p="md" bg="#6EDF9C">
+                <Text fz="sm" c="white">Kelahiran</Text>
+                <Text fz={24} fw={700} c="white">
+                  {state.summary.data.dinamika.kelahiran}
+                </Text>
+              </Paper>
+              <Paper p="md" bg="#EE5050">
+                <Text fz="sm" c="white">Kematian</Text>
+                <Text fz={24} fw={700} c="white">
+                  {state.summary.data.dinamika.kematian}
+                </Text>
+              </Paper>
+              <Paper p="md" bg="#5082EE">
+                <Text fz="sm" c="white">Pindah Masuk</Text>
+                <Text fz={24} fw={700} c="white">
+                  {state.summary.data.dinamika.pindahMasuk}
+                </Text>
+              </Paper>
+              <Paper p="md" bg="#FF9F43">
+                <Text fz="sm" c="white">Pindah Keluar</Text>
+                <Text fz={24} fw={700} c="white">
+                  {state.summary.data.dinamika.pindahKeluar}
+                </Text>
+              </Paper>
+            </SimpleGrid>
+          </Paper>
+        </Box>
+      )}
+    </Stack>
+  );
+}
+
+export default Page;