Fix New UI Pengaduan
This commit is contained in:
@@ -1,116 +1,73 @@
|
|||||||
import { BarChart, PieChart } from "@mantine/charts";
|
|
||||||
import {
|
import {
|
||||||
|
Badge,
|
||||||
Box,
|
Box,
|
||||||
Card,
|
Card,
|
||||||
Grid,
|
Grid,
|
||||||
|
GridCol,
|
||||||
Group,
|
Group,
|
||||||
|
Progress,
|
||||||
Stack,
|
Stack,
|
||||||
Table,
|
|
||||||
Text,
|
Text,
|
||||||
|
ThemeIcon,
|
||||||
Title,
|
Title,
|
||||||
useMantineColorScheme,
|
useMantineColorScheme,
|
||||||
} from "@mantine/core";
|
} from "@mantine/core";
|
||||||
import {
|
import {
|
||||||
IconArrowDown,
|
Users,
|
||||||
IconArrowUp,
|
Home,
|
||||||
IconBabyCarriage,
|
Baby,
|
||||||
IconSkull,
|
TrendingDown,
|
||||||
} from "@tabler/icons-react";
|
BarChart3,
|
||||||
import React from "react";
|
PieChart as PieChartIcon,
|
||||||
|
Building2,
|
||||||
|
} from "lucide-react";
|
||||||
|
import {
|
||||||
|
Bar,
|
||||||
|
BarChart,
|
||||||
|
CartesianGrid,
|
||||||
|
Cell,
|
||||||
|
Pie,
|
||||||
|
PieChart,
|
||||||
|
ResponsiveContainer,
|
||||||
|
Tooltip,
|
||||||
|
XAxis,
|
||||||
|
YAxis,
|
||||||
|
} from "recharts";
|
||||||
|
|
||||||
// Sample Data
|
// KPI Data
|
||||||
const kpiData = [
|
const kpiData = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: "Total Penduduk",
|
title: "Total Penduduk",
|
||||||
value: "5.634",
|
value: "5.634",
|
||||||
sub: "Aktif terdaftar",
|
subtitle: "Aktif terdaftar",
|
||||||
icon: (
|
icon: Users,
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
strokeWidth={1.5}
|
|
||||||
stroke="currentColor"
|
|
||||||
className="h-6 w-6 text-muted-foreground"
|
|
||||||
role="img"
|
|
||||||
aria-label="Icon penduduk"
|
|
||||||
>
|
|
||||||
<title>Total Penduduk</title>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
title: "Kepala Keluarga",
|
title: "Kepala Keluarga",
|
||||||
value: "1.354",
|
value: "1.354",
|
||||||
sub: "Total KK",
|
subtitle: "Total KK",
|
||||||
icon: (
|
icon: Home,
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
strokeWidth={1.5}
|
|
||||||
stroke="currentColor"
|
|
||||||
className="h-6 w-6 text-muted-foreground"
|
|
||||||
role="img"
|
|
||||||
aria-label="Icon kepala keluarga"
|
|
||||||
>
|
|
||||||
<title>Kepala Keluarga</title>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
title: "Kelahiran",
|
title: "Kelahiran",
|
||||||
value: "23",
|
value: "23",
|
||||||
sub: "Tahun ini",
|
subtitle: "Tahun ini",
|
||||||
icon: (
|
icon: Baby,
|
||||||
<IconBabyCarriage
|
|
||||||
className="h-6 w-6 text-muted-foreground"
|
|
||||||
role="img"
|
|
||||||
aria-label="Icon kelahiran"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
title: "Kemiskinan",
|
title: "Kemiskinan",
|
||||||
value: "324",
|
value: "324",
|
||||||
delta: "-10% dari tahun lalu",
|
subtitle: "-10% dari tahun lalu",
|
||||||
deltaType: "positive",
|
trend: "positive",
|
||||||
icon: (
|
icon: TrendingDown,
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
strokeWidth={1.5}
|
|
||||||
stroke="currentColor"
|
|
||||||
className="h-6 w-6 text-muted-foreground"
|
|
||||||
role="img"
|
|
||||||
aria-label="Icon kemiskinan"
|
|
||||||
>
|
|
||||||
<title>Kemiskinan</title>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// Age Distribution Data
|
||||||
const ageDistributionData = [
|
const ageDistributionData = [
|
||||||
{ ageRange: "17-25", total: 850 },
|
{ ageRange: "17-25", total: 850 },
|
||||||
{ ageRange: "26-35", total: 1200 },
|
{ ageRange: "26-35", total: 1200 },
|
||||||
@@ -120,6 +77,7 @@ const ageDistributionData = [
|
|||||||
{ ageRange: "65+", total: 484 },
|
{ ageRange: "65+", total: 484 },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// Job Distribution Data
|
||||||
const jobDistributionData = [
|
const jobDistributionData = [
|
||||||
{ job: "Sipil", total: 1200 },
|
{ job: "Sipil", total: 1200 },
|
||||||
{ job: "Guru", total: 850 },
|
{ job: "Guru", total: 850 },
|
||||||
@@ -128,283 +86,597 @@ const jobDistributionData = [
|
|||||||
{ job: "Wiraswasta", total: 984 },
|
{ job: "Wiraswasta", total: 984 },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// Religion Data
|
||||||
const religionData = [
|
const religionData = [
|
||||||
{ religion: "Hindu", total: 4234, color: "red" },
|
{ name: "Hindu", value: 4234, color: "#EF4444" },
|
||||||
{ religion: "Islam", total: 856, color: "blue" },
|
{ name: "Islam", value: 856, color: "#3B82F6" },
|
||||||
{ religion: "Kristen", total: 412, color: "green" },
|
{ name: "Kristen", value: 412, color: "#22C55E" },
|
||||||
{ religion: "Buddha", total: 202, color: "yellow" },
|
{ name: "Buddha", value: 202, color: "#FACC15" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// Banjar Data
|
||||||
const banjarData = [
|
const banjarData = [
|
||||||
{ banjar: "Banjar Darmasaba", population: 1200, kk: 300, poor: 45 },
|
{ banjar: "Darmasaba", population: 1200, kk: 300, poor: 45 },
|
||||||
{ banjar: "Banjar Manesa", population: 950, kk: 240, poor: 32 },
|
{ banjar: "Manesa", population: 950, kk: 240, poor: 32 },
|
||||||
{ banjar: "Banjar Cabe", population: 800, kk: 200, poor: 28 },
|
{ banjar: "Cabe", population: 800, kk: 200, poor: 28 },
|
||||||
{ banjar: "Banjar Penenjoan", population: 1100, kk: 280, poor: 38 },
|
{ banjar: "Penenjoan", population: 1100, kk: 280, poor: 38 },
|
||||||
{ banjar: "Banjar Baler Pasar", population: 984, kk: 250, poor: 42 },
|
{ banjar: "Baler Pasar", population: 984, kk: 250, poor: 42 },
|
||||||
{ banjar: "Banjar Bucu", population: 600, kk: 184, poor: 25 },
|
{ banjar: "Bucu", population: 600, kk: 184, poor: 25 },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// Dynamic Stats Data
|
||||||
const dynamicStats = [
|
const dynamicStats = [
|
||||||
{
|
{
|
||||||
title: "Kelahiran",
|
title: "Kelahiran",
|
||||||
value: "23",
|
value: "23",
|
||||||
icon: <IconBabyCarriage size={16} />,
|
icon: Baby,
|
||||||
color: "green",
|
color: "#22C55E",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Kematian",
|
title: "Kematian",
|
||||||
value: "12",
|
value: "12",
|
||||||
icon: <IconSkull size={16} />,
|
icon: TrendingDown,
|
||||||
color: "red",
|
color: "#EF4444",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Pindah Masuk",
|
title: "Pindah Masuk",
|
||||||
value: "45",
|
value: "45",
|
||||||
icon: <IconArrowDown size={16} />,
|
icon: Users,
|
||||||
color: "blue",
|
color: "#3B82F6",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Pindah Keluar",
|
title: "Pindah Keluar",
|
||||||
value: "32",
|
value: "32",
|
||||||
icon: <IconArrowUp size={16} />,
|
icon: Users,
|
||||||
color: "orange",
|
color: "#3B82F6",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// Sektor Unggulan Data
|
||||||
|
const sektorUnggulanData = [
|
||||||
|
{ sektor: "Pertanian", value: 65 },
|
||||||
|
{ sektor: "Perdagangan", value: 45 },
|
||||||
|
{ sektor: "Industri", value: 38 },
|
||||||
|
{ sektor: "Jasa", value: 52 },
|
||||||
|
];
|
||||||
|
|
||||||
const DemografiPekerjaan = () => {
|
const DemografiPekerjaan = () => {
|
||||||
const { colorScheme } = useMantineColorScheme();
|
const { colorScheme } = useMantineColorScheme();
|
||||||
const dark = colorScheme === "dark";
|
const dark = colorScheme === "dark";
|
||||||
return (
|
|
||||||
<Box className="space-y-6">
|
|
||||||
<Stack gap="xl">
|
|
||||||
{/* KPI Cards */}
|
|
||||||
<Grid gutter="lg">
|
|
||||||
{kpiData.map((kpi) => (
|
|
||||||
<Grid.Col key={kpi.id} span={{ base: 12, md: 6, lg: 3 }}>
|
|
||||||
<Card
|
|
||||||
p="md"
|
|
||||||
radius="md"
|
|
||||||
withBorder
|
|
||||||
bg={dark ? "#141D34" : "white"}
|
|
||||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
|
||||||
>
|
|
||||||
<Group justify="space-between" align="flex-start" mb="xs">
|
|
||||||
<Text size="sm" fw={500} c={dark ? "dark.3" : "dimmed"}>
|
|
||||||
{kpi.title}
|
|
||||||
</Text>
|
|
||||||
{React.cloneElement(kpi.icon, {
|
|
||||||
className: "h-6 w-6",
|
|
||||||
color: dark
|
|
||||||
? "var(--mantine-color-dark-3)"
|
|
||||||
: "var(--mantine-color-dimmed)",
|
|
||||||
})}
|
|
||||||
</Group>
|
|
||||||
<Title order={3} fw={700} c={dark ? "dark.0" : "black"} mt="xs">
|
|
||||||
{kpi.value}
|
|
||||||
</Title>
|
|
||||||
{kpi.delta && (
|
|
||||||
<Text
|
|
||||||
size="xs"
|
|
||||||
c={
|
|
||||||
kpi.deltaType === "positive"
|
|
||||||
? "green"
|
|
||||||
: kpi.deltaType === "negative"
|
|
||||||
? "red"
|
|
||||||
: dark
|
|
||||||
? "dark.3"
|
|
||||||
: "dimmed"
|
|
||||||
}
|
|
||||||
mt={4}
|
|
||||||
>
|
|
||||||
{kpi.delta}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
{kpi.sub && (
|
|
||||||
<Text size="xs" c={dark ? "dark.3" : "dimmed"} mt={2}>
|
|
||||||
{kpi.sub}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
</Grid.Col>
|
|
||||||
))}
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* Charts Section */}
|
return (
|
||||||
<Grid gutter="lg">
|
<Stack gap="lg">
|
||||||
{/* Grafik Pengelompokan Umur */}
|
{/* TOP SECTION - 4 STAT CARDS */}
|
||||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
<Grid gutter="md">
|
||||||
|
{kpiData.map((item) => (
|
||||||
|
<Grid.Col key={item.id} span={{ base: 12, sm: 6, lg: 3 }}>
|
||||||
<Card
|
<Card
|
||||||
p="md"
|
p="md"
|
||||||
radius="md"
|
radius="xl"
|
||||||
withBorder
|
withBorder
|
||||||
bg={dark ? "#141D34" : "white"}
|
bg={dark ? "#1E293B" : "white"}
|
||||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
style={{
|
||||||
|
borderColor: dark ? "#334155" : "white",
|
||||||
|
boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||||
|
transition: "transform 0.15s ease, box-shadow 0.15s ease",
|
||||||
|
}}
|
||||||
|
h="100%"
|
||||||
>
|
>
|
||||||
<Title order={3} fw={500} mb="md">
|
<Group justify="space-between" align="flex-start" w="100%">
|
||||||
Grafik Pengelompokan Umur
|
<Stack gap={2}>
|
||||||
</Title>
|
<Text size="sm" c="dimmed">
|
||||||
<BarChart
|
{item.title}
|
||||||
h={300}
|
</Text>
|
||||||
data={ageDistributionData}
|
<Text size="xl" fw={700} c={dark ? "white" : "gray.9"}>
|
||||||
dataKey="ageRange"
|
{item.value}
|
||||||
series={[{ name: "total", color: "darmasaba-navy" }]}
|
</Text>
|
||||||
withLegend
|
<Group gap={4} align="flex-start">
|
||||||
/>
|
{item.trend === "positive" && (
|
||||||
|
<TrendingDown size={14} color="#22C55E" />
|
||||||
|
)}
|
||||||
|
<Text
|
||||||
|
size="xs"
|
||||||
|
c={
|
||||||
|
item.trend === "positive"
|
||||||
|
? "green"
|
||||||
|
: dark
|
||||||
|
? "gray.4"
|
||||||
|
: "gray.5"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{item.subtitle}
|
||||||
|
</Text>
|
||||||
|
</Group>
|
||||||
|
</Stack>
|
||||||
|
<ThemeIcon
|
||||||
|
color="#1E3A5F"
|
||||||
|
variant="filled"
|
||||||
|
size="lg"
|
||||||
|
radius="xl"
|
||||||
|
>
|
||||||
|
<item.icon style={{ width: "60%", height: "60%" }} />
|
||||||
|
</ThemeIcon>
|
||||||
|
</Group>
|
||||||
</Card>
|
</Card>
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
|
||||||
{/* Demografi Pekerjaan */}
|
{/* ROW 2 - 3 COLUMNS */}
|
||||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
<Grid gutter="lg">
|
||||||
<Card
|
{/* LEFT: PENGELOMPOKAN UMUR */}
|
||||||
p="md"
|
<Grid.Col span={{ base: 12, lg: 4 }}>
|
||||||
radius="md"
|
<Card
|
||||||
withBorder
|
p="md"
|
||||||
bg={dark ? "#141D34" : "white"}
|
radius="xl"
|
||||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
withBorder
|
||||||
>
|
bg={dark ? "#1E293B" : "white"}
|
||||||
<Title order={3} fw={500} mb="md">
|
style={{
|
||||||
|
borderColor: dark ? "#334155" : "white",
|
||||||
|
boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||||
|
}}
|
||||||
|
h="100%"
|
||||||
|
>
|
||||||
|
<Group gap="xs" mb="md">
|
||||||
|
<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
|
||||||
|
<BarChart3 size={14} />
|
||||||
|
</ThemeIcon>
|
||||||
|
<Title order={4} c={dark ? "white" : "gray.9"}>
|
||||||
|
Pengelompokan Umur
|
||||||
|
</Title>
|
||||||
|
</Group>
|
||||||
|
<ResponsiveContainer width="100%" height={250}>
|
||||||
|
<BarChart data={ageDistributionData}>
|
||||||
|
<CartesianGrid
|
||||||
|
strokeDasharray="3 3"
|
||||||
|
vertical={false}
|
||||||
|
stroke={dark ? "#334155" : "#e5e7eb"}
|
||||||
|
/>
|
||||||
|
<XAxis
|
||||||
|
dataKey="ageRange"
|
||||||
|
axisLine={false}
|
||||||
|
tickLine={false}
|
||||||
|
tick={{
|
||||||
|
fill: dark ? "#E2E8F0" : "#374151",
|
||||||
|
fontSize: 12,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
axisLine={false}
|
||||||
|
tickLine={false}
|
||||||
|
tick={{
|
||||||
|
fill: dark ? "#E2E8F0" : "#374151",
|
||||||
|
fontSize: 12,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
backgroundColor: dark ? "#1E293B" : "white",
|
||||||
|
borderColor: dark ? "#334155" : "#e5e7eb",
|
||||||
|
borderRadius: "8px",
|
||||||
|
}}
|
||||||
|
labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
|
||||||
|
/>
|
||||||
|
<Bar
|
||||||
|
dataKey="total"
|
||||||
|
fill="#1E3A5F"
|
||||||
|
radius={[8, 8, 0, 0]}
|
||||||
|
maxBarSize={40}
|
||||||
|
/>
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</Card>
|
||||||
|
</Grid.Col>
|
||||||
|
|
||||||
|
{/* CENTER: DEMOGRAFI PEKERJAAN */}
|
||||||
|
<Grid.Col span={{ base: 12, lg: 4 }}>
|
||||||
|
<Card
|
||||||
|
p="md"
|
||||||
|
radius="xl"
|
||||||
|
withBorder
|
||||||
|
bg={dark ? "#1E293B" : "white"}
|
||||||
|
style={{
|
||||||
|
borderColor: dark ? "#334155" : "white",
|
||||||
|
boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||||
|
}}
|
||||||
|
h="100%"
|
||||||
|
>
|
||||||
|
<Group gap="xs" mb="md">
|
||||||
|
<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
|
||||||
|
<Building2 size={14} />
|
||||||
|
</ThemeIcon>
|
||||||
|
<Title order={4} c={dark ? "white" : "gray.9"}>
|
||||||
Demografi Pekerjaan
|
Demografi Pekerjaan
|
||||||
</Title>
|
</Title>
|
||||||
<BarChart
|
</Group>
|
||||||
h={300}
|
<ResponsiveContainer width="100%" height={250}>
|
||||||
data={jobDistributionData}
|
<BarChart data={jobDistributionData} layout="vertical">
|
||||||
dataKey="job"
|
<CartesianGrid
|
||||||
series={[{ name: "total", color: "darmasaba-navy" }]}
|
strokeDasharray="3 3"
|
||||||
withLegend
|
horizontal={false}
|
||||||
/>
|
stroke={dark ? "#334155" : "#e5e7eb"}
|
||||||
</Card>
|
/>
|
||||||
</Grid.Col>
|
<XAxis
|
||||||
</Grid>
|
type="number"
|
||||||
|
axisLine={false}
|
||||||
|
tickLine={false}
|
||||||
|
tick={{
|
||||||
|
fill: dark ? "#E2E8F0" : "#374151",
|
||||||
|
fontSize: 12,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
type="category"
|
||||||
|
dataKey="job"
|
||||||
|
axisLine={false}
|
||||||
|
tickLine={false}
|
||||||
|
tick={{
|
||||||
|
fill: dark ? "#E2E8F0" : "#374151",
|
||||||
|
fontSize: 12,
|
||||||
|
}}
|
||||||
|
width={90}
|
||||||
|
/>
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
backgroundColor: dark ? "#1E293B" : "white",
|
||||||
|
borderColor: dark ? "#334155" : "#e5e7eb",
|
||||||
|
borderRadius: "8px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Bar
|
||||||
|
dataKey="total"
|
||||||
|
fill="#1E3A5F"
|
||||||
|
radius={[0, 8, 8, 0]}
|
||||||
|
maxBarSize={30}
|
||||||
|
/>
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</Card>
|
||||||
|
</Grid.Col>
|
||||||
|
|
||||||
{/* Agama & Data per Banjar */}
|
{/* RIGHT: STATISTIK DINAMIKA PENDUDUK */}
|
||||||
<Grid gutter="lg">
|
<Grid.Col span={{ base: 12, lg: 4 }}>
|
||||||
{/* Distribusi Agama */}
|
<Card
|
||||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
p="md"
|
||||||
<Card
|
radius="xl"
|
||||||
p="md"
|
withBorder
|
||||||
radius="md"
|
bg={dark ? "#1E293B" : "white"}
|
||||||
withBorder
|
style={{
|
||||||
bg={dark ? "#141D34" : "white"}
|
borderColor: dark ? "#334155" : "white",
|
||||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||||
>
|
}}
|
||||||
<Title order={3} fw={500} mb="md">
|
h="100%"
|
||||||
Distribusi Agama
|
>
|
||||||
|
<Group gap="xs" mb="md">
|
||||||
|
<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
|
||||||
|
<BarChart3 size={14} />
|
||||||
|
</ThemeIcon>
|
||||||
|
<Title order={4} c={dark ? "white" : "gray.9"}>
|
||||||
|
Dinamika Penduduk
|
||||||
</Title>
|
</Title>
|
||||||
<PieChart
|
</Group>
|
||||||
h={300}
|
<Grid gutter="sm">
|
||||||
data={religionData.map((item) => ({
|
{dynamicStats.map((stat, index) => (
|
||||||
name: item.religion,
|
<Grid.Col key={index} span={6}>
|
||||||
value: item.total,
|
<Card
|
||||||
color: item.color,
|
p="sm"
|
||||||
}))}
|
radius="lg"
|
||||||
withLabels
|
bg={dark ? "#334155" : "#F1F5F9"}
|
||||||
withLabelsLine
|
style={{
|
||||||
labelsPosition="outside"
|
transition: "transform 0.15s ease",
|
||||||
labelsType="percent"
|
cursor: "pointer",
|
||||||
/>
|
}}
|
||||||
</Card>
|
>
|
||||||
</Grid.Col>
|
<Stack gap={2} align="center">
|
||||||
|
<ThemeIcon
|
||||||
{/* Data per Banjar */}
|
color={stat.color}
|
||||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
variant="filled"
|
||||||
<Card
|
size="md"
|
||||||
p="md"
|
radius="lg"
|
||||||
radius="md"
|
>
|
||||||
withBorder
|
<stat.icon size={14} />
|
||||||
bg={dark ? "#141D34" : "white"}
|
</ThemeIcon>
|
||||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
<Text size="xs" c="dimmed" ta="center">
|
||||||
>
|
|
||||||
<Title order={3} fw={500} c={dark ? "dark.0" : "black"} mb="md">
|
|
||||||
Data per Banjar
|
|
||||||
</Title>
|
|
||||||
<Table striped highlightOnHover>
|
|
||||||
<Table.Thead>
|
|
||||||
<Table.Tr>
|
|
||||||
<Table.Th>
|
|
||||||
<Text c={dark ? "dark.0" : "black"}>Banjar</Text>
|
|
||||||
</Table.Th>
|
|
||||||
<Table.Th>
|
|
||||||
<Text c={dark ? "dark.0" : "black"}>Penduduk</Text>
|
|
||||||
</Table.Th>
|
|
||||||
<Table.Th>
|
|
||||||
<Text c={dark ? "dark.0" : "black"}>KK</Text>
|
|
||||||
</Table.Th>
|
|
||||||
<Table.Th>
|
|
||||||
<Text c={dark ? "dark.0" : "black"}>Miskin</Text>
|
|
||||||
</Table.Th>
|
|
||||||
</Table.Tr>
|
|
||||||
</Table.Thead>
|
|
||||||
<Table.Tbody>
|
|
||||||
{banjarData.map((item, index) => (
|
|
||||||
<Table.Tr key={`${item.banjar}-${index}`}>
|
|
||||||
<Table.Td>
|
|
||||||
<Text c={dark ? "dark.0" : "black"}>{item.banjar}</Text>
|
|
||||||
</Table.Td>
|
|
||||||
<Table.Td>
|
|
||||||
<Text c={dark ? "dark.0" : "black"}>
|
|
||||||
{item.population.toLocaleString()}
|
|
||||||
</Text>
|
|
||||||
</Table.Td>
|
|
||||||
<Table.Td>
|
|
||||||
<Text c={dark ? "dark.0" : "black"}>
|
|
||||||
{item.kk.toLocaleString()}
|
|
||||||
</Text>
|
|
||||||
</Table.Td>
|
|
||||||
<Table.Td>
|
|
||||||
<Text c={dark ? "red.4" : "red"}>
|
|
||||||
{item.poor.toLocaleString()}
|
|
||||||
</Text>
|
|
||||||
</Table.Td>
|
|
||||||
</Table.Tr>
|
|
||||||
))}
|
|
||||||
</Table.Tbody>
|
|
||||||
</Table>
|
|
||||||
</Card>
|
|
||||||
</Grid.Col>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* Statistik Dinamika Penduduk */}
|
|
||||||
<Card
|
|
||||||
p="md"
|
|
||||||
radius="md"
|
|
||||||
withBorder
|
|
||||||
bg={dark ? "#141D34" : "white"}
|
|
||||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
|
||||||
>
|
|
||||||
<Title order={3} fw={500} c={dark ? "dark.0" : "black"} mb="md">
|
|
||||||
Statistik Dinamika Penduduk
|
|
||||||
</Title>
|
|
||||||
<Grid gutter="md">
|
|
||||||
{dynamicStats.map((stat, index) => (
|
|
||||||
<Grid.Col
|
|
||||||
key={`${stat.title}-${index}`}
|
|
||||||
span={{ base: 12, md: 3 }}
|
|
||||||
>
|
|
||||||
<Card
|
|
||||||
p="md"
|
|
||||||
radius="md"
|
|
||||||
withBorder
|
|
||||||
bg={dark ? "#141D34" : "white"}
|
|
||||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
|
||||||
>
|
|
||||||
<Group justify="space-between" align="center">
|
|
||||||
<Box>
|
|
||||||
<Text size="sm" fw={500} c={dark ? "dark.3" : "dimmed"}>
|
|
||||||
{stat.title}
|
{stat.title}
|
||||||
</Text>
|
</Text>
|
||||||
<Title order={4} fw={700} c={stat.color}>
|
<Text
|
||||||
|
size="lg"
|
||||||
|
fw={700}
|
||||||
|
c={stat.color}
|
||||||
|
style={{ lineHeight: 1 }}
|
||||||
|
>
|
||||||
{stat.value}
|
{stat.value}
|
||||||
</Title>
|
</Text>
|
||||||
</Box>
|
</Stack>
|
||||||
<Box c={stat.color}>{stat.icon}</Box>
|
</Card>
|
||||||
|
</Grid.Col>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</Card>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* ROW 3 - 3 COLUMNS */}
|
||||||
|
<Grid gutter="lg">
|
||||||
|
{/* LEFT: DISTRIBUSI AGAMA */}
|
||||||
|
<Grid.Col span={{ base: 12, lg: 4 }}>
|
||||||
|
<Card
|
||||||
|
p="md"
|
||||||
|
radius="xl"
|
||||||
|
withBorder
|
||||||
|
bg={dark ? "#1E293B" : "white"}
|
||||||
|
style={{
|
||||||
|
borderColor: dark ? "#334155" : "white",
|
||||||
|
boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||||
|
}}
|
||||||
|
h="100%"
|
||||||
|
>
|
||||||
|
<Group gap="xs" mb="md">
|
||||||
|
<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
|
||||||
|
<PieChartIcon size={14} />
|
||||||
|
</ThemeIcon>
|
||||||
|
<Title order={4} c={dark ? "white" : "gray.9"}>
|
||||||
|
Distribusi Agama
|
||||||
|
</Title>
|
||||||
|
</Group>
|
||||||
|
<ResponsiveContainer width="100%" height={250}>
|
||||||
|
<PieChart>
|
||||||
|
<Pie
|
||||||
|
data={religionData}
|
||||||
|
cx="50%"
|
||||||
|
cy="50%"
|
||||||
|
innerRadius={60}
|
||||||
|
outerRadius={90}
|
||||||
|
paddingAngle={2}
|
||||||
|
dataKey="value"
|
||||||
|
>
|
||||||
|
{religionData.map((entry, index) => (
|
||||||
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||||
|
))}
|
||||||
|
</Pie>
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
backgroundColor: dark ? "#1E293B" : "white",
|
||||||
|
borderColor: dark ? "#334155" : "#e5e7eb",
|
||||||
|
borderRadius: "8px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</PieChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
<Stack gap="xs" mt="md">
|
||||||
|
{religionData.map((item, index) => (
|
||||||
|
<Group key={index} justify="space-between">
|
||||||
|
<Group gap="xs">
|
||||||
|
<Box
|
||||||
|
w={10}
|
||||||
|
h={10}
|
||||||
|
style={{
|
||||||
|
backgroundColor: item.color,
|
||||||
|
borderRadius: 2,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Text size="sm" c={dark ? "white" : "gray.7"}>
|
||||||
|
{item.name}
|
||||||
|
</Text>
|
||||||
</Group>
|
</Group>
|
||||||
</Card>
|
<Text size="sm" fw={600} c={dark ? "white" : "gray.9"}>
|
||||||
</Grid.Col>
|
{item.value.toLocaleString()}
|
||||||
))}
|
</Text>
|
||||||
</Grid>
|
</Group>
|
||||||
</Card>
|
))}
|
||||||
</Stack>
|
</Stack>
|
||||||
</Box>
|
</Card>
|
||||||
|
</Grid.Col>
|
||||||
|
|
||||||
|
{/* CENTER: DATA PER BANJAR */}
|
||||||
|
<Grid.Col span={{ base: 12, lg: 4 }}>
|
||||||
|
<Card
|
||||||
|
p="md"
|
||||||
|
radius="xl"
|
||||||
|
withBorder
|
||||||
|
bg={dark ? "#1E293B" : "white"}
|
||||||
|
style={{
|
||||||
|
borderColor: dark ? "#334155" : "white",
|
||||||
|
boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||||
|
}}
|
||||||
|
h="100%"
|
||||||
|
>
|
||||||
|
<Group gap="xs" mb="md">
|
||||||
|
<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
|
||||||
|
<Users size={14} />
|
||||||
|
</ThemeIcon>
|
||||||
|
<Title order={4} c={dark ? "white" : "gray.9"}>
|
||||||
|
Data per Banjar
|
||||||
|
</Title>
|
||||||
|
</Group>
|
||||||
|
<Box style={{ overflowX: "auto" }}>
|
||||||
|
<table style={{ width: "100%", borderCollapse: "collapse" }}>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th
|
||||||
|
style={{
|
||||||
|
textAlign: "left",
|
||||||
|
padding: "8px",
|
||||||
|
fontSize: "12px",
|
||||||
|
fontWeight: 600,
|
||||||
|
color: dark ? "#94A3B8" : "#64748B",
|
||||||
|
borderBottom: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Banjar
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
style={{
|
||||||
|
textAlign: "right",
|
||||||
|
padding: "8px",
|
||||||
|
fontSize: "12px",
|
||||||
|
fontWeight: 600,
|
||||||
|
color: dark ? "#94A3B8" : "#64748B",
|
||||||
|
borderBottom: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Penduduk
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
style={{
|
||||||
|
textAlign: "right",
|
||||||
|
padding: "8px",
|
||||||
|
fontSize: "12px",
|
||||||
|
fontWeight: 600,
|
||||||
|
color: dark ? "#94A3B8" : "#64748B",
|
||||||
|
borderBottom: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
KK
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
style={{
|
||||||
|
textAlign: "right",
|
||||||
|
padding: "8px",
|
||||||
|
fontSize: "12px",
|
||||||
|
fontWeight: 600,
|
||||||
|
color: dark ? "#94A3B8" : "#64748B",
|
||||||
|
borderBottom: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Miskin
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{banjarData.map((item, index) => (
|
||||||
|
<tr
|
||||||
|
key={index}
|
||||||
|
style={{
|
||||||
|
backgroundColor:
|
||||||
|
index % 2 === 0
|
||||||
|
? dark
|
||||||
|
? "#334155"
|
||||||
|
: "#F8FAFC"
|
||||||
|
: "transparent",
|
||||||
|
transition: "background-color 0.15s ease",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
style={{
|
||||||
|
padding: "10px 8px",
|
||||||
|
fontSize: "13px",
|
||||||
|
fontWeight: 500,
|
||||||
|
color: dark ? "#E2E8F0" : "#1E293B",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.banjar}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
style={{
|
||||||
|
padding: "10px 8px",
|
||||||
|
textAlign: "right",
|
||||||
|
fontSize: "13px",
|
||||||
|
color: dark ? "#E2E8F0" : "#1E293B",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.population.toLocaleString()}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
style={{
|
||||||
|
padding: "10px 8px",
|
||||||
|
textAlign: "right",
|
||||||
|
fontSize: "13px",
|
||||||
|
color: dark ? "#E2E8F0" : "#1E293B",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.kk.toLocaleString()}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
style={{
|
||||||
|
padding: "10px 8px",
|
||||||
|
textAlign: "right",
|
||||||
|
fontSize: "13px",
|
||||||
|
color: "#EF4444",
|
||||||
|
fontWeight: 600,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.poor.toLocaleString()}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
</Grid.Col>
|
||||||
|
|
||||||
|
{/* RIGHT: STATISTIK SEKTOR UNGGULAN */}
|
||||||
|
<Grid.Col span={{ base: 12, lg: 4 }}>
|
||||||
|
<Card
|
||||||
|
p="md"
|
||||||
|
radius="xl"
|
||||||
|
withBorder
|
||||||
|
bg={dark ? "#1E293B" : "white"}
|
||||||
|
style={{
|
||||||
|
borderColor: dark ? "#334155" : "white",
|
||||||
|
boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||||
|
}}
|
||||||
|
h="100%"
|
||||||
|
>
|
||||||
|
<Group gap="xs" mb="md">
|
||||||
|
<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
|
||||||
|
<BarChart3 size={14} />
|
||||||
|
</ThemeIcon>
|
||||||
|
<Title order={4} c={dark ? "white" : "gray.9"}>
|
||||||
|
Sektor Unggulan
|
||||||
|
</Title>
|
||||||
|
</Group>
|
||||||
|
<ResponsiveContainer width="100%" height={250}>
|
||||||
|
<BarChart data={sektorUnggulanData} layout="vertical">
|
||||||
|
<CartesianGrid
|
||||||
|
strokeDasharray="3 3"
|
||||||
|
horizontal={false}
|
||||||
|
stroke={dark ? "#334155" : "#e5e7eb"}
|
||||||
|
/>
|
||||||
|
<XAxis
|
||||||
|
type="number"
|
||||||
|
axisLine={false}
|
||||||
|
tickLine={false}
|
||||||
|
tick={{
|
||||||
|
fill: dark ? "#E2E8F0" : "#374151",
|
||||||
|
fontSize: 12,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
type="category"
|
||||||
|
dataKey="sektor"
|
||||||
|
axisLine={false}
|
||||||
|
tickLine={false}
|
||||||
|
tick={{
|
||||||
|
fill: dark ? "#E2E8F0" : "#374151",
|
||||||
|
fontSize: 12,
|
||||||
|
}}
|
||||||
|
width={90}
|
||||||
|
/>
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
backgroundColor: dark ? "#1E293B" : "white",
|
||||||
|
borderColor: dark ? "#334155" : "#e5e7eb",
|
||||||
|
borderRadius: "8px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Bar
|
||||||
|
dataKey="value"
|
||||||
|
fill="#1E3A5F"
|
||||||
|
radius={[0, 8, 8, 0]}
|
||||||
|
maxBarSize={40}
|
||||||
|
>
|
||||||
|
{sektorUnggulanData.map((entry, index) => (
|
||||||
|
<Cell key={`cell-${index}`} fill="#1E3A5F" />
|
||||||
|
))}
|
||||||
|
</Bar>
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</Card>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
</Stack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user